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

#wrap {min-width:1200px; margin:0 auto;}

/* common */
.section,
.footer {background-repeat:no-repeat; background-position:50% 0;}
.box {width:1274px; margin:0 auto;}

/* nav */
.nav {display:none;}

/* 각 section */
.section.main {height:1852px; background-image:url(../images/bg_main_1.jpg);}
.section.call {height:160px; background-image:url(../images/bg_call.jpg);}
/* 180118 */
.section.cf {height:764px; background-image:url(../images/bg_cf2.jpg);}
/* 180212 SHPark : 프로모션 기간 만료로 주석처리
.section.promotion {height:980px; background-image:url(../images/bg_promotion.jpg);} */
/* //180118 */
.section.product {height:1089px; background-image:url(../images/bg_product.jpg); background-position:50% 0;}
.section.info {height:730px; background-image:url(../images/bg_info.jpg); background-position:50% 0px; position:relative;}
.section.card_event {height:592px; background-image:url(../images/bg_card.jpg); background-position:50% 0}
.section.sns {height:692px; background-image:url(../images/bg_sns.jpg); background-position:50% 0;}
.section.info2 {height:3827px; background-image:url(../images/bg_info2.jpg); background-position:50% 0px; position:relative;}
.section.app {height:494px; background-image:url(../images/bg_app.jpg);}
.footer {height:115px;  background-image:url(../images/bg_footer.jpg);}

/* section - main */
.header {display:block; position:fixed; top:135px; right:40px; z-index:999;}
.header:after {display:block; clear:both; height:0; content:'';}
.header h1 {float:left; font-size:0;}
.header .list_sns {float:right;}
.header .list_sns > li {margin-bottom:10px;}
.header .list_sns > li:first-child {margin-left:0;}
.header .list_sns > li > a {display:block; font-size:0;}

.section.main .box {position:relative;}
.section.main .slogan01 {position:relative; top:575px; left:-160px;}
.section.main .slogan02 {position:relative; top:832px; right:-145px;}
.section.main .btn_vote01 {position:absolute; top:1015px; left:0px; font-size:0;}
.section.main .btn_vote02 {position:absolute; top:1015px; right:0px; font-size:0;  font-size:0;}

.section.main .timer {position:absolute; top:1215px; left:288px;}
.section.main .timer li{float:left; }
.section.main .timer li.mr8{margin-right:8px}

.section.main .area_movie {position:relative; top:1848px; text-align:center; height:504px;}
.section.main .tab_mv {width:940px; margin:0 auto; margin-bottom:6px;}
.section.main .tab_mv:after {display:block; clear:both; height:0; content:'';}
.section.main .tab_mv > li {float:left; width:50%;}
.section.main .tab_mv > li > a {display:block; height:60px; background-repeat:no-repeat; background-position:50% 0;}
.section.main .tab_mv > li:first-child > a {background-image:url(../images/tab_cf_off.png);}
.section.main .tab_mv > li:first-child.on > a {background-image:url(../images/tab_cf_on.png);}
.section.main .tab_mv > li:last-child > a {background-image:url(../images/tab_making_off.png);}
.section.main .tab_mv > li:last-child.on > a {background-image:url(../images/tab_making_on.png);}
.section.main .con_mv { margin:0 auto 0;}
.section.main .con_mv > li {display:none;}
.section.main .con_mv > li.on {display:block;}
.section.main .con_mv iframe {width:896px; height:504px;}


.section.main .list_main > li:first-child > img {left:0;}
.section.main .list_main > li:first-child.on > img {left:69px}
.section.main .list_main > li:nth-child(2) > img {left:189px;}
.section.main .list_main > li:nth-child(2).on > img {left:69px;}


/* section - card */
.section.card_event .btn_card {float:right; position:relative; margin-top:405px; margin-right:374px; font-size:0;}
.section.card_event .desc_card {position:relative; padding-top:40px; text-align:center; font-size:0;}
.section.card_event .btn_cardopen {position:absolute; top:67px; left:200px; z-index:2;}
.section.card_event .card_info {position:absolute; top:67px; left:430px; z-index:2;}

/* section - sns */
.section.sns .desc_info{padding-top:200px; text-align:center; font-size:0;}
.section.sns .desc_sns {position:relative; top:44px; margin-left:418px; z-index:2;}
.section.sns .desc_sns li {float:left; margin-left:20px;}


/* section - call */
.section.call .box:after {display:block; clear:both; height:0; content:'';}
/* (motion) */
.section.call .desc_call {float:left; position:relative; left:40px; margin-top:30px; font-size:0;
	-webkit-transition:left 0.6s;
	   -moz-transition:left 0.6s;
	    -ms-transition:left 0.6s;
	        transition:left 0.6s;
}
.section.call .desc_call.on {left:0;}
.section.call .btn_call {float:right; position:relative; margin-top:45px; margin-right:30px; font-size:0;}


