@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@font-face {
   font-family: 'JSArirang-Regular';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/JSArirang-RegularA1.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}
@font-face {
   font-family: 'ghanachoco';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/ghanachoco.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}
@font-face {
   font-family: 'Cafe24ClassicType-Regular';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-2@1.0/Cafe24ClassicType-Regular.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
}
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,
table, caption, tbody, tfoot, thead, tr, th, td,
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;
   font-family: Pretendard,'Noto Sans KR', sans-serif;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
   display: block;
   font-family: Pretendard,'Noto Sans KR', sans-serif;
}
body {
   line-height: 1;
}
ol, ul {
   list-style: none;
}
blockquote, q {
   quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}

.clearfix:before, .clearfix:after {
  display: block;
  content: '';
  line-height: 0;
}

.clearfix:after {
  clear:both;
}


a{
color:inherit;
 text-decoration:none;
}
 

/* css 시작 */
header{position: fixed; width: 100%; z-index: 500;}
header h1{text-align: center; display: none;}
header .logo_img{padding: 1% 0 0; transition: all .5s;}
header .logo_img img{max-width: 100px;}
.ham_menu{position: absolute; top: 0; right: 0; z-index: 888; width: 150px; height: 120px; background-color: #32343B; /*background:linear-gradient(-45deg, transparent 15px, #32343B 0);*/ cursor: pointer;}
.ham_menu p{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #C7AE87; text-align: center; font-size: 24px; line-height: 30px; letter-spacing: 0.5px;}
.ham_menu.chg{background-color: #C7AE87;}
.ham_menu.chg p{color: #32343B; font-weight: 300;}

.ham_menu span{display: block; background-color: #ff7878; height: 2px; position: absolute;}
nav{position: fixed; z-index: 1000; width: 100%; top: 0;background-color: #fff; height: 100vh;left: 0; transition: all .5s; transform: translateY(-100%);}
nav.on{transform: translateY(0);} 
nav li a{display: block; line-height: 38px;font-size: 18px; }

.img_wrap img{max-width: 100%;}


.land_cont{max-width: 980px; margin: 54px auto 20px;}
.land_cont .land_tit{font-size: 24px; color: #fff; font-weight: bold; text-align: center; margin-bottom: 40px;}
.top_list{margin-bottom: 8%;}
.top_list ul{display: flex; justify-content: space-between; text-align: center; flex-wrap: wrap; align-items: center;}
.top_list ul li{width: 33.3%;  font-weight: 500; margin-bottom: 20px; position: relative;}
.top_list ul li .img_wrap{border-radius: 50px;  width: 70px; height: 70px; position: relative; margin: 0 auto 10px;}
.top_list ul li .img_wrap img{position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%);}

.pic_list li{margin-bottom: 8%; padding: 0 2%; position: relative; text-align: center;}
.pic_list .img_wrap{position: relative; height: 0; padding-bottom: 56%;}
.pic_list .img_wrap img{position: absolute; width:100%; height: 100%; top: 0; left: 0;}
.pic_list .img_wrap p{position: absolute; z-index: 2; font-size: 40px; top: 50%;  text-shadow: 1px 1px 1px #323232; text-align: center; transform: translateY(-50%); left: 0;width:100%; color: #fff;font-style:italic;}

.land_cont .atag_wrap{position: absolute; width: 100%; height: 100%; z-index: 3; top: 0; left: 0;}



/* 수정 추가 css */
.logo_wrap{max-width: 1420px; padding: 0 10px; margin: 0 auto;}
header.change .logo_img{opacity: 0; padding: 0; height: 0;}
header .logo_on{opacity: 0; padding: 0.5% 0; height: 0; transition: all .5s; position: fixed; top: 0; width: 100%;}
header .logo_on img{max-width: 50px;}
header.change .logo_on{opacity: 1; height: 82px; background-color: #fff;}

.eng_em{font-family: 'JSArirang-Regular' !important;}
.bann_wrap{position: relative; width: 100%; height: 100vh;}
.bann_wrap img{position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover;}
.img_info.fs_mid{font-family: 'ghanachoco';font-size: 25px; margin: 5% 0 2%;}
.img_info.fs_sml{font-size: 15px; line-height: 23px; color: #565656;}
.img_info.fs_sml + a{display: inline-block; margin-top: 3%; font-weight: 500;}

.main_bann_txt{position: absolute; top: 38%; transform:translateY(-50%); font-size: 50px; text-align: center; line-height: 67px; font-weight: 500; color: #fff; width: 100%;}

.nav_inner{display: flex; height: 100vh;}
.nav_inner .img_area{position: relative; width: 80%; background: url(./img/full_img.jpg) no-repeat center; background-size: cover;}
.nav_inner .img_area::before{content: ""; width: 100%; height: 100%; background-color: #323232; opacity: 0.5; display: block;}
.nav_inner .img_area .img_wrap{position: absolute; top: 50%; transform: translateY(-50%); text-align: center; width: 100%;}
.nav_inner .img_area .img_wrap img{max-width: 100px;}
.nav_inner .img_area .img_wrap img:first-child{max-width: 185px;}
.nav_inner .nav_menu{width: 40%; background-color: #32343b; padding: 5% 3%;}
.nav_inner .nav_menu > ul > li{color: #8b8c90; margin-bottom: 10%; transition: all .4s;}


.nav_inner .nav_menu p{font-size: 40px; margin-bottom: 10px; font-family: 'Cafe24ClassicType-Regular';}
.nav_inner .nav_menu .depth_2{padding-left: 5%;}
.nav_inner .nav_menu .depth_2 li{transition: all .4s;}
.nav_inner .nav_menu > ul > li:hover p{color: #fff;}
.nav_inner .depth_2 li:hover{color: #fff; padding-left: 2%;}

.youtube_area{padding: 0 3%;}
.youtube_wrap{position: relative; width: 100%; height: 0; padding-bottom: 56.25%; margin-bottom: 7%;}
.youtube_wrap iframe{position: absolute; width: 100%; height: 100%;top: 0; left: 0;}

.scroll_down{position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%);animation: motion 0.5s linear 0s infinite alternate;}
.scroll_down img{max-width: 50px;}

.popup .pp_box{position: fixed; top: 20%; width: 420px; background-color: #fff; padding-bottom: 40px; box-shadow: 0 1px 14px 7px rgba(125,125,125,0.2); z-index: 300;}
.popup .pp_box:first-child{right: 32%;}
.popup .pp_box:last-child{right: 5%;}
.popup .pp_box span{cursor: pointer; position: absolute; right: 10px; bottom: 7px; display: inline-block; background-color: #e9e9e9; padding: 5px 10px; border-radius: 5px;}
.popup .pp_box .img_wrap{position: relative; width: 100%; height: 0; padding-bottom: 100%;}
.popup .pp_box .img_wrap img{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

header .logo_on .add_black_img{max-width: 95px;}
header .logo_img .add_white_img{max-width: 100%;}


@keyframes motion {
   0% {bottom: 10%;}
   100% {bottom: 12%;}
}

@media screen and (max-width:1560px){
   .popup .pp_box{width: 340px;left: 50%; transform: translateX(-50%);position: absolute;}
   .popup .pp_box:first-child{top: 16%;}
   .popup .pp_box:last-child{top: 65%;}
}
@media screen and (max-width:980px){
   .ham_menu{width: 120px; height: 87px;}
   .ham_menu p{font-size: 19px; line-height: 24px;}
}
@media screen and (max-width:820px){
   .nav_inner{flex-direction: column;}
   .nav_inner .nav_menu{width: 100%; height: 60%; position: relative;}
   .nav_inner .img_area{width: 100%; height: 40%;}
   .nav_inner .img_area .img_wrap img{max-width: 80px;}
   .nav_inner .img_area .img_wrap img:first-child{max-width: 148px;}

   .main_bann_txt{font-size: 43px; line-height: 56px;}
}
@media screen and (max-width:720px){
   header .logo_img img{max-width: 70px;}
   header .logo_img .add_white_img{max-width: 135px;}
}
@media screen and (max-width:640px){
   .pic_list .img_wrap p{font-size: 32px;}
   .img_info.fs_mid{font-size: 22px; margin: 7% 0 3%;}
   .img_info.fs_sml{font-size: 14px;}
   .ham_menu{width: 115px; height: 84px;}
   .nav_inner .nav_menu{padding: 15% 0; }
   
   .nav_menu > ul{position: absolute; width: 50%; top: 43%; left: 50%; transform: translate(-50%,-50%); text-align: center;}
   .nav_inner .nav_menu > ul > li{margin-bottom: 20%;}

   .main_bann_txt{font-size: 34px; line-height: 42px;}
}
@media screen and (max-width:520px){
   .main_bann_txt{font-size: 28px; line-height: 36px;}

   .popup .pp_box{width: 80%;}
}
@media screen and (max-width:480px){
   .nav_inner .nav_menu p{font-size: 35px;}
   nav li a{line-height: 30px; font-size: 16px;}

   .pic_list .img_wrap p{font-size: 26px;}

   .main_bann_txt{font-size: 24px; line-height: 32px;}
   .popup .pp_box span{font-size: 12px; bottom: 9px;}

   .nav_inner .img_area .img_wrap img:first-child{max-width: 127px;}
   .nav_inner .img_area .img_wrap img{max-width: 69px;}

   header .logo_img img{max-width: 53px;}
   header .logo_img .add_white_img{max-width: 100px;}
}

@media screen and (max-width:380px){
   .pic_list .img_wrap p{font-size: 24px;}
   .img_info.fs_mid{font-size: 18px;}
   .img_info.fs_sml{font-size: 13px; line-height: 21px;}
}