@charset "utf-8";
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');

/******************************************
Author : 퍼스트몰(firstmall)
Author URL : http://firstmall.kr
Creation Date : 2020-08-24
Modify Date : 2020-08-24
File : /event/2020/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 {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:#5188e9;}
.section > .inner, .scrollex > .inner {opacity:1; transition:opacity 0.5s ease;}
.section.active > .inner, .scrollex.active > .inner {opacity:1;}
.section {position:relative; height:auto; padding:100px 0 80px; text-align:center;}
.section .inner {position:relative; width:1200px; margin:auto; text-align:center;}
.section h3 {margin-bottom:40px; font-size:50px; font-weight:300; color:#333; letter-spacing:-3px; line-height:1.2;}
.show_mot {position:relative; opacity:0; top:20px;}
.show_mot2 {position:relative; opacity:0;}

/* #section1 */
#section1 {height:489px; background:url('/images/event/20200824/extend1_bg.jpg') center no-repeat; background-size:cover; padding:60px 20px 0; overflow:hidden;}
#section1 .txt {position:absolute; top:0; left:0;}
#section1 .txt p {margin:25px 0; text-align:left;}
#section1 .img {position:absolute; top:0; right:0; margin:0 -150px -80px 0;}

/* #section2 */
#section2 {background:#fff7e4;}
#section2 .box {position:relative; display:inline-block; margin:0;}
#section2 .step {position:absolute; top:0; left:50%; margin:-48px 0 0 -68px;}
#section2 .btn {margin-top:40px;}
#section2 .btn:hover img {transform:scale(1.02);}

/* #section3 */
#section3 {background:#f2e4c3;}
#section3 .box {position:relative; display:inline-block; margin:8px;}
#section3 .box:hover img {transform:scale(1.02);}

/* #section4 */
#section4 {background:url('/images/event/20200824/extend4_bg.jpg') no-repeat center; background-size:cover;}
#section4 h3 {font-size:38px; font-weight:300; color:#fff; letter-spacing:-2px; line-height:1.4;}
#section4 .note {width:620px; margin:auto; text-align:left;}
#section4 .note ul {border-top:1px dotted #a4aec0; border-bottom:1px dotted #a4aec0; padding:20px 0;}
#section4 .note li {padding-left:15px; text-indent:-10px; font-size:15px; font-weight:100; color:#d2e0f8;}
#section4 .note li em {display:inline-block; margin-bottom:7px; border:1px solid #a4aec0; border-radius:50px; padding:0 15px; text-indent:0;}
#section4 .note p {padding-top:30px; font-weight:100; font-size:14px; color:#a4aec0;}
#section4 .link {border-bottom:1px solid #a4aec0; color:#a4aec0;}
#section4 .link em {font-family:"dotum", sans-serif;}
@media only screen and (max-width:1200px) {
	.section .inner {width:100%; padding:0 20px;}
}
@media only screen and (max-width:1199px) {
	#section2 .box {width:49%;}
}
@media only screen and (max-width:960px) {
	#section1 .img {margin-right:-300px;}
	#section2 .box {width:auto; margin-left:0; margin-right:0;}
	#section2 .box + .box {margin-top:50px;}	
}
@media only screen and (max-width:768px) {
	.section .inner {padding:0 20px;}
	.section h3 {font-size:34px !important;}
	#section1 .img {margin-right:-350px;}
	#section3 .box {width:auto; margin-left:0; margin-right:0;}	
}
@media only screen and (max-width:640px) {
	#section1 .img {margin-right:-450px;}
}
@media only screen and (max-width:620px) {
	#section4 .note {width:100%;}
}
@media only screen and (max-width:500px) {
	.section {padding:80px 0 60px;}
	.section h3 {font-size:30px !important;}
	#section1 .img {display:none;}
	#section4 h3 br {display:none;}
}
@media only screen and (max-width:375px) {
	#section2 .step {width:100px; margin:-40px 0 0 -50px;}
}