@charset "utf-8";@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100; 300; 400; 500; 700; 900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300; 400; 700&display=swap');#yk_header, #yk_wrapper, #yk_ft { font-family: Lato, 'NanumSquare', 'Noto Sans KR','Noto Sans SC', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif; font-weight: 400; } 
/* font-family: 'Lato', sans-serif; */
/********* 공통 css *********/
:root { --main-color: #3383d0; /* --sub-color: #931215; */ } 
.main_color { color: var(--main-color); } 

.inner_wrap { width: 1300px; height: 100%; margin: 0 auto; position: relative; font-size: 16px; line-height: 1.5;} 

a { text-decoration:none; color: #222; display: block; } 
.blind { overflow:hidden; position:absolute; top:0; left:0; width:1px; height:1px; font-size:0; line-height:0 } 

.yk_wrapper { padding: 0 1% } 
.yk_container_wr { widows: 100%; } 

/* header */
#yk_mobile_header { display: none; } 
#yk_header { width: 100%; height: 70px; font-size: 16px; position: fixed; z-index: 1000; background-color: rgba(255, 255, 255, 0); border-bottom: 1px solid #dddddd99; } 
#yk_header .yk_gnb { height: 100%; display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; flex-direction: row; } 
#yk_header .logo .header_logo_title { font-size: 28px; font-weight: 800; color: #fff; } 
#yk_header .logo .header_logo_title b { font-weight: 800; } 
/* ******************* header add class ***************** */
/* active */
#yk_header.active { background-color: rgb(255, 255, 255); } 
#yk_header.active .yk_gnb .logo .header_logo_title { color: #222; } 
#yk_header.active .yk_gnb .logo .header_logo_title b { color: var(--main-color); } 
#yk_header.active .yk_gnb .main_menu>li>a { color: #222; } 
/* white */
#yk_header.white .yk_gnb .logo .header_logo_title { color: #222; } 
#yk_header.white .yk_gnb .logo .header_logo_title b { color: var(--main-color); } 
#yk_header.white .yk_gnb .main_menu>li>a { color: #222; } 
#yk_header.white { background-color: rgb(255, 255, 255); } 
/* ******************* header add class end ***************** */

#yk_header .yk_gnb .main_menu { display: flex; justify-content: space-around; width: 60%; height: 100%; text-align: center; } 
#yk_header .yk_gnb .main_menu .gnb-1dep { width: 20%; } 
#yk_header .yk_gnb .main_menu>li>a { font-size: 18px; width: 100%; height: 100%; line-height: 80px; font-weight: 500; position: relative; color: #fff; font-weight: 800; } 

/* main_menu hover */
#yk_header .yk_gnb .main_menu .gnb-1dep>a { transition: all 0.5s; } 
#yk_header .yk_gnb .main_menu .gnb-1dep>a::before { display: block; content: ""; width: 0; height: 14%; background-color: #3383d04d; transition: all 1s; position: absolute; bottom: 18px; left: 20%; } 

#yk_header .yk_gnb .main_menu .gnb-1dep:hover>a::before { width: 60%; } 
/* #yk_header .yk_gnb .main_menu .gnb-1dep:hover>a { color: #000; font-weight: 800; } */

#yk_header .yk_gnb .main_menu .gnb-2dep { display: none; position: relative; left: 0; z-index: 10000; background-color: unset; text-align: left; height: 280px; width: 100%; } 
#yk_header .yk_gnb .main_menu .gnb-2dep li { transition: all .5s; } 
#yk_header .yk_gnb .main_menu .gnb-2dep li a { font-size: 16px; padding: 15px 0; color: #474646; transition: all .5s; position: relative; text-align: center; } 
/* sub_menu hover */
#yk_header .yk_gnb .main_menu .gnb-2dep li:hover>a { color: #fff; } 
/* header_bg */
.header_bg { width: 100%; /* height: 224px; */
 height: 0; background-color: #cdcdcddb; position: absolute; top: 70px; z-index: 2; } 

/* footer */
/* yk_ft */
#yk_ft { background-color: #2a2a2a; color: #f4f4f4; padding: 40px 0; position: relative; } 
#yk_ft::before { content:''; display: block; position: absolute; top: 37%; width: 100%; height: 1px; background: #9e9898; } 
#yk_ft .footer_box { position: relative; } 
#yk_ft .footer_box .footer_left { font-size: 14px; width: 100%; position: relative; } 
#yk_ft .footer_box .footer_left ul:nth-of-type(1) { padding-top: 40px; } 

#yk_ft .footer_box .footer_left .footer_logo { position: relative; } 
#yk_ft .footer_box .footer_left .footer_logo h2 { font-size: 28px; font-weight: 600; color: #666; padding-bottom: 40px; } 
#yk_ft .footer_box .footer_left .top_btn_box { position: absolute; top: 7px; right: 0; cursor: pointer; } 
#yk_ft .footer_box .footer_left .top_btn_box #yk_top_btn { color: #ddd; background-color: #2a2a2a; padding-right: 23px; } 
#yk_ft .footer_box .top_btn_box #yk_top_btn { position: relative; } 
#yk_ft .footer_box .top_btn_box #yk_top_btn::after { content:''; display: block; width:13px; height: 7px; background:url(../img/btn_top.gif) center center no-repeat; background-size: cover; position: absolute; top: 2px; right: 0; opacity: 0.8; } 

#yk_ft .footer_box .footer_left .address_box { display: flex; color: #9e9898; align-items: center; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; } 
#yk_ft .footer_box .footer_left .address_box li.add_tit { color: #f3f3f3; } 
#yk_ft .footer_box .footer_left .address_box li { line-height: 2.0; padding-right: 15px; } 
#yk_ft .footer_box .footer_left .address_box li span { } 
#yk_ft .footer_box .footer_left .copyright { padding-top: 40px; } 
#yk_ft .footer_box .footer_left .copyright b { color: #fff; padding: 0 3px; font-weight: 500; } 

#yk_ft .footer_box .family_site { font-size: 15px; display: block; position: absolute; right: 0; top: 120px; width: 154px; border: 1px solid #9e9898; } 
#yk_ft .footer_box .family_site a { color: #ddd; width: 100%; height: 100%; padding: 10px 20px; text-align: center; } 

/* btn_common_css */
/*
HTML
<span class="view btn">
 <a href="javascript:(); "></a>
 <!-- a::after -->
</span>
*/

.view_btn { display: inline-block; overflow: hidden; } 
.view_btn a::before { display: block; position: absolute; left: -130%; bottom: 0; content: ""; width: 120%; height: 150%; background: var(--main-color); transform: skew(-20deg); -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -o-transition: all 0.8s; -ms-transition: all 0.8s; transition: all 0.8s; z-index: -1; } 

.view_btn a:hover::before { left: -10%; opacity: 1.0; } 
.view_btn a:hover { border: 1px solid var(--main-color); } 
.view_btn a { color: inherit; padding: 20px 70px 20px 32px; position: relative; border: 1px solid #f1f1f1; border-radius: 35px; overflow: hidden; font-size: 18px; font-weight: 500; } 

/* 텍스트 뒤 화살표 */
.view_btn a:after { display: inline-block; content:""; width: 18px; height: 13px; background:url(../img/main_arrow.png) no-repeat; position: absolute; right: 30px; top: calc((100% - 13px)/2); } 

/* card */
.jt_card_motion > * { -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); opacity: 0; -webkit-transition: opacity 800ms, 
 -webkit-transform 1s ease-out; transition: transform 1s ease-out, opacity 800ms; } 

.jt_card_motion > *:nth-child(1) { -webkit-transition-delay: 300ms; transition-delay: 300ms; } 
.jt_card_motion > *:nth-child(2) { -webkit-transition-delay: 450ms; transition-delay: 450ms; } 
.jt_card_motion > *:nth-child(3) { -webkit-transition-delay: 600ms; transition-delay: 600ms; } 
.jt_card_motion > *:nth-child(4) { -webkit-transition-delay: 750ms; transition-delay: 750ms; } 
.jt_card_motion > *:nth-child(5) { -webkit-transition-delay: 900ms; transition-delay: 900ms; } 
.jt_card_motion > *:nth-child(6) { -webkit-transition-delay: 1050ms; transition-delay: 1050ms; } 
.jt_card_motion > *:nth-child(7) { -webkit-transition-delay: 1200ms; transition-delay: 1200ms; } 
.jt_card_motion > *:nth-child(8) { -webkit-transition-delay: 1350ms; transition-delay: 1350ms; } 
.jt_card_motion > *:nth-child(9) { -webkit-transition-delay: 1500ms; transition-delay: 1500ms; } 
.jt_card_motion > *:nth-child(10) { -webkit-transition-delay: 1650ms; transition-delay: 1650ms; } 
/* .jt_card_motion > *:nth-child(11) { -webkit-transition-delay: 1850ms; transition-delay: 1850ms; } 
.jt_card_motion > *:nth-child(12) { -webkit-transition-delay: 2000ms; transition-delay: 2000ms; } 
.jt_card_motion > *:nth-child(13) { -webkit-transition-delay: 2150ms; transition-delay: 2150ms; } 
.jt_card_motion > *:nth-child(14) { -webkit-transition-delay: 2300ms; transition-delay: 2300ms; } 
.jt_card_motion > *:nth-child(15) { -webkit-transition-delay: 2450ms; transition-delay: 2450ms; } 
.jt_card_motion > *:nth-child(16) { -webkit-transition-delay: 2600ms; transition-delay: 2600ms; } 
.jt_card_motion > *:nth-child(17) { -webkit-transition-delay: 2750ms; transition-delay: 2750ms; } 
.jt_card_motion > *:nth-child(18) { -webkit-transition-delay: 2900ms; transition-delay: 2900ms; } 
.jt_card_motion > *:nth-child(19) { -webkit-transition-delay: 3050ms; transition-delay: 3050ms; } 
.jt_card_motion > *:nth-child(20) { -webkit-transition-delay: 3200ms; transition-delay: 3200ms; } */
.jt_card_motion.aos-animate > * { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 

@media (max-width: 1300px){
 .inner_wrap { width: 1000px; } 
 }
@media (max-width: 1080px){
 .inner_wrap { width: 100%; padding: 0 4%; } 
 #yk_header .yk_gnb .main_menu { width: 68%; } 
 }

@media (max-width: 800px) { /* 버튼 공통 */
 .view_btn a { font-size: 17px; } 
 .inner_wrap { width: 100%; padding: 0 2%; } 

 /* mobile_header 시작 */
 #yk_header { display: none; } 
 #yk_mobile_header { display: block; } 

 #yk_mobile_header .mobile_top .header_logo_title { font-size: 21px; } 

 #yk_mobile_header .yk_mobile_gnb.bg_wh { background-color: #fff; } 
 #yk_mobile_header .yk_mobile_gnb ul.gnb-2dep li .letter_small { font-size: 15px; } 
 #yk_mobile_header .yk_mobile_gnb { display: block; height: 100%; } 
 #yk_mobile_header .yk_mobile_gnb .mobile_top { height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 6px; } 

 /* hamberger */
#yk_mobile_header .yk_mobile_gnb .nav-open-btn { display: block; height: 30px; background-color: unset; border: unset; /* 햄버거 애니메이션 */
 -webkit-transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);; } 
 #yk_mobile_header .yk_mobile_gnb .nav-open-btn .line { display: block; width: 28px; height: 3px; background-color: #0d0c0a; border-radius: 5px; margin: 4px auto; /* 햄버거 애니메이션 */
 -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } 
 .nav-open-btn.active .line { background-color:#333; } 
 .nav-open-btn.active .line:nth-child(2), .nav-open-btn.active .line:nth-child(4) { opacity: 0; } 
 .nav-open-btn.active .line:nth-child(1) { -webkit-transform: translateY(7px) rotate(45deg); transform: translateY(7px) rotate(45deg); } 
 .nav-open-btn.active .line:nth-child(3) { -webkit-transform: translateY(-7px) rotate(-45deg); transform: translateY(-7px) rotate(-45deg); } 

 /* menu custom */
 #yk_mobile_header .yk_mobile_gnb .main_menu { display: block; position: absolute; z-index: 100; background: var(--main-color); width: 100%; height: 100vh; right: -100%; transition: all 0.4s; } 
 #yk_mobile_header .yk_mobile_gnb .main_menu.right { right: 0; } 
 #yk_mobile_header .yk_mobile_gnb .gnb-1dep.on a::before { transform: translate(-50%, -50%) rotate(90deg); } 
 #yk_mobile_header .yk_mobile_gnb .gnb-1dep a { padding: 10px 20px; font-size: 20px; color: #fff; position: relative; } 
 
 #yk_mobile_header .yk_mobile_gnb .gnb-1dep a:after { background-color: #fff; content: ''; width: 15px; height: 1px; position: absolute; right: 1.5%; top: 50%; transition: 0.3s ease-in-out; transform: translate(-50%, -50%); } 
 #yk_mobile_header .yk_mobile_gnb .gnb-1dep a:before { background-color: #fff; content: ''; width: 15px; height: 1px; position: absolute; right: 1.5%; top: 50%; transition: 0.3s ease-in-out; transform: translate(-50%, -50%); } 
 
 #yk_mobile_header .yk_mobile_gnb .gnb-2dep { display: none; background-color: #fff; } 
 #yk_mobile_header .yk_mobile_gnb .gnb-2dep li { border-bottom: 1px solid rgba(255, 255, 255, 0.815); } 
 #yk_mobile_header .yk_mobile_gnb .gnb-2dep li a { font-size: 18px; color: #222; } 

 /* footer */
 #yk_ft::before { top: 32%; } 
 #yk_ft .footer_box .footer_left .footer_logo h2 { font-size: 24px; padding-bottom: 0; } 
 #yk_ft .footer_box .family_site { display: none; } 
}
 @media (max-width: 480px){
   .inner_wrap{font-size: 14px;}
   #yk_ft .footer_box .footer_left .address_box li{font-size: 12px;}
    /* 공통 버튼 */
    .view_btn a{font-size: 16px; padding: 16px 49px 16px 24px;}
    .view_btn a:after{right: 23px;}
    

 #yk_mobile_header .yk_mobile_gnb .gnb-1dep>a { font-size: 16px; border-bottom: 1px solid #ffffff5c; } 
 #yk_mobile_header .yk_mobile_gnb .gnb-2dep li a { font-size: 16px; color: #222; }

 /* footer */
 #yk_ft { padding: 20px 0; } 
 #yk_ft .footer_box .footer_left ul:nth-of-type(1) { padding-top: 20px; } 
 #yk_ft::before { display:none; } 
 #yk_ft .footer_box .footer_left .footer_logo h2 { font-size: 24px; padding-bottom: 0; } 
 #yk_ft .footer_box .family_site { display: none; } 
 #yk_ft .footer_box .footer_left .copyright { font-size: 13px; color:#a9a9a9; } 
 #yk_ft .footer_box .footer_left .copyright b { display: block; } 
 }