/* section - vote */
.section.vote {height:150px; background-image:url(../images/bg_vote.jpg);}
.section.vote .vote01 {float:left; width:50%;  color:#fff; 	font-family: 'Noto Sans KR', sans-serif; font-size:84px; font-weight:bold; font-style:italic; line-height:150px; letter-spacing:-5px;}
.section.vote .vote02 {float:left; width:50%;  color:#fff; 	font-family: 'Noto Sans KR', sans-serif; font-size:84px; font-weight:bold; font-style:italic; line-height:150px; letter-spacing:-5px;}
.section.vote .btn_vote001 {float:right; position:relative; margin:0 175px 0 0;}
.section.vote .btn_vote001 span{font-size:40px; }
.section.vote .btn_vote002 {float:left; position:relative; margin:0 0 0 175px;}
.section.vote .btn_vote002 span{font-size:40px; }

/* section - cf */
.section.cf .box {position:relative;}
.section.cf .desc_cf {font-size:0; text-align:center;}
.section.cf .area_movie {text-align:center; height:490px; background:url(../images/bg_video.png) no-repeat 50% 0;}
.section.cf .tab_mv {width:800px; margin:0 auto;}
.section.cf .tab_mv:after {display:block; clear:both; height:0; content:'';}
.section.cf .tab_mv > li {float:left; width:50%;}
.section.cf .tab_mv > li > a {display:block; height:60px; background-repeat:no-repeat; background-position:50% 0;}
.section.cf .tab_mv > li:first-child > a {background-image:url(../images/tab_cf_off.png);}
.section.cf .tab_mv > li:first-child.on > a {background-image:url(../images/tab_cf_on.png);}
.section.cf .tab_mv > li:last-child > a {background-image:url(../images/tab_making_off.png);}
.section.cf .tab_mv > li:last-child.on > a {background-image:url(../images/tab_making_on.png);}
.section.cf .con_mv { margin:0 auto 0;}
.section.cf .con_mv > li {display:none;}
.section.cf .con_mv > li.on {display:block;}
.section.cf .con_mv iframe {width:800px; height:450px;}

/* section - product */
.section.product .box {text-align:center; height:1046px;}

.section.product .box:after {display:block; clear:both; height:0; content:'';}
/* (motion) */
.section.product .desc_call {float:left; position:relative; left:40px; margin-top:30px; font-size:0;
	-webkit-transition:left 0.6s;
	   -moz-transition:left 0.6s;
	    -ms-transition:left 0.6s;
	        transition:left 0.6s;
}
.section.product .desc_call.on {left:0;}
.section.product .btn_call {float:right; position:relative; margin-top:920px; margin-right:374px; font-size:0;}


.section.product .list_product {padding-top:220px;}
.section.product .list_product > li {font-size:0; float:left;}
/* (motion) */
.section.product .list_product > li > img {position:relative;
	-webkit-transition:left 0.6s;
	   -moz-transition:left 0.6s;
	    -ms-transition:left 0.6s;
	        transition:left 0.6s;
}
.section.product .list_product > li:first-child > img {left:-100px;}
.section.product .list_product > li:first-child.on > img {left:20px}
.section.product .list_product > li:nth-child(2) > img {left:360px;}
.section.product .list_product > li:nth-child(2).on > img {left:240px;}
.section.product hr {display:block; height:4px; border:0; background:url(../images/hr.png) no-repeat 50% 0; opacity:0;
	-webkit-transition:opacity 0.6s;
	   -moz-transition:opacity 0.6s;
	    -ms-transition:opacity 0.6s;
	        transition:opacity 0.6s;
}
.section.product hr.on {opacity:1;}
.section.product .desc_product {position:relative; top:100px; font-size:0; opacity:0;
	-webkit-transition: all 0.6s;
	   -moz-transition:all 0.6s;
	    -ms-transition:all 0.6s;
	        transition:all 0.6s;
}
.section.product .desc_product.on {top:0; opacity:1;}

/* section - notice */
.section.notice {height:382px; background:url(../images/bg_notice.jpg) no-repeat 50% 0;}
.section.notice .desc_notice {padding-top:78px; text-align:center; font-size:0;}

/* section - info */
.section.info .desc_info1_tit {position:absolute; top:50px;}

.section.info .desc_info1_1 {padding-top:50px; text-align:center; font-size:0;}
.section.info .desc_info1_2 {padding-top:82px; text-align:center; font-size:0;}
.section.info .desc_info1_3 {padding-top:118px; text-align:center; font-size:0;}
.section.info .desc_info1_4 {padding-top:140px; text-align:center; font-size:0;position:relative;}

.section.info .desc_info1_4 .card{position:absolute;  top:423px; left:230px; }
.section.info .desc_info1_4 .card li{float:left; margin-right:13px;}

.section.info .desc_info1_5 {padding-top:56px; text-align:center; font-size:0;position:relative;}
.section.info .desc_info1_5 .sns {position:absolute;  top:56px; left:797px; }
.section.info .desc_info1_5 .sns li {float:left; margin-right:13px;}

.section.info .info {position:absolute; top:120px; right:-70px;}
.section.info .blood {position:absolute; bottom:-200px; left:-250px;}


.section.info .area_movie {position:relative; top:80px; text-align:center; height:610px; background-image:url(../images/img_info1_movie.png);}
.section.info .tab_mv {width:940px; margin:0 auto; margin-bottom:6px;}
.section.info .tab_mv:after {display:block; clear:both; height:0; content:'';}
.section.info .tab_mv > li {float:left; width:50%;}
.section.info .tab_mv > li > a {display:block; height:60px; background-repeat:no-repeat; background-position:50% 0;}
.section.info .tab_mv > li:first-child > a {background-image:url(../images/tab_cf_off.png);}
.section.info .tab_mv > li:first-child.on > a {background-image:url(../images/tab_cf_on.png);}
.section.info .tab_mv > li:last-child > a {background-image:url(../images/tab_making_off.png);}
.section.info .tab_mv > li:last-child.on > a {background-image:url(../images/tab_making_on.png);}
.section.info .con_mv { margin:0 auto 0;}
.section.info .con_mv > li {display:none;}
.section.info .con_mv > li.on {display:block; padding-top:94px;}
.section.info .con_mv iframe {width:880px; height:495px;}

.section.info .area_movie .movie_click{position:absolute; margin:0 auto;}

.section.info .quiz_1{margin-top:40px; text-align:center; font-size:0; background:url(../images/quiz_bg.png) no-repeat 50% 0; height:671px; }
.section.info .quiz_1 .quiz_1_1{padding-top:120px; text-align:center;}
.section.info .quiz_1 .quiz_1_2{padding-top:50px; text-align:center;}

.section.info .quiz_2{margin-top:40px; text-align:center; font-size:0; background:url(../images/quiz_bg.png) no-repeat 50% 0; height:671px; }
.section.info .quiz_2 .quiz_2_1{padding-top:100px; text-align:center;}
.section.info .quiz_2 .quiz_2_2{padding-top:50px; text-align:center;float:left;margin-left:190px;}
.section.info .quiz_2 .quiz_2_3{padding-top:50px; text-align:center;float:left;margin-left:20px;}
.section.info .quiz_2 .quiz_2_4{padding-top:50px; text-align:center;float:left;margin-left:20px;}
.section.info .quiz_2 .quiz_2_5{padding-top:240px; text-align:center;}
.section.info .quiz_2 .quiz_2_5 .btn{padding:20px;}

.section.info .quiz_3{margin-top:40px; text-align:center; font-size:0; background:url(../images/quiz_bg.png) no-repeat 50% 0; height:671px; }
.section.info .quiz_3 .quiz_3_1{padding-top:70px; text-align:center;}
.section.info .quiz_3 .quiz_3_2{padding-top:30px; text-align:center;float:left;margin-left:460px;}
.section.info .quiz_3 .quiz_3_3{padding-top:30px; text-align:center;float:left;margin-left:20px;}
.section.info .quiz_3 .quiz_3_4{padding-top:190px; text-align:center;}
.section.info .quiz_3 .quiz_3_4 .btn{padding:20px;}

.section.info .quiz_4{margin-top:40px; text-align:center; font-size:0; background:url(../images/quiz_bg.png) no-repeat 50% 0; height:671px; }
.section.info .quiz_4 .quiz_4_1{padding-top:60px; text-align:center;}
.section.info .quiz_4 .quiz_4_2{padding-top:40px; text-align:center;float:left;margin-left:190px;}
.section.info .quiz_4 .quiz_4_3{padding-top:40px; text-align:center;float:left;margin-left:20px;}
.section.info .quiz_4 .quiz_4_4{padding-top:40px; text-align:center;float:left;margin-left:20px;}
.section.info .quiz_4 .quiz_4_5{padding-top:210px; text-align:center;}
.section.info .quiz_4 .quiz_4_5 .btn{padding:20px;}


	/* entire container, keeps perspective */
.flip-container {
    perspective: 1000px;
   border:2px solid rgba(0,0,0,0) !important;
}

/* front pane, placed above back */
.front{
  z-index:2;
  /* for firefox 31 */
  transform: rotateY(0deg);
 background:url('../images/img_card.png') no-repeat;
  background-size:100% 100%;
}
/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
 background:url('../images/img_card.png') no-repeat;
  background-size:100% 100%;
}

/* back, initially hidden pane */
.luck {
    transform: rotateY(180deg);
 background:url('../images/img_card_luck.png') no-repeat;
  background-size:100% 100%;
}


/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateY(360deg);
}


.flip-container, .front, .back {
    width: 230px;
    height: 336px;
   /*border:1px solid lightgray;*/
}
/* flip speed goes here */
.flipper {
    transition: 0.3s;
   /* 하위요소에 3D 좌표값 지정 */
    transform-style: preserve-3d;
    position: relative;
}
/* hide back of pane during swap */
.front, .back{
  position: absolute;
  backface-visibility:hidden;
}


.pop_limit{padding:1%; background:#000; color:#999;}
.pop_limit input{margin:3px 3px 0 0;}
.pop_close{float:right; color:#fff; font-weight:bold;}