@charset "UTF-8"; /*---------- common ----------*/
.logo a img { display: block; width: 100%; max-width: 190px; object-fit: cover; } 

/* body */
body.menu_hover .header:before { height: calc(100% + 80px); transition: height .5s; } 
body.menu_hover .header:after { opacity: 1; } 
body .header.hover .logo a.logo_b img { display: block; opacity: 1; filter: Alpha(opacity=100); position: unset; } 
body .header.hover .logo a.logo_w img { display: none; opacity: 0; filter: Alpha(opacity=0); } 
body.menu_hover .main_nav .main_menu { max-width:100%; transition: all .5s; } 
body.menu_hover .main_nav .main_menu > li .sub_menu > li { opacity: 1.0; transition: all 0.8s ease; } 
body.menu_hover .main_nav .main_menu > li.on .sub_menu > li:nth-child(1) { transition-delay: 0.1s; } 
body.menu_hover .main_nav .main_menu > li.on .sub_menu > li:nth-child(2) { transition-delay: 0.2s; } 
body.menu_hover .main_nav .main_menu > li.on .sub_menu > li:nth-child(3) { transition-delay: 0.3s; } 
body.menu_hover .main_nav .main_menu > li.on .sub_menu > li:nth-child(4) { transition-delay: 0.4s; } 
body.menu_hover .main_nav .main_menu > li.on .sub_menu > li:nth-child(5) { transition-delay: 0.5s; } 
body.menu_hover .main_nav .main_menu > li.on .sub_menu > li:nth-child(6) { transition-delay: 0.6s; } 
body.menu_hover .main_nav .main_menu > li.on .sub_menu { height: auto; opacity: 1; } 
body .header.hover .lang_box > div { color: inherit; } 
body.menu_hover header.hover .main_nav .main_menu li a { transition: all .3s; } 
body.menu_hover header.hover .main_nav .main_menu li:hover a { transition: all .3s; } 

