@charset "utf-8";

/******************************************
Author : 퍼스트몰(firstmall)
Author URL : http://firstmall.kr
Creation Date : 2019-02-18
Modify Date : 2019-02-19
File : /event/2019/responskin
*******************************************/

/* common */
#wrap {display:block; width:100%; font-size:24px; font-weight:200; color:#767676; line-height:1.3; letter-spacing:-1px;}
#section0 {background:#ecf1f6;}
#section1 {background:#ebebeb;}
#section3, #section5 {background:#fafafa;}
#section2, #section4, #section6 {background:#fff;}
.section {position:relative; text-align:center;}
.section > .sub_wrap, .scrollex > .sub_wrap {opacity:0; transition:opacity 0.5s ease;}
.section.active > .sub_wrap, .scrollex.active > .sub_wrap {opacity:1;}
.section .inner {position:relative; width:1080px; margin:0 auto; padding:100px 0;}
.section h3 {margin-bottom:60px; font-size:52px; font-weight:100; color:#111; letter-spacing:-2px; line-height:1.2;}
.section h3 strong {font-family:"Noto Sans KR", "Malgun Gothic", sans-serif; font-weight:700;}
.section h3 .tit {font-weight:inherit;}
.section h3 .txt {margin-top:30px; font-size:19px; font-weight:300; color:#111; letter-spacing:-1px; line-height:1.6;}
.section .bx-wrapper {margin-bottom:0; background:transparent;}
.section .bx-controls-direction {display:none;}
.section .bx-wrapper .bx-pager.bx-default-pager a {width:30px; height:7px; margin:0 2px; background:#aaa; transition:all 0.5s;}
.section .bx-wrapper .bx-pager.bx-default-pager a.active {width:60px; background:#333;}

/* section0 */
#section0 h3 {font-size:56px;}
#section0 h3 strong {font-size:60px;}
#section0 .txt {padding-top:40px; font-size:20px; font-weight:300; color:#222; line-height:1.6;}
#section0 .img {position:relative; height:418px; transition:opacity 0.75s ease; opacity:0;}
#section0 .img img {width:395px; height:418px;}
#section0.active .img {opacity:1; /*animation:secBox 2s ease;*/}
@keyframes secBox {
	0% {opacity:0; transform:translateX(-500px);}
	50% {opacity:0; transform:translateX(-300px);}
	100% {opacity:1; transform:translateX(0px);}
}
#section0.active .img01 {position:absolute; top:0; left:50%; margin-left:-455px; animation:sec_img01 0.9s ease;}
@keyframes sec_img01 {
	0% {opacity:0; transform:translateX(-500px);}
	50% {opacity:0; transform:translateX(-300px);}
	100% {opacity:1; transform:translateX(0);}
}
#section0.active .img02 {position:absolute; top:0; left:50%; margin-left:-145px; animation:sec_img02 1.2s ease;}
@keyframes sec_img02 {
	0% {opacity:0; transform:translateX(-500px);}
	50% {opacity:0; transform:translateX(-300px);}
	100% {opacity:1; transform:translateX(0);}
}
#section0.active .img03 {position:absolute; bottom:0; left:50%; margin-left:255px; animation:sec_img03 1.7s ease;}
@keyframes sec_img03 {
	0% {opacity:0; transform:translateX(-500px);}
	50% {opacity:0; transform:translateX(-300px);}
	100% {opacity:1; transform:translateX(0);}
}
#section0 .img_mo {display:none;}
/* scene */
#scene {width:395px; height:418px; border:0px solid #CCC; margin:0 auto; perspective:600px; animation:secBox 1s ease;}
#scene img {width:395px; height:418px;}
.card {position:relative; width:100%; height:100%; cursor:pointer; transform-style:preserve-3d; transform-origin:center right; transition:transform 1s;}
.card.is-flipped {transform:translateX(-100%) rotateY(-180deg);}
.card_face {position:absolute; width:100%; height:100%; line-height:260px; color:white; text-align:center; font-weight:bold; font-size:40px; backface-visibility:hidden;}
.card_face_front {background:; margin-left:80px;}
.card_face_back {background:; transform:rotateY(180deg);}
@keyframes secBox {
	0% {opacity:0; transform:translateX(-500px);}
	50% {opacity:0; transform:translateX(-300px);}
	100% {opacity:1; transform:translateX(0px);}
}
/* responsive */
#responsive {width:100%; margin:auto;}
#responsive iframe {border-radius:20px; border:10px solid #333; background:#fff;}
#responsive li {display:inline-block; width:60px; font-size:12px;}
#responsive li a {display:block; height:60px; border-bottom:3px solid transparent; padding-top:35px; text-align:center;}
#responsive li a.active {border-color:#ff3b3b; font-weight:500; color:#ff3b3b;}
#responsive li a.mobile {background:url('/images/event/20190220/img_res_mobile.png') no-repeat center top;}
#responsive li a.tablet {background:url('/images/event/20190220/img_res_tablet.png') no-repeat center top;}
#responsive li a.desktop1 {background:url('/images/event/20190220/img_res_desktop1.png') no-repeat center top;}
#responsive li a.desktop2 {background:url('/images/event/20190220/img_res_desktop2.png') no-repeat center top;}
#responsive li a.desktop3 {background:url('/images/event/20190220/img_res_desktop3.png') no-repeat center top;}

/* section1 */
#section1 .secBox {margin:-30px auto 50px; border-bottom:1px solid #ddd;}
#section1 .secBox2 {width:100%; margin:0 auto;}
#section1 .secBox2 li {float:left; width:25%;}
#section1 .secBox2 li .stit {margin-bottom:10px; font-size:19px; font-weight:600; color:#222;}
#section1 .secBox2 li .stxt {font-size:15px; color:#111; line-height:1.4;}

/* section2 */
#section2 .inner {width:1200px; padding-bottom:70px;}
#section2 .secBox {position:relative;}
#section2 .bx-pager {margin:0 auto 50px;}
#section2 .bx-pager > a {display:inline-block; margin:0 5px; line-height:50px; border-bottom:3px solid transparent; padding:0 5px; font-size:20px; font-weight:300; color:#afaaaa; cursor:pointer;}
#section2 .bx-pager > a.active {border-color:#333; font-weight:600; color:#333;}
#section2 .bxflame_pc {position:relative; left:50%; margin-left:-45%; width:1059px; height:581px;}
#section2 .bxflame_pc .bx-wrapper {width:767px; height:503px; margin:auto; overflow:hidden; border-top-left-radius:25px; border-top-right-radius:25px;}
#section2 .bxflame_pc .bxflame {position:absolute; top:-4px; left:-1px;}
/*#section2 .bxflame_pc img {width:100%;}*/
#section2 .bxflame_mo {position:absolute; bottom:10px; right:50%; margin-right:-41%; width:236px; height:471px;}
#section2 .bxflame_mo .bx-wrapper {width:213px; height:461px; margin:auto; overflow:hidden; border-radius:25px;}
#section2 .bxflame_mo .bxflame {position:absolute; top:-5px; left:1px;}
/*#section2 .bxflame_mo img {width:100%;}*/

/* section3 */
#section3 .inner {width:1195px;}
#section3 .secBox {width:100%; margin:0 auto;}
#section3 .secBox li {position:relative; float:left; width:23%; margin:1%; box-shadow:0 15px 50px rgba(0,0,0,0.2); transition:all 0.5s;}
#section3 .secBox li:hover {transform:translate(0, -10px)}

/* section4 */
#section4 .inner {position:relative; padding-bottom:30px;}
#section4 h3 {margin-bottom:40px;}
#section4 .bx-viewport {height:640px !important;}
#section4 .bx-pager {margin:0 auto 50px;}
#section4 .bx-pager > a {display:inline-block; margin:0 10px; line-height:50px; border-bottom:3px solid transparent; padding:0 5px; font-size:20px; font-weight:300; color:#afaaaa; cursor:pointer;}
#section4 .bx-pager > a.active {border-color:#333; font-weight:600; color:#333;}
#section4 .bxslider .txt {margin-bottom:30px; font-size:19px; font-weight:300; color:#111; line-height:1.6;}
#section4 .bxslider .secBox {width:1000px; /*height:540px;*/ margin:auto; box-shadow:0 15px 50px rgba(0,0,0,0.2);}
#section4 .bxslider .secBox video {width:100%;}
#section4 .bxblind {display:none;}

/* section5 */
#section5 .inner {width:1022px;}
#section5 .secBox {margin:-20px 0 0 -25px;}
#section5 .secBox li {float:left; margin:20px 0 0 25px;}
#section5 .secBox li img {transition:all ease 0.5s;}
#section5 .secBox li img:hover {transform:translateY(-5px);/*rotate(5deg)*/;}

/* section6 */
#section6 .expert {padding:100px 0 70px; background:url('/images/event/20190220/intro_sec6_bg.jpg') no-repeat fixed; background-size:cover;}
#section6 .expert h3 {margin-bottom:30px; font-size:46px; color:#fff;}
#section6 .expert a.btn {display:inline-block; border-radius:50px; border:1px solid #fff; padding:8px 50px; font-size:20px; font-weight:100; color:#fff; transition:all ease 0.5s;}
#section6 .expert a.btn:hover {background:rgba(255,255,255,0.2);}

.gon_cont1 { position:relative; }
.gon_cont1 .img2 { position:absolute; left:50%; top:50%; margin:-30px 0 0 -30px; opacity:0.3; }
.gon_cont1:hover .img1 { opacity:0.8; }
.gon_cont1:hover .img2 { opacity:0.8; }

@media (min-width:0) and (max-width:1179px) {
	body, #section0, #section2 {overflow-x:hidden;}
	.section .inner {padding-left:20px !important; padding-right:20px !important;}
	.section .inner,
	.section .secBox,
	.section .secBox2 {width:auto !important; max-width:100% !important;}
	.section img,
	.section video {max-width:100%;}
	.section h3, .section h3 .tit, #section0 h3 {font-size:34px; line-height:1.4;}
	.section h3 strong {font-size:40px !important;}
	#section0.active .img01 img,
	#section0.active .img02 img,
	#section0.active .img03 img {max-width:none;}
	#section1 .secBox2 li {width:48%; margin:1%;}
	#section2 .bxflame_pc {left:0; margin-left:-10%;}
	#section2 .bxflame_mo {right:0; margin-right:0;}
	#section4 .inner {padding-bottom:100px;}
	#section4 .bx-viewport {height:auto !important;}
}
@media (min-width:0) and (max-width:640px) {
	.section .inner,
	.section .expert {padding-top:50px !important; padding-bottom:50px !important;}
	.section h3 {margin-bottom:40px;}
	.section h3, .section h3 .tit {font-size:24px !important;}
	.section h3 strong {font-size:30px !important;}
	.section h3 .txt {margin-top:20px; font-size:18px;}
	#section0 .txt {padding-top:30px; font-size:18px;}
	.section br {display:none;}
	#section0 .bx-wrapper {display:none;}
	#section0 .img_mo {display:block;}
	#section1 .secBox {margin-top:0;}
	#section1 .secBox2 li {min-height:200px;}
	#section1 .secBox2 li .stit {font-size:18px;}
	#section1 .secBox2 li .stxt {font-size:14px;}
	#section2 .bxflame_pc {margin-left:-80%;}
	#section2 .bxflame_mo {margin-right:0;}
	#section2 .bx-pager > a {font-size:18px; line-height:30px;}
	#section3 .secBox li {width:46%; margin:2%;}
	#section4 .tabBox .txt {font-size:18px !important;}
	#section4 .bxslider .txt {font-size:18px;}
	#section4 .bx-pager {margin-bottom:30px;}
	#section4 .bx-pager > a {font-size:18px; line-height:40px;}
	#section5 .secBox {margin-left:-2%;}
	#section5 .secBox li {width:46%; margin-left:4%;}
	#section4 .bxblind {display:block; position:absolute; bottom:0; left:0; width:100%; height:100%;}
}