@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 : 2020-10-07
Modify Date : 2020-10-30
File : /event/2020/salesrise
*******************************************/

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;}
.section.tab .registBtn a em,
.section.benefit .content dd a em,
#section5 .startBtn em,
#section5 .link em {font-family:"dotum", sans-serif; font-size:24px;}
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;}
.section > .inner, .section > .tab_space {opacity:1; transition:opacity 0.5s ease;}
.section.active > .inner, .section.active > .tab_space {opacity:1;}
.section {position:relative; height:auto; padding:80px 0; text-align:center;}
.section .inner {position:relative; width:1180px; /*height:100%;*/ margin:auto; text-align:center;}
.show_mot {position:relative; opacity:0; top:20px;}
.show_mot2 {position:relative; opacity:0;}

/* #section0 */
#section0 {background:#e9f5fe url('/images/event/20201012/sales0_bg.jpg') no-repeat center top; padding:0;}
#section0 .img {position:absolute; top:100px; right:-80px;}
#section0 .txt {padding:160px 0 80px; text-align:left;}
#section0 .txt h3 {padding:20px 0 60px; font-size:68px; font-weight:300; color:#000; letter-spacing:-4px; line-height:1.2;}
#section0 .txt h3 strong {font-size:inherit;}
#section0 .txt h3 + p {font-family:"Roboto", "Spoqa Han Sans", sans-serif; font-size:30px; font-weight:300; color:#000; letter-spacing:0;}

/* .section.tab */
.section.tab {margin-bottom:-140px; padding:0;}
.section.tab .tab_space {display:block; position:relative; margin:auto; text-align:center; z-index:1;}
.section.tab .tab_layer {position:relative;}
.section.tab .tab_layer ul {/*height:100%;*/ margin:0 auto;}
.section.tab .tab_layer li {position:relative; display:inline-block;} 
.section.tab .tab_layer li .tab {display:block; position:relative; margin:0 -35px; text-align:center;}
.section.tab .tab_layer_flying {position:fixed; top:0; width:1180px; z-index:999; padding:0;}