body.sub .header:after { opacity: 1; } 
body.sub .header .logo a.logo_b img { display: block; opacity: 1; filter: Alpha(opacity=100); position: unset; } 
body.sub .header .logo a.logo_w img { display: none; opacity: 0; filter: Alpha(opacity=0); } 
body.sub .header .lang_box > div { color: inherit; } 
body.sub .header .main_nav .main_menu li a { color: #333; transition: all .3s; font-size: 20px; } 
body.sub .header .main_nav .main_menu .menu > a { font-size: 22px; font-weight: 600; position: relative; } 
body.sub .header .all_btn { border: 1px solid #111; } 
body.sub .header .all_btn i { background: #111; } 

/* header */
.header.on .logo a.logo_b img { display: block; opacity: 1; filter: Alpha(opacity=100); position: unset; } 
.header.on .logo a.logo_w img { display: none; opacity: 0; filter: Alpha(opacity=0); } 
.header.on .main_nav .main_menu > li > a, .header.on .lang_box > div { color: #333; } 
.header.on .all_btn { border: 1px solid #111; } 
.header.on .all_btn i { background: #111; } 

.lang_box > div {
  cursor: pointer;
}


/*---------- bottom_wrap ----------*/
.bottom_wrap { opacity: 0; } 
.bottom_wrap.on { width: 50px; height: 50px; text-align: center; transition: 0.3s; position: fixed; right: 2vw; bottom: 2vw; opacity: 1; z-index: 999; } 
.bottom_wrap a { display: block; width: 100%; height: 100%; } 
.bottom_wrap a button.btn_top { position: absolute; top: 0; right: 0; width: 100%; height: 100%; border: none; outline: none; cursor: pointer; background-color: var(--main-color); border-color: transparent; border-radius: 50%; text-align: center; font-size: 16px; z-index: 90; font-weight: 500; transition: 0.3s; } 
.bottom_wrap a button.btn_top i { display: block; font-size: 22px; color: #fff; } 

/* hover */
.bottom_wrap a:hover button.btn_top { background: #dadada; transition: 0.3s; } 


/*---------- head ----------*/
.header { width: 100%; height: 110px; position: absolute; top: 0; left: 0; right: 0; z-index: 999; transition: all 1s; } 
.header.hover { background:#fff; } 
 .header.hover .main_menu > .menu a { color:#333 } 

/* .header:before { content:""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 0; background-color: #fff; overflow: hidden; box-shadow: 0px 4px 6px rgb(10 11 12 / 10%); transition: height .5s; z-index: -1; } */
.header:after { content:""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #ddd; opacity: 0; z-index: -1; } 
.header .header_container { position: relative; width: 100%; height: 100%; } 
.header .header_layout { width: 100%; max-width: 1585px; height: 100%; display: flex; justify-content: space-between; margin: 0 auto; align-items: center; } 
.header .logo { z-index: 99999999; } 
.header .logo a { display: block; width: 100%; height: 100%; } 
.header .logo a.logo_w img { display: block; opacity: 1; filter: Alpha(opacity=100); } 
.header .logo a.logo_b img { display: none; opacity: 0; filter: Alpha(opacity=0); position: absolute; top: 0; left: 0; } 

/* on */
.header.on { position: fixed; top: 0; background: #fff; box-shadow: 0px 4px 6px rgb(10 11 12 / 10%); transition: all .5s; } 


/* menu */
.main_nav { margin: 0 auto; } 
.main_nav .main_menu { display: flex; justify-content: space-between; width: 100%; max-width: 650px; height: 100%; margin: 0 auto; transition: all .5s; } 
.main_nav .main_menu > li { width: 220px; position: relative; } 
.main_nav .main_menu > li > a { display: block; line-height: 110px; text-align: center; letter-spacing: 1px; color: #fff; } 
.main_nav .main_menu li a { font-family: "Nanum Myeongjo", serif; } 
.main_nav .main_menu > .menu > a { font-size: 22px; font-weight: 600; } 
.main_nav .main_menu > li .sub_menu { justify-content: flex-start; align-items: center; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 100%; z-index: -1; margin: 0 auto; opacity: 0; background: #fff; box-shadow: 0 0 4px 1px #dcdcdc91; height: 0; overflow: hidden; } 
.main_nav .main_menu > li .sub_menu > li:first-child { padding-top: 20px; } 
.main_nav .main_menu > li .sub_menu > li:last-child { padding-bottom: 20px; } 
.main_nav .main_menu > li .sub_menu li { opacity: 0; transition: all 0.8s ease; } 
.main_nav .main_menu > li .sub_menu li a { display: block; line-height: 1.4; text-align: center; padding: 12px 0; transition: all .3s; } 
.main_nav .main_menu > li .sub_menu > li > a { position: relative; font-size: 20px; } 
/* on + board */
.main_nav .main_menu > li .sub_menu > li.on a { color: var(--main-color); transition: all .3s; } 
.main_nav .main_menu > li .sub_menu > li.on > a:before, .main_nav .main_menu > li .sub_menu > li.on > a:after { opacity: 1; transition: all .3s; animation: main_menu_ani .5s; } 
/* ani */
@keyframes main_menu_ani { 
 0% { width: 0% } 
100% { width: 50%; } 
 }
 .main_nav .main_menu > li > a::before { content:''; display:block; position:absolute; left:0; background: #006935; width: 100%; height: 3px; bottom: 0px; transition: all .3s; opacity: 0; } 
 .main_nav .main_menu > li.on > a::before { opacity:1 } 


/* lang_box */
.header .lang_box {position: relative;width: auto;height: 100%;z-index: 1;cursor: pointer;} 
.header .lang_box a { display: block; font-family: "Gowun Batang", serif; font-size: 17px; text-align: center; } 
.header .lang_box > div { height: 110px; line-height: 110px; color: #fff; padding: 0 20px; z-index: 100; position: relative; font-family: 'Nanum Myeongjo'; } 
.header .lang_box > div span { margin: 0 10px; } 
.header .lang_box .lang_list { position: absolute; top: 100%; left: 0; width: 100%; border-radius: 5px; transition: height .3s; z-index: 100; opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  /* 부드러운 애니메이션 (0.25초) */
  transition: all 0.25s ease-in-out;} 
  .lang_box.active .lang_list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.header .lang_box .lang_list li { border-bottom: 1px solid #eee; } 
.header .lang_box .lang_list li:last-child { border-bottom: 1px solid transparent; } 
.header .lang_box .lang_list li a { font-size: 15px; background: #fff; padding: 12px 0; transition: all .3s; } 
/* on */
.header .lang_box.on .lang_list { height: 80px; box-shadow: 0px 4px 6px rgb(10 11 12 / 10%); transition: height .3s; } 
.header .lang_box.on .lang_list li:hover a { color: #fff; background: var(--main-color); transition: all .3s; } 


/* sns_wrap */
.header .sns_wrap li:first-child { margin-right: 10px; } 
.header .sns_wrap li a { display: block; width: 100%; height: 100%; } 


/* all_btn */
.all_btn { display: none; position: relative; width: 40px; height: 40px; border: 1px solid #fff; background: transparent; border-radius: 50%; margin-left: 10px; transition: all .3s; z-index: 99999; } 
.all_btn i { position: absolute; left: 0; right: 0; display: block; width: 16px; height: 1px; background: #fff; margin: 0 auto; transition: all .7s; } 
.all_btn i:nth-child(2) { top: 40%; } 
.all_btn i:nth-child(3) { top: 55%; } 
.all_btn i:nth-child(4) { top: 65%; } 
/* on */
.all_btn.on { border: 1px solid #111; } 
.all_btn.on i { top: 48%; width: 20px; background: #111; transition: all 0.7s; } 
.all_btn.on i:nth-child(2) { transform: rotate(45deg); } 
.all_btn.on i:nth-child(3) { transform: rotate(-45deg); } 
.all_btn.on i:nth-child(4) { display: none; } 


/*---------- all_menus ----------*/
#all_menu { display: none !important; } 

/* all_menu_mb */
.all_menus { position: absolute; width: 0%; height: 100vh; top: 0; right: 0; background: #fff; padding-top: 110px; overflow-y: auto; overflow-x: hidden; visibility: hidden; transform: translateX(100%); transition: all 1s; z-index: 9999; } 
.all_menus:before { content: ""; display: block; position: absolute; bottom: 0; right: 0; width: 100%; max-width: 349px; height: 220px; background: url(../img/big_logo.png) no-repeat bottom -2vw right -4vw / contain; filter: grayscale(.9) opacity(0.2); z-index: -1; } 
.all_btn_close button > span { background: #000; } 
.all_menus div.clone > ul > li > a { display: flex; font-size: 20px; padding: 20px; justify-content: space-between; align-items: center; border-top: 1px solid #eee; } 
.all_menus div.clone > ul > li ul li a { display: block; padding: 0 20px; } 
.all_menus div.clone ul.depth_02 li { line-height: 2.4; } 
.all_menus div.clone ul.depth_02 li a { font-size: 16px; color: #fff; } 
.all_menus div.clone ul.depth_02 li a i { margin-left: 5px; } 
.all_menus div.clone > ul > li.active ul.depth_02 { padding: 10px 0; background: var(--main-color); } 
.all_menus div.clone ul.depth_03 li a { font-size: 16px; color: #222; } 
.all_menus div.clone > ul > li.active ul.depth_03 { background: #fff; } 

/* on + hide */
.all_menus.on { visibility: visible; transform: translateX(0); transition: all 1s; box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.3); } 
.all_menus.on:before { animation: f_in 5000ms forwards; transition: transform 5000ms ease-in-out, opacity 5000ms ease-in-out; } 
.all_menus div.clone, .all_menus.on { width: 400px; } 
.header .all_btn_close button > span { background: #797979; } 
.all_menus.hide { display: block !important; animation: all_hide 1s; } 

/* ani */
@keyframes nav_arrow { 
 0% { margin-right: 30px; } 
100% { margin-right: 0px; } 
 }
@keyframes f_in { 
 0% { opacity: 0; } 
100% { opacity: 1; } 
 }


/*---------- footer ----------*/
.footer { position: relative; color: #333; padding: 60px 0 55px; background: #f7f7f7f7; } 
.footer > div { max-width: 1560px; margin: 0 auto; } 

.footer .top { position: relative; flex-direction: column; } 
.footer .top h3 { font-size: 22px; padding: 30px 0; color: #333; font-weight: 600; } 
.footer .logo_wrap { width: 19%; } 
.footer .logo a { } 
.footer .address_wrap { } 
.footer .address_wrap address { font-style: unset; } 
.footer .address_wrap ul:not(:last-child) { margin-right: 100px; } 
.footer .address_wrap ul li { margin-bottom: 10px; } 
.footer .address_wrap ul li p { } 
.footer .address_wrap ul li:last-child { margin-bottom: 0; } 
.footer .address_wrap ul.address_list2 li { margin-bottom: 0; } 
.footer .address_wrap ul.address_list2 li p { position: relative; display: inline-block; font-size: 18px; color: #333; line-height: 1; padding-right: 20px; margin-right: 15px; } 
.footer .address_wrap ul.address_list2 { display: flex; } 
.footer .address_wrap ul.address_list2 li p:after { content: ""; display: block; position: absolute; top: 13%; right: 0; width: 1px; height: 94%; background: #000; } 
.footer .address_wrap ul.address_list2 li:last-child p:after { display: none; } 
.footer .address_wrap ul li p span { display: inline-block; font-weight: 600; color: #333; } 


.footer .area2 { border-top: 1px solid #ccc; padding-top: 30px; margin-top: 40px; } 
.footer .noti p { display: inline-block; } 
.footer .noti p:nth-child(1) { font-weight: 600; } 
.footer .noti p:nth-child(2) { margin-left: 10px; } 
.footer .noti p:nth-child(2):before { content:""; display: inline-block; color: #fff; width: 2px; height: 2px; background: #7a7a7a; vertical-align: middle; margin-right: 10px; } 


/*---------- respon ----------*/
@media all and (max-width: 1585px){
 .header .header_layout { width: 96%; } 
.main_nav .main_menu > li .sub_menu { width: 90%; } 
 }


@media all and (max-width: 1560px){
 .footer > div { width: 96%; } 
 }


@media all and (max-width: 1300px){
 .main_nav { display: none; } 
.header .lang_box { margin: 0 0 0 auto; } 
.all_btn { display: block; } 
#all_menu { display: none !important; } 
#all_menu_mb.on { opacity: 1; } 
 }


@media all and (max-width: 1023px){
 .header { height: 80px; } 
.logo a img { max-width: 150px; } 
.header .lang_box > div { height: 80px; line-height: 80px; } 
.all_menus { padding-top: 80px; } 
@media (max-width: 1024px) { [data-aos] { opacity: 1 !important; transform: none !important; } 
 } 
 }


@media all and (max-width: 767px){
 .logo a img { max-width: 110px; } 

.header .lang_box { padding: 0 5px; } 
.header .lang_box.on .lang_list { height: 76px; } 
.header .lang_box > div { font-size: 15px; } 
.header .lang_box .lang_list li a { font-size: 13px; } 
.all_menus:before { width: 80vw; } 
.all_menus div.clone > ul > li > a { font-size: 17px; } 
.all_menus div.clone ul.depth_02 li a { font-size: 15px; letter-spacing: 1px; } 
 }


@media all and (max-width: 479px){
 .all_menus div.clone, .all_menus.on { width: 100%; } 
.all_menus div.clone > ul > li > a { padding: 20px 5%; } 
.all_menus div.clone ul.depth_02 li a { padding: 0 6%; } 
 .footer .logo_wrap { width: 27%; } 
.footer { padding: 2rem 0 3rem; } 
 .footer .top h3 { font-size: 18px; padding: 20px 0 14px 0; } 
 .footer .address_wrap ul li p { font-size: 15px; } 
 .footer .address_wrap ul.address_list2 li p { font-size: 15px; padding-right: 10px; margin-right: 7px; } 
 .footer .address_wrap ul.address_list2 { display: flex; flex-wrap: wrap; } 
 .footer .address_wrap ul.address_list2 > li:nth-child(1) p:nth-child(2)::after { display: none; } 
 .footer .address_wrap ul.address_list2 li { margin-bottom: 4px; } 
 .footer .address_wrap ul.address_list2 li p:after { top: 0; } 
 .footer .area2 { padding-top: 20px; margin-top: 20px; font-size: 16px; } 
 .footer .area2 .copy p { font-size: 15px; } 
 .footer .area2 .noti { display: none; } 
 }