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

/******************************************
Author : 퍼스트몰(firstmall)
Author URL : http://firstmall.kr
Creation Date : 2020-10-19
Modify Date : 2020-06-21
File : /event/2020/google2
*******************************************/

body {min-width:360px;}
img {max-width:100%;}
#event_header {position:relative; background:#fff; z-index:5;}
#wrap {position:relative; overflow:hidden; opacity:0;}
.top_btn {display:none !important; background:#4385F5;}
.link {display:inline-block; border-bottom:1px solid #1498dc; color:#1498dc;}
.show_mot {position:relative; opacity:0; top:20px;}
.section {position:relative; padding:100px 0; text-align:center; overflow:hidden;}
.section > .inner, .scrollex > .inner {opacity:0; transition:opacity 0.5s ease;}
.section.active > .inner, .scrollex.active > .inner {opacity:1;}
.section .inner {position:relative; width:1180px; margin:auto; text-align:center;}
.section h3 {margin-bottom:50px; font-size:46px; font-weight:300; color:#363636; letter-spacing:-3px; line-height:1.2;}
.section h3 strong {font-size:62px; font-weight:600;}

/* #section1 */
#section1 {background:#e5e5e5;}
#section1 .google {position:relative; width:1180px; margin:auto;}
#section1 .google .circle {position:relative; width:725px; height:725px; margin:auto; background:#e5bf37;}
#section1 .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);}
}
#section1 .google .circle .bg {position:relative; width:100%; height:100%; background:url('/images/event/20201021/sec1_bg.png') no-repeat center; background-size:100%;}
#section1 .google .pc {position:absolute; bottom:0; left:30px;}
#section1 .google .mo {position:absolute; bottom:0; right:30px;}
#section1 .google .open {position:absolute; top:100px; right:20px;}
#section1 .google2 {display:none; margin:0 -20px;}
#section1 .google2 .open {position:absolute; top:15%; right:0; text-align:right;}
#section1 .google2 .open img {max-width:80%;}
#section1 p {margin-top:50px; font-size:38px; letter-spacing:-2px;}

/* #section2 */
#section2 {background:#f8f8f8;}
#section2 .process {position:relative; width:1110px; margin:auto; text-align:left;}
#section2 .process .step1 {position:relative; top:0; left:0;}
#section2 .process .step2 {position:absolute; top:0; left:50%; margin-left:-12px; z-index:1;}
#section2 .process .step3 {position:absolute; top:0; right:0;}
#section2 .process .step4 {position:absolute; top:0; left:0;}
#section2 .process2 {display:none;}
#section2 ul {width:900px; margin:50px auto 0; text-align:left;}
#section2 li {padding-left:10px; text-indent:-10px; font-size:16px; color:#777; letter-spacing:-1px; line-height:1.8;}

/* #section3 */
#section3 {background:#5c6076;}
#section3 h3 {font-size:40px; color:#fff; line-height:1.4;}
#section3 h3 strong {font-size:52px;}
#section3 .btn {display:inline-block; width:380px; line-height:95px; background:#2f3243; text-align:center; font-size:30px; color:#fff; transition:all 0.3s ease;}
#section3 .btn:hover {background:#4a90e2;}
#section3 .tel {padding-top:30px; font-size:40px; color:#fff; letter-spacing:-1px;}
#section3 .tel + p {font-size:20px; font-weight:300; color:#fff; letter-spacing:-0.5px;}
#section3 .faq {margin-top:60px; border-top:1px solid #7d8091; padding-top:30px; text-align:left;}
#section3 .faq h4 {font-size:28px; font-weight:300; color:#fff; letter-spacing:-1px;}
#section3 .faq dt, #section3 .faq dd {margin:10px 0; border-radius:5px; padding:15px 25px 15px 50px; text-indent:-20px; font-size:18px; color:#2f3243;}
#section3 .faq dt {background:#989cb3 url('/images/event/20201021/sec3_close.png') no-repeat right 30px center; cursor:pointer;}
#section3 .faq dt.active {background:#989cb3 url('/images/event/20201021/sec3_open.png') no-repeat right 30px center;}
#section3 .faq dd {display:none; background:#cdcfdd;} 
#section3 .faq em {font-weight:600; color:#5c6076;}
#section3 .faq .link {margin-left:10px; text-indent:0; border-color:#2240ee; font-size:16px; color:#2240ee;}

/* #section4 */
#section4 {background:#2f3243; padding:0;}
#section4 > div {display:table;}
#section4 > div > div {display:table-cell; vertical-align:middle;}
#section4 > div > div.fl {padding:60px 0; text-align:left;}
#section4 > div > div.fr {text-align:right;}
#section4 .tit {margin:0; font-size:34px; font-weight:100; color:#fff; letter-spacing:-3px; line-height:1.2;}
#section4 .tit em {font-weight:inherit; color:#4285f4;}
#section4 .news {display:inline-block; border-bottom:1px solid #ccc; padding-top:20px; font-size:16px; font-weight:100; color:#fff;}
#section4 .arr1 {position:absolute; margin-top:-12px; right:230px;}
#section4 .arr2 {position:absolute; margin-top:-12px; right:0;}

/* section5 */
#section5 {background:#3a3d4e; padding:30px 20px 0; text-align:center; font-size:13px; color:#86899c; line-height:1.8;}
#event_footer {border-color:transparent; background:#3a3d4e; padding:5px 20px 30px; font-size:13px; color:#86899c; line-height:1.8;}

@media only screen and (max-width:1180px) {	
	.section {padding:80px 20px;}	
	.section .inner {width:100%;}
	.section h3 {font-size:40px; line-height:1.3 !important;}
	.section h3 strong {font-size:52px;}
	#section1 .google {width:100%;}
	#section1 .google .pc {left:10px;}
	#section1 .google .mo {right:10px;}
	#section1 .google .open {top:120px; right:-30px;}
	#section1 .google .open img {max-width:80%;}
	#section4 {padding:0 20px;}	
}
@media only screen and (max-width:1100px) {	
	#section1 .google .pc {left:-30px;}
	#section1 .google .mo {right:-30px;}
}
@media only screen and (max-width:900px) {
	#section1 .google {display:none;}
	#section1 .google2 {display:block;}
	#section2 .process {display:none;}
	#section2 .process2 {display:block;}
	#section2 ul {width:100%;}
}
@media only screen and (max-width:768px) {
	.section {padding:60px 20px !important;}
	.section h3 {font-size:30px !important;}
	.section h3 strong {font-size:42px !important;}
	#section1 .google .circle {margin:auto; overflow:hidden;}
	#section1 .google2 .open {top:15%;}
	#section1 .google2 .open img {max-width:60%;}
	#section1 p {font-size:30px;}
	#section3 .btn {line-height:80px; font-size:28px;}
	#section4 {padding:0 20px !important;}
	#section4 > div > div.fl {width:100%; text-align:center;}
	#section4 > div > div.fr {display:none;}
	#section5 {padding:30px 20px 0 !important;}	
}
@media only screen and (max-width:500px) {
	#section3 .faq dt {padding-right:50px;}
	#section4 .news {border-bottom:none; color:#ccc; text-decoration:underline;}

}
@media only screen and (max-width:430px) {
	.section h3 {font-size:24px !important;}
	.section h3 strong {font-size:32px !important;}
	#section1 .google2 .open img {max-width:40%;}
}
@media only screen and (max-width:380px) {	
	#section3 .btn {width:100%;}
	#section3 .faq dt, #section3 .faq dd {font-size:16px;}
}