/* #section1 ~ #section3 */
#section1 {background:#3d9ee6;}
#section1-1 {background:#b7dffc;}
#section1-2 {background:#fafafa;}
#section2 {background:#618ef5;}
#section2-1 {background:#fafafa;}
#section3 {background:#8b8bf1;}
#section3-1 {background:#fafafa;}
.section .mt80 {margin-top:80px;}
.section .step {display:inline-block; width:150px; line-height:50px; border-radius:50px; font-size:30px; font-weight:100; color:#fff;}
#section1 .step {background:#0e5c97;}
#section2 .step {background:#2f54a9;}
#section3 .step {background:#4343a2;}
#section1 .step {margin-top:90px;} 
#section1-1 h3 {margin-top:70px}
#section2-1 h3 {margin-top:150px}
#section3-1 .content {margin-top:90px}
.section h3 {padding:20px 0 50px; font-size:45px; font-weight:200; color:#000; letter-spacing:-3px; line-height:1.3;}
.section h3 strong {font-size:55px;}
#section1 h3, #section2 h3, #section3 h3 {color:#fff;}
.section .box {margin-bottom:-170px; border-radius:10px; background:#fff; padding:50px; z-index:1;}
#section1 .box {box-shadow:0 20px 30px rgba(34,134,215,0.1);}
#section3 .box {box-shadow:0 20px 30px rgba(130,130,240,0.1);}
.section .txt {padding:30px 0 40px; font-size:25px; font-weight:300; color:#000; letter-spacing:-2px; line-height:1.2;}
.section .desc {font-size:20px; font-weight:300; color:#848484; letter-spacing:-2px; line-height:1.2;}
.section .img .bubble1 {text-align:left; margin:0 0 -80px -40px;}
.section .img .bubble2 {text-align:right; margin:0 -40px -80px 0;}
.section .img .bubble3 {text-align:left; margin:0 0 -60px -40px;}
.section.benefit .img {margin:70px auto;}
.section.benefit .content {text-align:left;}
.section.benefit .content dl {margin:10px 0;}
.section.benefit .content dt {position:relative; display:inline-block; vertical-align:top; padding:0 15px 0 10px; font-size:25px; color:#113f7f; letter-spacing:-2px;}
.section.benefit .content dt:before {display:block; content:'ㆍ'; position:absolute; left:-20px; font-size:1.5em; line-height:0.9; }
.section.benefit .content dd {display:inline-block; font-size:25px; font-weight:300; color:#000; letter-spacing:-2px;}
.section.benefit .content dd img {margin:30px 0;}
.section.benefit .content .registBtn + dl {margin-top:50px;}
.section .registBtn {text-align:center;}
.section .registBtn a {display:inline-block; width:360px; line-height:70px; border-radius:50px; background:#000; font-size:25px; font-weight:300; color:#fff; letter-spacing:-2px; transition:all 0.5s ease;}
#section1-2 .registBtn a:hover {background:#318be1;}
#section2-1 .content {margin-top:80px; border-top:1px solid #b5b5b5;}
#section2-1 .content p {padding:50px 0; font-size:35px; letter-spacing:-2px; line-height:1.4;}
#section2-1 .registBtn a:hover {background:#618ef5;}
#section3 .registBtn a {background:#8282f0;}
#section3 .registBtn a:hover {background:#000;}
#section3-1 .registBtn a:hover {background:#8b8bf1;}

/* #section4 */
#section4 {background:#2f3243;}
#section4 .inner {text-align:left;}
#section4 h3 {float:left; padding:0; font-size:25px; font-weight:300; color:#fff; line-height:1.0;}
#section4 .note {padding-left:200px; text-align:left;}
#section4 .note ul + ul {padding-top:30px;}
#section4 .note li {padding-left:10px; text-indent:-15px; font-size:16px; font-weight:200; color:#fff; line-height:1.8;}
#section4 .note li em {display:inline-block; margin:0 0 15px 5px; border:1px solid #fff; border-radius:50px; padding:0 20px; text-indent:0;}

@media only screen and (max-width:1210px) {
	.section.tab .tab_layer li {float:left; width:33.33%;}
}
@media only screen and (max-width:1180px) {
	.section .inner {width:100%; padding:0 20px;}
	.section.tab .tab_space,
	.section.tab .tab_layer_flying {width:100%; padding:0 20px;}
}
@media only screen and (max-width:900px) {
	#section4 .note {padding-left:120px;}
	.section.benefit .content {width:100%;}
	.section.benefit .content dd {display:block; padding:10px 0;}
}
@media only screen and (max-width:768px) {
	#section0 h3 {padding-top:10px; font-size:50px !important;}
	#section1 .step {margin-top:60px;} 
	#section2-1 .content p {font-size:25px !important;}
	#section4 h3 {float:none; padding:0 0 30px 0; font-size:25px !important;}
	#section4 .note {padding-left:0;}
	.section.tab .tab_layer li .tab {margin:-20px;}	
	.section {padding:80px 0;}
	.section .step {width:120px; line-height:40px; font-size:24px;}
	.section .box {margin-bottom:-150px;}	
	.section h3 {font-size:38px !important; letter-spacing:-2px !important;}
	.section h3 strong {font-size:40px !important;}
	.section .img .bubble1 {margin:-20px -20px -20px -20px;}
	.section .img .bubble2 {margin:0 -20px -20px -20px;}
	.section .img .bubble3 {margin:0 -20px -20px -20px;}
	.section.benefit .img {margin:40px auto;}
	.section.benefit .content dt,
	.section.benefit .content dd a {font-size:20px;} 
	.section.benefit .content dd {font-size:22px;}
	.section.benefit .content dd a em {font-size:20px; font-weight:600;}
}
@media only screen and (max-width:500px) {
	#section0 {height:600px; padding-top:0;}
	#section0 .img {top:300px; right:auto;}
	#section0 .txt {padding:60px 0;}
	#section0 .txt br {display:block;}
	#section0 .txt h3 {padding:20px 0 30px; font-size:40px !important;}
	#section0 .txt h3 + p {font-size:24px;}
	#section2-1 .content {margin-top:50px;}
	#section2-1 .content p {padding:40px 0; font-size:22px !important;}
	.section.tab {margin-top:-50px;}
	.section {padding:60px 0;}	
	.section h3 {font-size:34px !important;}
	.section h3 strong {font-size:36px !important;}
	.section .box {padding:30px;}
	.section .txt {font-size:20px;}
	.section .txt br {display:none;}
	.section.benefit h3 + p {font-size:24px;}
	.section.benefit h3 + p br {display:none;}
	.section.benefit .content dt {margin-left:-5px; padding-left:5px;}
	.section.benefit .content dd img {margin:10px 0;}
	.section .registBtn a {line-height:60px; font-size:20px;}
}
@media only screen and (max-width:400px) {
	.section .registBtn a {width:100%;}
}
@media only screen and (max-width:375px) {
	#section0 .txt h3 {font-size:38px !important;}	
	.section .box {padding:30px 20px;}
	.section.benefit .content dt,
	.section.benefit .content dd a {font-size:16px;} 
	.section.benefit .content dt:before {left:-15px; line-height:1.0;}
	.section.benefit .content dd {padding:5px 0; font-size:18px;}	
}

/* #section2 */
#section2 .google {position:relative; width:1180px; margin:auto; margin-bottom:-250px; z-index:1;}
#section2 .google .circle {position:relative; width:725px; height:725px; margin:auto; background:#e5bf37;}
#section2 .google .circle .motion {position:absolute; top:0; left:0; right:0; width:100%; height:100%; background:url('/images/event/20201021/sec1_motion.png') no-repeat center; background-size:100%; border-radius:100%; text-indent:-9999px; animation:mo-rotate 4s ease 0.5s infinite;}
@keyframes mo-rotate{
	0% {transform:rotate(0deg);}
	100% {transform:rotate(360deg);}
}
#section2 .google .circle .bg {position:relative; width:100%; height:100%; background:url('/images/event/20201012/sec1_bg.png') no-repeat center; background-size:100%;}
#section2 .google .pc {position:absolute; bottom:0; left:30px;}
#section2 .google .mo {position:absolute; bottom:0; right:30px;}
#section2 .google .open {position:absolute; top:100px; right:20px;}
#section2 .google2 {display:none; margin:0 -20px; margin-bottom:-250px; z-index:1;}
#section2 .google2 .open {position:absolute; top:15%; right:0; text-align:right;}
#section2 .google2 .open img {max-width:80%;}
#section2-1 {background:#f8f8f8;}
#section2-1 .process {position:relative; width:1110px; margin:auto; text-align:left;}
#section2-1 .process .step1 {position:relative; top:0; left:0;}
#section2-1 .process .step2 {position:absolute; top:0; left:50%; margin-left:-12px; z-index:1;}
#section2-1 .process .step3 {position:absolute; top:0; right:0;}
#section2-1 .process .step4 {position:absolute; top:0; left:0;}
#section2-1 .process2 {display:none;}
@media only screen and (max-width:1180px) {	
	#section2 .google {width:100%;}
	#section2 .google .pc {left:10px;}
	#section2 .google .mo {right:10px;}
	#section2 .google .open {top:120px; right:-30px;}
	#section2 .google .open img {max-width:80%;}
}
@media only screen and (max-width:1100px) {	
	#section2 .google .pc {left:-30px;}
	#section2 .google .mo {right:-30px;}
}
@media only screen and (max-width:900px) {
	#section2 .google {display:none;}
	#section2 .google2 {display:block;}
	#section2-1 .process {display:none;}
	#section2-1 .process2 {display:block;}
}
@media only screen and (max-width:768px) {
	#section2 .google .circle {margin:auto; overflow:hidden;}
	#section2 .google2 .open {top:15%;}
	#section2 .google2 .open img {max-width:60%;}
}
@media only screen and (max-width:430px) {
	#section2 .google2 .open img {max-width:40%;}
}