@charset "UTF-8";

/* 레이아웃 공통 */
body,html{position:relative; height:100%; margin:0; padding:0;}
body{position:relative; background-color:#ffff; color:#656464; font-size:16px; font-weight:400; font-family:"Pretendard" ,"Apple SD Gothic Neo","애플 SD 산돌고딕 Neo","Malgun Gothic","맑은 고딕","돋움",Dotum,Helvetica,Tahoma,Dotum,sans-serif; line-height:24px; overflow-x:hidden;letter-spacing:-0.025em; word-break:keep-all; overflow-wrap:break-word;}
html[lang="en"] body, html[lang="zh-CN"] body{word-break:break-word; letter-spacing:0;}
#header{position:relative; z-index:30; width:100%; background-color:#fff;}
#container{position:relative; z-index:10; width:100%; background-color:#fff;}
#footer{position:relative; z-index:20; width:100%; background-color:#fff;}
#screen{visibility:hidden; overflow:scroll; position:absolute; width:100px; height:100px;}
#wrapper{overflow:hidden; position:relative;}
.wrap{position:relative; width:1440px; margin:0 auto;}

/* 본문바로가기  */
.accessibility{overflow:hidden; position:absolute; top:0; left:0; z-index:3000; width:100%;}
.accessibility a{display:block; overflow:hidden; z-index:3000; width:1px; height:1px; margin:0 -1px -1px 0; font-size:0; text-align:center; line-height:0;}
#accessibility a:active,#accessibility a:hover,.accessibility a:focus{width:auto; height:30px; margin:0; padding:8px 0; background-color:#333; color:#fff; font-size:14px; line-height:16px;}

/* 공통 */
body.menu-open, body.search-open{overflow:hidden;}
#wrapper:before{opacity:0; visibility:hidden; position:absolute; top:0; left:0; z-index:11; width:100%; height:100%; background:rgba(0, 0, 0, 0.40); content:''; transition:0.25s ease-in-out;}
.search-open #wrapper:before{opacity:1; visibility:inherit;}
.copyright{color:#656464; font-size:14px; line-height:1.42857;}
.sns{display:flex; align-items:center; gap:12px;}
.sns a{width:20px; height:20px;}
.sns a:before{display:block; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover; content:'';}
.sns .sns-youtube:before{background-image:url(../images/common/sns_youtube.png);}
.sns .sns-youtube:hover:before{background-image:url(../images/common/sns_youtube_on.png);}
.sns .sns-facebook:before{background-image:url(../images/common/sns_facebook.png);}
.sns .sns-facebook:hover:before{background-image:url(../images/common/sns_facebook_on.png);}
.sns .sns-linkedin:before{background-image:url(../images/common/sns_linkedin.png);}
.sns .sns-linkedin:hover:before{background-image:url(../images/common/sns_linkedin_on.png);}
.sns .sns-kakao:before{background-image:url(../images/common/sns_kakao.png); background-color:transparent; -webkit-mask:none; mask:none;}
.sns .sns-kakao:hover:before{background-image:url(../images/common/sns_kakao_on.png); background-color:transparent;}

/* 상단 */
#header{position:absolute; top:0; left:0; background-color:transparent;}
#header .wrap{width:100%; padding:0 60px;}
#header .btn-menu{display:flex; color:#656464; font-size:18px; line-height:1.555; gap:12px; align-items:center;}
#header .btn-menu:before{background-repeat:no-repeat; background-size:contain; content:'';}
#header .top{position:relative; z-index:1;}
.menu-open #header .top, .search-open #header .top{background-color:#fff;}
#header .top .wrap{display:flex; padding-top:20px; padding-bottom:20px; justify-content:space-between; align-items:center;}
#header .top .btn-menu.open:before{width:20px; height:14px; background-image:url(../images/common/menu.png);}
#header .top .logo a img{height:60px;}
#header .top .btn-search{display:flex; padding:8px 24px; border:1px solid rgba(101, 100, 100, 0.50); border-radius:999px; color:#656464; font-size:18px; line-height:1.555; align-items:center; gap:12px;}
#header .top .btn-search:after{width:16px; height:16px; background:url(../images/common/search.png) no-repeat center / cover; content:'';}
#header .top .btn-search:hover{background-color:#656464; color:#fff;}
#header .top .btn-search:hover:after{background-image:url(../images/common/search_white.png);}
#header .menu{opacity:0; visibility:hidden; position:fixed; top:0; left:0; width:100%; height:100vh;}
.menu-open #header .menu{opacity:1; visibility:inherit; z-index:2;}
#header .menu:before{opacity:0; visibility:hidden; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background:rgba(0, 0, 0, 0.40); content:''; transition:0.25s ease-in-out;}
.menu-open #header .menu:before{opacity:1; visibility:inherit;}
#header .menu .depth{display:flex; opacity:0; visibility:hidden; position:relative; z-index:2; width:836px; height:100%; padding:0 0 36px; background:#fff url(../images/common/menu_bg.png) no-repeat top 503px right; flex-direction:column;}
.menu-open #header .menu .depth{opacity:1; visibility:inherit;}
#header .menu .depth1, #header .menu .depth2{width:50%; padding:184px 60px 0;}
#header .menu .menu-header{display:flex; position:absolute; top:36px; left:0; width:50%; padding:0 72px 0 60px; align-items:center; justify-content:space-between; box-sizing:border-box;}
#header .menu .menu-header .btn-menu.close:before{width:10px; height:10px; background-image:url(../images/common/close.png);}
#header .menu .menu-list{display:flex; flex-direction:column; gap:32px;}
#header .menu .menu-list li button{display:block; display:flex; width:100%; background:url(../images/common/arrow.png) no-repeat center right / 10px; color:#656464; font-size:32px; line-height:1.25; justify-content:space-between; align-items:center;}
#header .menu .menu-list li.active button, #header .menu .menu-list li button:hover{background-image:url(../images/common/arrow_primary.png); color:#6ABF4B;}
#header .menu .menu-footer{display:flex; width:50%; margin-top:auto; padding:0 60px; flex-direction:column; gap:24px;}
#header .menu .menu-footer .global{display:flex; align-items:center; gap:12px;}
#header .menu .menu-footer .global:before{width:14px; height:14px; background:url(../images/common/global.png) no-repeat center / cover; content:'';}
#header .menu .menu-footer .global li + li{position:relative; padding-left:13px;}
#header .menu .menu-footer .global li + li:before{position:absolute; top:0; left:0; bottom:0; width:1px; height:12px; margin:auto 0; background-color:#E8E8E8; content:'';}
#header .menu .menu-footer .global li a{color:#656464; font-size:14px; line-height:1.42857;}
#header .menu .menu-footer .global li.active a, #header .menu .menu-footer .global li a:hover{color:#000; text-decoration:underline;}
#header .menu .depth2{position:absolute; top:0; left:418px; width:50%; height:100%; border-left:1px solid var(--gray, #E8E8E8);}
#header .menu .depth2 .menu-list{display:none;}
#header .menu .depth2 .menu-list.active{display:flex;}
#header .menu .depth2 .menu-list li a{display:block; display:flex; width:100%; background:url(../images/common/arrow.png) no-repeat center right / 8px; color:#656464; font-size:24px; line-height:1.5; justify-content:space-between; align-items:center;}
#header .menu .depth2 .menu-list li a:after{content:'';}
#header .menu .depth2 .menu-list li.active a, #header .menu .depth2 .menu-list li a:hover{background-image:url(../images/common/arrow_primary.png); color:#6ABF4B;}
#header .search{opacity:0; visibility:hidden; position:absolute; top:0; left:0; width:100%; padding-top:60px; padding-bottom:60px; border-top:1px solid #E8E8E8; background-color:#fff;}
.search-open #header .search{opacity:1; visibility:inherit; top:100%;}
#header .search .search-inp{width:100%; padding-left:48px; background:url(../images/common/search_icon.png) no-repeat center left / 24px; color:#656464; font-size:32px; line-height:40px;}
#header .search .search-inp::placeholder{color:rgba(101, 100, 100, 0.5);}

/* 하단 */
#footer{padding:40px 0 30px; border-top:solid 1px #E8E8E8; background-color:#fff;}
#footer .wrap{display:flex; flex-direction:column; gap:40px;}
#footer .footer-top{display:flex; flex-direction:column; gap:16px;}
#footer .footer-logo img{height:24px;}
#footer .footer-address .address-list{display:flex; flex-direction:column; gap:6px; margin:0; padding:0; list-style:none;}
#footer .footer-address li{color:#656464; font-size:14px; line-height:1.5; display:flex; align-items:flex-start; flex-wrap:wrap;}
#footer .footer-address li .colon{margin:0 4px;}
#footer .footer-address b{font-weight:600; flex-shrink:0; margin-right:0;}
#footer .footer-address .divider{display:inline-block; margin:0 8px; color:#ccc;}
#footer .footer-bottom{display:flex; flex-direction:column; align-items:flex-end; gap:10px;}
#footer .footer-bottom-row{display:flex; width:100%; justify-content:space-between; align-items:center;}
#footer .copyright{color:#656464; font-size:14px; line-height:1.42857;}

@media (max-width:1440px){
    .wrap{width:100%; padding-right:20px !important; padding-left:20px !important;}
    #header .menu .menu-footer{width:100%; padding:0 16px; gap:12px;}
}

@media (max-width:1024px){
    .copyright{font-size:12px;}
    #header .wrap{padding-right:16px !important; padding-left:16px !important;}
    #header .btn-menu{width:24px; height:24px; font-size:0; gap:0; justify-content:center;}
    #header .top .wrap{height:60px; padding-top:10px; padding-right:12px !important; padding-bottom:10px; padding-left:14px !important;}
    #header .top .logo a img{height:30px;}
    #header .top .btn-search{width:24px; height:24px; padding:0; border:0; font-size:0; gap:0; justify-content:center;}
    #header .top .btn-search:hover{background-color:transparent;}
    #header .top .btn-search:hover:after{background-image:url(../images/common/search.png);}
    #header .menu .depth{width:100%; max-width:360px; padding-bottom:16px; background-position:bottom 70px right; background-size:224px;}
    #header .menu .depth1{padding:100px 16px 0;}
    #header .menu .menu-header{top:18px; width:100%; padding:0 16px 0 14px;}
    #header .menu .menu-list{gap:24px;}
    #header .menu .menu-list li button{background-size:6px; font-size:20px;}
    #header .menu .menu-footer .global li a{font-size:12px;}
    #header .menu .depth2{top:80px; left:180px; bottom:100px; height:auto; padding:22px 16px 0;}
    #header .menu .depth2 .menu-list{gap:18px;}
    #header .menu .depth2 .menu-list li a{background-size:5px; font-size:15px;}
    #header .search{padding-top:10px; padding-bottom:10px;}
    #header .search .search-inp{padding-left:28px; background-size:18px; font-size:18px;}
    /* 모바일 footer */
    #footer{padding:24px 0 20px;}
    #footer .wrap{gap:20px;}
    #footer .footer-top{gap:12px;}
    #footer .footer-address li{font-size:12px;}
    #footer .footer-address .contact-number{flex-direction:row;}
    #footer .footer-bottom{align-items:flex-start;}
    #footer .footer-bottom-row{flex-direction:column; gap:10px;}
    #footer .copyright{font-size:11px;}
}

/* 탑버튼 */
#btn-top{display:none;position:fixed;right:24px;bottom:60px;width:48px;height:48px;background:#6abf4b;border:0;border-radius:50%;cursor:pointer;z-index:200;align-items:center;justify-content:center;transition:background 0.2s;}
#btn-top:hover{background:#5aac3e;}
#btn-top.visible{display:flex;}
#btn-top::before{content:'';display:block;width:12px;height:12px;border-top:2.5px solid #fff;border-right:2.5px solid #fff;transform:rotate(-45deg) translate(-2px,2px);}
@media(max-width:1024px){#btn-top{right:16px;bottom:40px;width:40px;height:40px;}}

/* 푸터 뉴스레터 */
#footer .footer-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
#footer .newsletter-link{display:inline-flex;align-items:center;gap:6px;color:#656464;font-size:14px;text-decoration:underline;white-space:nowrap;}
#footer .newsletter-link:hover{color:#222;}
#footer .newsletter-link::before{content:'';display:inline-block;width:16px;height:14px;flex-shrink:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18' fill='none' stroke='%23656464' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='1' y='1' width='22' height='16' rx='2'/%3E%3Cpath d='M1 4l11 7 11-7'/%3E%3C/svg%3E") no-repeat center/contain;}
@media(max-width:1024px){#footer .newsletter-link{font-size:11px;}}