@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-02-24
Modify Date : 2021-02-24
File : /event/2021/extendsale
*******************************************/

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, em {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; opacity:0;}
.top_btn {background:#5188e9;}
.section {opacity:1; /*transition:opacity ease;*/}
.section.active {opacity:1;}
.section {position:relative; height:auto; padding:100px 0; text-align:center;}
.section .inner {position:relative; width:1280px; margin:auto; text-align:center;}
.section h3 {margin-bottom:60px; font-size:46px; font-weight:300; color:#222; letter-spacing:-3px; line-height:1.2;}
.section h3 .blue {color:#2179e0;}
.section h3 em {font-style:italic; font-weight:inherit;}
.show_mot {position:relative; opacity:0; top:20px;}
.show_mot2 {position:relative; opacity:0;}

/* #section0 */
#section0 {background:#efd0d6 url('/images/event/20210224/sec0_bg.jpg') center bottom no-repeat; background-size:cover; padding:120px 20px 170px;}
#section0 .txt p {margin-bottom:50px; text-align:center;}
#section0 .img {}

/* #section1 */
#section1 {background:#feeef2;}
#section1 .blue br {display:none;}
#section1 .roboto {font-family:"Roboto", sans-serif; font-size:1.2em;}
#section1 .box {margin-bottom:60px;}
#section1 .box:hover img {/*transform:scale(1.02);*/}
#section1 .cont {display:inline-block; width:890px; padding:12px 30px; background:#f8e3e8;}
#section1 .cont dl {margin:3px; text-align:left;}
#section1 .cont dt {display:inline-block; vertical-align:top; border-radius:50px; background:#272727; padding:3px 20px 5px 20px; font-size:15px; color:#fff; letter-spacing:-2px;}
#section1 .cont dd {display:inline-block; padding-left:10px; font-family:"Roboto", sans-serif; font-size:18px; color:#333; letter-spacing:-1px; line-height:1.8;}

/* #section2 */
#section2 {background:#ebf2fe;}
#section2 .box {margin-bottom:30px;}
#section2 .box:hover img {/*transform:scale(1.02);*/}
#section2 .desc {display:inline-block; font-size:26px; font-weight:300; color:#222; letter-spacing:-2px; line-height:1.2;}
#section2 .desc:before {display:block; content:''; position:absolute; bottom:0; left:0; right:-3px; height:10px; background:#a4c6ff;}
#section2 .desc span {position:relative; font-weight:inherit;}
#section2 .desc br {display:none;}
#section2 .btn {margin-top:40px;}
#section2 .btn a {display:inline-block; width:330px; height:80px; line-height:77px; border-radius:50px; background:#333; font-size:32px; color:#fff; letter-spacing:-2px; transition:all 0.5s ease;}
#section2 .btn a:hover {background:#2179e0; transform:scale(1.02);}
#section2 .gift {position:absolute; bottom:-80px; left:80px; z-index:1; text-align:left;}

/* #section3 */
#section3 {background:#fcd4d4 url('/images/event/20210224/sec3_bg.jpg') center bottom no-repeat; background-size:cover; padding-bottom:183px;}
#section3 .box {position:relative; display:inline-block;}
#section3 .box:hover img {transform:scale(1.02);}
#section3 .gift {position:absolute; bottom:0; right:0; text-align:right;}

/* #section4 */
#section4 {background:#313131; padding:70px 0;}
#section4 .inner {width:800px;}
#section4 h3 {float:left; margin-bottom:10px; padding-top:5px; text-align:left; font-size:28px; font-weight:400; color:#fff; line-height:1.4;}
#section4 .note {padding-left:180px; text-align:left;}
#section4 .note li {padding:8px 0 8px 10px; text-indent:-15px; font-size:20px; font-weight:300; color:#fff; letter-spacing:-2px; line-height:1.4;}

@media only screen and (max-width:1280px) {
	.section .inner {width:100%; padding:0 20px;}
	#section2 .gift {left:0;}
}
@media only screen and (max-width:1245px) {
	#section2 .gift {display:none;}
	#section3 {padding-bottom:100px;}
}
@media only screen and (max-width:890px) {
	#section1 .cont {width:100%; padding:15px;}
	#section1 .cont dl + dl {padding-top:10px;}
	#section1 .cont dd {display:block; padding:5px 0 0 0; line-height:1.4;}
}
@media only screen and (max-width:800px) {
	#section4 .inner {width:100%;}
	#section4 h3 {float:none; padding-top:0;}
	#section4 h3 br {display:none;}
	#section4 .note {padding-left:0;}
}
@media only screen and (max-width:780px) {
	#section1 .blue br {display:block;}
}
@media only screen and (max-width:640px) {
	.section h3 {font-size:40px;}
	#section2 .desc br {display:block;}
}
@media only screen and (max-width:561px) {
	.section h3 {font-size:34px;}
	#section0 {padding-bottom:140px;}
}
@media only screen and (max-width:461px) {
	#section2 .the {display:none;}
}
@media only screen and (max-width:400px) {
	.section, #section3 {padding:70px 0;}
	.section h3 {margin-bottom:40px; font-size:30px;}
	#section0 {padding:80px 20px 100px;}
	#section0 .txt p {margin-bottom:30px;}
	#section1 .box {margin-bottom:40px;}
	#section2 .btn a {width:100%; height:60px; line-height:57px; font-size:26px;}
	#section4 h3 {font-size:24px;}
	#section4 .note li {font-size:18px;}	
}