/*
Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard.
https://github.com/orioncactus/pretendard

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
*/




@font-face {
  font-family: "Campton";
	font-weight: 800;

  src: url('../fonts/CamptonBlack/font.woff2') format('woff2'), url('../fonts/CamptonBlack/font.woff') format('woff');
}

@font-face {
  font-family: "Campton";
	font-weight: 700;

  src: url('../fonts/CamptonBold/font.woff2') format('woff2'), url('../fonts/CamptonBold/font.woff') format('woff');
}


@font-face {
  font-family: "Campton";
	font-weight: 600;

  src: url('../fonts/CamptonMedium/font.woff2') format('woff2'), url('../fonts/CamptonMedium/font.woff') format('woff');
}

@font-face {
  font-family: "Campton";
	font-weight: 400;

  src: url('../fonts/CamptonBook/font.woff2') format('woff2'), url('../fonts/CamptonBook/font.woff') format('woff');
}

@font-face {
  font-family: "Campton";
	font-weight: 300;

  src: url('../fonts/CamptonExtraLight/font.woff2') format('woff2'), url('../fonts/CamptonExtraLight/font.woff') format('woff');
}




@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: local('Pretendard Black'), url('../fonts/woff2-subset/Pretendard-Black.subset.woff2') format('woff2'), url('../fonts/woff-subset/Pretendard-Black.subset.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: local('Pretendard ExtraBold'), url('../fonts/woff2-subset/Pretendard-ExtraBold.subset.woff2') format('woff2'), url('../fonts/woff-subset/Pretendard-ExtraBold.subset.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), url('../fonts/woff2-subset/Pretendard-Bold.subset.woff2') format('woff2'), url('../fonts/woff-subset/Pretendard-Bold.subset.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url('../fonts/woff2-subset/Pretendard-SemiBold.subset.woff2') format('woff2'), url('../fonts/woff-subset/Pretendard-SemiBold.subset.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url('../fonts/woff2-subset/Pretendard-Medium.subset.woff2') format('woff2'), url('../fonts/woff-subset/Pretendard-Medium.subset.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url('../fonts/woff2-subset/Pretendard-Regular.subset.woff2') format('woff2'), url('../fonts/woff-subset/Pretendard-Regular.subset.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: local('Pretendard Light'), url('../fonts/woff2-subset/Pretendard-Light.subset.woff2') format('woff2'), url('../fonts/woff-subset/Pretendard-Light.subset.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), url('../fonts/woff2-subset/Pretendard-ExtraLight.subset.woff2') format('woff2'), url('../fonts/woff-subset/Pretendard-ExtraLight.subset.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: local('Pretendard Thin'), url('../fonts/woff2-subset/Pretendard-Thin.subset.woff2') format('woff2'), url('../fonts/woff-subset/Pretendard-Thin.subset.woff') format('woff');
}


*{font-family: 'Campton','Pretendard', sans-serif;font-weight: 600;}
::-moz-selection {background: #000;color: #fff;}
::selection {background: #000;color: #fff;}
body,html,section{ background:#f5f5f5; overflow: auto; overflow-x: hidden;margin: 0px;  word-break:keep-all; overflow-wrap:break-word;font-family:'Campton','Pretendard', sans-serif;}
p{margin-block-end: 0px; margin-block-start: 0px; margin-right: 0px;}
header {position: fixed; top: 0; z-index: 999; transition: top 0.2s ease-in-out; width: 100%;}
h1,h2{color:#374553;}
h3{color:#374553;}
b1,b2,c1{color:#374553;}
li, ul{text-decoration: none; list-style-type:none; margin: 0px;padding-inline-start:0px;}
a{text-decoration: none; color:#FFF;}
h1,c1{font-weight: 700;}
h2,b1,b2,c2,c3{font-weight: 400;}
h1{font-size:44px; line-height:58px; margin-block-end:32px; margin-block-start: 0px;}
h2{font-size:18px; line-height:26px; margin-block-end:10px; margin-block-start: 0px; }
h3{font-size:24px; line-height:36px; margin-block-start: 8px;margin-block-end: 8px;}
h4{font-size:20px; line-height:32px; margin-block-start: 8px;margin-block-end: 40px;}
b1{font-size:16px;line-height:26px;}
b2{font-size:14px;line-height:22px;color:#646f7c; margin-block-start: 8px;}
c1{font-size:14px;line-height:22px;}
c2{font-size:14px;line-height:22px; color:#646f7c; margin-block-start: 8px;}




#flip-card img {width: 77%;}
.flip-card-3D-wrapper {  width: 100%;  height: 100%;  position: relative;  -o-perspective: 900px;  -webkit-perspective: 900px;  -ms-perspective: 900px;  perspective: 900px;  margin: 0 auto;}
#flip-card {  width: 100%;  height: 100%;  text-align: center;  -o-transition: all 1s ease-in-out;  -webkit-transition: all 1s ease-in-out;  -ms-transition: all 1s ease-in-out;  transition: all 1s ease-in-out;  -o-transform-style: preserve-3d;  -webkit-transform-style: preserve-3d;  -ms-transform-style: preserve-3d;  transform-style: preserve-3d;}
.do-flip { -o-transform: rotateY(-180deg);-webkit-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg);  transform: rotateY(-180deg);}
#flip-card-btn-turn-to-back, #flip-card-btn-turn-to-front {position: absolute;  top: 20px;	right: 80px;	height: 300px;	width: 58%;  background: #fff0;  cursor: pointer;  visibility: hidden;  padding: 0;  color: #fff0;  border: 0px solid #fff0;}
#flip-card .flip-card-front, #flip-card .flip-card-back{width: 100%;  height: 100%;  position: absolute;  -o-backface-visibility: hidden;  -webkit-backface-visibility: hidden;  -ms-backface-visibility: hidden;  backface-visibility: hidden;  z-index: 2;  -webkit-box-shadow: 5px 6px 32px 2px rgba(133,133,133,0.71);  -moz-box-shadow: 5px 6px 32px 2px rgba(133,133,133,0.71);  box-shadow: 5px 6px 32px 2px rgba(133,133,133,0.71);}
#flip-card .flip-card-front {	background: #fff;    border:0px solid #fff0;}
#flip-card .flip-card-back {    background: lightblue;    border: 0px solid #fff0;    -o-transform: rotateY(180deg);    -webkit-transform: rotateY(180deg);    -ms-transform: rotateY(180deg);    transform: rotateY(180deg);}
#flip-card .flip-card-front p, #flip-card .flip-card-back p {  color: #fff0;  display: block;  position: absolute;	    padding: 0px;  top: 40%;  width: 100%;}
.arrow{ position: absolute;padding-left: 0px;}
.button_container {position: relative; top: -28px; left: 80%; height: 3px; width: 22px;cursor: pointer; z-index: 100; transition: opacity 0.25s ease;}
.button_container:hover {opacity: 0.7;}
.button_container.active .top {transform: translateY(6px) translateX(0) rotate(45deg);background: #FFF;}
.button_container.active .middle {opacity: 0;background: #FFF;}
.button_container.active .bottom {transform: translateY(-10px) translateX(0) rotate(-45deg);background: #FFF;}
.button_container span {background: #969696;border: none;height: 2px; width: 100%;position: absolute;top: 0;left: 0;transition: all 0.35s ease;cursor: pointer;}
.button_container span:nth-of-type(2) {top: 8px;}
.button_container span:nth-of-type(3) {top: 16px;}
.overlay {position: fixed; background: #000000;  top: 0;  left: 0;  width: 100%; height: 0%; opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s, height 0.25s; overflow: hidden;}
.overlay.open {opacity: 0.95; visibility: visible;  height: 100%;}
.overlay nav {color: #fff;position: relative;height: 78%; top: 42%;transform: translateY(-50%);font-size: 24px;text-align: left;padding: 24px;}
.overlay ul {list-style: none; padding: 0; margin: 0 auto;position: relative;height: 100%;}
.overlay ul a {    font-weight: 500;display: block;position: relative;color: #FFF;text-decoration: none;overflow: hidden;padding-bottom: 22px;}
.overlay ul hr {border: solid 0.7px #c4c4c4;margin-bottom: 50px;margin-top: 8px;}
.nav-up {top: -60px;}
.list{box-shadow: 3px 5px 15px rgb(55 55 55 / 20%);    border-radius: 4px;    height: 44px;    width: 82%;    margin: 0 auto;    margin-top: 20px;    margin-bottom: 10px;}
.guidebook_mo { margin: 0 auto;  text-align: left;  padding: 0px;  border-radius: 20px;}
.guidebook_mo_inner{padding: 20px 22px 0px 22px;}
.guidebook_mo{background-color: #fff; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);}
.guidebook_mo hr{ display: block; border: #646f7c 0 none; border-top: #646f7c 1px dotted; height: 1px;}
.guidebook_mo .txt{display:block;}
.guidebook_mo .text1{color: #848a92c9; font-size:12.5px;margin-bottom: 12px;}
.guidebook_mo .title{color: #041516;font-weight:700;font-size:19px;line-height:29px;margin-bottom: 10px;}
.guidebook_mo .add{color: #646f7c;font-size:14px;line-height:20px;margin-bottom: 20px;}
.guidebook_mo .text2{ margin-bottom: 0px;}
.guidebook_mo .list p{ color: #041516;padding-top: 4px;}
.guidebook_mo .list{ padding-top: 2px; font-size:16px; font-weight: 600;}
.guidebook_mo .title img{ height: 14px;margin-right: 4px;}
.guidebook_mo .title p{color: #041516;padding-bottom: 10px;}
.guidebook_mo .sub p{line-height: 20px;margin-right: 0px;    padding-top: 12px; padding-bottom: 12px;border-top: 1px dashed #e9ebee; border-bottom: 1px dashed #e9ebee;}
.guidebook_mo .sub_n{position: relative; top:-3px;font-size: 10px;font-weight: 400; padding-right: 8px;}
.guidebook_mo img{width: 100%;}
.guidebook_mo figure.effect_arrow2 {  width: 580px; height: 800px;}
.guidebook_mo figure.effect_arrow2 img{height: 12px;}
.guidebook_mo figure.effect_arrow2 figcaption {text-align: left; width: 580px; height: 800px;position: relative;  top: -855px;}
.guidebook_mo figure.effect_arrow2 p { font-weight: 500;box-shadow: 3px 3px 13px rgb(0 0 0 / 11%); background: rgb(244 244 244);display: flex;  position: relative;  padding: 12px 20px;  top: 740px;  border-radius: 100px;  margin: 30px
 355px 0px 90px; background: rgba(255, 255, 255, .9);  color: #2f3238;  transition: opacity .35s, transform .35s;	transform: translate3d(500px, 0, 0);}
.guidebook_mo figure.effect_arrow2 p:first-child {transition-delay: .15s;}
.guidebook_mo figure.effect_arrow2:hover p:first-child {transition-delay: 0s;}
.guidebook_mo figure.effect_arrow2:hover p {opacity: 1;	transform: translate3d(0, 0, 0);}
.txt .code{ margin-left: 2px;    width: 2px;    height: 52px;    background: #041516;    margin-bottom: 2px;}
.txt .code2{margin-left: 7px;    width: 5px;    height: 52px;    background: #041516;    margin-bottom: 8px;}
.txt .code3{margin-left: 1px;width: 1px;    height: 52px;    background: #041516;    margin-bottom: 3px;}
.txt .code4{ margin-left: 7px;width: 3px; height: 52px; background: #041516; margin-bottom: 3px;}
.code_group{    display: inline-flex;  margin: 0px;padding-top: 0px;justify-content: flex-end;}
.number{font-weight: 500;margin-top:0px;color: #000000b0;  font-size: 12px;}
.number_group{    margin-top: -8px;margin-right: 17px;padding-top: 0px;
display: flex; justify-content: space-between;}
#main_mo .popup_mo .title_mo{margin-top: 20px;margin-bottom: 40px;}
#main_mo .popup_mo .film2{margin-top: 100px; height: 560px;  width: 98%;color: #c0c0c0; filter: drop-shadow(0 0 6px rgb(0 0 0 / 40%));position: relative;z-index: 997;overflow:hidden;margin:0 auto;margin-bottom: 40px; border-radius: 20px;  }
#main_mo .popup_mo .film2 img{width: 40%;    position: absolute;    top: 88%;    left: 30%;}
#main_mo .popup_mo .film2 video {width: 100%;height: 100%; object-fit: cover;}
#main_mo .popup_mo .guidebook_mo .btn{	font-weight: 500;	    border: 1px solid #f8f8f8;	    text-align: left;	    border-radius: 100px;	    box-shadow: 5px 6px 11px 0px rgb(0 0 0 / 12%);	    width: 32px;	    position: relative;  		left: 80%;			top: -359px;	    padding-top: 7px;	    padding-left: 18px;	    font-size: 16px;	    height: 28px;	    background-color: #fff;	    color: #191a1c;	    display: flex;	    justify-content: space-between;}
#main_mo .popup_mo .guidebook_mo .btn img{height: 10px;    height: 10px;    margin-top: 0px;    width: auto;    filter: none;}
#main_mo .popup_mo .poster .btn{	font-weight: 500;	border: 1px solid #c9ff57;	background-color: #adfe02;	    text-align: left;	    border-radius: 100px;	    box-shadow: 5px 4px 12px 1px rgb(0 0 0 / 33%);	    width: 32px;	    position: relative;			left: 74%;	    top: -432px;	    padding-top: 7px;	    padding-left: 18px;	    font-size: 16px;	    height: 28px;	    color: #191a1c;	    display: flex;	    justify-content: space-between;}
#main_mo .popup_mo .poster .btn img{height: 10px; margin-top: 0px; width: auto;filter:none;}
#main_mo .text { border-bottom: solid 1px #d9d9d9;background:#f5f5f5; width: 100%;font-size:14px; line-height:24px; position: fixed; z-index: 99;padding:22px 24px 6px 24px;}
#main_mo .text img{position: relative; top: -4px;}
#main_mo .popup_mo {font-weight: 500;line-height: 22px;font-size: 14px;text-align: center;padding:90px 24px 40px 24px;}
#main_mo .popup_mo .film{height: 389px;  width: 290px;color: #c0c0c0; filter: drop-shadow(0 0 6px rgb(0 0 0 / 40%));position: relative;z-index: 997;overflow:hidden;margin:0 auto;margin-bottom: 40px; border-radius: 20px;  }
#main_mo .popup_mo .film img{padding-bottom: 0px;width: 100%; }
#main_mo .popup_mo .info{padding: 20px;margin-bottom: 0px;filter: drop-shadow(0 0 6px rgb(0 0 0 / 40%));}
#main_mo .popup_mo .info p{margin-block-end: 10px;}
#main_mo .popup_mo .info img {border-radius: 20px;  width: 100%; object-fit:cover;}
#main_mo .popup_mo .info2{color: #fff;position: inherit;background-color: #0097ff;border-radius: 20px;padding:40px 50px 30px 30px;margin:40px 20px 40px 20px; filter: drop-shadow(0 0 15px rgb(0 0 0 / 30%));}
#main_mo .popup_mo .info2 p{margin-block-end: 10px;font-size: 15px; line-height: 25px;}
#main_mo .popup_mo .info2 img {border-radius: 20px;  width: 100%; object-fit:cover;}
#main_mo .popup_mo .info2 .title{font-size: 24px; line-height: 25px;font-weight: 700;}
#main_mo .popup_mo .poster{ border-radius: 10px; margin-bottom: -10px;}
#main_mo .popup_mo .poster img {margin-top: 40px;
filter: drop-shadow(0 0 6px rgb(0 0 0 / 40%));border-radius: 20px; object-fit:fill; }
#main_mo .popup_mo .guidebook{  margin-bottom: 0px; filter: drop-shadow(0 0 6px rgb(0 0 0 / 14%));}
#main_mo .popup_mo .guidebook img {border-radius: 20px;  width: 100%; object-fit:cover;}
#main_mo .popup_mo .about{text-align: left; margin: 30px; padding: 50px;background-color: #000000;clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);}
#main_mo .popup_mo .archive{margin: 20px;background: #FFFFFF; padding: 40px;box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);border-radius: 8px;}
#main_pc {display: none;}
#mo_footer {    margin-top: 490px;position: relative;z-index: 999;background: none; padding: 20px 0px 60px 24px;border-top: 1px solid #d9d9d9;font-size: 12px; line-height: 24px;color:#909090;}




@media (min-width: 768px) {
#main_mo .popup_mo {padding: 120px 180px 40px 180px;}
.button_container {position: relative; top: -28px; left: 90%; height: 3px; width: 22px;cursor: pointer; z-index: 100; transition: opacity 0.25s ease;}
.button_container:hover {opacity: 0.7;}
.button_container.active .top {transform: translateY(6px) translateX(0) rotate(45deg);background: #FFF;}
.button_container.active .middle {opacity: 0;background: #FFF;}
.button_container.active .bottom {transform: translateY(-10px) translateX(0) rotate(-45deg);background: #FFF;}
.button_container span {background: #969696;border: none;height: 2px; width: 100%;position: absolute;top: 0;left: 0;transition: all 0.35s ease;cursor: pointer;}
.button_container span:nth-of-type(2) {top: 8px;}
.button_container span:nth-of-type(3) {top: 16px;}
.overlay {position: fixed; background: #000000;  top: 0;  left: 0;  width: 100%; height: 0%; opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s, height 0.25s; overflow: hidden;}
.overlay.open {opacity: 0.9; visibility: visible;  height: 100%;}
.overlay nav {position: relative;height: 78%; top: 45%;transform: translateY(-50%);font-size: 24px;text-align: left;padding: 24px;}
.overlay ul {list-style: none; padding: 0; margin: 0 auto;position: relative;height: 100%;}
.overlay ul a {display: block;position: relative;color: #FFF;text-decoration: none;overflow: hidden;padding-bottom: 20px;}
.overlay ul hr {border: solid 1px #c4c4c4;margin-bottom: 20px;margin-top: 20px;}
header {position: fixed; top: 0; z-index: 999; transition: top 0.2s ease-in-out; width: 100%;}
.nav-up {top: -60px;}
#flip-card img{width: 40%;}
.list{margin-bottom: 40px;}
#main_mo .popup_mo .poster .btn{      top: -539px;}
#main_mo .popup_mo .guidebook_mo .btn {    top: -372px;}


}

@media (min-width: 820px) {
  #main_mo .popup_mo .poster .btn{top: -600px;}
  #main_mo .popup_mo .guidebook_mo .btn {top: -380px;}


}


@media (min-width: 1280px) {
	#flip-card img{width: 90%;}
body,html,section{ background:#f5f5f5; overflow: hidden; margin: 0px;  word-break:keep-all; overflow-wrap:break-word;font-family:'Campton','Pretendard', sans-serif; }
h1{font-size:58px; line-height:78px;}
h2{font-size:24px; line-height:38px; font-weight:normal; }
h3{font-size:30px; line-height:46px; margin-block-start: 8px;}
b1{font-size:18px; line-height:30px;}
b2{font-size:18px;line-height:28px;}
c1{font-size:16px;line-height:26px;}
c2{font-size:14px;line-height:24px;}
#mo_footer { display: none;}
#main_mo{display: none;}
#main_pc{display: block; background-size:cover;background-position: center; height: 100vh;text-align:left;}
#main_pc .text {font-size:14px; line-height:24px; position: fixed; z-index: 99;padding-top: 20px; padding: 20px 24px 0px 24px;}
#main_pc .popup { position: absolute;padding:0px}
#footer { position: initial;justify-content: center;display: flex; background:none;padding: 34px; border-top: 0px solid #041516; font-size:18px;line-height:24px; color: #041516;z-index: 999;}
#footer .txt01{font-weight: 700;display: flex; font-size:18px;line-height:20px; color: #041516;}
#footer .txt02{font-weight: 600;padding-left: 100px;display: flex; font-size:14px;line-height:20px; color: #041516;}
.txt03{margin-left: 24px;position: absolute;  top: 62%; padding-top: 300px; font-size:12px;line-height:20px; color: #041516;}
.logo img{position: absolute;margin: 0 auto;  padding-left: 20%; padding-top: 15%; opacity: 0.1;}
.popup {position: fixed;box-shadow: 4px 3px 20px rgb(0 0 0 / 56%); overflow: hidden; border: 0; color: #000; z-index: 3;}
.popup-inner {position: relative;z-index: 1;}
.list_pc {width: 15%;top:7%; left:70%; border-radius: 10px;}
.list_pc img{display: block;}
.film_pc {    top: 10%;    left: 40%;    width: 880px;    height: 480px;    border-radius: 20px;}
.guidebook_pc {padding: 24px;top: 60%;left: 40%; width:450px; height: 286px; border-radius: 20px;}
.poster_pc {border-radius: 20px;    top: 5%;    left: 5%;    width: 530px;    height: 738px;}
.about_pc {box-shadow: 4px 3px 20px rgb(0 0 0 / 0%);background: #fff0;top: 50%; right: 2%; width: 300px;   height: 600px;  border: 0;font-size:16px;line-height:28px;border-radius:20px; }
.archive_pc {top: 80%; right: 55%; width: 300px; height: 100px;    border-radius: 20px;}
.arrow{position: absolute;padding-left: 78px;width: 20px;top: 13px;}
.arrow2{position: absolute; padding-left: 95px;width: 20px;top: 13px;}
.wrap_pc video { width: 100%;cursor: pointer;}
.about_pc_inner{text-align: left;}
.archive_pc_inner{background-color: #cfcfcf;padding: 24px;text-align: center; padding: 30px 20px;}
.about_pc .about_pc_inner {text-align: center;}
.about_pc .about_pc_inner p {padding: 0px 30px 4px 30px;}
.guidebook_pc_inner{padding: 0px;}
.guidebook_pc{background-color: #fff;margin: 30px;padding: 24px;box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);}
.guidebook_pc hr{ display: block; border: #646f7c 0 none; border-top: #646f7c 1px dotted; height: 1px;}
.guidebook_pc .text1{color: #a4a8ac; font-size:14px; margin-bottom: 12px;}
.guidebook_pc .title{color: #041516;font-weight:700;font-size:22px;line-height:28px;margin-bottom: 10px;}
.guidebook_pc .add{color: #646f7c;font-size:14px;line-height:20px;margin-bottom: 20px;}
.guidebook_pc .text2{ margin-bottom: 0px;}
figure.effect_arrow {  width: 580px; height: 800px;}
figure.effect_arrow figcaption {text-align: left; width: 580px; height: 800px;position: relative;  top: -855px;}
figure.effect_arrow p { font-weight: 600;display: flex;  position: relative;  padding: 12px 20px;  top: 750px;  border-radius: 100px;  margin: 24px 120px 0px 310px;background: rgba(255, 255, 255, .9);  color: #2f3238;  transition: opacity .35s, transform .35s;	transform: translate3d(500px, 0, 0);}
figure.effect_arrow p:first-child {transition-delay: .15s;}
figure.effect_arrow:hover p:first-child {transition-delay: 0s;}
figure.effect_arrow:hover p {opacity: 1;	transform: translate3d(0, 0, 0);}
figure.effect_arrow2 {  width: 580px; height: 800px;}
figure.effect_arrow2 figcaption {text-align: left; width: 580px; height: 800px;position: relative;  top: -855px;}
figure.effect_arrow2 p { font-weight: 500;box-shadow: 3px 3px 13px rgb(0 0 0 / 11%); background: rgb(244 244 244);display: flex;  position: relative;  padding: 12px 20px;  top: 750px;  border-radius: 100px;  margin: 30px 305px 0px 140px;background: rgba(255, 255, 255, .9);  color: #2f3238;  transition: opacity .35s, transform .35s;	transform: translate3d(500px, 0, 0);}
figure.effect_arrow2 p:first-child {transition-delay: .15s;}
figure.effect_arrow2:hover p:first-child {transition-delay: 0s;}
figure.effect_arrow2:hover p {opacity: 1;	transform: translate3d(0, 0, 0);}
figure.effect_arrow3 {  width: 580px; height: 800px;}
figure.effect_arrow3 figcaption {text-align: left; width: 580px; height: 800px;position: relative;  top: -855px;}
figure.effect_arrow3 p { font-weight: 500;box-shadow: 3px 3px 13px rgb(0 0 0 / 11%); background: rgb(244 244 244);display: flex;  position: relative;  padding: 12px 20px;  top: 750px;  border-radius: 100px;  margin: 30px 305px
 0px 140px;background: rgba(255, 255, 255, .9);  color: #2f3238;  transition: opacity .35s, transform .35s;	transform: translate3d(500px, 0, 0);}
figure.effect_arrow3 p:first-child {transition-delay: .15s;}
figure.effect_arrow3:hover p:first-child {transition-delay: 0s;}
figure.effect_arrow3:hover p {opacity: 1;	transform: translate3d(0, 0, 0);}


.guidebook_pc2 {padding: 100px;top: 40%;left: 40%; width:450px; height: 368px; border-radius: 20px;}
.guidebook_pc2_inner{padding:24px 11px 0px 33px;}
.guidebook_pc2{background-color: #fff;margin: 30px;padding: 24px;box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);}
.guidebook_pc2 hr{ display: block; border: #646f7c 0 none; border-top: #646f7c 1px dotted; height: 1px;}
.guidebook_pc2 .txt{display: flex;}
.guidebook_pc2 .text1{color: #646f7c; font-size:14px; margin-bottom: 12px;}
.guidebook_pc2 .title{color: #041516;font-weight:700;font-size:22px;line-height:28px;margin-bottom: 10px;}
.guidebook_pc2 .add{color: #646f7c;font-size:14px;line-height:20px;margin-bottom: 20px;}
.guidebook_pc2 .text2{ margin-bottom: 0px;}
.guidebook_pc2 .list p{ color: #041516;padding-top: 6px;}
.guidebook_pc2 .list{ padding-top: 8px; font-size:18px; font-weight: 600;}
.guidebook_pc2 .title{line-height: 34px;}
.guidebook_pc2 .title img{ height: 18px;margin-right: 8px;}
.guidebook_pc2 .title p{color: #041516;padding-bottom: 10px;}
.guidebook_pc2 .sub p{line-height: 22px;margin-right: 40px;padding-top: 14px; padding-bottom: 12px; font-weight: 500;border-top: 1px dashed #e9ebee; border-bottom: 1px dashed #e9ebee;}
.guidebook_pc2 .sub_n{position: relative; top:-5px;font-size: 10px;font-weight: 400; padding-right: 8px;}
.guidebook_pc2 img{height: 230px;}
.guidebook_pc2 figure.effect_arrow2 {  width: 560px; height: 800px;}
.guidebook_pc2 figure.effect_arrow2 img{height: 12px;}
.guidebook_pc2 figure.effect_arrow2 figcaption {text-align: left; width: 580px; height: 800px;position: relative;  top: -790px;}
.guidebook_pc2 figure.effect_arrow2 p { font-weight: 600;box-shadow: 3px 3px 13px rgb(0 0 0 / 11%); background: rgb(244 244 244);display: flex;  position: relative;  padding: 12px 20px;  top: 670px;  border-radius: 100px;  margin: 30px 337px 0px 110px; background: rgba(255, 255, 255, .9);  color: #2f3238;  transition: opacity .35s, transform .35s;	transform: translate3d(500px, 0, 0);}
.guidebook_pc2 figure.effect_arrow2 p:first-child {transition-delay: .15s;}
.guidebook_pc2 figure.effect_arrow2:hover p:first-child {transition-delay: 0s;}
.guidebook_pc2 figure.effect_arrow2:hover p {opacity: 1;	transform: translate3d(0, 0, 0);}
.txt .code{  margin-left: 20px;width: 80px; height: 2px; background: #000;margin-bottom: 2px;}
.txt .code2{  margin-left: 20px;width: 80px; height: 5px; background: #000;margin-bottom: 8px;}
.txt .code3{  margin-left: 20px;width: 80px; height: 1px; background: #000;margin-bottom: 3px;}
.txt .code4{  margin-left: 20px;width: 80px; height: 10px; background: #000;margin-bottom: 3px;}
.code_group{display: block;padding-right: 4px;}
.number{font-weight: 500;    margin-top: 58px;    margin-bottom: 8px;color: #0000006e;  font-size: 12px;}
.number_group{   margin-right: 0px;writing-mode: vertical-rl;transform: rotate(180deg);display: block; }
#flip-card-btn-turn-to-back, #flip-card-btn-turn-to-front {
  position: absolute;
	top: 10px;
	right: 28px;
	    height: 310px;
	    width: 71%;
  background: #fff0;
  cursor: pointer;
  visibility: hidden;
  padding: 0;
  color: #fff0;
  border: 0px solid #fff0;
}


@media (min-width: 1920px) {
	#flip-card img{width: 100%;}
body,html,section{ background:#f5f5f5; overflow: hidden; margin: 0px;  word-break:keep-all; overflow-wrap:break-word;font-family:'Campton','Pretendard', sans-serif; }
h1{font-size:58px; line-height:78px;}
h2{font-size:24px; line-height:38px; font-weight:normal; }
h3{font-size:30px; line-height:46px; margin-block-start: 8px;}
b1{font-size:18px; line-height:30px;}
b2{font-size:18px;line-height:28px;}
c1{font-size:16px;line-height:26px;}
c2{font-size:14px;line-height:24px;}
#mo_footer { display: none;}
#main_mo{display: none;}
#main_pc{display: block; background-size:cover;background-position: center; height: 100vh;text-align:left;}
#main_pc .text {font-size:14px; line-height:24px; position: fixed; z-index: 99;padding-top: 20px; padding: 20px 24px 0px 24px;}
#main_pc .popup { position: absolute;padding:0px}
#footer { position: initial;justify-content: center;display: flex; background:none;padding: 34px; border-top: 0px solid #041516; font-size:18px;line-height:24px; color: #041516;z-index: 999;}
#footer .txt01{font-weight: 700;display: flex; font-size:18px;line-height:20px; color: #041516;}
#footer .txt02{font-weight: 600;padding-left: 100px;display: flex; font-size:14px;line-height:20px; color: #041516;}
.txt03{margin-left: 24px;position: absolute;  top: 62%; padding-top: 300px; font-size:12px;line-height:20px; color: #041516;}
.logo img{position: absolute;margin: 0 auto;  padding-left: 20%; padding-top: 15%; opacity: 0.1;}
.popup {position: fixed;box-shadow: 4px 3px 20px rgb(0 0 0 / 56%); overflow: hidden; border: 0; color: #000; z-index: 3;}
.popup-inner {position: relative;z-index: 1;}
.list_pc {width: 15%;top:7%; left:80%; border-radius: 10px;}
.list_pc img{display: block;}
.film_pc {top:10%; left: 30%;width: 1010px; height: 560px; border-radius: 20px;}
.guidebook_pc {padding: 24px;top: 60%;left: 40%; width:450px; height: 286px; border-radius: 20px;}
.poster_pc {border-radius:20px;top: 3%;left: 2%;width: 580px; height: 800px;}
.about_pc {
box-shadow: 4px 3px 20px rgb(0 0 0 / 0%);
background: #fff0;
top: 50%; right: 2%; width: 300px;   height: 600px;  border: 0;font-size:16px;line-height:28px;border-radius:20px; }
.archive_pc {top: 80%; right: 55%; width: 300px; height: 100px;    border-radius: 20px;}
.arrow{    position: absolute;
    padding-left: 78px;width: 20px;top: 13px;}
    .arrow2{    position: absolute;
        padding-left: 95px;width: 20px;top: 13px;}
.wrap_pc video { width: 100%;cursor: pointer;}
.about_pc_inner{text-align: left;}
.archive_pc_inner{background-color: #cfcfcf;padding: 24px;text-align: center; padding: 30px 20px;}
.about_pc .about_pc_inner {text-align: center;}
.about_pc .about_pc_inner p {padding: 0px 30px 4px 30px;}
.guidebook_pc_inner{padding: 0px;}
.guidebook_pc{background-color: #fff;margin: 30px;padding: 24px;box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);}
.guidebook_pc hr{ display: block; border: #646f7c 0 none; border-top: #646f7c 1px dotted; height: 1px;}
.guidebook_pc .text1{color: #a4a8ac; font-size:14px; margin-bottom: 12px;}
.guidebook_pc .title{color: #041516;font-weight:700;font-size:22px;line-height:28px;margin-bottom: 10px;}
.guidebook_pc .add{color: #646f7c;font-size:14px;line-height:20px;margin-bottom: 20px;}
.guidebook_pc .text2{ margin-bottom: 0px;}
figure.effect_arrow {  width: 580px; height: 800px;}
figure.effect_arrow figcaption {text-align: left; width: 580px; height: 800px;position: relative;  top: -855px;}
figure.effect_arrow p { font-weight: 600;display: flex;  position: relative;  padding: 12px 20px;  top: 750px;  border-radius: 100px;  margin: 24px 70px 0px 360px;background: rgba(255, 255, 255, .9);  color: #2f3238;  transition: opacity .35s, transform .35s;	transform: translate3d(500px, 0, 0);}
figure.effect_arrow p:first-child {transition-delay: .15s;}
figure.effect_arrow:hover p:first-child {transition-delay: 0s;}
figure.effect_arrow:hover p {opacity: 1;	transform: translate3d(0, 0, 0);}

figure.effect_arrow2 {  width: 580px; height: 800px;}
figure.effect_arrow2 figcaption {text-align: left; width: 580px; height: 800px;position: relative;  top: -855px;}
figure.effect_arrow2 p { font-weight: 500;box-shadow: 3px 3px 13px rgb(0 0 0 / 11%); background: rgb(244 244 244);display: flex;  position: relative;  padding: 12px 20px;  top: 750px;  border-radius: 100px;  margin: 30px 305px
 0px 140px;background: rgba(255, 255, 255, .9);  color: #2f3238;  transition: opacity .35s, transform .35s;	transform: translate3d(500px, 0, 0);}
figure.effect_arrow2 p:first-child {transition-delay: .15s;}
figure.effect_arrow2:hover p:first-child {transition-delay: 0s;}
figure.effect_arrow2:hover p {opacity: 1;	transform: translate3d(0, 0, 0);}



figure.effect_arrow3 {  width: 580px; height: 800px;}
figure.effect_arrow3 figcaption {text-align: left; width: 580px; height: 800px;position: relative;  top: -855px;}
figure.effect_arrow3 p { font-weight: 500;box-shadow: 3px 3px 13px rgb(0 0 0 / 11%); background: rgb(244 244 244);display: flex;  position: relative;  padding: 12px 20px;  top: 750px;  border-radius: 100px;  margin: 30px 305px
 0px 140px;background: rgba(255, 255, 255, .9);  color: #2f3238;  transition: opacity .35s, transform .35s;	transform: translate3d(500px, 0, 0);}
figure.effect_arrow3 p:first-child {transition-delay: .15s;}
figure.effect_arrow3:hover p:first-child {transition-delay: 0s;}
figure.effect_arrow3:hover p {opacity: 1;	transform: translate3d(0, 0, 0);}




.guidebook_pc2 {padding: 100px;top: 50%;left: 40%; width:450px; height: 368px; border-radius: 20px;}
.guidebook_pc2_inner{padding:24px 11px 0px 33px;}
.guidebook_pc2{background-color: #fff;margin: 30px;padding: 24px;box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);}
.guidebook_pc2 hr{ display: block; border: #646f7c 0 none; border-top: #646f7c 1px dotted; height: 1px;}
.guidebook_pc2 .txt{display: flex;}

.guidebook_pc2 .text1{color: #646f7c; font-size:14px; margin-bottom: 12px;}
.guidebook_pc2 .title{color: #041516;font-weight:700;font-size:22px;line-height:28px;margin-bottom: 10px;}
.guidebook_pc2 .add{color: #646f7c;font-size:14px;line-height:20px;margin-bottom: 20px;}
.guidebook_pc2 .text2{ margin-bottom: 0px;}
.guidebook_pc2 .list p{ color: #041516;padding-top: 6px;}
.guidebook_pc2 .list{ padding-top: 8px; font-size:18px; font-weight: 600;}

  .guidebook_pc2 .title{line-height: 34px;}
  .guidebook_pc2 .title img{ height: 18px;margin-right: 8px;}

    .guidebook_pc2 .title p{color: #041516;padding-bottom: 10px;}
    .guidebook_pc2 .sub p{line-height: 22px;margin-right: 40px;
    padding-top: 14px; padding-bottom: 12px; font-weight: 500;
    border-top: 1px dashed #e9ebee; border-bottom: 1px dashed #e9ebee;}
.guidebook_pc2 .sub_n{position: relative; top:-5px;font-size: 10px;font-weight: 400; padding-right: 8px;}
.guidebook_pc2 img{height: 230px;}

.guidebook_pc2 figure.effect_arrow2 {  width: 560px; height: 800px;}
.guidebook_pc2 figure.effect_arrow2 img{height: 12px;}
.guidebook_pc2 figure.effect_arrow2 figcaption {text-align: left; width: 580px; height: 800px;position: relative;  top: -790px;}
.guidebook_pc2 figure.effect_arrow2 p { font-weight: 600;box-shadow: 3px 3px 13px rgb(0 0 0 / 11%); background: rgb(244 244 244);display: flex;  position: relative;  padding: 12px 20px;  top: 670px;  border-radius: 100px;  margin: 30px
 337px
 0px
 110px;background: rgba(255, 255, 255, .9);  color: #2f3238;  transition: opacity .35s, transform .35s;	transform: translate3d(500px, 0, 0);}
.guidebook_pc2 figure.effect_arrow2 p:first-child {transition-delay: .15s;}
.guidebook_pc2 figure.effect_arrow2:hover p:first-child {transition-delay: 0s;}
.guidebook_pc2 figure.effect_arrow2:hover p {opacity: 1;	transform: translate3d(0, 0, 0);}
.txt .code{  margin-left: 20px;width: 80px; height: 2px; background: #000;margin-bottom: 2px;}
.txt .code2{  margin-left: 20px;width: 80px; height: 5px; background: #000;margin-bottom: 8px;}
.txt .code3{  margin-left: 20px;width: 80px; height: 1px; background: #000;margin-bottom: 3px;}
.txt .code4{  margin-left: 20px;width: 80px; height: 10px; background: #000;margin-bottom: 3px;}

.code_group{display: block;padding-right: 4px;}

.number{font-weight: 500;
    margin-top: 58px;
    margin-bottom: 8px;
color: #0000006e;  font-size: 12px;}
.number_group{   margin-right: 0px;writing-mode: vertical-rl;transform: rotate(180deg);display: block; }
#flip-card-btn-turn-to-back, #flip-card-btn-turn-to-front {
  position: absolute;
	top: 10px;
	right: 28px;
	    height: 310px;
	    width: 71%;
  background: #fff0;
  cursor: pointer;
  visibility: hidden;
  padding: 0;
  color: #fff0;
  border: 0px solid #fff0;
}

}