/* 1366 / 640 : 2.134375 */
/* 1366 모바일 최대 사이즈
   640 디자인 사이즈
*/


/* basic-set */
b { font-weight:800; }
.bt_txt { display:inline-block; zoom:1; *display:inline; text-align:center; }
.bt_txt:hover { text-decoration:none; }
input[type=text],
input[type=password],
textarea { box-sizing :border-box; }
button { background-color: transparent; border: transparent;}

::-webkit-input-placeholder { color:#c7c7c7; }/* WebKit browsers */
:-moz-placeholder { color:#c7c7c7; }/* Mozilla Firefox 4 to 18 */
::-moz-placeholder { color:#c7c7c7; }/* Mozilla Firefox 19+ */
:-ms-input-placeholder { color:#c7c7c7; }/* Internet Explorer 10+ */


body.dimmed:before {content:''; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, .8); z-index: 1000}


/* layout */
#wrapper { max-width: 1366px; margin: 0 auto; overflow: hidden; padding-bottom: calc(100 / 640 * 100vw);}
#wrapper img { width: 100%; }

#h_tx { background:#fff; text-align:center; max-width: 1366px; z-index:1; }
#h_tx a { position:absolute; top:0; left:50%; bottom:0; text-indent:-9999px; }
#h_tx .bt01 { margin-left: calc(-301 / 640 * 100vw); width: calc(73 / 640 * 100vw); }
#h_tx .bt02 { margin-left: calc(-204 / 640 * 100vw); width:calc(79 / 640 *100vw); }

#footer { padding:35px 0; background:#fafafa; border-top:1px solid #f0e5b9; }
#footer .wrap { width:1200px; margin:0 auto; font-size:16px; line-height: 24px; color:#828282; letter-spacing:-1px; }
#footer .wrap p { position:absolute; bottom:0; right:0; }
#footer .wrap p a { color:#969696; }

.sns { width:100%; position:absolute; top: calc( 98 / 640 * 100vw); overflow:hidden; display: flex; left: calc( 50 / 640 * 100vw);}
.sns li {margin-right: calc( 10 / 640 * 100vw); font-size: 0;}
.sns a {display: inline-block; width: calc( 46 / 640 * 100vw); height: calc( 46 / 640 * 100vw);}
.blind {
 /*display: inline-block;*/
  position: absolute;
  border: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path:inset(50%);
}

.url_copy_alert {width: 100%; height: 40px; line-height: 40px; background-color: #002e61; color: white; font-size: 14px; position: fixed; top: 0; text-align: center; opacity: 0; transition: all ease-in-out .5s;z-index: 10001; visibility: hidden;}
.url_copy_alert.on { opacity: 1; visibility: visible; }

.toast {width: 100%; height: 40px; line-height: 40px; background-color: #f46b19; color: white; font-size: 14px; position: fixed; top: 0; text-align: center; opacity: 0; transition: all ease-in-out .5s; visibility: hidden;}
.toast.on { opacity: 1; visibility: visible;}

section { background-repeat:no-repeat; background-position:center 0; background-size: cover;}
section .wrap { width: calc(2.134375 * 590px); max-width: calc(590 / 640 * 100vw); margin:0 auto; }
section .wrap .exp { position:absolute; left:0; right:0; text-align:center; }


.t_area {background-image: url(../images/t_area_bg.png); position: relative; }
.t_area .wrap { height: calc(2.134375 * 1516px); max-height: calc(1516 / 640 * 100vw); }
.t_area .go_youtube {width: calc(2.134375 * 401px); max-width: calc(401 / 640 * 100vw); height: calc(2.134375 * 57px); max-height: calc(57 / 640 * 100vw); margin: auto; padding-top: calc(2.134375 * 83px);}
.t_area .go_youtube a {display: block; width: 100%; height: 100%;}

.t_area .btn_item { width: calc(148 / 640 * 100vw); height: calc(148 / 640 * 100vw); display: inline-block; position: absolute; right: calc(25 / 640 * 100vw); top: calc(33 / 640 * 100vw);}
.t_area .btn_item button { width: 100%; height: 100%;}

header { max-width: 1366px; width:100%; height: calc(2.134375 * 100px); max-height: 15.625vw; position:fixed; bottom:0; top:auto; left: 50%; right:0; transform: translate3d(-50%, 0, 0); /*background: rgba(255, 255, 255, .8);*/ z-index: 999; }
header.sticky { position:fixed; bottom:0; top:auto; }
header .wrap { max-width: 1366px; width: calc(640 / 640 * 100vw); height: 100%; margin:0 auto; display: flex; align-items: center; }
/*header .wrap .nav_container { width: 100%; }*/
nav ul { display: flex; justify-content: center; align-items: center;}
/*nav li { margin-right:  calc(19 / 640 * 100vw);}*/
/*nav li:last-child { margin-right: 0;}*/
nav li a { display:block; font-family: 'yg-jalnan'; font-size:20px; line-height:30px; color:#f2e87c; text-align:center; }
nav li a img {width: calc(2.134375 * 184px) !important; max-width: calc(184 / 640 * 100vw) !important; height: calc(2.134375 * 100px); max-height: calc(100 / 640 * 100vw);}
nav li a span {display: block; font-size: 30px; margin-top: 3px;}
/*nav li a.selected { color:#fff; }*/

/*.move-top {position: absolute; right: 0; bottom: calc(120 / 640 * 100vw);}*/
.move-top button {width: calc(88 / 640 * 100vw); height: calc(100 / 640 * 100vw);}

/* contents */
/*.sec01 .wrap { height:4410px; overflow:hidden; }*/
/*.sec01 .wrap { height:3700px; overflow:hidden; }*/
/*.sec01 .wrap.on {height:4480px;}*/


.sec01 { background-image: url(../images/sec01_new.png); }
.sec01 .wrap { height: calc(2.134375 * 2776px); max-height: calc(2776 / 640 * 100vw); }
.sec02 { background-image: url(../images/sec02.png); }
.sec02 .wrap { height: calc(2.134375 * 2850px); max-height: calc(2850 / 640 * 100vw);}
.sec03 { background-image: url(../images/sec03.png); }
.sec03 .wrap { height: calc(2.134375 * 5582px); max-height: calc(5582 / 640 * 100vw);}
.sec04 { background-color: #c6debd; }
.sec04 .wrap { height: calc(2.134375 * 1380px); max-height: calc(1380 / 640 * 100vw); }

.btn_box { position: absolute; left: 0; right: 0; text-align: center;}


.left-top-round {border-top-left-radius: calc( 40 / 640 * 100vw);}
.right-top-round {border-top-right-radius: calc( 40 / 640 * 100vw);}
.top-round {border-top-left-radius: calc( 30 / 640 * 100vw); border-top-right-radius: calc( 30 / 640 * 100vw); }

.left-bottom-round {border-bottom-left-radius: calc( 40 / 640 * 100vw);}
.right-bottom-round {border-bottom-right-radius: calc( 40 / 640 * 100vw);}
.bottom-round {border-bottom-left-radius: calc( 30 / 640 * 100vw); border-bottom-right-radius: calc( 30 / 640 * 100vw);}


.sec01 .wrap { position: relative; }
.sec01 .btn_box { bottom: calc( 257 / 640 * 100vw); }
.sec01 .btn_box .btn_item {display: inline-block; width: calc( 251 / 640 * 100vw); height: calc( 61 / 640 * 100vw); background-image: url("../images/sec01_btn_on.png"); background-repeat: no-repeat; background-position: center; background-size: cover;}
.sec01 .btn_box button.done .btn_item {background-image: url("../images/sec01_btn_off.png");}
.sec01 .count_gallery {position: absolute; bottom: calc( 188 / 640 * 100vw); font-size: calc( 27 / 640 * 100vw); letter-spacing: -0.05em; right: calc( 419 / 640 * 100vw); color: #ffc30b; font-weight: bold;}

.gallery_wrapper { opacity: 0; visibility: hidden; z-index: 10000;}
.gallery_wrapper.on { opacity: 1; visibility: visible;}
.gallery_wrapper {max-width: 1200px; position: fixed; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0);}
.gallery_wrapper .gallery:before {content: ''; width: calc( 554 / 640 * 100vw); height: calc( 486 / 640 * 100vw); background-image: url(../images/gallery_bg.png); background-repeat: no-repeat; display: block; position: absolute; background-position: center; background-size: cover; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0);}
.gallery_wrapper .swiper-wrapper {width: calc( 400 / 640 * 100vw); position: relative; margin-top: calc( 30 / 640 * 100vw); margin-left: calc( -15 / 640 * 100vw);}
.gallery_wrapper .gallery .img_box {width: calc( 400 / 640 * 100vw); height: calc( 249 / 640 * 100vw); /*height: 0; padding-top: 41.5%;*/  background-size: cover; background-position: center; border-radius: calc( 5 / 640 * 100vw);}
.gallery_wrapper .gallery .disclaimer {text-align: center; font-size: calc( 14 / 640 * 100vw); line-height: calc( 20 / 640 * 100vw); margin-bottom: calc( -30 / 640 * 100vw); margin-top: calc( 10 / 640 * 100vw);}
.gallery_wrapper .swiper-button-prev,
.gallery_wrapper .swiper-button-next { width: calc( 35 / 640 * 100vw) !important; height: calc( 35 / 640 * 100vw) !important; margin-top: auto;}
.gallery_wrapper .swiper-button-prev {background: url(../images/prev_btn.png) scroll center; left: calc( -60 / 640 * 100vw); background-size: cover;}
.gallery_wrapper .swiper-button-next {background: url(../images/next_btn.png) scroll center; right: calc( -50 / 640 * 100vw); background-size: cover;}
.gallery_wrapper .swiper-button-prev:after,
.gallery_wrapper .swiper-button-next:after {content: ""; width: 100%; height: 100%;}
.gallery_wrapper .close_btn_box {z-index: 1000; top: calc( -150 / 640 * 100vw); right: 0; position: absolute;}
.gallery_wrapper .close_btn_box button { position: absolute; display: inline-block; top: 0; width: calc( 42 / 640 * 100vw); height: calc( 42 / 640 * 100vw);}
.gallery_wrapper .close_btn_box button img { width: 100%; }

.gallery_wrapper .gallery_indication { overflow: hidden; position: relative; }
.gallery_wrapper .gallery_indication .swiper-wrapper { z-index: 2; background-color: #f0f0f0; height: calc( 19 / 640 * 100vw); margin-bottom:calc( 20 / 640 * 100vw);}
.gallery_wrapper .gallery_indication .swiper-slide { pointer-events: none; }

.gallery_wrapper .indication_progressbar {width: calc( 121 / 640 * 100vw); height: calc( 30 / 640 * 100vw); background-color: #9f4ab4; position: absolute; bottom: 0; overflow: hidden;}

.gallery .swiper-slide .btn_box {margin-top: calc( 10 / 640 * 100vw);}
.gallery .swiper-slide .btn_box .btn_item {display: inline-block; width: calc( 260 / 640 * 100vw); height: calc( 64 / 640 * 100vw); background: url("../images/sec01_gallery_btn_on.png") no-repeat scroll center; background-size: cover;}


.swiper-slide .origin_bg {width: 100%; height: calc( 19 / 640 * 100vw); background-color: #c2bfc3; display: inline-block; position: absolute;}
.swiper-slide .circle_bg {width: calc( 19 / 640 * 100vw); height: calc( 19 / 640 * 100vw); background: url(../images/circle_bg.png) no-repeat scroll center; background-size: cover; position: absolute; display: block;}
.swiper-slide .bar_bg {position: absolute; width: 100%; height: calc( 19 / 640 * 100vw); margin-left: calc( 19 / 640 * 100vw); background: url(../images/bar_bg.png); background-size: contain; }
.swiper-slide .num {font-size: calc( 11 / 640 * 100vw); width: calc( 19 / 640 * 100vw); height: calc( 19 / 640 * 100vw); line-height: calc( 19 / 640 * 100vw); position: absolute; display: inline-block; text-align: center; color: white;}
.swiper-slide .progress_bg {width: 0; height: calc( 19 / 640 * 100vw); background-color: #9f4ab4; display: inline-block; position: absolute; transition: all linear .3s;}
.swiper-slide .progress_bg.on {width: 100%; height: calc( 19 / 640 * 100vw); background-color: #9f4ab4; display: inline-block; position: absolute;}



.sec01 .count { position: absolute; bottom: calc( 121 / 640 * 100vw); right: calc( 263 / 640 * 100vw); color: #ff8401; font-weight: bold; font-size: calc( 28 / 640 * 100vw); letter-spacing: -0.05em;}
.sec01 .btn_box { bottom: calc( 189 / 640 * 100vw); }
.sec01 .btn_box .btn_item {display: inline-block; width: calc( 397 / 640 * 100vw); height: calc( 94 / 640 * 100vw); background-image: url("../images/sec01_btn_win.png"); background-repeat: no-repeat; background-position: center;}
.sec01 .btn_box button.done .btn_item {background-image: url("../images/sec01_btn_win.png");}

.sec01 .fade_cont_box {width: 100%; height: 100%; position:relative;}
.sec01 .fade_cont_box .arrow {
	position:absolute;
	top: calc( 1830 / 640 * 100vw);
	right:  calc( 25 / 640 * 100vw);
	margin-right:  calc( 40 / 640 * 100vw);
	width: calc( 25 / 640 * 100vw);
    height: calc( 45 / 640 * 100vw);
	right: 0;
	 animation:blink01 2s linear both infinite;
}

@keyframes blink01 {
	0% {
		opacity: 1;
	}

	25% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}

@keyframes jumping {
	0% {
		transform:translate(0, -5px);
	}

	50% {
		transform:translate(0, 5px);
	}

	100% {
		transform:translate(0, -5px);
	}
}


.sec01 .fade_cont_box .img_box {position: absolute; top: calc( 1791 / 640 * 100vw); left: calc( 9 / 640 * 100vw);}
.sec01 .fade_cont_box .img_box .img_cont {display: none; position: absolute; width: calc( 444 / 640 * 100vw); height: calc( 640 / 640 * 100vw);}
.sec01 .fade_cont_box .img_box .img_cont:first-child {display: block;}

#slider-vertical {width: calc( 120 / 640 * 100vw); right:0; position: absolute; z-index: 10; top: calc( 2000 / 640 * 100vw); text-align: right; height: calc( 307 / 640 * 100vw); pointer-events: none;}
#slider-vertical .ui-slider-handle {width: calc( 120 / 640 * 100vw); height: calc( 94 / 640 * 100vw); position: absolute; z-index: 11; background-image: url("../images/sec01_gage_trigger.png"); background-size: cover; margin-left: calc( -120 / 640 * 100vw); right: 0; cursor: pointer; pointer-events: auto;}
#slider-vertical .ui-slider-handle:focus {outline: none;}
#slider-vertical .ui-slider-handle {
	 animation:jumping 2.5s linear both infinite;
	outline:none;
}
/*#slider-vertical-mo {}*/
/*#slider-vertical-mo input[type="range"].vertical{-webkit-transform: rotate(270deg);-moz-transform: rotate(270deg);-o-transform: rotate(270deg);-ms-transform: rotate(270deg);!* transform: rotate(270deg)*!;}*/

.sec02 .wrap {position: relative; }
.sec02 .btn_box { bottom: calc( 290 / 640 * 100vw); }
.sec02 .btn_box .btn_item {display: inline-block; width: calc( 451 / 640 * 100vw); height: calc( 106 / 640 * 100vw); background-image: url("../images/sec02_btn_win.png"); background-repeat: no-repeat; background-position: center; background-size: cover;}
.sec02 .btn_box button.active .btn_item {background-image: url("../images/sec02_btn_win.png");}
.sec02 .count { position: absolute; bottom: calc(220 / 640 * 100vw); right: calc(264 / 640 * 100vw); color: #3cb600; font-weight: bold; font-size: calc(28 / 640 * 100vw); box-sizing: border-box; letter-spacing: -0.05em;}


.sec02 .drag-drop_wrapper {position: absolute; top: calc(1445 / 640 * 100vw);}
.sec02 .drag-drop_wrapper .tab_box .list_box {display: flex;}
.sec02 .drag-drop_wrapper .tab_box .list_item button { height: calc(110 / 640 * 100vw); background-size: cover; background-repeat: no-repeat;}
.sec02 .drag-drop_wrapper .tab_box .tab_item_01 button { width: calc(206 / 640 * 100vw); background-image: url("../images/sec02_tab_menu_off_01.png")}
.sec02 .drag-drop_wrapper .tab_box .tab_item_02 button { width: calc(208 / 640 * 100vw); background-image: url("../images/sec02_tab_menu_off_02.png")}
.sec02 .drag-drop_wrapper .tab_box .tab_item_03 button { width: calc(185 / 640 * 100vw); background-image: url("../images/sec02_tab_menu_off_03.png")}
.sec02 .drag-drop_wrapper .tab_box .tab_item_01.on button {background-image: url("../images/sec02_tab_menu_on_01.png")}
.sec02 .drag-drop_wrapper .tab_box .tab_item_02.on button {background-image: url("../images/sec02_tab_menu_on_02.png")}
.sec02 .drag-drop_wrapper .tab_box .tab_item_03.on button {background-image: url("../images/sec02_tab_menu_on_03.png")}


.sec02 .drag-drop_wrapper .cont_box {width: calc(600 / 640 * 100vw);}
.sec02 .drag-drop_wrapper .cont_box .cont_intro {width: 100%; height: calc(699 / 640 * 100vw); background-image: url("../images/sec02_tab_intro.png"); background-size: cover; position: absolute; z-index: 20;}
.sec02 .drag-drop_wrapper .cont_box .cont_intro button {width: calc(322 / 640 * 100vw); height: calc(88 / 640 * 100vw); position: absolute; bottom: calc(39 / 640 * 100vw); left: 50%; margin-left: calc(-161 / 640 * 100vw);}
.sec02 .drag-drop_wrapper .cont_box .list_box {width: 100%; height: 100%; display: none;}
/*.sec02 .drag-drop_wrapper .cont_box .list_box.on {visibility: visible; opacity: 1;}*/
.sec02 .drag-drop_wrapper .cont_box .list_item {width: calc(600 / 640 * 100vw); height: calc(869 / 640 * 100vw); opacity: 0; visibility: hidden; position: absolute; transition: all ease .3s;}
.sec02 .drag-drop_wrapper .cont_box .list_item.on {opacity: 1; visibility: visible;}


.sec02 .drag-drop_wrapper .list_item .drag-drop_box {width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; position: relative;}
.sec02 .drag-drop_wrapper .cont_item_01 .drag-drop_box {background-image: url("../images/sec02_tab01_bg.png");}
.sec02 .drag-drop_wrapper .cont_item_02 .drag-drop_box {background-image: url("../images/sec02_tab02_bg.png");}
.sec02 .drag-drop_wrapper .cont_item_03 .drag-drop_box {background-image: url("../images/sec02_tab03_bg.png");}



.sec02 .drag-drop_box .drag_box {position: absolute; bottom: 0; width: 100%; height: 100%;}
.sec02 .drag-drop_box .drag_box ul {display: flex; justify-content: space-around; position: absolute; bottom: calc(25 / 640 * 100vw); width: 100%; flex-wrap: wrap;}
.sec02 .drag-drop_wrapper .cont_box .list_item .drag_item {width: calc(125 / 640 * 100vw); height: calc(125 / 640 * 100vw); z-index: 10; background-repeat: no-repeat; background-size: cover;}

/*.sec02 .drag-drop_wrapper .cont_box .cont_item_02 { height: calc(869 / 640 * 100vw);}*/
.sec02 .drag-drop_wrapper .cont_box .cont_item_02 .drag-drop_box .drag_box ul {justify-content: center;}
.sec02 .drag-drop_wrapper .cont_box .cont_item_02 .drag-drop_box .drag_box ul .drag_list {margin: 0 calc(20 / 640 * 100vw); }

.sec02 .drag-drop_box .drop_item {width: calc(155 / 640 * 100vw); height: calc(155 / 640 * 100vw); position: absolute; background-size: cover;}

.sec02 .drag-drop_wrapper .cont_item_01 .drag_list_01 .drag_item {background-image: url("../images/sec02_tab01_item01.png");}
.sec02 .drag-drop_wrapper .cont_item_01 .drag_list_02 .drag_item {background-image: url("../images/sec02_tab01_item02.png");}
.sec02 .drag-drop_wrapper .cont_item_01 .drag_list_03 .drag_item {background-image: url("../images/sec02_tab01_item03.png");}
.sec02 .drag-drop_wrapper .cont_item_01 .drag_list_04 .drag_item {background-image: url("../images/sec02_tab01_item04.png");}

.sec02 .drag-drop_wrapper .cont_item_01 .drop_item_01 {left: calc(37 / 640 * 100vw); top: calc(262 / 640 * 100vw); }
.sec02 .drag-drop_wrapper .cont_item_01 .drop_item_02 {left: calc(220 / 640 * 100vw); top: calc(477 / 640 * 100vw);}
.sec02 .drag-drop_wrapper .cont_item_01 .drop_item_03 {left: calc(408 / 640 * 100vw); top: calc(420 / 640 * 100vw);}
.sec02 .drag-drop_wrapper .cont_item_01 .drop_item_04 {left: calc(399 / 640 * 100vw); top: calc(141 / 640 * 100vw); }

.sec02 .drag-drop_wrapper .cont_item_02 .drag_list_01 .drag_item {background-image: url("../images/sec02_tab02_item01.png");}
.sec02 .drag-drop_wrapper .cont_item_02 .drag_list_02 .drag_item {background-image: url("../images/sec02_tab02_item02.png");}
.sec02 .drag-drop_wrapper .cont_item_02 .drag_list_03 .drag_item {background-image: url("../images/sec02_tab02_item03.png");}
.sec02 .drag-drop_wrapper .cont_item_02 .drag_list_04 .drag_item {background-image: url("../images/sec02_tab02_item04.png");}
.sec02 .drag-drop_wrapper .cont_item_02 .drag_list_05 .drag_item {background-image: url("../images/sec02_tab02_item05.png");}

.sec02 .drag-drop_wrapper .cont_item_02 .drop_item_01 {left: calc(74 / 640 * 100vw); top: calc(109 / 640 * 100vw); }
.sec02 .drag-drop_wrapper .cont_item_02 .drop_item_02 {left: calc(218 / 640 * 100vw); top: calc(19 / 640 * 100vw);}
.sec02 .drag-drop_wrapper .cont_item_02 .drop_item_03 {left: calc(437 / 640 * 100vw); top: calc(255 / 640 * 100vw);}
.sec02 .drag-drop_wrapper .cont_item_02 .drop_item_04 {left: calc(231 / 640 * 100vw); top: calc(268 / 640 * 100vw); }
.sec02 .drag-drop_wrapper .cont_item_02 .drop_item_05 {left: calc(41 / 640 * 100vw); top: calc(357 / 640 * 100vw); }

.sec02 .drag-drop_wrapper .cont_item_03 .drag_list_01 .drag_item {background-image: url("../images/sec02_tab03_item01.png");}
.sec02 .drag-drop_wrapper .cont_item_03 .drag_list_02 .drag_item {background-image: url("../images/sec02_tab03_item02.png");}
.sec02 .drag-drop_wrapper .cont_item_03 .drag_list_03 .drag_item {background-image: url("../images/sec02_tab03_item03.png");}
.sec02 .drag-drop_wrapper .cont_item_03 .drag_list_04 .drag_item {background-image: url("../images/sec02_tab03_item04.png");}

.sec02 .drag-drop_wrapper .cont_item_03 .drop_item_01 {left: calc(86 / 640 * 100vw); top: calc(166 / 640 * 100vw); }
.sec02 .drag-drop_wrapper .cont_item_03 .drop_item_02 {left: calc(47 / 640 * 100vw); top: calc(384 / 640 * 100vw);}
.sec02 .drag-drop_wrapper .cont_item_03 .drop_item_03 {left: calc(279 / 640 * 100vw); top: calc(378 / 640 * 100vw);}
.sec02 .drag-drop_wrapper .cont_item_03 .drop_item_04 {left: calc(436 / 640 * 100vw); top: calc(315 / 640 * 100vw); }


.sec03 .wrap {position: relative;}
.sec03 .step_box { padding-top: calc(1176 / 640 * 100vw);}
.sec03 .step_box .step { width: 100%; padding-left: calc(105 / 640 * 100vw); box-sizing: border-box; background-size: cover !important;}
.sec03 .step_box .step01 { height: calc(298 / 640 * 100vw); background: url("../images/sec03_step01_bg.png") no-repeat scroll center;}
.sec03 .step_box .step02 { height: calc(1086 / 640 * 100vw); background: url("../images/sec03_step02_bg.png") no-repeat scroll center;}
.sec03 .step_box .step03 { height: calc(603 / 640 * 100vw); background: url("../images/sec03_step03_bg.png") no-repeat scroll center;}
.sec03 .bottom_btn {bottom: calc(-610 / 640 * 100vw); }
.sec03 .bottom_btn button { /*margin: 0 calc(5 / 640 * 100vw); */ }
.sec03 .bottom_btn .kakao_share { width: calc(207 / 640 * 100vw); }
.sec03 .bottom_btn .card_download { width: calc(189 / 640 * 100vw); }
.sec03 .bottom_btn .copylink { width: calc(170 / 640 * 100vw); }

.sec03 .btn_box { bottom: calc(156 / 640 * 100vw); }
.sec03 .btn_box .btn_item {display: inline-block; width: calc(451 / 640 * 100vw); height: calc(106 / 640 * 100vw); background-image: url("../images/sec03_btn_win.png"); background-repeat: no-repeat; background-position: center; background-size: cover;}
.sec03 .btn_box button.active .btn_item {background-image: url("../images/sec03_btn_win.png");}
.sec03 .count { position: absolute; bottom: calc(90 / 640 * 100vw); right: calc(265 / 640 * 100vw); color: #f46b19; font-weight: bold; font-size: calc(28 / 640 * 100vw); box-sizing: border-box; letter-spacing: -0.05em;}

.sec03 .select_card_list {position: absolute; top: calc(1605 / 640 * 100vw); padding: 0 calc(5 / 640 * 100vw);}
.sec03 .select_card_list .list_box {display: flex; flex-wrap: wrap; justify-content: space-between;}
.sec03 .select_card_list .list_item {font-size: 0; width: calc(278 / 640 * 100vw); height: calc(347 / 640 * 100vw); margin-bottom: calc(19 / 640 * 100vw);}
.sec03 .select_card_list .list_item .card_item { width: calc(278 / 640 * 100vw); height: calc(347 / 640 * 100vw); border: calc(5 / 640 * 100vw) solid white; border-radius: calc(20 / 640 * 100vw); background-size: calc(279 / 640 * 100vw) calc(348 / 640 * 100vw); background-position: center; background-repeat: no-repeat; display: inline-block; box-sizing: border-box; box-shadow: calc(2 / 640 * 100vw) calc(2 / 640 * 100vw) calc(5 / 640 * 100vw) calc(2 / 640 * 100vw) rgba(0, 0, 0, .2)}
.sec03 .select_card_list .list_item input {appearance: none; opacity: 0; visibility: hidden;}
.sec03 .select_card_list .list_item input:checked ~ .card_item {border: calc(5 / 640 * 100vw) solid #f46b19;}

.sec03 .select_card_list .list_item .card_01 { background-image: url("../images/sec03_card_item_01.png")}
.sec03 .select_card_list .list_item .card_02 { background-image: url("../images/sec03_card_item_02.png")}
.sec03 .select_card_list .list_item .card_03 { background-image: url("../images/sec03_card_item_03.png")}
.sec03 .select_card_list .list_item .card_04 { background-image: url("../images/sec03_card_item_04.png")}
.sec03 .select_card_list .list_item .card_05 { background-image: url("../images/sec03_card_item_05.png")}
.sec03 .select_card_list .list_item .card_06 { background-image: url("../images/sec03_card_item_06.png")}
.sec03 .select_card_list .list_item .card_07 { background-image: url("../images/sec03_card_item_07.png")}
.sec03 .select_card_list .list_item .card_08 { background-image: url("../images/sec03_card_item_08.png")}
.sec03 .select_card_list .list_item .card_09 { background-image: url("../images/sec03_card_item_09.png")}
.sec03 .select_card_list .list_item .card_10 { background-image: url("../images/sec03_card_item_10.png")}
.sec03 .select_card_list .list_item .card_11 { background-image: url("../images/sec03_card_item_11.png")}
.sec03 .select_card_list .list_item .card_12 { background-image: url("../images/sec03_card_item_12.png")}
.sec03 .select_card_list .list_item .card_13 { background-image: url("../images/sec03_card_item_13.png")}
.sec03 .select_card_list .list_item .card_14 { background-image: url("../images/sec03_card_item_14.png")}
.sec03 .select_card_list .list_item .card_15 { background-image: url("../images/sec03_card_item_15.png")}
.sec03 .select_card_list .list_item .card_16 { background-image: url("../images/sec03_card_item_16.png")}

.sec03 .select_card_result .list_box {position: absolute; width: calc(360 / 640 * 100vw); top: calc(4880 / 640 * 100vw); left: calc(-10 / 640 * 100vw); right: 0; margin: auto; box-sizing: border-box;}
.sec03 .select_card_result .list_box .list_item {font-family: "NanumSquareRound", sans-serif; font-size: calc(18 / 640 * 100vw); font-weight: 600; letter-spacing: -0.05em; line-height: 2; display: flex; align-items: center;}
.sec03 .select_card_result .list_box .list_item:before {content: ""; display: inline-block; width: calc(28 / 640 * 100vw); height: calc(28 / 640 * 100vw); background: url("../images/check_box_checked.png") no-repeat scroll center; background-size: cover; margin-right: calc(10 / 640 * 100vw);}
.sec03 .select_card_result .text_box {text-align: center; position: absolute; bottom: calc(380 / 640 * 100vw); width: calc(360 / 640 * 100vw); margin: auto; letter-spacing: -0.05em; padding-right: calc(20 / 640 * 100vw); box-sizing: border-box; display: none;  right: 0; left: 0;}
.sec03 .select_card_result .text_box.on {display: block;}
.sec03 .select_card_result .text_box .result_calc_box {font-size: calc(22 / 640 * 100vw); font-weight: bold; font-family: "NanumSquareRound", sans-serif}
.sec03 .select_card_result .text_box .result_calc_box .result_calc {font-size: calc(22 / 640 * 100vw); color: #1537e1;}
.sec03 .select_card_result .text_box .nick_name_box {margin-top: calc(15 / 640 * 100vw);}
.sec03 .select_card_result .text_box .nick_name_box input {border: calc(2 / 640 * 100vw) solid #c3c3c3; width: calc(257 / 640 * 100vw); height: calc(40 / 640 * 100vw); border-radius: calc(10 / 640 * 100vw); text-align: center; background-image: url("../images/nick_name_placeholder.png"); background-size: calc(129 / 640 * 100vw) calc(29 / 640 * 100vw); background-position: center; background-repeat: no-repeat; font-size: calc(18 / 640 * 100vw);}
.sec03 .select_card_result .text_box .nick_name_box input:valid,
.sec03 .select_card_result .text_box .nick_name_box input:focus {background: none;}



/* 카드 폰트 공통 스타일*/
.card_preview_box .card_preview_item .add_greeting_item {font-size: calc(24 / 640 * 100vw); font-weight: bold; padding-top: calc(20 / 640 * 100vw);}
.card_preview_box .card_preview_item .add_text_area_item { padding-top: calc(15 / 640 * 100vw); word-break: break-all; line-height: 1;}
.card_preview_box .card_preview_item .add_nick-name_item {font-size: calc(12 / 640 * 100vw); padding-top: calc(20 / 640 * 100vw); opacity: .8;}
/*.card_preview_box .card_preview_wrap {padding-left: calc(25 / 640 * 100vw);}*/

/* card 1 */
.card_preview_box .card_type_01 .card_preview_wrap {padding-left: calc(200 / 640 * 100vw); padding-right: calc(20 / 640 * 100vw);}
.card_preview_box .card_type_01 .add_greeting_item { text-align: center; padding-top: calc(25 / 640 * 100vw);;}
.card_preview_box .card_type_01 .add_text_area_item { text-align: center;}
.card_preview_box .card_type_01 .add_nick-name_item { text-align: center;}

/* card 2 */
.card_preview_box .card_type_02 .add_greeting_item { text-align: center; padding-top: calc(35 / 640 * 100vw);}
.card_preview_box .card_type_02 .add_text_area_item { text-align: center; width: 50%; margin: auto; padding-top: calc(15 / 640 * 100vw);}
.card_preview_box .card_type_02 .add_nick-name_item { text-align: center; padding-top: calc(20 / 640 * 100vw);}

/* card 3 */
.card_preview_box .card_type_03 .add_greeting_item { text-align: center; padding-top: calc(30 / 640 * 100vw);}
.card_preview_box .card_type_03 .add_text_area_item { text-align: center; width: 50%; margin: auto; padding-top: calc(20 / 640 * 100vw);}
.card_preview_box .card_type_03 .add_nick-name_item { text-align: center; padding-top: calc(30 / 640 * 100vw);}

/* card 4 */
.card_preview_box .card_type_04 .card_preview_wrap {padding-left: calc(50 / 640 * 100vw); padding-right: calc(220 / 640 * 100vw);}
.card_preview_box .card_type_04 .add_greeting_item { text-align: left; padding-top: calc(30 / 640 * 100vw);}
.card_preview_box .card_type_04 .add_text_area_item { text-align: left; padding-top: calc(15 / 640 * 100vw);}
.card_preview_box .card_type_04 .add_nick-name_item { text-align: center; padding-top: calc(25 / 640 * 100vw);}


/* sec04 */
.sec04 .wrap { position: relative; }
.sec04 .count_card {position: absolute; display: inline-block; font-size: calc(47 / 640 * 100vw); font-weight: bold; color: #37ae6f; top: calc(38 / 640 * 100vw); left: calc(195 / 640 * 100vw); letter-spacing: -0.05em;}
.sec04 .join_list_box { width: 100%; overflow: hidden; margin: auto;}
.sec04 .join_card_list {margin-top: calc(55 / 640 * 100vw); padding: 0 calc(20 / 640 * 100vw);}
.sec04 .join_card_list ul { display: flex; flex-wrap: wrap; -ms-flex-wrap: wrap; justify-content: space-between;}
.sec04 .join_card_list .join_card_item {width: calc(261 / 640 * 100vw); margin-bottom: calc(35 / 640 * 100vw);}
.sec04 .join_card_list .join_card_bg {width: calc(261 / 640 * 100vw); height: calc(324 / 640 * 100vw); background-size: cover; background-repeat: no-repeat; box-sizing: border-box; border-radius: calc(10 / 640 * 100vw);}
.sec04 .join_card_list .join_card_info {display: flex; justify-content: space-between; align-items: baseline; font-size: calc(16 / 640 * 100vw); margin-top: calc(13 / 640 * 100vw);}
.sec04 .join_card_list .join_card_info .nick-name strong {font-size: calc(20 / 640 * 100vw);}
.sec04 .join_card_list .join_card_info .date {opacity: .4;}
/*.sec04 .swiper-pagination-wrap { position: relative; height: 21px; display: flex;}*/
/*.sec04 .swiper-pagination-wrap .swiper-button-prev,*/
/*.sec04 .swiper-pagination-wrap .swiper-button-next { position: relative;}*/
/*.sec04 .swiper-pagination-bullet {background: none; width: auto; height: auto;}*/
.sec04 .join_list_pagination { width: calc(529 / 640 * 100vw);  margin: auto;}
.sec04 .join_list_pagination .swiper-slide {opacity: .4; width: auto !important; margin: 0 calc(12 / 640 * 100vw);}
.sec04 .join_list_pagination .swiper-slide.current {opacity: 1; border-bottom: calc(2 / 640 * 100vw) solid #000; font-weight: bold; padding-bottom: 2px;}
/*.sec04 .join_list_pagination .swiper-slide.swiper-slide-thumb-active:after {content: ''; display: block; width: 100%; height: 1px; background: #000;}*/
.sec04 .join_list_pagination { position: relative; height: calc(21 / 640 * 100vw); display: flex; justify-content: center; line-height: calc(24 / 640 * 100vw); margin-top: calc(45 / 640 * 100vw);}
.sec04 .join_list_pagination .swiper-button-prev,
.sec04 .join_list_pagination .swiper-button-next { position: relative;}
.sec04 .join_list_pagination .swiper-button-prev { left: calc(5 / 640 * 100vw);}
.sec04 .join_list_pagination .swiper-button-next { right: calc(5 / 640 * 100vw); }
.sec04 .join_list_pagination .swiper-button-prev:after,
.sec04 .join_list_pagination .swiper-button-next:after { font-size: calc(18 / 640 * 100vw); color: #333;}
.sec04 .join_list_pagination .swiper-wrapper {padding: 0 calc(10 / 640 * 100vw); width: auto; font-size: calc(24 / 640 * 100vw);}



.sec04 .join_card_list .join_card_item .select_card_result {padding: calc(95 / 640 * 100vw) calc(25 / 640 * 100vw) 0;}
.sec04 .join_card_list .join_card_item .select_card_result .list_box .list_item {font-size: calc(11 / 640 * 100vw); line-height: 2; font-family: "NanumSquareRound", sans-serif; letter-spacing: -0.05em; display: flex; align-items: center;}
.sec04 .join_card_list .join_card_item .select_card_result .list_box .list_item:before {content: "";display: inline-block; width: calc(12 / 640 * 100vw); height: calc(12 / 640 * 100vw); background: url(../images/check_box_checked.png) no-repeat scroll center; background-size: cover; margin-right: calc(5 / 640 * 100vw); vertical-align: middle;}
.sec04 .join_card_list .join_card_item .select_card_result .text_box {text-align: center; letter-spacing: -0.05em; box-sizing: border-box; margin-top: calc(15 / 640 * 100vw); line-height: 1.5;}
.sec04 .join_card_list .join_card_item .select_card_result .text_box .result_calc_box {font-size: calc(11 / 640 * 100vw); font-weight: bold; font-family: "NanumSquareRound", sans-serif}
.sec04 .join_card_list .join_card_item .select_card_result .text_box .result_calc_box .result_calc {font-size: calc(11 / 640 * 100vw); color: #1537e1;}
.sec04 .join_card_list .join_card_item .select_card_result .text_box .nick_name_box {margin-top: calc(15 / 640 * 100vw); font-size: calc(11 / 640 * 100vw);}

.result{ position: fixed;top: 50%; left: 50%; right: 0; width: calc(609 / 640 * 100vw); height: calc(756 / 640 * 100vw); transform: translate3d(-50%, -50%, 0); z-index: 1001;}
.result .select_card_result { width: 100%; height: 100%; background-size: cover;}
.result .select_card_result ul{padding: calc(230 / 640 * 100vw) calc(70 / 640 * 100vw) 0;}
.result .select_card_result .list_box .list_item {font-size: calc(24 / 640 * 100vw); line-height: 2; font-family: "NanumSquareRound", sans-serif; letter-spacing: -0.05em; display: flex; align-items: center;}
.result .select_card_result .list_box .list_item:before {content: "";display: inline-block; width: calc(26 / 640 * 100vw); height: calc(27 / 640 * 100vw); background: url(../images/check_box_checked.png) no-repeat scroll center; background-size: cover; margin-right: calc(10 / 640 * 100vw); vertical-align: middle;}
.result .select_card_result .text_box {text-align: center; letter-spacing: -0.05em; box-sizing: border-box; margin-top: calc(35 / 640 * 100vw); line-height: 1.5;}
.result .select_card_result .text_box .result_calc_box {font-size: calc(24 / 640 * 100vw); font-weight: bold; font-family: "NanumSquareRound", sans-serif}
.result .select_card_result .text_box .result_calc_box .result_calc {font-size: calc(26 / 640 * 100vw); color: #1537e1;}
.result .select_card_result .text_box .nick_name_box {margin-top: calc(15 / 640 * 100vw); font-size: calc(11 / 640 * 100vw);}

.result .close_btn {position: absolute; width: calc(46 / 640 * 100vw); height: calc(46 / 640 * 100vw); display: inline-block; top: calc(-80 / 640 * 100vw); left: 0; right: 0; margin: auto;}
.result .close_btn button {width: 100%; height: 100%; display: inline-block; background-image: url("../images/close_btn.png"); background-size: cover;}

.e_count { position:absolute; left:0; right:0; bottom:64px; text-align:center; }
.e_count .box { display:inline-block; padding:0 140px; background:#fff; height:64px; line-height:64px; border-radius:32px; font-family: "NanumSquareRound"; font-size:22px; color:#222; letter-spacing:-1px; }
.e_count .box span { display:inline-block; vertical-align:middle; margin:-1px 10px 0 0; font-size:36px; font-weight:800; color:#5f864d; }
.e_count .box b { font-weight:800; }


.sec01 .exp { position:absolute; top:0; left:1px; right:1px; }
.sec01 .exp .r_tx { position:absolute; bottom:486px; left:49px; width:135px; height:132px; background:url(../images/rc_tx_ic.png); }
.sec01 .exp .r_tx .ov { position:absolute; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/rc_tx.png); text-indent:-9999px; }
@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 15s linear infinite;
  animation: rotating 15s linear infinite;
}

.sec00 .con {width: 100%; height: 100%;}
.sec00 .btn_box {width: 100%; height: calc(2.134375 * 166px); max-height: calc(166 / 640 * 100vw); position: absolute; bottom: calc(2.134375 * 54px); text-align: center;}
.sec00 .btn_box .btn_item {display: inline-block; position: absolute; margin: auto; right: 0; left: 0;}
.sec00 .btn_box .btn_item a { display: block; width: 100%; height: 100%; }
.sec00 .btn_box .btn_01 { width: calc(2.134375 * 503px); max-width: calc(503 / 640 * 100vw); height: calc(2.134375 * 75px); max-height: calc(75 / 640 * 100vw); top: 0;}
.sec00 .btn_box .btn_02 { width: calc(2.134375 * 459px); max-width: calc(459 / 640 * 100vw); height: calc(2.134375 * 75px); max-height: calc(75 / 640 * 100vw);  bottom: 0;}

.sec01 .step01 { position:absolute; top:747px; left:50px; right:50px; padding-left:110px; background:url(../images/sec01_step01.png) no-repeat 0 0; height:414px; }
.sec01 .step01 h3 { padding-top:22px; font-family: 'yg-jalnan'; font-size:36px; line-height:100%; color:#106a30; font-weight:normal; margin-bottom:63px; }
.sec01 h3 span { position:absolute; top:0; left:0; visibility:hidden; }
.sec01 .step01 dl { margin-bottom:40px; }
.sec01 .step01 dl dt { position:absolute; top:0; left:0; display:none; }
.sec01 .step01 dl dd ul { margin:0 -7px; }
.sec01 .step01 dl dd ul:after { content:''; clear:both; display:block; height:0; visibility:hidden; }
.sec01 .step01 dl dd li { float:left; }
.sec01 .step01 dl dd li label { display:block; height:76px; line-height:76px; border:2px solid #c7cbce; border-radius:10px; background-color: white; box-sizing: border-box;}
.sec01 .step01 dl dd li input[type="radio"]:checked + label { height:76px; line-height:72px; border:4px solid #e18312; color:#ef7860; font-weight: 800;}
.sec01 .step01 dl dd .s_option li { width:50%; padding: 0 7px; box-sizing: border-box;}
.sec01 .step01 dl dd .a_option li { width:25%; margin-bottom:14px; padding: 0 7px; box-sizing: border-box;}
.sec01 .step01 dl dd .checks { font-size:28px; color:#8f989e; text-align:center; overflow:hidden;}
.sec01 .step01 dl dd .checks input[type="radio"] { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0 }

.sec01 .step02 { position:absolute; top:1221px; left:50px; right:50px; }
.sec01 .step02 h3 { padding-left:116px; font-family: 'yg-jalnan'; font-size:36px; line-height:80px; color:#106a30; font-weight:normal; margin-bottom:39px; background:url(../images/sec01_step02.png) no-repeat 0 0; }
.sec01 .step02 h3 em { font-size:18px; color:#a0a4a7; margin-left:10px; font-family: "NanumSquareRound", sans-serif;}
.sec01 .step02 .guide { position:absolute; top:-9px; right:0; }

.sec01 .step02 .guide2 {position:absolute; bottom:290px; right: 50px; display: none;}
.sec01 .step02 .guide2.on {display: block;}

.sec01 .step02 .selected_card {display:none; position: absolute; overflow:hidden; width:873px; height: 456px; left: 50%; transform: translate3d(-50%, 0, 0); bottom: 100px; background-image: url(../images/selected_bg.png); background-repeat: no-repeat; background-size: cover; background-position: bottom center;}
.sec01 .step02 .selected_card .blind * {display: none !important;}
.sec01 .step02 .selected_card.on {display: block;}
.sec01 .step02 .selected_card .card_wrapper {width: 223px; height: 148px; float: left; background-color: white; font-family: "NanumSquareRound", sans-serif; position: absolute;}
.sec01 .step02 .selected_card .card1 {bottom: 35px; left: 311px;}
.sec01 .step02 .selected_card .card2 {bottom: 100px; left: 39px;}
.sec01 .step02 .selected_card .card3 {bottom: 141px; left: 572px;}
.sec01 .step02 .selected_card .card_wrapper .cate {display: inline-block; line-height: 28px; height: 28px; border: 1px solid #42402e; border-radius: 20px; padding: 2px 20px; font-size: 16px; color: #42402e; font-weight: 400;}
.sec01 .step02 .selected_card .card_wrapper .tx {font-size: 22px; font-family: 'yg-jalnan'; margin-top: 18px; line-height: 28px; color: #106a30; text-align: center;}
.sec01 .step02 .selected_card .card_wrapper .heart {position: absolute; bottom: 0; right: 10px;}

.sec01 .step02 .bt_par { display:block; width:773px; height:100px; line-height:100px; background:#516c5b; border-radius:15px; font-size:40px; font-weight:800; color:#fff; text-align:center; margin:0 auto; }
.sec01 .step02 .bt_par:hover { text-decoration:none; }
.sec01 .b_guide { position:absolute; bottom:68px; left:0; right:0; font-size:16px; color:#666c3b; text-align:center; }
.sec01 .wrap.on .card_flip ul {padding-bottom:633px;}


@keyframes intervalIcon {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.current .hand-icon {display: inline-block; width: calc(2.134375 * 47px); max-width: calc(47 / 640 * 100vw); height: calc(2.134375 * 45px); max-height: calc(45 / 640 * 100vw); background: url(../images/hand-icon.png) no-repeat scroll center; background-size: cover; position: absolute; bottom: calc(-10 / 640 * 100vw); right: calc(10 / 640 * 100vw); animation: .75s intervalIcon infinite alternate; transition: none; z-index: 10; display: none;}
.hand-icon2 {display: inline-block; width: calc(2.134375 * 47px); max-width: calc(47 / 640 * 100vw); height: calc(2.134375 * 45px); max-height: calc(45 / 640 * 100vw); transform: scale(.7); background: url(../images/hand-icon.png) no-repeat scroll center; background-size: cover; position: absolute; bottom: calc(15 / 640 * 100vw); right: calc(40 / 640 * 100vw); animation: .75s intervalIcon infinite alternate; transition: none; z-index: 10;}
.card_flip:after { content:''; clear:both; display:block; height:0; visibility:hidden; }
.card_flip li { float:left; }
.card_flip li .card { margin: 0 calc( 2.134375 * 10px); perspective:1000px; }
.card_flip li .in { position:relative; width:100%; height:100%; text-align:center; transition:transform 0.8s; transform-style:preserve-3d; }
.card_flip li .ft,
.card_flip li .bk { position:absolute; top:0; left:0; right:0; bottom:0; backface-visibility:hidden; overflow:hidden; }
.card_flip li .bk { transform:rotateY(180deg); }
.card_flip li .con { position:absolute; top:0; left:0; right:0; bottom:50px; }
.card_flip li .on { transform:rotateY(-180deg); }

.page_flip li { float: left;}
.page_flip li .con { position:absolute; width: 100%; height: 100%;}

.page_flip li .in { position:relative; width: calc(2.134375 * 289px); max-width: calc(289 / 640 * 100vw); height: calc(2.134375 * 572px); max-height: calc(572 / 640 * 100vw); perspective: 1000px; transition:transform 0.8s; transform-style:preserve-3d; }
.page_flip li .page { position: absolute; width: calc(2.134375 * 289px); max-width: calc(289 / 640 * 100vw); height: calc(2.134375 * 572px); max-height: calc(572 / 640 * 100vw); top:0; left:0; right:0; bottom:0; backface-visibility:hidden; overflow:hidden; }
.page_flip li .cover { z-index: 5; border-radius: 30px; overflow:hidden; background-color: #113b81; display: none}
.page_flip li .ft { z-index: 10; }
.page_flip li .ft { display: block; }
.page_flip li .bk { z-index: 0; transform:rotateX(180deg); }
.page_flip li .on  { transform:rotateX(-180deg); }
/*.page_flip li .bk {  backface-visibility: visible;}*/
.page_flip li .on .ft button { display: none !important; }

@keyframes ft {
  60% {
    opacity: 0;
  }
  100% {
    z-index: 5;
    opacity: 0;
    transform: perspective(5000px) rotateY(-180deg);
  }
}
@keyframes cover {
  50% {
    opacity: 1;
  }
  100% {
    z-index: 10;
    opacity: 0;
    transform: perspective(5000px) rotateY(-180deg);
  }
}

.sec04 .btn_box {margin: auto; display: flex; justify-content: center; width: calc(2.134375 * 448px); max-width: calc(448 / 640 * 100vw); position:absolute; bottom: calc(2.134375 * 65px); left: 0; right: 0; }
.sec04 .btn_box button img {width: calc(2.134375 * 448px); max-width: calc(448 / 640 * 100vw); height: calc(2.134375 * 86px); max-height: calc(86 / 640 * 100vw);}
.sec04 .btn_box .hand-icon {}
.video .box { position:absolute; top: calc(2.134375 * 400px); left:50%; width: calc(2.134375 * 554px); max-width: calc(554/ 640 * 100vw); height: calc(2.134375 * 312px); max-height: calc(312 / 640 * 100vw); margin-left: calc(2.134375 * -276px); overflow:hidden; }
.video .box iframe {width: 100%; height: 100%;}
/*.video .box .bt_play { position:absolute; top:50%; left:50%; width:90px; height:90px; margin:-45px 0 0 -45px; text-indent:-9999px; background:url(../images/bt_video_play.png) no-repeat 0 0/100%; }*/

.f_sns { padding: calc(2.134375 * 30px) 0; background:#f3f3f3; }
.f_sns h3 { margin-bottom:3.125vw; font-family: 'NanumSquare'; font-size: calc(2.134375 * 24px); color:#222; text-align:center; letter-spacing:-0.2vw; }
.f_sns ul { position:relative; text-align:center; }
.f_sns li { display:inline-block; width: calc(2.134375 * 68px); max-width: calc(68 / 640 * 100vw); height: calc(2.134375 * 68px); max-height: calc(68 / 640 * 100vw); margin:0 0.6vw; }
.f_sns li a { display:block; width: 100%; height: 100%; text-indent:-9999px; text-align:left; background-size:100% 100%; }
.f_sns li.s01 a { background-image:url(../images/f_sns01.png); }
.f_sns li.s02 a { background-image:url(../images/f_sns02.png); }
.f_sns li.s03 a { background-image:url(../images/f_sns03.png); }
.f_sns li.s04 a { background-image:url(../images/f_sns04.png); }
.f_sns li.s05 a { background-image:url(../images/f_sns05.png); }
.f_sns li.s06 a { background-image:url(../images/f_sns06.png); }

#footer { position:relative; background:#e0e0e0; padding:7vw 4vw; font-family: 'Noto Sans KR'; text-align:center; font-size: calc(2.134375 * 20px); line-height:130%; letter-spacing:-0.2vw; color:#3f3f3f; }
#footer .count { color:#111; margin-bottom:5vw; }
#footer .count dl { display:inline-block; margin:0 2vw; font-family: 'NanumSquare'; font-size: calc(2.134375 * 24px); line-height:100%; letter-spacing:-0.1vw; }
#footer .count dl dt { display:inline-block; border-right:1px solid #787878; padding-right:1.8vw; margin-right:1vw; }
#footer .count dl dd { display:inline-block; color:#000; font-weight:800; }
#footer .bt_pc { display:inline-block; margin:0 auto 5vw; width: calc(2.134375 * 255px); max-width: calc(255 / 640 * 100vw); height: calc(2.134375 * 60px); max-height: calc(60 / 640 * 100vw); line-height: calc(2.134375 * 60px); background:#3f3f3f; color:#fff; font-size: calc(2.134375 * 30px); text-align:center; }
#footer .e_mail { color:#969696; margin-bottom:1.8vw; }
#footer .e_mail a { color:#969696; }

.pu_detail { display:block !important; visibility:hidden; z-index:-1; top: calc(60/640*100vw); bottom:0; padding:calc(30/640*100vw) calc(50/640*100vw); background:#fff; border-radius:calc(10/640*100vw); }
.pu_detail.on { visibility:visible; z-index:98; }

.event_con {background-color: #E4F6DE; padding: 5px 0; box-sizing: border-box; height: 40vh; overflow: hidden; margin-bottom: 20px;}
.event_con .bottom_banner {width:100%; height:0; padding-top: calc(132/640*100vw); background-position: center; background-repeat: no-repeat; background-size: contain;}
.event_con .mCSB_inside > .mCSB_container { padding: calc(15/640*100vw) calc(20/640*100vw);}
.pu_detail .slider .slide_thumb { width: 100%; overflow: hidden;}
.pu_detail .slider .slide_thumb .inner_thumb { display: flex; justify-content: space-between; margin-bottom: calc(15/640*100vw)}
.pu_detail .slider .slide_thumb .thumb-img {width: calc(160/640*100vw); height: calc(85/640*100vw); box-sizing: border-box; display: flex; justify-content: space-between}
.pu_detail .slider .slide_thumb .thumb-img.on {border: 3px solid #e18312;}
.pu_detail .slider .slide_thumb .thumb-img:last-child {margin-bottom: 0;}
.pu_detail .slider .slide_thumb .thumb-img a {display: inline-block; width: 100%; height: 100%; background-size: cover;}

.event_bottom_btns a {width: calc(265/640*100vw); height: calc(80/640*100vw); display: flex; justify-content: space-between;}
.swiper-container {height: calc(360/640*100vw);}
/*.pu_detail h3:after { content:''; position:absolute; bottom:0; left:0; width:calc(50/640*100vw); height:calc(2/640*100vw); background:#ef7860; }*/
.pu_detail .con { position:absolute; top:calc(180/640*100vw); left:calc(30/640*100vw); right:calc(30/640*100vw); bottom:calc(30/640*100vw); overflow:hidden; overflow-y:auto; }
.pu_detail .t_tx { font-size:calc(20/640*100vw); line-height:calc(24/640*100vw); color:#666; margin-bottom:calc(15/640*100vw); }
.pu_detail .slider { margin-bottom:calc(30/640*100vw); }
.pu_detail .slider .swiper-slide { height:calc(300/640*100vw); background-position:center; background-size:cover; }
.pu_detail .slider .swiper-button-prev,
.pu_detail .slider .swiper-button-next { position:absolute; top:50%; width:calc(33/640*100vw); height:calc(65/640*100vw); margin-top:calc(-32/640*100vw); opacity:0.4; -webkit-opacity:0.4; background-size:100%; }
.pu_detail .slider .swiper-button-prev { left:calc(20/640*100vw); background-image:url(../images/pu_detail_slider_bt_prev.png); }
.pu_detail .slider .swiper-button-next { right:calc(20/640*100vw); background-image:url(../images/pu_detail_slider_bt_next.png); }
.pu_detail .slider .swiper-pagination { left:auto; bottom:calc(10/640*100vw); right:calc(10/640*100vw); width:calc(35/640*100vw); padding-right:calc(5/640*100vw); height:calc(40/640*100vw); line-height:calc(40/640*100vw); text-align:center; font-size:calc(12/640*100vw); font-style:italic; letter-spacing:calc(-1.5/640*100vw); color:#fff; background:rgba(0,0,0,0.45); border-radius:100%; }
.pu_detail .d_tx { margin-bottom:calc(20/640*100vw); }
.pu_detail .d_tx h4 { font-size:calc(20/640*100vw); color:#666; letter-spacing:calc(-1/640*100vw); font-weight:800; line-height:100%; margin-bottom:calc(10/640*100vw); }
.pu_detail .d_tx .box { background:#f5f3da; overflow:hidden; }
.pu_detail .d_tx .box li { padding-left:calc(15/640*100vw); font-size:calc(18/640*100vw); line-height:calc(24/640*100vw); color:#666; margin-bottom:calc(10/640*100vw); }
.pu_detail .d_tx .box li:last-child { margin:0; }
.pu_detail .d_tx .box li:before { content:''; position:absolute; top:calc(11/640*100vw); left:0; width:calc(5/640*100vw); height:calc(5/640*100vw); background:#424a50; }
/*.pu_detail .btns { margin-bottom:calc(30/640*100vw); }*/
.pu_detail .btns:after { content:''; clear:both; display:block; height:0; visibility:hidden; }
/*.pu_detail .btns a { width:calc(50% - 5/640*100vw); }*/
.pu_detail .btns a img { width:100%; }
.pu_detail .btns a:nth-child(1) { float:left; }
.pu_detail .btns a:nth-child(2) { float:right; }

.pu_event_info.on {position: fixed; z-index: 1000; display: block; }
.pu_event_info { display: none; top:calc(100/640*100vw); left:0; right:0; bottom:0; padding:calc(30/640*100vw); background:#fff; border-radius:calc(10/640*100vw); font-family: "NanumSquareRound"; }
.pu_event_info h3 { font-family: "NanumSquareRound"; font-size:calc(32/640*100vw); color:#424a50; font-weight:800; line-height:100%; margin-bottom:calc(25/640*100vw); }
.pu_event_info .line { border-bottom:calc1(/640*100vw) solid #e6e6d7; height:calc(5/640*100vw); margin-bottom:calc(10/640*100vw); }
.pu_event_info dl {position: relative;}
.pu_event_info dt { font-size:calc(18/640*100vw); color:#808487; font-weight:700; }
.pu_event_info .ty01 { height:calc(44/640*100vw); padding-left:calc(170/640*100vw); margin-bottom:calc(20/640*100vw); }
.pu_event_info .ty01 dt { position:absolute; top:0; left:0; width:calc(185/640*100vw); line-height:calc(44/640*100vw); }
.pu_event_info .ty01 dd input { width:100%; height:calc(44/640*100vw); line-height:calc(44/640*100vw); background:#fff; border:calc(1/640*100vw) solid #deded4; padding:0 calc(10/640*100vw);-webkit-appearance: none;-webkit-border-radius: 0; font-size: calc(18 / 640 * 100vw);}
.pu_event_info .ty01 dd.num:after { content:''; clear:both; display:block; height:0; visibility:hidden; }
.pu_event_info .ty01 dd.num input { text-align:center; float:left; width:calc(34% - 11/640*100vw); margin-left:calc(11/640*100vw); }
.pu_event_info .ty01 dd.num input:first-child { width:32%; margin:0; }
.pu_event_info .ty02 { margin-bottom:calc(30/640*100vw); }
.pu_event_info .ty02 dt { color:#424a50; line-height:100%; margin-bottom:calc(15/640*100vw); }
.pu_event_info .ty02 dt span { position:absolute; bottom:calc(-4/640*100vw); right:calc(-4/640*100vw); font-size:calc(18/640*100vw); color:#333; top:0; }
.pu_event_info .ty02 dt span input { margin:0; }
.pu_event_info .ty02 dd { background:#f0f4f4; padding:calc(10/640*100vw) calc(15/640*100vw); }
.pu_event_info .btns a { float:left; width:calc(50% - 9/640*100vw); display:block; line-height:calc(96/640*100vw); border:calc(2/640*100vw) solid #424a50; background:#424a50; text-align:center; font-size:calc(30/640*100vw); color:#fff; font-weight:700; }
.pu_event_info .btns a.c02 { background:#fff; color:#424a50; float:right; }
.pu_event_info .btns a:hover { text-decoration:none; }
.pu_event_info table { width:100%; color:#333; line-height:calc(18/640*100vw); }
.pu_event_info table th { font-size:calc(15/640*100vw); padding:calc(10/640*100vw); vertical-align:top; }
.pu_event_info table td { font-size:calc(13/640*100vw); padding:calc(10/640*100vw); }
.pu_event_info .checks input[type="checkbox"] { position:absolute; top:0; left:0; opacity:0; -webkit-opacity:0; }
.pu_event_info .checks input[type="checkbox"] + label:after { content:' '; display:inline-block; width:calc(33/640*100vw); height:calc(29/640*100vw); line-height:calc(29/640*100vw); margin:calc(-3/640*100vw) 0 0 calc(10/640*100vw); text-align:center; vertical-align:middle; background-image:url(../images/check.png); background-size:100%; }
.pu_event_info .checks input[type="checkbox"]:checked + label:after { background-image:url(../images/check_on.png); }

.pu_event_done { position:fixed; top:50%; bottom:auto; transform:translateY(-50%); -webkit-transform:translateY(-50%); background:#000; display: none;}
.pu_event_done img { width:100%; }
.pu_event_done .btn a { display:block; line-height:calc(65/640*100vw); background:#222; text-align:center; font-family: 'Noto Sans KR'; font-size:calc(28/640*100vw); color:#fff; font-weight:800; letter-spacing:calc(10/640*100vw); }
.pu .bt_close {position: absolute;width: calc(46/640*100vw);height: calc(46/640*100vw); background: url(../images/close_btn.png) no-repeat 0 0; background-size: 100% 100%; text-indent: -9999px; z-index: 999; top: calc(-60/640*100vw); left: 50%; transform: translate3d(-50%, 0, 0);}

.pu_event_1, .pu_event_2, .pu_event_3 { width: 90%; background:#dfdfdf; position: fixed;top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); z-index: 1001;}
.pu_event_1 img, .pu_event_2 img, .pu_event_3 img { width: 100%; }
.pu_event_1 .btn a, .pu_event_2 .btn a, .pu_event_3 .btn a, .pu_alert .btn a { display:block; height: calc(65 / 640 * 100vw); line-height: calc(65 / 640 * 100vw); text-align:center; font-family: "NanumSquareRound"; font-size: calc(30 / 640 * 100vw); color:#000; font-weight:700; letter-spacing:10px; }


@media (max-width: 1366px) {
  .wrapper {padding-bottom: 15.625vw;}


  .sec04 .btn_box { bottom: calc(65 / 640 * 100vw); }
  .video .box { top: calc(400 / 640 * 100vw); margin-left: calc(-276/ 640 * 100vw);}

  .f_sns {padding: calc(30 / 640 * 100vw) 0; }
  .f_sns h3 {font-size: calc(24 / 640 * 100vw);}
  #footer {font-size: calc(20 / 640 * 100vw);}
  #footer .count dl {font-size: calc(24 / 640 * 100vw);}
  #footer .bt_pc {line-height: calc(60 / 640 * 100vw); font-size: calc(30 / 640 * 100vw);}

  .layer_wrapper .layer_inner .layer_cont .drop_box {top:  calc(150 / 640 * 100vw)}
  .layer_wrapper .layer_inner .layer_cont .drop_box .drop_item_01 { left: calc(2 / 640 * 100vw); top: calc(-6 / 640 * 100vw);}
  .layer_wrapper .layer_inner .layer_cont .drop_box .drop_item_02 { top: calc(30 / 640 * 100vw); left: calc(5 / 640 * 100vw);}
  .layer_wrapper .layer_inner .layer_cont .drop_box .drop_item_03 { left: calc(8 / 640 * 100vw); top: calc(-6 / 640 * 100vw);}
  .layer_wrapper .layer_inner .close_btn {line-height: calc(60 / 640 * 100vw); }
  .layer_wrapper .layer_inner .close_btn button { font-size: calc(20 / 640 * 100vw); }

}