/*@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);*/

::-webkit-scrollbar {

display:none;

} 

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,700;0,800;0,900;1,700;1,800;1,900&display=swap');
@font-face {
  font-family: 'Athena';
  src: local('Athena'),
  	   url('../font/Athena-Regular.eot') format('embedded-opentype'),
       url('../font/Athena-Regular.ttf') format('truetype');
  font-weight: 400;
}
@font-face {
    font-family: 'gotham';
    src: url('../font/GOTHAM-BOLD.eot');
    src: local('../font/GOTHAM-BOLD'),
        url('../font/GOTHAM-BOLD.eot?#iefix') format('embedded-opentype'),
        url('../font/GOTHAM-BOLD.woff2') format('woff2'),
        url('../font/GOTHAM-BOLD.woff') format('woff'),
        url('../font/GOTHAM-BOLD.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'gotham';
    src: url('../font/GOTHAM-BOLD.eot');
    src: local('../font/GOTHAM-BOLD'),
        url('../font/GOTHAM-BOLD.eot?#iefix') format('embedded-opentype'),
        url('../font/GOTHAM-BOLD.woff2') format('woff2'),
        url('../font/GOTHAM-BOLD.woff') format('woff'),
        url('../font/GOTHAM-BOLD.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Carisma Inline';
    src: url('../font/CarismaInlineOblique.eot');
    src: local('Carisma Inline Oblique'), local('CarismaInlineOblique'),
        url('../font/CarismaInlineOblique.eot?#iefix') format('embedded-opentype'),
        url('../font/CarismaInlineOblique.woff2') format('woff2'),
        url('../font/CarismaInlineOblique.woff') format('woff'),
        url('../font/CarismaInlineOblique.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
  font-family: 'futura';
  src: local('futura'),
  	   url('../../../font/futura.eot') format('embedded-opentype'),
       url('../../../font/futura.ttf') format('truetype');
/*  font-weight: 400;*/
}


@font-face {
font-family: 'Futura Std';
font-style: normal;
font-weight: 300;
src: local('Futura Std Light'), url('../../font/futura/FuturaStdLight.woff') format('woff');
}

@font-face {
font-family: 'Futura Std Oblique';
font-style: normal;
font-weight: 300;
src: local('Futura Std Light Oblique'), url('../../font/futura/FuturaStdLightOblique.woff') format('woff');
}


@font-face {
font-family: 'Futura Std';
font-style: normal;
font-weight: 400;
src: local('Futura Std Medium'), url('../../font/futura/FuturaStdMedium.woff') format('woff');
}



@font-face {
font-family: 'Futura Std Oblique';
font-style: normal;
font-weight: 400;
src: local('Futura Std Medium Oblique'), url('../../font/futura/FuturaStdMediumOblique.woff') format('woff');
}


@font-face {
font-family: 'Futura Std';
font-style: normal;
font-weight: 600;
src: local('Futura Std Heavy'), url('../../font/futura/FuturaStdHeavy.woff') format('woff');
}


@font-face {
font-family: 'Futura Std Oblique';
font-style: normal;
font-weight: 600;
src: local('Futura Std Heavy Oblique'), url('../../font/futura/FuturaStdHeavyOblique.woff') format('woff');
}


@font-face {
font-family: 'Futura Std';
font-style: normal;
font-weight: 700;
src: local('Futura Std Bold'), url('../../font/futura/FuturaStdBold.woff') format('woff');
}



@font-face {
font-family: 'Futura Std Oblique';
font-style: normal;
font-weight: 700;
src: local('Futura Std Bold Oblique'), url('../../font/futura/FuturaStdBoldOblique.woff') format('woff');
}



@font-face {
font-family: 'Futura Std';
font-style: normal;
font-weight: 900;
src: local('Futura Std Extra Bold'), url('../../font/futura/FuturaStdExtraBold.woff') format('woff');
}


@font-face {
font-family: 'Futura Std Oblique';
font-style: normal;
font-weight: 900;
src: local('Futura Std Extra Bold Oblique'), url('../../font/futura/FuturaStdExtraBoldOblique.woff') format('woff');
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,tbody,tfoot,thead,tr,th,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
body{ line-height:1.5; font-family:'Dotum'; font-size:16px; color:#333; background:#fff;-ms-overflow-style: none; } 
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0;}
ul,ol,li{list-style:none}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
fieldset,img{border:0}
hr{height:0;}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
address,caption,em,var{font-style:normal;font-weight:normal}
a{text-decoration:none;cursor:pointer;color: inherit;}
a[href^="tel"]{font-style:normal}
a:hover,a:active,a:focus{text-decoration:none !important;}
b,strong{font-weight:bold}
dfn{font-style:italic}
img{border:0;vertical-align:top}
pre{overflow:auto}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
table{border-spacing:0;border-collapse:collapse}
td,th{padding:0;}
legend, caption{overflow:hidden;text-indent:-9999999px; height:0 !important; width:0 !important;line-height:0 !important;margin:0;padding:0;}
input{vertical-align:middle;margin:0;padding:0;}
input[type="text"],input[type="password"],input[type="email"]{-webkit-appearance:none;border-radius:0;font-family:'Dotum';}
input:checked[type="checkbox"]{-webkit-appearance:checkbox}
button,input[type="button"],input[type="submit"],input[type="reset"],input[type="file"]{border-radius:0;-webkit-appearance:button;font-family:'Dotum';}
button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}
button{overflow:visible;border:none;cursor:pointer;margin:0;padding:0;}
a,input,button,select{outline:none}
button,select{text-transform:none}
optgroup{font-weight:bold}
textarea{border:1px solid #bcbcbc;overflow:auto;-webkit-appearance:none}
input::-ms-clear{display:none;}

* { scroll-behavior: smooth; box-sizing: border-box; }


body { width: 100%; max-width: 500px; margin: auto; font-family: 'Noto Sans KR', sans-serif; overflow-x: hidden; }

/*body.main { overflow-y: hidden; }*/





.intro_wrap { width: 100%; height: 100%; position: fixed; left: 0; top: -200%;  z-index: 999999999999999; display: flex; justify-content: center; background-color: #fff; animation: intro 1s 3.5s both; }

.intro_box { text-align: center; margin-top: 9rem;}

.intro_bi_box { width: 100px; height: 100px; margin: auto; position: relative; }
.intro_bi_box:before { content:''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background-color: #056b5c; z-index: -1; transform: scale(20) rotate(0deg);
animation: intro_bg 1.2s 0.7s both; 
/*  animation-name: intro_bg, intro_bg2;
  animation-duration: 1.0s, 1.4s;
  animation-delay: 0.55s, 1.6s;
  animation-timing-function: ease, ease;
  animation-fill-mode: both, both;*/

}
.intro_line_box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.intro_line_box>div { position: absolute; background-color: #fff; }
.intro_line01 { width: 100%; height: 3px; left: 0; top: 0; animation: intro_line01 0.4s 1.2s ease-out both; }
.intro_line02 { width: 3px; height: 100%; right: 0; top: 0; animation: intro_line02 0.4s 1.65s ease-out both; }
.intro_line03 { width: 100%; height: 3px; right: 0; bottom: 0; animation: intro_line01 0.4s 1.2s ease-out both; }
.intro_line04 { width: 3px; height: 100%; left: 0; bottom: 0; animation: intro_line02 0.4s 1.65s ease-out both; }


.intro_bi01 { animation: intro_bi01 0.6s 0.2s both; }
.intro_bi02 { position: absolute; left: 0; right: 0; margin: auto; bottom: -43px; animation: intro_bi02 1.0s 1.2s both; }

.intro_line { width: 1px; height: 100px; margin: auto; margin-top: 90px; position: relative; }
.intro_line:after { content:'';	 width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: #fff; animation: intro_line02 1.0s 1.6s both; }
.intro_box h4 { font-size: 20px; line-height: 100%; margin-top: 42px; font-weight: 600; color: #fff; animation: intro_txt 0.8s 2.3s both; }
.intro_logo { margin-top: 12px; animation: intro_txt 0.8s 2.3s both; width: 80%;}



@keyframes intro {
	from { top: 0; }
	to {  }
}
@keyframes intro_bg {
	from { transform: scale(1) rotate(90deg); }
	to {  }
}
@keyframes intro_bg2 {
	from { opacity: 1; }
	to {  }
}
@keyframes intro_line01 {
	from { width: 0; }
	to {  }
}
@keyframes intro_line02 {
	from { height: 0; }
	to {  }
}
@keyframes intro_bi01 {
	from { transform: translateY(-40px); opacity: 0; }
	to {  }
}
@keyframes intro_bi02 {
	from { opacity: 0; }
	to {  }
}
@keyframes intro_txt {
	from { transform: translateY(50px); opacity: 0 }
	to {  }
}


/**/



.all_wrap { width: 100%; margin: auto; height: auto; position: relative; top: 0; overflow: hidden; z-index: 989; background-color: #fff; box-shadow: 0px 0px 10px rgba(0,0,0,0.3); }
.fixWrap{position:fixed;top: 0; left: 0;right: 0; margin: auto; width: 100%; height:calc( 100vh + 165vw); z-index: -5;}

.sec{ width: 100%; max-width: 500px; margin: auto;}
.main_box { width: 100%; height: 100vh; position: relative; background-color: #fff; overflow: hidden; max-width: 500px; margin: auto; }

.screen { mix-blend-mode: screen; }
.multiply { mix-blend-mode: multiply; }

.main_slide_num { position: absolute; left: 92px; top: 0; bottom: 0; margin: auto; height: 13px; line-height: 95%; font-size: 13px; color: #fff; text-align: center; letter-spacing: 0; }

.swiper1 { width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; margin-bottom: 0; }
.main_img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.main_img.img01 { background: url("../img/main_img.jpg") center no-repeat; background-size: cover; }
.main_img.img02 { background: url(../img/main_img2.jpg) center no-repeat; background-size: cover; }
.main_bt_wrap { width: 250px; height: 32px; position: absolute; margin: 0 auto; left: 0; right: 0;  bottom:10vw; z-index:5; }

.main_txt_box { position: absolute; margin: auto; left: 0; right: 0; margin: auto; top:40vw; text-align: center; color: #fff; }
.main_txt_box h4 { font-size: 2rem; line-height: 100%; font-weight: 100; text-align: right; width:80%; left:0; right:0; margin: auto; opacity: 0; margin-top: -10px; }
.main_txt_box h4 b { font-weight: 700; }
.main_txt_box h2 { font-size: 2rem; line-height: 110%; font-weight: 100; letter-spacing: -1px; text-align: right; width:80%; left:0; right:0; margin: auto; margin-top: -10px; opacity: 0;}
.main_txt_box h2 b { font-weight: 700; }
.main_txt_box p {font-size: .8rem; margin-top: 1.5rem; line-height: 200%; opacity: 0; /*transform: translateY(-20px);*/}
.main_line {width:1px; height: 0rem; background-color: #fff; margin: 0 auto; margin-top: 2rem;}
.main_logo { margin-top: 0; opacity: 0; }

.main_txt { position: absolute; left: 0; right: 0; bottom:0; z-index: 3; }

/*.swiper1 .swiper-slide.swiper-slide-active .main_img { animation: main_img 1.6s 0s both; }
.swiper1 .swiper-slide.swiper-slide-active .main_txt_box h4 { animation: main_txt 1.0s 0.3s both; }
.swiper1 .swiper-slide.swiper-slide-active .main_txt_box h2 { animation: main_txt 1.0s 0.7s both; }
.swiper1 .swiper-slide.swiper-slide-active .main_logo { animation: main_txt 1.2s 1.7s both; }
.swiper1 .swiper-slide.swiper-slide-active .main_line {height: 4rem; opacity: 1; transition: 1s 1.5s;}
.swiper1 .swiper-slide.swiper-slide-active .main_txt_box p {transform: translateY(0px);opacity: 1; transition: 1s 1.2s;}


.main_box.active .main_img { animation: main_img 1.6s 0s both; }
.main_box.active .main_txt_box h4 { animation: main_txt 1.0s 0.3s both; }
.main_box.active .main_txt_box h2 { animation: main_txt 1.0s 0.7s both; }
.main_box.active .main_logo { animation: main_txt 1.2s 1.7s both; }
.main_box.active .main_line {height: 4rem; opacity: 1; transition: 1s 1.5s;}
.main_box.active .main_txt_box p {transform: translateY(0px);opacity: 1; transition: 1s 1.2s;}
*/

@keyframes main_img {
	from { transform: scale(1.22); }
	to {  }
}
@keyframes main_txt {
	from { opacity: 0; transform: translateY(-40px); }
	to {  }
}
@keyframes main_txt2 {
	from { opacity: 0; }
	to {  }
}

.main_bt_wrap .swiper-pagination { width: 100px; height: 20px; position: absolute; left: 120px; bottom: 0; top: 0; margin: auto; z-index: 999; display: flex; justify-content: space-between; }
.main_bt_wrap .swiper-pagination .swiper-pagination-bullet { width: 100%; height: 20px; border-radius: 0; opacity: 1; background: none; position: relative; outline: none; }
.main_bt_wrap .swiper-pagination .swiper-pagination-bullet span { content:''; width: 100%; height: 2px; position: absolute; left: 0; bottom: 0; top: 0; margin: auto; background-color: #fff; opacity: 1;
animation: bullet 5s 0s both linear; display: none; }
.main_bt_wrap .swiper-pagination .swiper-pagination-bullet span.stop { animation-play-state: paused; }
.main_bt_wrap .swiper-pagination .swiper-pagination-bullet:before { content:''; width: 100%; height: 2px; position: absolute; left: 0; bottom: 0; top: 0; margin: auto; background-color: #fff; opacity: 0.3; }
.main_bt_wrap .swiper-pagination .swiper-pagination-bullet p { font-size: 11px; line-height: 100%; color: #fff; position: absolute; top: 0; left: -8px; letter-spacing: 0.5px; z-index: -1; opacity: 0; transition: 0.5s; display: none; }

.main_bt_wrap .swiper-pagination .swiper-pagination-bullet-active span { display: block; }
.main_bt_wrap .swiper-pagination .swiper-pagination-bullet-active p { left: -13px; opacity: 1; }


@keyframes bullet {
	from { width: 0; }
	to {  }
}


.main_play_bt { width: 20px; height: 30px; color: #fff; position: absolute; right: 0; top: 0; margin: auto; bottom: 0; }
.main_play_bt>div { width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; cursor: pointer; border-radius: 100%; }
.main_play_bt>div>img { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
.swiper-button-play { display: none; }


.swiper1-2 { width: 70px; height: 25px; position: absolute; left: 0; top: 0; bottom: 0;  margin: auto; z-index: 99; }
.swiper1-2 .swiper-slide { width: 25px; height: 25px; cursor: pointer; border: none; overflow: hidden; box-sizing: border-box; border-radius: 100%; }
.swiper1-2 .swiper-slide-thumb-active { opacity: 1; }
.swiper1-2 .swiper-slide:before { content:''; width: 5px; height: 5px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background-color: #fff; z-index: 9; border-radius: 100%; opacity: 0.5; }
.swiper1-2 .swiper-slide-thumb-active:after { content:''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; border: 1px solid #fff; z-index: 9; border-radius: 100%; box-sizing: border-box; }

.swiper1-2 .swiper-slide-active:before { opacity: 1; }


.main_scroll_box { width: 51px; height: 135px; position: fixed; left: 50px; bottom: 0; top: 0; margin: auto; text-align: center; z-index: 9999999; transform: translateY(20px); }
.scroll_w { opacity: 0; transition: 0.3s; }
.scroll_b { position: absolute; left: 0; right: 0; top: 0; margin: auto; opacity: 1; transition: 0.3s; }
.main_scroll { width: 13px; height: 83px; margin: auto; margin-top: 12px; position: relative; overflow: hidden; }
.main_scroll span { position: absolute; left: 0; right: 0; margin: auto; top: -100%; width: 1px; height: 100%; background-color: #000; transition: 0.3s; }
.main_scroll:after { position: absolute; content:''; width: 8px; height: 8px; border-right: 1px solid #000; border-bottom: 1px solid #000; transform: rotate(45deg); left: 0; bottom: 2px; right: 0; margin: auto; transition: 0.3s; }
.scroll_circle { content:''; position: absolute; left: 0; right: 0; bottom: -22px; margin: auto; width: 50px; height: 50px; z-index: -1; }
.scroll_circle span { content:''; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; background-color: #000; width: 100%; height: 100%; border-radius: 100%; opacity: 0.2; transition: 0.3s; }


/**/

.con_wrap {width: 100%; position: relative; z-index: 2; background-color: #fff; left: 0; right: 0; margin: 0 auto;}


.sec03 { width: 100%; height: 171vw; position: relative; color: #fff; padding: 0 0%; box-sizing: border-box; padding-top: 0vw; overflow: visible; margin: auto;  margin-top: calc(100vh + 0vw);  max-width: 500px; top:0;}

.brand_line { width:100%; height: 100%; position: absolute; top: 0;}
.brand_li01 {position: absolute; width: 1px; height: 0%; opacity: 0; top: 0; left: 15vw; background-color: #414141; }
.brand_li02 {position: absolute; width: 1px; height: 0%; opacity: 0; top:0; right: 15vw;  margin: 0 auto; background-color: #414141; }

.sec03_bg {position:absolute; left: 0; right: 0; margin: 0 auto; top: 0;}

.sec03_arrow {width: 94px; height: 47px; position: absolute; right: 0; bottom: 0;}
.swiper-button-prev {width: 47px; position: absolute; left: 0; top: 0;}
.swiper-button-next {width: 47px; position: absolute; right: 0; top: 0;}
	
.sec03_titbox {position: relative; top: 0; left: 0; right: 0; margin: 0 auto; width: 100%; padding-top: 0;}

.sec03_tit {width: 100%; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; transform: translateY(-20px); opacity: 0; }
.sec03_tit img {width: 100%; }

.swiper2{ width: 100%; height: 100%;margin: auto; top: 0vw; position: relative; transform: translateY(-20px);opacity: 0; }

.sec03_txtbox {position:absolute; z-index: 2;  width: 69%; left: 0; right: 0; margin: 0 auto;}
.sec03_txt {  padding-left: 7vw; margin-top: 14vw; padding-bottom: 10vw; }
.sec03_txt h4{font-size: 4.4vw; line-height: 120%; color: #f15923; font-weight: 400; margin-top: 1vw; opacity: 0;transform: translateX(20px); letter-spacing:-0.1rem;  }
.sec03_txt h4 span {color: #9b877c; }

.sec03_txt p{font-size: 3.2vw; font-weight: 500; line-height:180%; color: #717171; margin-top: 3vw; opacity: 0;transform: translateX(20px); letter-spacing: -0.07rem;  }
.sec03_txt p span{font-size: 2.5vw; color: rgba(0,0,0,1); }

.sec03_txt h1 {font-family: 'Futura Std Oblique'!important; font-size: 3.2vw; font-weight: 900; font-style: italic; line-height:160%; color: #8c7763; margin-top: 7vw; opacity: 0;transform: translateX(20px); letter-spacing: -0.1vw;  }


.sec03_txtbox2 {position:absolute; z-index: 2;  width: 69%; left: 0; right: 0; margin: 0 auto;  top: 25vw;}
.sec03_txtbox2 .sec03_txt {  padding-left: 7vw; margin-top:0vw; padding-bottom: 10vw; }

.sec03_ov01 {position:absolute; left: 0; right: 0; bottom: 0;}
.sec03_ov03 {position:absolute; left: 0; right: 0; top: 0;}
.sec03_ov04 {position:absolute; left: 0; right: 0; bottom: 50vw;}


.sec03_img{width:69% ; height: 40vw;margin: auto; margin-top: 25vw; /*transform: translateX(40px);*/opacity: 1; }
.sec03_img2 {width:69% ; height: 40vw;margin: auto; margin-top: 100vw; /*transform: translateX(40px);*/opacity: 1; }

.sec03_img01{background: url("../img/sec02_img01.jpg") center no-repeat; background-size: cover;}
.sec03_img02{background: url(../img/sec02_img02.jpg) center no-repeat; background-size: cover;}
.sec03_img03{background: url(../img/sec02_img03.jpg) center no-repeat; background-size: cover;}
.sec03_img04{background: url(../img/sec02_img04.jpg) center no-repeat; background-size: cover;}

.sec03 .swiper-pagination { width:30%; position: absolute; left: 0; right: 0; bottom: 15vw;  margin: auto; z-index: 999; display: flex; justify-content: space-between; }
.sec03 .swiper-pagination .swiper-pagination-bullet { width: 5vw; height: 5vw;  margin-left: 0.5vw; opacity: 1; background: none; border-radius: 100%; position: relative; }
.sec03 .swiper-pagination .swiper-pagination-bullet:after { content:''; width: 1vw; height: 1vw; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background-color: #000; border-radius: 100%; }
.sec03 .swiper-pagination .swiper-pagination-bullet-active:after { content:''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; border-radius: 100%; border: 1px solid #000; background: none; }
.sec03 .swiper-pagination .swiper-pagination-bullet-active:before { content:''; width: 1vw; height: 1vw; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background-color: #000; border-radius: 100%; }
.sec03 .swiper-pagination .swiper-pagination>span:nth-child(1) { margin-left: 0; }

.sec03.active .brand_li01 {  height: 100%; opacity: 1;  transition: 1.2s 0.5s; }
.sec03.active .brand_li02 { height: 100%; opacity: 1;  transition: 1.2s 0.7s;}

.sec03.active .swiper2 {transform: translateY(0px);opacity: 1; transition: 1s 1.2s;}
.sec03.active .sec03_tit {transform: translateY(0px);opacity: 1; transition: 1s .2s;}

.swiper2 .swiper-slide-active .sec03_txt h4{transform: translateX(0px);opacity: 1; transition: 1s .5s;}
.swiper2 .swiper-slide-active .sec03_txt p{transform: translateX(0px);opacity: 1; transition: 1s .7s;}
.swiper2 .swiper-slide-active .sec03_txt h1{transform: translateX(0px);opacity: 1; transition: 1s .9s;}



/**/

.pre01 { width: 100%; height: 164vw; position: relative; background: #f8f2ed; color: #fff; padding: 0 0%; box-sizing: border-box; padding-top: 0vw; overflow: visible; margin: auto;  max-width: 500px; top:0;}

.pre_bin { width: 100%; height: 100%; position: absolute; top: 0; margin: 0 auto; z-index: 4;}
.pre-tit-box {position: relative; top: 0; left: 0; right: 0;}


.swiper4 {width:90%; height: 30vw; position: absolute;  left: 0; right: 0; margin:0  auto; z-index: 2;}
.swiper4 .swiper-slide img { position: absolute; top: 0; left: 0; }
.premium-bton { opacity: 0; }
.swiper4 .swiper-slide.swiper-slide-active .premium-bton { opacity: 1; }

.swiper3 {position: absolute;  left: 0; right: 0; margin:0  auto; bottom: 0; z-index: 1;}

.pre_arrow {position:relative; top: 55vw; width: 90%; z-index: 5; left: 0; right: 0; margin: 0 auto; z-index: 5;}
.swiper-button-prev4 {position: absolute; left: 0; width: 16%;}
.swiper-button-next4 {position: absolute; right: 0; width: 16%;}
.swiper-button-prev4 img {width:100%;}
.swiper-button-next4 img {width:100%;}

.pre_txt {position: absolute;  left: 0; right: 0; margin:0  auto; top: 35vw; text-align: center;}
.pre_txt h1 {color:#cfab85; font-size: 4.5vw; font-weight: 500;}
.pre_txt p {color:#fff; font-size: 3.2vw; font-weight: 300; line-height: 180%; margin-top: 3vw;}




/* unit */


	.unit { width: 100%; height: 350vw; position: relative; background: #fff; color: #fff; padding: 0 0%; box-sizing: border-box; padding-top: 0vw; overflow: visible; margin: auto;  max-width: 500px; top:0;}
	.unit_wrap  { width: 100%; height: auto; }

	.unit_left { width: 100%; height: 150vw; float: none; overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative;  }
	.unit_left:after { content:''; width: 0%; height: 120%; background-color: #fff; position: absolute; left: -10%; top: -10%; z-index: 999;  animation: unit_bg 1.0s 0.2s both;}

	.unit_right { width: 100%;  box-sizing: content-box; float: none; padding: 20vw 0; position: relative; display: flex; justify-content: center; align-items: center; }

	.unit_bg { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url(../../img/unit_bg.jpg) center no-repeat; background-size: cover; z-index: 1; }
	.unit_tit { position: relative; z-index: 9; color: #000; text-align: center; transform: translateY(-70px); opacity:0; }
	.unit_tit h4 {font-family: "Nanum Myeongjo", serif; font-size: 20px; line-height: 140%; font-weight:600; letter-spacing:-1.5px; }
	.unit_tit p { font-size: 14px; line-height: 30px; margin-top: 20px; opacity:0.7; }
	.unit_tit h2 { font-weight:700; font-family: 'Futura', sans-serif; -webkit-text-stroke: 0.7px #000; color: transparent; font-size: 90px; margin-top: 55px; line-height: 100%; letter-spacing: 5px;}
	.unit_tit_bt { font-family:'Futura';  width: 210px; height: 53px;  color: #000; text-align: center; line-height: 52px; font-size: 13px;  margin: auto; margin-top: 45px; overflow: hidden; }
	.unit_tit_bt a { width: 100%; height: 100%; display: block; }
	.unit_arr {padding-left:20px;}
		 
	.unit_right_box { width: 80%; transform: translateY(60vw); position: relative; opacity:0;}
	.unit_con { text-align: center; }
	.unit_con h2 { font-size: 23vw; line-height: 100%; font-family: 'Futura', sans-serif; font-weight: 800; color: #222; letter-spacing: -2px;}
	.unit_con h2 span { font-size:19vw; font-weight: 400; }
	.unit_con ul { margin-top: 45px;  width: 100%; text-align: center; color: #202020; border-bottom: 1px solid #cecece; vertical-align: middle; font-weight: 400; padding:15px 10px; padding-left: 12px; position: relative; }
	.unit_con ul li { display: inline-block; font-size: 3vw; line-height: 200%; color: #202020;  
	 vertical-align: middle; font-weight: 400; padding: 0 17px; padding-left: 12px; position: relative; }
	.unit_con ul li:after { height: 12px; content:''; position: absolute; width: 1px; background-color: #a8a8a8; right: 0; top: 0; bottom: 0; margin: auto; transform: translateY(2px); }
	.unit_con ul li:last-child:after { display: none; }
	.unit_con ul li:nth-child(2):after { display: none; }
	.unit_con ul li:nth-child(4):after { display: none; }


	.unit_right_box .tabs2 { position: absolute; top:25vw; left: 0px; display: flex; justify-content: space-between; float: none; }
	.unit_right_box .tabs2>li { width: 100%; text-align: center; margin: 0; border: none; border-bottom: 5px solid #bbb; }
	.unit_right_box .tabs2>li>a { padding: 0; line-height: 43px; letter-spacing: 0; display: block; color: #a5a5a5; }
	.unit_right_box .tabs2 li.selected { background: none; border-bottom: 5px solid #9e826f; }
	.unit_right_box .tabs2 li.selected a { color: #9e826f; }
	.unit_right_box .tabs2 li:hover { background: none; border-bottom: 5px solid #9e826f; }
	.unit_right_box .tabs2 li:hover a { color: #9e826f; }

	.unit_img { margin-top: 10px; }

	.twentytwenty-container { width: 100%; margin: auto; height: 100vw; }
	.twentytwenty-container img { position: relative; display: inline-block; }
	.unit_img_box { position: absolute; left: 0; top: 0; width: 100%; height:100vw; text-align: center; }
	.unit_img_bt { width: 140px; height:42px; line-height: 40px; color: #fff; background-color: #aeaeae; border-radius: 30px; margin: auto; margin-top: 10px; font-size: 13px;  }


	.twentytwenty-horizontal .twentytwenty-handle:before { height: 300%; background: linear-gradient(transparent,#fff); } 
	.twentytwenty-horizontal .twentytwenty-handle:after { height: 300%; background: linear-gradient(#fff,transparent); }
	.twentytwenty-handle { height: 30px; width: 30px; top: 36%; box-shadow: inset 0px 0px 50px rgb(0 0 0 / 50%), 0px 0px 50px rgb(0 0 0 / 100%), 0px 0px 100px rgb(0 0 0 / 100%); }
	
	.twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow { border: 5px inset transparent; margin-top: -5px; }
	.twentytwenty-left-arrow { border-right: 5px solid white; margin-left: -14px; } 
	.twentytwenty-right-arrow { border-left: 5px solid white; margin-right: -14px; }
	.twentytwenty-left-arrow:after { content:'mouse'; font-size: 12px; font-weight: 700; color: #fff; line-height: 100%; text-shadow: 0 0 8px rgba(0,0,0,0.8); position: absolute; left: -92px; top: -6px; text-transform: uppercase; letter-spacing: -0px; width: 100px; }
	.twentytwenty-right-arrow:after { content:'drag'; font-size: 12px; font-weight: 700; color: #fff; line-height: 100%; text-shadow: 0 0 8px rgba(0,0,0,0.8); position: absolute; right: -92px; top: -6px; text-transform: uppercase; letter-spacing: -0px; width: 110px; }
	


	.unit_left.active:after { width: 0; transition: 1.0s 0.2s; }
	.unit_left.active .unit_tit { transform: translateY(-20px); opacity: 1; transition: 1.0s 0.45s; }
	.unit_right.active .unit_right_box { transform: translateY(0px); opacity: 1; transition: 1.0s 0.2s; }


/* calendar */

.calendar { width: 100%;height:170vw; position: relative; background: #fff; color: #fff; padding: 0 0%; box-sizing: border-box; padding-top: 0vw; overflow: visible; margin: auto;  max-width: 500px; top:0;}
.calendar_wrap { width: 100%; height: auto; }



	.calendar_wrap { width: 100%; height: 170vw;  padding: 70px 0; position: relative; overflow: hidden; background: url(../img/calendar_bg.jpg) right no-repeat; background-size: cover; display: flex; justify-content: center; /*align-items: center;*/ }

	.calendar_box { width: 86%; max-width: 380px; }
	.calendar_tit { text-align: center; color: #fff; transform: translateY(-80px); opacity: 0;}
	.calendar_tit h2 { font-family:'Futura', sans-serif; font-size: 12vw; font-weight: 700; line-height: 100%; letter-spacing: 1px; -webkit-text-stroke: 1px #000; color: transparent;  }
	.calendar_tit p { font-size: 3vw; margin-top: 12px; color: #505050; }
	
	.calendar_bottom { margin-top: 40px;   transform: translateY(100px); opacity: 0;}
	.calendar_con_box { display: block; overflow: hidden; }
	.calendar_con_box.box01 { width: 100%; }
	.calendar_con_box.box02 { width: 100%; margin-top: 30px; margin-top: 0; }

	.calendar_con { float: left; width: 32.66%; height: 30vw; margin-left: 1%; margin-right: 0; color: #181818;  position: relative; display: flex; justify-content: center; align-items: center; color: #181818; background-color: rgba(255,255,255,0.13); border: 1px solid #b3b3b3; text-align: center;}
	.calendar_con:nth-child(1),.calendar_con:nth-child(4) { margin-left: 0; }
	.calendar_con:nth-child(n+4) { margin-top: 1%; }
	.calendar_con:after { content:''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 9; }
	.calendar_con_box.box02 .calendar_con { width: 100%; margin-left: 0; margin-top: 1%; }
	.calendar_con h4 { font-size: 5.5vw;  font-family:'Futura', sans-serif; line-height: 100%; font-weight: 500;}
	.calendar_con p { font-size: 2.5vw; margin-top: 5px; line-height: 100%;  }
	.calendar_con:hover { background-color: #000; border: 1px solid #000; color: #fff; }

	.calendar_box.active .calendar_tit { transform: translate(0); opacity: 1; transition: 1.0s 0.4s; }
	.calendar_box.active .calendar_bottom { transform: translate(0); opacity: 1; transition: 1.0s 0.6s; }
/*  */





/*  */



.footer { width: 100%;  background-color: #282828; color: #fff; padding: 0 0%;  position: relative; z-index: 999; text-align:left; max-width: 500px; padding-bottom: 20vw;}

.f-l {padding:10vw 0 6vw 6vw; }
.f-r {position:absolute; bottom: 20vw; right:0vw; text-align:right; padding-right:6vw; width:100%; }

.f-r h3 {margin-top:3vw; font-family: 'Carisma Gothic'; font-size: 6vw; color: #fff;  font-weight: 700;}
.f-r img {margin-top:3vw; }
.footer_tel { display: flex; justify-content: center; align-items: flex-end; line-height: 100%; }
.footer_tel span { font-size: 5vw; display: block; position: relative; top: 2px; font-weight: 500; }
.footer_tel b { font-family: 'Carisma Gothic'; font-size: 7vw; color: #ffc000; margin-left: 0.64rem; }


.footer h2 { margin-left: 6vw;  font-size: 3.2vw; line-height: 150%; margin-bottom:4vw; color: #fff; letter-spacing: -0.3vw; }
/*.footer h2 { font-size: 3.8vw; line-height: 150%; margin-bottom:4vw; color: #6e6e6e; letter-spacing: -0.3vw; margin-top: 5vw; }*/
.footer h2 span { color: #cfab85; font-weight: 600;  }
.footer h2 b { /*font-weight: 900; font-family: 'Just'!important;*/}

.footer h1 { margin-left: 6vw;  margin-right: 6vw;  font-size: 2.8vw; line-height: 160%; margin-top:0vw; color: #757575; letter-spacing: -0.3vw; }
.footer h1 span { font-size: 2.8vw; line-height: 160%; margin-top:0vw; color: #cfab85; letter-spacing: -0.3vw; }

.footer p { margin-left: 6vw; color: #757575; font-size: 2.6vw; margin-top: 6vw; opacity: 1; line-height: 160%; padding-bottom: 30vw;}



.bottom_b {position:fixed; height:13vw; bottom: 0; width: 100%; left: 0; right: 0; margin: 0 auto; z-index:999; max-width: 500px; text-align: center;}
.bottom_b ul {width: 100%; height:100%;}
.bottom_b ul li {width: 50%; height: 100%; float: left; color: #fff; line-height: 14vw; font-size: 4vw; font-weight: 500; letter-spacing: 0;}
.bottom_b ul li a {color: #fff; line-height: 13vw; font-size: 4vw; font-weight: 700; letter-spacing: 0;}
.bottom_b ul li p {font-size: 3vw; }

.bottom_b ul li span {font-size: 6vw; font-weight: 800;}
.bottom_b ul li:nth-child(1) {background-color: #006b5a;  }
.bottom_b ul li:nth-child(2) {background-color: #f15923; font-weight: 900; font-family: 'Futura Std Oblique'!important; font-weight: 900; font-style: italic;}


.bottom_bb {position:fixed; height:13vw; bottom: 0; width: 100%; left: 0; right: 0; margin: 0 auto; z-index:999; max-width: 500px;}
.bottom_bb ul {width: 100%; height:100%; text-align: center; display: flex; justify-content: space-between; align-items: center;   background-color: #4a4d51; }
.bottom_bb ul li {  height:100%; float: left; color: #fff; line-height: 4vw; font-size:2.8vw; font-weight: 500; letter-spacing: 0; border-left:1px solid #727477; padding:2.5vw 2vw;}
.bottom_bb ul li a {color: #fff; line-height: 13vw; font-size: 4vw; font-weight: 700; letter-spacing: 0;}
.bottom_bb ul li p {font-size: 3vw; }

.bottom_bb ul li span {font-family: 'Futura Std Oblique'!important; font-weight: 900; color:#f15923;}
.bottom_bb ul li:nth-child(1) { border-left:none; }
.bottom_bb ul li:nth-child(2) {  }


.port_word1 { position: fixed; width:100%; max-width: 500px; text-align: center; z-index: 10; height: 100%; background-image: url("../img/6zero_bg.jpg"); background-position: bottom; background-repeat: no-repeat; overflow: scroll; top: 0; right: -100%; z-index: 9999999999; }

.iu-wrap {position:absolute; width: 100%; height: 100%;  left: 0; right: 0; margin: 0 auto; top: 0; padding-bottom: 50px; padding-top: 0px; }
.iu_arr {position:relative; width: 100%; left: 0; right: 0; margin: 0 auto; top: 30vw;}
.port_btn1 { cursor: pointer;}
.port_hide1 {position:absolute; top: 20px; right: 20px; z-index: 9999999999;}
.tit-top {width: 100%;}


.zero_tit { position: relative; z-index: 9; margin-top:60px; }
.zero_tit h4 { font-size: 20px; line-height: 24px; font-weight: 200; }
.zero_tit h4 b { font-weight: 600; }
.zero_tit h2 { font-family: 'Futura Std'; font-size: 111px; line-height: 100%; color: #f15923; font-weight: 600; margin-top: 15px; }
.zero_tit h3 { font-family: 'Futura Std'; font-size: 18px; line-height: 100%; color: #f15923; font-weight: 700; margin-top: 0px; }
.zero_tit h3 span { color: #056b5c; }

.iu-wrap ul { width: 84%; margin: auto; border-top: 1px solid #d0d0d0; margin-top: 35px; position: relative; z-index: 9; }
.iu-wrap ul li { width: 100%; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #d0d0d0; padding: 25px 0; }
.iu-wrap ul li>div { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.zero_num { width: 34px; height: 29px; background-color: #ddd; font-family: 'Futura Std'; line-height: 29px; font-size: 15px; font-weight: 600; color: #fff; border-radius: 100%; justify-content: center; align-items: center;}
.zero_txt { text-align: left; width: 310px; margin-left:20px; }
.zero_txt h3 { font-size: 22px; line-height: 100%; color: #056b5c; font-weight: 700; }
.zero_txt h3 span { font-family: 'Futura Std'; color: #f15923; letter-spacing: 0px; font-weight: 700; }
.zero_txt h3 span b { font-family: 'Futura Std Oblique'; }
.zero_txt p { font-size: 14px; line-height: 100%; margin-top: 6px; }
.zero_icon { height: 100%; display: flex; align-items: center; }




.zero_bg {position:fixed; width: 100%; height: 100%; background-color:rgba(0,0,0,0.6); top: 0; left: -100%; z-index: 999999999;}

@media all and (max-width:300px){

	.sec05_txtbox p {font-size:2.3vw;}


}

@media all and (min-width:375px){


	.btn_set {  }
	.swiper-pagination {}


}


@media all and (min-width:600px){



/**/
	.main_box {height:100vh;}
	.main_txt_box {top:25%;}


	.main_txt_box { top: 180px;  }
	.main_txt_box h4 { font-size:40px; }
	.main_txt_box h2 { font-size: 40px;  }

	.main_bt_wrap {bottom: 50px;}





/* sec03 */


    .sec03 { height: 855px;  padding-top: 0px;margin-top: 100vh; }
	.brand_li01 {left:77px;}
	.brand_li02 {right: 77px;}

	.sec03_txtbox {width: 69%; }
	.sec03_txt {  padding-left: 40px; margin-top: 70px; padding-bottom:0; }
	.sec03_txt h4{font-size: 20px; line-height: 120%;  margin-top:0;  }

	.sec03_txt p{font-size: 14px; margin-top: 23px;  }

	.sec03_txt h1 { font-size: 16px; margin-top: 40px; }


	.sec03_txtbox2 {width: 69%; top: 120px;}
	.sec03_txtbox2 .sec03_txt {  padding-left: 40px; padding-bottom:0; }


	.sec03_ov04 {left: 0; right: 0; bottom: 270px;}


	.sec03_img{width:69% ; height: 227px; margin-top: 120px; }
	.sec03_img2 {width:69% ; height: 227px; margin-top: 500px; }


	
	
/* sec05 */


	.pre01 {  height:830px; }


	.swiper4 {width:90%; height: 150px; }


	.pre_arrow { top:280px;}
	.swiper-button-prev4 {position: absolute; left: 0; width: 16%;}
	.swiper-button-next4 {position: absolute; right: 0; width: 16%;}


	.pre_txt {top:160px; }
	.pre_txt h1 {font-size: 24px; }
	.pre_txt p { font-size: 16px; margin-top: 30px;}

	.unit {height:1550px;}
	.unit_right {padding:110px 0;}
	.unit_left  {height:700px;}
	.unit_con h2 { font-size: 90px; }
	.unit_con h2 span { font-size:57px;  }
	.unit_con ul li { font-size: 12px; }
	.unit_right_box .tabs2 { top:100px; }

	
	.calendar {height:700px;}
	.calendar_wrap {height:700px; padding:100px 0;}

	.calendar_con {  height: 110px; } 
	.calendar_tit h2 {  font-size: 70px;   }
	.calendar_tit p { font-size:15px;  }
	.calendar_con h4 { font-size: 22px;  }
	.calendar_con p { font-size: 15px;  }






/* footer */

	.footer { padding-bottom:80px; }


	.f-l {padding:50px 40px 30px 40px; }
	.f-r {bottom:100px; padding-right:40px;}
	.footer h2 { font-size: 16px; margin-bottom:30px;  letter-spacing: -1px; margin-left:40px;}
	.footer h1 { font-size: 12px; line-height: 25px; letter-spacing: -0.5px; margin-left:40px;  }
	.footer h1 span {font-size:12px;}
	.footer p {color: #6e6e6e; font-size: 14px;  padding-bottom:150px; margin-left:40px;}


	.bottom_b { height:64px; }
	.bottom_b ul li {line-height: 64px; font-size: 18px; }
	.bottom_b ul li span {font-size: 25px; }

	.bottom_b ul li a {font-size: 22px; line-height: 64px;}
	.bottom_b ul li:nth-child(1) {  }
	.bottom_b ul li p {font-size: 12px; }

	.bottom_bb {height:84px;}

	.bottom_bb ul li {line-height:100%; font-size:15px; padding:30px 7px;}



}




/**//**//**//**//**//**//**//**//**//**//**//**/

/* sub */

#all_wrap { width: 100%; height: auto; overflow: hidden; margin: auto; position: relative; font-family: 'Noto Sans KR', sans-serif; }

#container{ width: 100%; position: relative; left: 0; top: 0; z-index: 90; font-family: 'Noto Sans KR', sans-serif; } 
.sub { position: relative; width: 100%; left: 0; background-color:#fff; top:0; overflow: hidden; }


/* */


  
  
#snb_wrap { width: 95%; height: auto; position: relative; left: 0; right: 0; margin: 0px auto 0 auto; z-index: 99; text-align: left; font-family: 'Noto Sans KR', sans-serif; }
#snb { width: 100%;  margin:0 auto; position:relative; z-index:199; }
#snb:after {content:""; display:block; clear:both; }
#snb>li {float:left; position:relative; height:30px;}
#snb>li:nth-child(1) { width: 16%; }
#snb>li:nth-child(1) img{position: absolute;top: 0;bottom: 0;left: 0;right: 0; margin: auto;}

#snb>li:nth-child(2) { width: 42%; }
#snb>li:nth-child(3) { width: 42%; }
#snb>li:first-child + li > a {background:url(../img/snb-arr.gif) no-repeat 100% 50%;}
#snb>li:first-child + li + li > a {background:url(../img/snb-arr.gif) no-repeat 100% 50%; margin-top:1px; text-transform: uppercase; }
#snb>li:first-child + .ov {margin-left:0;}
#snb .ov {margin-left:-1px;}
#snb .ov > a { display:block; height:30px;  line-height:30px;	padding:0 47px 0 15px; font-size:10px; color:#555; letter-spacing:0em;  border-left:1px solid #dcdcdc;  letter-spacing:-0.075em; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; }
#snb .ov ul {position:absolute;left:0;top:100%;min-width:100%;background:#fff;display:none;}
#snb .ov ul li {border:1px solid #dcdcdc;margin-top:-1px; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; text-transform: uppercase; background-color: #fff; }
#snb .ov ul li:first-child {margin-top:0;}
#snb .ov ul li a {display:block;font-size:10px;color:#999;padding:11px 15px;white-space:nowrap;letter-spacing:-0.075em;}
#snb .ov:hover ul {display:block;}
#snb .ov ul li a:hover {background:#f3f3f3;color:#333;}


#sub-top{
width: 100%;
height: 60vw;
/*background: #101f3a; */

position: relative; left:0; right:0; margin:0 auto;
margin-top: 0px;
margin-bottom: 5vw;
}

.sub_top_bg{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height:60vw; overflow: hidden;position: relative; z-index: 9;	}
.sub_top_bg::after{ content:''; background: url(../img/sub-top.jpg) center bottom no-repeat; background-size: cover; width: 100%; height: 60vw; position: absolute; top: 0;left: 0; animation: sub_top_img 2.5s 0s both; transition: 0.6s;}

.sub_top_bg01{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height: 55vw; overflow: hidden;position: relative; z-index: 9;	}
.sub_top_bg01::after{ content:''; background: url(../img/sub_top.jpg) center bottom no-repeat; background-size: cover; width: 100%; height: 60vw; position: absolute; top: 0;left: 0;}
.sub_top_bg02{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height: 60vw; overflow: hidden;position: relative; z-index: 9;	}
.sub_top_bg02::after{ content:''; background: url(../img/sub-top2.jpg) center center no-repeat; background-size: cover; width: 100%; height: 60vw;	 animation: sub-top 1.8s 0.2s both;position: absolute; top: 0;left: 0;}
.sub_top_bg03{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height: 60vw; overflow: hidden;position: relative; z-index: 9;	}
.sub_top_bg03::after{ content:''; background: url(../img/sub-top3.jpg) center center no-repeat; background-size: cover; width: 100%; height: 60vw;	 animation: sub-top 1.8s 0.2s both;position: absolute; top: 0;left: 0;}
.sub_top_bg04{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height: 60vw; overflow: hidden;position: relative; z-index: 9;	}
.sub_top_bg04::after{ content:''; background: url(../img/sub-top4.jpg) center center no-repeat; background-size: cover; width: 100%; height: 60vw;	 animation: sub-top 1.8s 0.2s both;position: absolute; top: 0;left: 0;}
.sub_top_bg05{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height: 60vw; overflow: hidden;position: relative; z-index: 9;	}
.sub_top_bg05::after{ content:''; background: url(../img/sub-top5.jpg) center center no-repeat; background-size: cover; width: 100%; height: 60vw;	 animation: sub-top 1.8s 0.2s both;position: absolute; top: 0;left: 0;}
.sub_top_bg06{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height: 60vw; overflow: hidden;position: relative; z-index: 9;	}
.sub_top_bg06::after{ content:''; background: url(../img/sub-top6.jpg) center center no-repeat; background-size: cover; width: 100%; height: 60vw;	 animation: sub-top 1.8s 0.2s both;position: absolute; top: 0;left: 0;}
.sub_top_bg07{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height: 60vw; overflow: hidden;position: relative; z-index: 9;	}
.sub_top_bg07::after{ content:''; background: url(../img/sub-top7.jpg) center center no-repeat; background-size: cover; width: 100%; height: 60vw;	 animation: sub-top 1.8s 0.2s both;position: absolute; top: 0;left: 0;}
.sub_top_bg08{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height: 60vw; overflow: hidden;position: relative; z-index: 9;	}
.sub_top_bg08::after{ content:''; background: url(../img/sub-top8.jpg) center center no-repeat; background-size: cover; width: 100%; height: 60vw;	 animation: sub-top 1.8s 0.2s both;position: absolute; top: 0;left: 0;}
.sub_top_bg09{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height: 60vw; overflow: hidden;position: relative; z-index: 9;	}
.sub_top_bg09::after{ content:''; background: url(../img/sub-top9.jpg) center center no-repeat; background-size: cover; width: 100%; height: 60vw;	 animation: sub-top 1.8s 0.2s both;position: absolute; top: 0;left: 0;}




#sub_top_txt { width: 100%; height: 40vw; position: relative; background: #101f3a; font-family: 'Noto Sans KR', sans-serif;	 padding-left: 20px;  }
#sub_top_txt h2 { color: #fff; font-size: 6vw; font-weight: 400; line-height: 100%; animation: sub_top 0.8s 0.5s both;}
#sub_top_txt h2 span { font-size:4vw;}
#sub_top_txt h4{ margin-top: 15px; animation: sub_top 0.8s 1.2s both; }
#sub_top_txt h5 { color: #fff; font-size: 4vw; font-weight: 300; margin-top: 1vw;    }

.sub-top-tit {position:absolute; top: 55%;  margin: 0 auto; text-align: center;  width: 100%; z-index: 22;}
.sub-top-tit h1 { font-weight:900; font-family: 'Futura Std Oblique'!important; /*font-family: 'Athena', sans-serif; font-family:'gil'; */color: #fff; font-size: 6vw; text-transform: uppercase; letter-spacing: 0px; margin-left: 0px;}
.sub-top-tit p { color: #fff; font-size: 3.5vw;}

.st-line { z-index: -1; height: 1px; background-color: #fff; width: 100%; position: absolute; bottom: -3px;  animation: st 0.5s 0.2s both linear; }
.st {position: relative; width: 100%; z-index: 2;}
@keyframes st 
{ 
	from { width: 0%; } 
	50% {    } 
	to { } 

}

@keyframes sub-st 
{ 
	from { opacity: 0; margin-top: 0; } 
	50% {    } 
	to { } 

}


@keyframes sub-top {

    from {  transform:scale(1.5)}

    to { }
    
  }

@keyframes sub-top-bg {

    from {  opacity:0;}

    to { }
    
  }


@keyframes sub_top {
	from { opacity: 0; transform: translateY(30px); }
	to {  }
}
@keyframes sub_top_line {
	from { width: 0; }
	to {  }
}


@media all and (min-width:600px){

}


#sub {width:100%;margin:0 auto; position:relative; text-align:center;  font-family:'Noto Sans KR', 'Malgun Gothic', dotum, '돋움', '굴림', Gulim, sans-serif;font-weight:700;}
#sub .sub-tit{font-size:28px; font-weight:500; padding-bottom:0px; line-height:90%; letter-spacing: -1.5px;    margin-top:40px;}
.sub_tit_txt{ font-family:'Noto Sans KR', 'Malgun Gothic', dotum, '돋움', '굴림', Gulim, sans-serif;font-weight:400; text-align: center; color: #888; font-size:2.5vw;margin: 2vw 0;}
.sub-page{ width: 90%; text-align:center; margin:0 auto; margin-top: 10px; opacity: 1; overflow: hidden; padding-bottom: 40px; padding-top: 15px; }
.sub-page>h2{ font-size:20px; color:#111; padding-top:28px; text-align: left; margin-bottom: 10px;}
/*.sub-page img { width: 100%; }
#sub-tit-line {margin-top:30px;
	width: 90%;
	margin-left: 5%;

}
*/

.snb_wrap { width: 100%; height: auto; text-align: center; }
.snb { width: 100%; height: 45px;display: flex; /* justify-content: space-between; */ justify-content:center; border-bottom: #e1e1e1 1px solid; position: relative; left: 0; right: 0; background: #fff; }
.snb li { font-family: 'Noto Sans KR', sans-serif; font-size: 12px; font-weight: 600; width: 20%; height: 45px; line-height: 45px; /*box-sizing: border-box;*/ /*border-left: #e1e1e1 1px solid;*/  }
.snb li a { color: #484848; display: block; }
.snb li:nth-child(1) { border-left: none; }
.snb .selected { /* background-color: #e28f2f; */ }
.snb .selected a { color: #e28f2f; font-weight: 600;}


#sub-tit-line { width: 8px; height: 8px; margin: auto; margin-top: 17px; border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; transform: rotate(45deg); }



#container{ padding-left:0px; padding:5px 0 100px 0;} 

ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    width: 100%;
    font-size:13px;
	border-left: 1px solid #ddd;
	height:40px;
}
ul.tabs li { margin-bottom:-1px; color:#444;
    float: left;
    text-align:center;
    cursor: pointer;
    width:16.5%;
    height: 39px;
    line-height: 39px;
    border: 1px solid #ccc;
    border-left: none;
    font-weight: 600;
    background: #eee;
    overflow: hidden;
    position: relative;
	
}
ul.tabs li.active { color:#f8981c;
    background: #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
}

ul.tabs li.selected { color:#fff;
    background: #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
}
.tab_container {
    border: none;
    border-top: none;
    clear: both;
    float: left;
    width: 100%;
    background: #FFFFFF;max-width:900px;
}
.tab_content { position: absolute;
    margin:40px 0px 0px 0px; padding-right:60px;
    font-size: 1em;
    display: none;
}
.tab_container .tab_content ul {
    width:100%;
    margin:0px;
    padding:0px;
}
.tab_container .tab_content ul li {
    padding:5px;
    list-style:none;
}
 #container {
    width: 1100px;
    margin: 0 auto;
}










#container2{ padding-left:0px; padding:5px 0 100px 0;} 

ul.tabs2 { font-family:'Noto Sans KR', 'Malgun Gothic', dotum, '돋움', '굴림', Gulim, sans-serif;
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    width: 100%;
    font-size:14px;
	height:40px;
}



ul.tabs2 li { margin-bottom:-1px; color:#232222; margin-left:0px;
    float: left;
    text-align:center;
    cursor: pointer;
    width:18.4%;

    height: 45px;
    line-height: 45px;
   border: 1px solid #e9eaec;
    font-weight: 400;
    background: none;
    overflow: hidden;
    position: relative;
	
}


ul.tabs2 li.selected, ul.tabs li.selected:hover
{
    position: relative;
    top: 0px;
	color:#707070; background:#056b5c;   border: 0px solid #056b5c; }
	
ul.tabs2 li.selected a, ul.tabs li.selected a:hover { color:#fff;}
        

ul.tabs2 li a {  font-size:12px; font-weight:600; color:#707070; text-decoration: none; display: block !important; line-height: 41px !important; }
         
ul.tabs2 li.selected a:hover
{
    text-decoration: none;
}

ul.tabs2 li.selected
{
   color:#fff;
}

ul.tabs2 li.active { color:#fff;  }




.tab_container2 {
    border: none;
    border-top: none;
    clear: both;
    float: left;
    width: 100%;
    background: #FFFFFF;max-width:900px;
}
.tab_content2 { position: absolute;
    margin:40px 0px 0px 0px; padding-right:60px;
    font-size: 1em;
    display: none;
}
.tab_container2 .tab_content2 ul {
    width:100%;
    margin:0px;
    padding:0px;
}
.tab_container2 .tab_content2 ul li {
    padding:5px;
    list-style:none;
}
 #container2 {
    width: 1100px;
    margin: 0 auto;
}


@media all and (min-width:600px){

	.sub_top_bg {height:300px;}
	#sub-top {height:300px;}
	
	.sub-top-tit h1 {font-size:  30px;}
	.sub-top-tit p {font-size: 15px;}



}