@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:1200px; margin:0 auto;}

/* 각 section */
.section.main {height:1518px; background:url(../images/bg_main.jpg) #000 no-repeat center;}
.section.cf {height:720px; background:url(../images/bg_movie.jpg) #000 no-repeat center; background-position:50% 0}
.section.coupon {height:1099px; background:url(../images/bg_coupon.jpg) #000 no-repeat center; background-position:50% 0}
/* .section.info_1 { height:720px; background:url(../images/bg_movie1.jpg) #000 no-repeat center; background-position:50% 0 } */
.section.info_1 { height:720px; background-color:#3e2e22;  }

.section.info_2 {height:3592px; background:url(../images/bg_info_2.jpg) #000 no-repeat center; background-position:50% 0}
.section.info_3 {height:2910px; background:url(../images/bg_info_3.jpg) #000 no-repeat center; background-position:50% 0;}
.section.photo {height:1248px; background:url(../images/bg_photo2.jpg) #000 no-repeat center; background-position:50% 0}
.section.app {height:354px; background:url(../images/bg_app.jpg) #000 no-repeat center;}
.footer {height:115px;  background:#0c0c0c;}

/* section - main */
.header {display:block; position:fixed; top:56px; 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:968px; left:288px;}
.section.main .timer li{float:left; }
.section.main .timer li.mr8{margin-right:8px}

.section.main .area_movie {position:relative; top:1984px; text-align:center; height:486px;}
.section.main iframe {width:880px; height:495px;}

.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 - product */
.section.product .box {text-align:center; height:1046px;}
.section.product .box:after {display:block; clear:both; height:0; content:'';}

/* section - coupon */
.section.coupon .box {position:relative; text-align:center;}
.section.coupon .btn_coupon_01 {position:absolute; top:730px; left:106px; font-size:0;}
.section.coupon .btn_coupon_02 {position:absolute; top:730px; left:758px; font-size:0;}
.section.coupon .btn_coupon_03 {position:absolute; top:1394px; left:140px; font-size:0;}
.section.coupon .btn_coupon_04 {position:absolute; top:1394px; left:730px; font-size:0;}
.section.coupon .btn_notice{position:absolute; top:890px; left:384px; font-size:0;}

/* section - info_4 */
.section.info_1 .box {position:relative; text-align:center;}

.section.info_1 .btn_movie {position:absolute; top:858px; left:982px; font-size:0;}
.section.info_1 .btn_sns_01 {position:absolute; top:2575px; left:910px; font-size:0; width:64px;}
.section.info_1 .btn_sns_02 {position:absolute; top:2575px; left:980px; font-size:0; width:64px;}
.section.info_1 .model{position:absolute; top:1367px; left:-40px; font-size:0; width:31%; z-index:1;}

.section.info_1 .style_01{position:absolute; top:280px; left:280px; font-size:0;}
.section.info_1 .style_01 .btn_start{position:absolute; top:444px; left:64px; font-size:0;}

.section.info_1 .style_02{position:absolute; top:280px; left:280px;  font-size:0;}
.section.info_1 .style_02 .btn_next{position:absolute; top:476px; left:332px; font-size:0;}
.section.info_1 .style_02 .btn_check_01{position:absolute; top:398px; left:214px; font-size:0;}
.section.info_1 .style_02 .btn_check_02{position:absolute; top:398px; left:584px; font-size:0;}

.section.info_1 .style_03{position:absolute;top:280px; left:280px; font-size:0;}
.section.info_1 .style_03 .btn_next{position:absolute; top:476px; left:332px; font-size:0;}
.section.info_1 .style_03 .btn_check_01{position:absolute; top:203px; left:250px; font-size:0;}
.section.info_1 .style_03 .btn_check_02{position:absolute; top:283px; left:250px;; font-size:0;}
.section.info_1 .style_03 .btn_check_03{position:absolute; top:366px; left:250px;; font-size:0;}

.section.info_1 .style_04{position:absolute; top:280px; left:280px; font-size:0;}
.section.info_1 .style_04 .btn_result{position:absolute; top:476px; left:332px; font-size:0;}
.section.info_1 .style_04 .btn_check_01{position:absolute; top:242px; left:290px; font-size:0;}
.section.info_1 .style_04 .btn_check_02{position:absolute; top:322px; left:290px;; font-size:0;}

.section.info_1 .btn_winner{position:absolute; top:492px; left:888px; font-size:0;}
.section.info_1 .btn_winner li{margin-bottom:23px;}

/* section - info_2 */
.section.info_2 .box {position:relative; text-align:center;}
.section.info_2 .btn_movie {position:absolute; top:1630px; left:192px; font-size:0;}
.section.info_2 .btn_hashtag {position:absolute; top:1300px; left:486px; font-size:0;}
.section.info_2 .btn_01 {position:absolute; top:514px; left:446px; font-size:0;}


/* section - info_3 */
.section.info_3 .box {position:relative; text-align:center;}
.section.info_3 .btn_hashtag {position:absolute; top:1172px; left:486px; font-size:0;}


.checkbox-wrap { cursor: pointer;}
.checkbox-wrap input[type=checkbox] { display: none; }
.checkbox-wrap .check-icon1  { display: inline-block;  width:65px; height:65px; background: url(../images/check.png) left center no-repeat; vertical-align: middle; transition-duration: .3s; }
.checkbox-wrap input[type=checkbox]:checked + .check-icon1 { background-image: url(../images/check_on.png); }





/* section - photo */
.section.photo .box {position:relative; text-align:center; width:812px;}
.photo_list {position:relative; width:812px; margin:0 auto; text-align:center; font-size:0; display:inline-block; margin:150px 0 0 0; z-index:2;}
.photo_list img{width:100%;}
.photo_list li{width:260px; margin-top:16px; float:left; margin-left:16px; }
.photo_list li:first-child { margin-top:0px; margin-left:0px; }
.photo_list li:nth-child(2) { margin-top:0px;}
.photo_list li:nth-child(3) { margin-top:0px;}
.photo_list li:nth-child(4) {margin-left:0px; }
.photo_list li:nth-child(7) {margin-left:0px; }



.photo_list .btn_prev {width:34px;float:left;margin:20px 0 0 96px;}
.photo_list .btn_next {width:34px;float:left;margin:20px 96px 0 36px;}

.sns_page{position:relative; width:100%;text-align:center;vertical-align:middle; font-size:16px; margin-top:20px; clear:both;}
.sns_page span.sns_n{width:35px;display:inline-block;}
.sns_page span.sns_n a{color:#fff;}
.sns_page span.sns_n a.active{color:#d10b0c;font-weight:bold;}

.section.photo .btn_notice {position:absolute; top:1060px; left:196px; font-size:0;}

.section.photo .model {position:absolute; top:-4%; right:-56%;}



/* section - review */
.section.review {padding:80px 0 66px 0;background:url(../images/bg_review.jpg) no-repeat 50% 0;}
.section.review .desc_review {padding-top:22px; text-align:center; background:#fff;}

.comment {clear: both; border: 1px solid #282828;padding: 30px 50px;overflow: hidden; background:#282828;position:relative; text-align:left;}
.comment .c_tit{text-align:center;}
.comment li{margin-top:20px; border-bottom:#444 1px dotted; min-height:70px;position:relative;}
.comment li.last{ border-bottom:none;}
.comment .c_img{width:4%;float: left;display:block; margin-right:2%;}
.comment .c_img img{width: 100%;border-radius: 100%;}
.comment .c_txt{width:82%;float: left;display:block;  margin-right:2%;}
.comment .c_txt textarea {width:100%; padding:15px 15px; box-sizing:border-box; min-height:90px;border:1px solid #444;background-color:#3c3c3c; color:#fff;}
.comment .c_txt2{width:90%;float: left;display:block;}
.comment .c_txt2 .name {display:inline-block; font-size:16px; font-weight:bold; margin-right:10px;color:#fff;}
.comment .c_txt2 .date {display:inline-block; color:#666;}
.comment .c_txt2 .txt {color:#aaa;}
.comment .c_btn{width:10%;float: left;display:block; }
.comment .c_btn button {width:100%;border:1px solid #444;background-color:#545454; color:#ccc; min-height:88px;font-size:16px; font-weight:bold;}
.comment .c_btn button:hover {background-color:#000; color:#fff;}

.comment_top {clear: both; border-bottom: 1px solid #fff;position:relative; margin:30px 0 20px 0; line-height:40px; height:40px;font-size:16px; font-weight:bold;}
.comment_top .array1{float:left; width:50%;color:#fff; text-align:left;}
.comment_top .array1 span{font-weight:bold; color:red;}
.comment_top .array2{float:right; width:50%; text-align:right;color:#fff;}

.comment .sns_page{position:relative; width:100%;text-align:center;vertical-align:middle; font-size:14px; margin-top:20px; }
.comment .sns_page span.sns_n{width:35px;display:inline-block;}
.comment .sns_page span.sns_n a{color:#999;}


/* section - app */
.section.app .box {box-sizing:border-box; padding-left:210px;}
/* (motion) */
.section.app .desc_app {position:relative; top:20px; padding-top:70px; font-size:0; opacity:0;
	-webkit-transition:all 0.5s;
	   -moz-transition:all 0.5s;
	    -ms-transition:all 0.5s;
	        transition:all 0.5s;
}
.section.app .desc_app.on {top:0; opacity:1;}
.section.app .list_model {position:relative; top:20px; margin-top:24px; opacity:0;
	-webkit-transition:all 0.5s;
	   -moz-transition:all 0.5s;
	    -ms-transition:all 0.5s;
	        transition:all 0.5s;
}
.section.app .list_model.on {top:0; opacity:1;}
.section.app .list_model:after {display:block; height:0; clear:both; content:'';}
.section.app .list_model > li {float:left; margin-left:20px;}
.section.app .list_model > li:first-child {margin-left:0;}
.section.app .list_model > li > a {display:block; font-size:0;}

/* footer */
.footer address {padding-top:40px; text-align:center; font-size:0;}









/* popup */

	.overlay_t { background-color: #000; bottom: 0; left: 0; opacity: 0.3;  /* ??? ???????? ???? ???? ?????? ????  */
	  filter: alpha(opacity = 50);
	   /* IE7 & 8 */ position: fixed; right: 0; top: 0; z-index: 99; display:;}

	.popup_layer {position:absolute; top:260px; left:50%;
	       margin-left:-243px; z-index:100; display:;}
	.close {position:absolute; background-image:url(../images/pop_close.png); width:36px; height:36px; right:0; top:-40px}
	.barcode{position:absolute; top:241px; width:80%;background:#fff; z-index:1; text-align:center;}
	.code {position:absolute; top:314px; width:44%; margin-left:28%;font-family: 'Noto Sans KR', sans-serif; font-size:18px; line-height:20px; letter-spacing:-1px; color:#000; }
	.code li {margin-bottom:10px;}
	.code_page{position:absolute; top:470px; width:100%; text-align:center;vertical-align:middle; font-size:14px;}
	.code_page span.sns_n{width:35px;display:inline-block;}
	.code_page span.sns_n a{color:#000;}
	.txt span {font-weight:bold; margin-left:10px;}
	.close_btn {position:absolute; bottom:0; height:118px;}
	.close_btn_left {position:absolute; left:0; bottom:0; height:126px;}
	.close_btn_right {position:absolute; right:0; bottom:0; height:126px;}

	.close_btn_left2 {position:absolute; left:0; bottom:24px; height:126px;}
	.close_btn_right2 {position:absolute; right:0; bottom:24px; height:126px;}



	.pop_sns{position:absolute; top:684px; left:286px; }
	.pop_sns li {float:left; margin-right:5px;}


	.winner {position:absolute;width:80%; left:10%; top:15%; color:#999;}
	.winner .box_ok{border:1px solid #d1d1d1;overflow:auto; height:80px;padding:10px;background:#fff;}
	.winner .box_ok ul li{padding-bottom:10px; line-height:16px;}


	.barcode{position:absolute; width:66%; top:58%; z-index:1; text-align:center;margin-left:17%;	background:#fff; z-index:1; text-align:center;padding:2%;}
	.barcode2{position:absolute; width:66%; top:54%; z-index:1; text-align:center;margin-left:17%;	background:#fff; z-index:1; text-align:center;padding:2%;}
	.barcode_view_for_scan{ margin:0 auto; text-align:center}
	#w_burger_barcode{margin:0 auto;}
	#x_burger_barcode{margin:0 auto;}

	#c_burger_barcode{margin:0 auto;}
	#d_burger_barcode{margin:0 auto;}


	.privacy {position:absolute;width:83%; height:12%; left:8%; top:12%; color:#999;}
	.privacy .box_ok{border:1px solid #d1d1d1;overflow:auto; height:100%;padding:5px;background:#fff; box-sizing: border-box;}
	.privacy .box_ok ul li{padding-bottom:10px; line-height:16px;}


	.input_chb {position:absolute; top:25%; left:8%; width:83%; height:2%;}
	.input_chb label {color: #999; font-size: 1em; left:6%;position: absolute; top:0; letter-spacing:-1px;}


	select{border: 1px solid #e1e1e1;box-shadow:0 none !important;color: #656565;font-size: 0.9em;line-height:24px;height:24px; padding:0; vertical-align:top;}
	input[type="checkbox"] {height:100%;width:5%;border: 1px solid #e1e1e1;}
	input[type="radio"] {height:100%;width:5%;}
	input[type="text"] {border: 1px solid #AAAAAA;border-radius: 0 0 0 0; box-shadow: none !important;color: #656565;font-size: 1em;padding: 5px 3px 5px 10px;vertical-align: middle;}
	input[type="button"] {background-color: #999;border: 1px solid #666;border-radius: 3px;color: #fff;display: inline-block;font-size:1.25em;line-height:10px;text-align: center;vertical-align:top;width:100%;padding:10px;letter-spacing:-1px;}



	.info_01 {position:absolute; top:29%; left:8%; width:83%; height:5%;}
	.info_01 .name{width:100%; height:100%;padding:0 2% 0 2%;}

	.info_02 {position:absolute; top:35%; left:8%;  width:83%; height:5%;}
	.info_02 .w1{ position: relative;width:30%; height:100%; float:left; padding:0 2% 0 2%;}
	.info_02 .line{ position: relative;font-weight:bold;color:#999;height:100%; width:5%; float:left; text-align:center;}

	.info_03 {position:absolute; top:29%; left:8%; width:83%; height:3.5%;}
	.info_03 .id{width:100%; height:100%; padding:0 2% 0 2%;}

	.info_04 {position:absolute; top:33%; left:8%; width:83%; height:3.5%;}
	.info_04 .add{width:100%; height:100%; padding:0 2% 0 2%;}

	.info_05 {position:absolute; top:37%; left:8%; width:83%; height:3.5%;}
	.info_05 .url{width:100%; height:100%; padding:0 2% 0 2%;}

	.gift_01{position:absolute; top:45.5%; left:8%; width:83%; height:3%;}
	.gift_01 label {color: #333; font-size: 1.2em; left:6%;position: absolute; top:0; letter-spacing:-1px;font-weight:bold;}

	.gift_02{position:absolute; top:48.2%; left:8%; width:83%; height:3%;}
	.gift_02 label {color: #333; font-size: 1.2em; left:6%;position: absolute; top:0; letter-spacing:-1px;font-weight:bold;}

	.gift_03{position:absolute; top:50.9%; left:8%; width:83%; height:3%;}
	.gift_03 label {color: #333; font-size: 1.2em; left:6%;position: absolute; top:0; letter-spacing:-1px; font-weight:bold;}


	.close2 {position:absolute; background-image:url(../images/pop_close.png); width:36px; height:36px; right:12%; top:19%; z-index:9999;}
	.sns_01{position:absolute;width:16%; top:47%; left:32%;}
	.sns_02{position:absolute;width:16%; top:47%; left:52%;}


	.btn_sns_01{position:absolute;width:16%; top:30%; left:33%;}
	.btn_sns_01 img{width:100%;}
	.btn_sns_02{position:absolute;width:16%; top:30%; right:33%;}
	.btn_sns_02 img{width:100%;}

.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;
}