@charset "utf-8";
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('//fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');


/******************************************
Author : 퍼스트몰(firstmall)
Author URL : http://firstmall.kr
Creation Date : 2021-06-14
Modify Date : 2021-06-16
File : /event/2021/saleplus
*******************************************/

/* 공통 */
body, div, dl, dt, li, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, button {font-family:"Noto Sans KR", sans-serif;}
body {min-width:360px;}
img {max-width:100%;}
#event_header {position:relative; background:#fff; z-index:5;}
#event_footer {border-color:#f0f0f0;}
#wrap {position:relative; overflow:hidden; background:#fff; opacity:0;}
.top_btn {background:#2989e1;}
.show_mot {position:relative; opacity:0; top:20px;}
.section {position:relative; height:auto; padding:110px 0 120px; text-align:center;}
.section .inner {position:relative; width:1180px; /*height:100%;*/ margin:auto; text-align:center;}
.section > .inner {opacity:0;}
.section.active > .inner {opacity:1;}
.section hgroup {position:relative; margin-bottom:80px;}
.section hgroup > h3 {display:inline-block; font-size:50px; font-weight:600; color:#333; letter-spacing:-3px; line-height:1.2;}
.section hgroup > p {margin-top:10px; font-size:30px; font-weight:400; color:#333; letter-spacing:-1px; line-height:1.2;}
.section hgroup > h3 > br,
.section hgroup > p > br {display:none;}
.section .icon {display:inline-block; vertical-align:middle; width:32px; height:35px; margin:0 0 10px 5px; background:url('/images/event/20210616/sec2_icon.png') no-repeat; background-size:cover !important; cursor:pointer;}
.section .img {margin:auto;}
.section .img img {transition:all ease 0.5s;}
.section .img img:hover {/*transform:scale(1.03);*/}

/* 뷰레이어 */
.view_bg {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); z-index:2;}
.view_layer {letter-spacing:0px; display:none; position:fixed; top:50%; left:50%; margin:-170px 0 0 -350px; width:700px; box-shadow:0 0 10px rgba(0,0,0,0.05); border-radius:10px; border:1px solid #aaa; background:#fff; padding:25px 30px; text-align:left; z-index:3;}
.view_layer h5 {margin-bottom:15px; border-bottom:1px solid #c7c7cb; padding-bottom:10px; font-size:20px; font-weight:600; color:#1a2e51;}
.view_layer li em {color:#fff;}
.view_layer .close {position:absolute; top:30px; right:30px; width:20px; height:20px; background:url('/images/event/20210104/layer_close.png') no-repeat center; cursor:pointer;}
.view_layer dl {display:inline-block; font-size:16px; line-height:1.8;}
.view_layer dl dt, .view_layer dl dd {display:inline-block; float:left;}
.view_layer dl dt {position:relative; width:90px; font-weight:500;}
.view_layer dl dd {width:calc(100% - 90px); color:#666;}
.view_layer dl a.link {color:#13759c; text-decoration:underline;}
.view_layer dl a.link em {font-family:'Dotum', sans-serif; font-weight:600;}
.view_layer p {padding-left:20px; text-indent:-20px; font-size:16px; color:#888; line-height:1.4;}

/* section0 */
#section0 {background:#d4ebfb url('/images/event/20210616/sec0_bg.jpg') no-repeat center; background-size:contain;}
#section0 .txt {text-align:center;}
#section0 .txt .stxt {margin:auto;}
#section0 .txt .stit {margin:-50px auto -30px;}
#section0 .txt .date {margin:auto; padding:0 0 70px;}

/* section1 */
#section1 {background:#253069; padding-bottom:0 !important;}
#section1 hgroup > h3 {color:#fff;}
#section1 hgroup > p {color:#878fb9;}
#section1 .icon {background:url('/images/event/20210616/sec1_icon.png') no-repeat; background-size:cover;}

/* section2 */
#section2 {background:#68f4d5; padding-bottom:0 !important;}
#section2 hgroup > h3 {color:#253069;}
#section2 hgroup > p {color:#3d7e8e;}

/* section3 */
#section3 {background:#f8f8f8 url('/images/event/20210616/sec3_bg.jpg') no-repeat center bottom; background-size:contain; padding-bottom:90px;}
#section3 hgroup > h3 {color:#253069;}
#section3 hgroup > p {color:#7c809c;}

/* section4 */
#section4 {background:#ffd1f1;}
#section4 hgroup > h3 {color:#253069;}
#section4 hgroup > p {color:#7f6f99;}
#section4 .swiper-wrapper {height:360px; transition-timing-function:linear;}

/* section5 */
#section5 {background:#3c56e8;}
#section5 hgroup, #section5 .inner ul {/*width:1180px;*/ margin:auto;}
#section5 hgroup:before {display:block; content:''; position:absolute; top:30px; left:40px; right:40px; height:2px; background:#fff;}
#section5 hgroup > h3 {background:#3c56e8; padding:0 30px; color:#fff;}
#section5 hgroup > p {color:#fff;}
#section5 .x2 > li {width:50%;}
#section5 .x2 > li.prem {float:left;}
#section5 .x2 > li.expa {float:right;}
#section5 .x2 > li > h4 {margin-top:60px; margin-right:20px; font-size:30px; font-weight:600; color:#fff;}
#section5 .x2 > li > p {margin-bottom:50px; margin-right:20px; font-size:24px; font-weight:400; color:#c3dcff;}
#section5 .x2 > li.expa > h4 {margin-right:0; margin-left:20px;}
#section5 .x2 > li.expa > p {margin-right:0; margin-left:20px; color:#c3faff;}
#section5 .prod {display:inline-block; width:280px; border-radius:20px; overflow:hidden; transition:all ease 0.5s;}
#section5 .prod:hover {transform:translateY(-10px); box-shadow:1px 10px 0 rgba(0,0,0, 0.2);}
#section5 .prem .prod {margin-left:-20px;}
#section5 .prem .prod + .prod {margin-left:10px;}
#section5 .expa .prod {margin-right:10px;}
#section5 .expa .prod + .prod {margin-right:-20px;}
#section5 .prod h5 {height:56px; line-height:54px; background:#c3dcff; font-size:24px; font-weight:400; color:#000;}
#section5 .expa .prod h5 {background:#c3faff;}
#section5 .prod .box {background:#fff; padding:50px 0 30px;}
#section5 .prod .sale {display:inline-block; width:48px; height:48px; line-height:48px; border-radius:50px; background:#d40023; font-family:'Roboto', sans-serif; font-size:20px; color:#fff;}
#section5 .prod .sale em {font-size:20px;}
#section5 .prod .before {position:relative; display:inline-block; margin-left:10px; margin-right:20px; font-size:18px; font-weight:300; color:#777; white-space:nowrap;}
#section5 .prod .before em {font-family:'Roboto', sans-serif; font-size:24px; font-weight:300;}
#section5 .prod .before:before {display:block; content:''; position:absolute; top:50%; right:-20px; width:127%; height:22px; background:url('/images/event/20210616/sec5_line.png') no-repeat right center; opacity:0.8;}
#section5 .expa .prod .before:before {width:117%;}
#section5 .prod .price {font-size:22px; font-weight:400; color:#000; white-space:nowrap;}
#section5 .prod .price em {font-family:'Roboto', sans-serif; font-size:43px; font-weight:500;}
#section5 .prod .price span {font-size:16px;}
#section5 .prod .regBtn {display:inline-block; margin-top:30px; font-size:30px; font-weight:600; color:#3c56e8; letter-spacing:-1px; transition:all 0.5s ease;}
#section5 .prod .regBtn em {display:inline-block; vertical-align:middle; margin:0 0 5px 5px; width:13px; height:22px; background:url('/images/event/20210616/sec5_arr.png') no-repeat center; text-indent:-9999px; font-family:'Dotum', sans-serif; font-size:25px; font-weight:900;}
#section5 .expa .prod .regBtn em {background:url('/images/event/20210616/sec5_arr2.png') no-repeat center;}
#section5 .expa .prod .regBtn {color:#00b98b;}

/* #section6 */
#section6 {background:#fff; padding:90px 0 50px;}
#section6 h3 {font-size:40px; font-weight:400; color:#101010; letter-spacing:-2px; line-height:1.3;}
#section6 p {font-size:20px; font-weight:400; color:#666; letter-spacing:-0.5px; line-height:1.4;}
#section6 p > strong {color:#010101;}
#section6 p > span {display:inline-block; vertical-align:middle; margin-bottom:0.5em; font-size:0.8em; color:#999;}
#section6 p > span.slash {margin-bottom:0.3em; font-size:0.8em;}
#section6 p > span.end {display:none; margin-bottom:0.3em; font-size:0.8em;}
#section6 .startBtn {display:inline-block; margin:40px auto 90px; background:#3c56e8; padding:12px 120px; font-size:30px; font-weight:600; color:#fff; letter-spacing:-1px; transition:all 0.5s ease;}
#section6 .startBtn:hover {border-color:transparent; background:#226ee1;}
#section6 .startBtn em {display:inline-block; vertical-align:middle; margin:0 0 5px 5px; width:13px; height:22px; background:url('/images/event/20210616/sec6_arr.png') no-repeat center; text-indent:-9999px; font-family:'Dotum', sans-serif; font-size:25px; font-weight:900;}
#section6 .link {border-bottom:1px solid #3c56e8; color:#3c56e8;}
#section6 .link em {font-family:'Dotum', sans-serif; font-weight:700;}

/* #section7 */
#section7 {padding:90px 40px 0;}
#section7 .bnr {height:296px; margin-top:10px; overflow:hidden;}
#section7 .bnr dl {display:table; width:1280px; height:100%; margin:auto; padding:0 50px;}
#section7 .bnr dt {display:table-cell; text-align:left; vertical-align:middle;}
#section7 .bnr h3 {font-size:36px; font-weight:600; color:#000; letter-spacing:-2px; line-height:1.2;}
#section7 .bnr p {padding-top:5px; font-size:20px; font-weight:400; color:#000; letter-spacing:-1px; line-height:1.4;}
#section7 .bnr ul {padding-top:20px;}
#section7 .bnr li {padding-left:10px; text-indent:-10px; font-size:18px; color:#666; letter-spacing:-1px; line-height:1.4;}
#section7 .bnr dd {display:table-cell; text-align:right; vertical-align:middle;}
#section7 .google {background:#ebebeb;}	
#section7 .google .icon {width:18px; height:18px; margin-bottom:3px; background:url('/images/event/20210616/sec7_icon.png') no-repeat;}
#section7 .google dd img {margin-right:-15px;}
#section7 .openmarket {background:#c9ebff;}	
#section7 .openmarket .icon {width:26px; height:26px; background:url('/images/event/20210616/sec7_icon2.png') no-repeat;}
#section7 .openmarket dd img {margin-right:-60px;}

@media only screen and (max-width:1280px) {
	#section7 {padding-left:20px; padding-right:20px;}
	#section7 .bnr dl {position:relative; z-index:1; width:100%;}
	#section7 .bnr dl:after {display:block; content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-size:100%; opacity:1;
    filter:alpha(opacity=50); z-index:-1;}
	#section7 .google dl:after {background:url('/images/event/20210616/sec7_img.png') no-repeat right center;}
	#section7 .openmarket dl:after {background:url('/images/event/20210616/sec7_img2_1.png') no-repeat calc(100% + 60px) center;}
	#section7 .bnr dd {display:none;}	
}
@media only screen and (max-width:1180px) {
	hgroup, #section5 hgroup, 
	.section .inner {width:100%; padding:0 20px;}
	#section5 hgroup:before {left:20px; right:20px;}
	#section5 .inner ul {width:100%;}
	#section5 .x2 > li {width:100%;}
	#section5 .x2 > li > h4,
	#section5 .x2 > li > p {margin-right:0;}
	#section5 .x2 > li.expa > h4,
	#section5 .x2 > li.expa > p {margin-left:0;}
	#section5 .prem .prod {margin-left:0;}	
	#section5 .expa .prod + .prod {margin-right:0;}
}
@media only screen and (max-width:960px) {
	.section {padding:80px 0;}
	.section hgroup {margin-bottom:50px;}	
	.section hgroup > h3, #section6 h3 {font-size:38px;}
	.section hgroup > p {font-size:24px;}
	.section .img {max-width:80%;}
	#section0 .txt .stxt {max-width:80%;}
	#section0 .txt .stit {max-width:90%;}
	#section0 .txt .date {max-width:50%;}
	#section3 {padding-bottom:70px;}
	#section5 hgroup:before {top:25px;}
	#section7 .bnr {height:500px;}
	#section7 .bnr dt {display:block; padding-top:50px;}
	#section7 .google dl:after {background-position:center calc(100% - 50px);}
	#section7 .openmarket dl:after {background-position:center calc(100% + 80px);}
}
@media only screen and (max-width:700px) {
	.view_layer {width:auto; left:10px; right:10px; margin-left:0; padding:15px 20px;}
	.view_layer .close {top:20px; right:20px;}
}
@media only screen and (max-width:640px) {
	#section0 .txt .stit {margin:-25px auto -20px;}
	#section6 h3 {font-size:34px;}
	#section6 p {font-size:18px;}
	#section7 .google dl, 
	#section7 .openmarket dl {background-position:center;}
	#section7 .bnr h3 {font-size:28px;}
	#section7 .bnr p {font-size:18px;}
	#section7 .bnr li {font-size:16px;}
}
@media only screen and (max-width:612px) {
	#section5 .prem .prod,
	#section5 .prem .prod + .prod,
	#section5 .expa .prod,
	#section5 .expa .prod + .prod {margin-left:5px; margin-right:5px;}
}
@media only screen and (max-width:500px) {
	.section hgroup > h3 > br,
	.section hgroup > p > br {display:block;}
	#section5 hgroup:before {display:none;}
	#section5 hgroup > h3 {padding:0 15px;}
	#section5 .prod {width:80%;}
	#section5 .prem .prod,
	#section5 .prem .prod + .prod,
	#section5 .expa .prod,
	#section5 .expa .prod + .prod {margin-left:0; margin-right:0;}
	#section5 .prem .prod + .prod,
	#section5 .expa .prod + .prod {margin-top:15px;}	
	#section7 .bnr dl:after {background-size:contain;}
	#section7 .bnr p br {display:none;}	
	#section7 .openmarket {height:420px;}
	#section7 .google dl:after {background-position:center calc(100% - 30px);}
	#section7 .openmarket dl:after {background-position:center calc(100% + 50px);}
	#section7 .google .icon {width:16px; height:16px;}
	#section7 .openmarket .icon {width:20px; height:20px; margin-bottom:5px;}
}
@media only screen and (max-width:375px) {
	.section {padding:60px 0;}	
	.section hgroup > h3, 
	#section6 h3,	
	#section5 .prod .regBtn, 
	#section6 .startBtn {font-size:28px;}
	.section hgroup > p {font-size:20px;}
	.section .icon, #section1 .icon {width:24px; height:26px; margin:0 0 5px 5px;}
	.section .img {max-width:100%;}
	#section0 .txt .stit {max-width:100%; margin:-15px auto -10px;}
	#section0 .txt .date {padding-bottom:30px;}
	#section3 {padding-bottom:50px;}
	#section5 hgroup:before {top:20px;}
	#section5 .x2 > li > h4 {margin-top:40px;}
	#section5 .x2 > li > p {margin-bottom:30px; font-size:20px;}
	#section5 .prod {width:100%;}
	#section5 .prod .box {padding-top:30px;}
	#section5 .prod .regBtn {margin-top:20px;}
	#section6 {padding:60px 0 40px;}
	#section6 .startBtn {width:100%; margin-bottom:40px; padding-left:0; padding-right:0;}
	#section6 p {font-size:16px;}
	#section6 p br {display:none;}
	#section6 p > span.end {display:inline-block;}
	#section7 {padding-top:60px;}
	#section7 .bnr h3 {font-size:24px;}
	#section7 .bnr p {font-size:16px;}
	#section7 .bnr li {font-size:14px;}
	#section7 .bnr dl {padding:0 30px;}	
	#section7 .google {height:420px;}
	#section7 .openmarket {height:350px;}
	#section7 .openmarket dl:after {background-position:center calc(100% + 30px);}
	#layer1 {margin-top:-220px;}
}