@charset "utf-8";
/*************************************************************************
* @ 서비스명   : commonui
* @ 파일명     : /css/commonui.css
* @ 페이지설명  : commonui.css
* @ 작성자     : 한주현 (pointweb)
* @ 작성일     :

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

/* basic style */
* {box-sizing: border-box;}
html {width: 100%;height: 100%;}
body {overflow: inherit;width: 100%;height: 100%;}
body.on {overflow: hidden;}
#wrap {width: 100%;height: 100%;}
.layout{position:relative;margin: 0 auto;max-width: 1580px;}
.layout2{position:relative;margin: 0 auto;max-width: 1420px;}
.layout3 {position:relative;margin: 0 auto;max-width: 1100px;}
.no-data {display: block !important;font-size: 16px !important;width: 100% !important;padding: 100px 0 !important;text-align: center;margin: 0 !important;}
.blind{position: absolute;top:-9999999px;left:-999999px;}
.required{color:#e32a2a;}
#pagination{margin: 30px 0 10px;text-align:center;font-size:0;width:auto;display: block;position: relative;}
#pagination a{display:inline-block;margin:4px;color:#777;font-size:16px;font-weight:400;line-height:40px;width:40px;height:40px;vertical-align:top;border-radius:100%;}
#pagination a.active{background:#333;color:#fff;vertical-align:top;}
#pagination .end-prev,
#pagination .prev,
#pagination .next,
#pagination .end-next{text-indent: -99px;overflow: hidden;width:40px;height:40px;}
#pagination .end-prev{background:url(/_public/images2/common/first-prev.svg) no-repeat;background-size:100%;}
#pagination .prev{background:url(/_public/images2/common/prev.svg) no-repeat;margin-right:20px;background-size:100%;}
#pagination .next{background:url(/_public/images2/common/next.svg) no-repeat;margin-left:20px;background-size:100%;}
#pagination .end-next{background: url(/_public/images2/common/end-next.svg) no-repeat;background-size:100%;}


header{position: fixed;top:0;left:0;width:100%;z-index: 100;display: flex;align-items: center;justify-content: space-between;padding: 0 60px;background: rgba(0,0,0,0.1);border-bottom: 1px solid transparent;transition: all 0.3s ease;}
header .logo{display: inline-block;flex-shrink: 0;}
header .logo img{display:block;}
header .gnb .gnb-close{display:none;}
header .gnb .gnb-logo{display:none;}
header .gnb ul{display: flex;align-items: center;justify-content: center;}
header .gnb ul li{position:relative;padding: 0 60px;transition: all 0.3s ease;}
header .gnb ul li > a{position: relative;line-height: 90px;text-align: center;display: block;font-size: 22px;font-weight: 600;color: #fff;}
header .gnb ul li > a::after{position: absolute;left: 50%;bottom: 0;width: 0;height: 2px;content: '';background-color: #F2692D;transform:translateX(-50%);transition: all 0.3s ease;}
header .gnb ul li > a:hover{color: #FF6725;}
header .gnb ul li .dropdown{display:none;position: absolute;left: 0;padding:30px 0;width:100%;height:395px;z-index: 100;}
header .gnb ul li .dropdown a{display:block;font-size: 19px;font-weight: 500;line-height: 2.22;text-align: center;color: #000;}
header .gnb ul li .dropdown a:hover{font-weight: 700;text-decoration: underline;text-underline-offset: 3px;}
header .util{margin-left: 140px;display: flex; gap:10px}
header .util .toggle-menu{width:45px;height:45px;background: url(/_public/images2/icon/allmenu.svg) no-repeat;background-size: cover;font-size:0;}
header .gnb-bg{display:none;position: absolute;top: 91px;left: 0;width:100%;height:395px;background: #fff;z-index: 10;}
header.scroll,
header.active{background: #fff;border-bottom: 1px solid #D9D9D9;}
header.active .gnb:hover ul li{padding:0 90px;}
header.active .gnb ul li > a,
header.scroll .gnb ul li > a{color:#202020;}
header.active .gnb ul li:hover > a{color: #FF6725;}
header.active .gnb ul li:hover > a::after{width: 100%;}
header.active .logo,
header.scroll .logo{background: url('/_public/images2/common/logo_c.svg') no-repeat left center / 100%;}
header.active .logo img,
header.scroll .logo img{opacity: 0;}
.langmm { display: none;}

.util .lang{position:relative;}
.util .lang-btn{display:flex;align-items:center;gap:8px;padding:0 14px;height:44px;background:#f1f1f1;border-radius:22px;font-size:15px;font-weight:600;cursor:pointer;}
.util .lang-btn::after{content:'';width:6px;height:6px;border-right:2px solid #222;border-bottom:2px solid #222;transform:rotate(45deg) translateY(-2px);}
.util .lang-list{position:absolute;top:45px;left:50%;transform:translateX(-50%);min-width:90px;padding:8px 0;background:#fff;border:1px solid #222;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.12);display:none;}
.util .lang-list li{}
.util .lang-list a{display:block;padding:10px 0;text-align:center;font-size:15px;font-weight:500;}
.util .lang.on .lang-list{display:block;}
.util .lang-list a:hover{ color: #f2692d; font-weight: bold; }

.allmenu{display:none;position: fixed;top:0;left:0;width:100%;height:100%;overflow-y: auto;background: #fff;z-index: 1000;}
.allmenu .layout{height:100%;}
.allmenu .close-allmenu{position: absolute;top:30px;right:0;display:inline-block;font-size:0;}
.allmenu .close-allmenu img{display: block;}
.allmenu .menu-wrap{position: absolute;top:40%;left:50%;transform: translate(-50%, -50%);width:100%;display: flex;max-width:1280px;}
.allmenu .menu-wrap .menu{flex:1;}
.allmenu .menu-wrap .menu strong{display: block;}
.allmenu .menu-wrap .menu strong a{display: block;font-size: 30px;font-weight: bold;color: #202020;}
.allmenu .menu-wrap .menu ul{margin-top:40px;}
.allmenu .menu-wrap .menu ul li{line-height: 2.5;}
.allmenu .menu-wrap .menu ul li > a{display: block;font-size: 20px;font-weight: 500;color: #202020;}
.allmenu .menu-wrap .menu:hover strong a{color:#f87100}
.allmenu .menu-wrap .menu ul li .level3{}
.allmenu .menu-wrap .menu ul li .level3 a{display: block;font-size: 18px;font-weight: 500;line-height: 2.22;color: #787878;}
.allmenu .menu-wrap .menu ul li > a:hover { font-weight: bold; text-decoration: underline;}


/* s::footer */
footer{background: #101010;padding:37px 20px 48px;}
footer .layout{max-width:1580px;}
footer .layout .f-logo{display: inline-block;margin-bottom:30px;}
footer .layout .f-info .f-top{display: flex;flex-wrap: wrap;gap:10px 30px;padding-bottom: 30px;margin-bottom:30px;border-bottom: 1px solid #616161;}
footer .layout .f-info .f-top span{display: inline-block;margin-right: 30px; font-size: 16px;font-weight: 600;color: #B7B7B7;}
footer .layout .f-info .f-top span em{display: inline-block;color:#fff;font-weight: 700;margin-right: 10px;}
footer .layout .f-info .f-bottom{position: relative;}
footer .layout .f-info .f-bottom nav{display: flex;gap: 31px;margin-bottom: 20px;}
footer .layout .f-info .f-bottom nav a{display: inline-block;font-size: 16px;font-weight: 700;color:#fff;}
footer .layout .f-info .f-bottom .copyright{font-size: 14px;font-weight: 600;color: #787878;}
footer .layout .f-info .f-sns{position: absolute;top:0;right: 0;display: flex;gap: 10px;}
footer .layout .f-info .f-sns a{display: inline-block;font-size:0;}
footer .layout .f-info .f-sns a img{display:block;}
footer .layout .rt-quick{position: fixed;top: 50%;right: 25px;transform:translateY(-50%);z-index: 50;}
footer .layout .rt-quick ul{margin-bottom: 20px;}
footer .layout .rt-quick ul li{margin-bottom: 10px;}
footer .layout .rt-quick ul li img{display: block;}
footer .layout .rt-quick ul li a{display: block;background-color: #fff;border-radius: 50%;border: 1px solid #EAD4BB;}
footer .layout .rt-quick button{position: relative;opacity: 0;transition: all 0.3s ease;z-index: -1;}
footer .layout .rt-quick button.on{opacity: 1;z-index: 1;}

/* e::footer */


/* 서브상단 */
.page-top .visual{position: relative;padding: 0 20px;}
.page-top .visual.sub01{background: url(/_public/images2/contents/sub_v01.png) 50% 50% no-repeat;background-size: cover;}
.page-top .visual.sub02{background: url(/_public/images2/contents/sub_v02.png) 50% 50% no-repeat;background-size: cover;}
.page-top .visual.sub03{background: url(/_public/images2/contents/sub_v03.png) 50% 50% no-repeat;background-size: cover;}
.page-top .visual.sub04{background: url(/_public/images2/contents/sub_v04.png) 50% 50% no-repeat;background-size: cover;}
.page-top .visual.sub05{background: url(/_public/images2/contents/sub_v05.png) 50% 50% no-repeat;background-size: cover;}
.page-top .visual.sub06{background: url(/_public/images2/contents/sub_v06.png) 50% 50% no-repeat;background-size: cover;}
.page-top .visual.sub07{background: url(/_public/images2/contents/sub_v07.png) 50% 50% no-repeat;background-size: cover;}
.page-top .visual.sub08{background: url(/_public/images2/contents/sub_v08.png) 50% 50% no-repeat;background-size: cover;}
.page-top .visual.sub09{background: url(/_public/images2/contents/sub_v09.png) 50% 50% no-repeat;background-size: cover;}
.page-top .visual.sub10{background: url(/_public/images2/contents/sub_v10.png) 50% 50% no-repeat;background-size: cover;}
.page-top .visual.sub11{background: url(/_public/images2/contents/sub_v11.png) 50% 50% no-repeat;background-size: cover;}
.page-top .visual.sub12{background: url(/_public/images2/contents/sub_v12.png) 50% 50% no-repeat;background-size: cover;}
.page-top .visual.sub13{background: url(/_public/images2/contents/sub_v13.png) 50% 50% no-repeat;background-size: cover;}
.page-top .visual.sub14{background: url(/_public/images2/contents/sub_v14.png) 50% 50% no-repeat;background-size: cover;}
.page-top .visual .group{display: flex;flex-direction: column;justify-content: center;height: 800px;}
.page-top .visual .group .h1-en-tit{margin-bottom: 20px;font-size: 16px;color: #FF6725;font-weight: 700;line-height: 1;}
.page-top .visual h1{position:relative;margin-bottom: 30px;color:#fff;font-size: 80px;font-weight: 700;line-height: 1;}
.page-top .visual .group p{margin-bottom: 60px;font-size: 20px;color: #fff;font-weight: 500;line-height: 1.6;}
.page-top .visual .group .info{display: flex;gap:10px ;flex-wrap: wrap;}
.page-top .visual .group .info li{padding: 0 15px;font-size:17px;color: #fff;line-height: 43px;font-weight: 600;background-color: rgba(255,255,255,0.2);border-radius: 25px;}

/* snb menu */
.navi-menu{border-bottom: 2px solid #E8E8E8;}
.navi-menu button{display: none;}
.navi-menu .navi-box{display: flex;margin: 0 auto;max-width: 1420px;margin: 0 auto;border-radius: 10px 10px 0 0;}
.navi-menu .navi-box a{position: relative;flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 22px;height: 120px;text-align: center;align-content: center;font-size: 19px;color: #4A4A4A;font-weight: 600;z-index: 1;background-repeat: no-repeat;background-position: center 20px;}
.navi-menu .navi-box a:hover{color: #FF6725;}
.navi-menu .navi-box a::before{display: block;width:24px;height: 24px;content: '';background-color: #4A4A4A;background-repeat: no-repeat;background-position: center;}
.navi-menu .navi-box a.on{color: #FF6725;font-weight: 700;}
.navi-menu .navi-box a.on::after{position: absolute;left: 50%;bottom: -2px;width: 100%;height: 2px;content: '';background-color: #FF6725;border-radius: 50%;transform: translateX(-50%);}

.page-top .navi-menu .navi-box a.mi00::before{mask: url('/_public/images2/common/ico_navi1_0.svg')}
.page-top .navi-menu .navi-box a.mi01::before{mask: url('/_public/images2/common/ico_navi1_1.svg')}
.page-top .navi-menu .navi-box a.mi02::before{mask: url('/_public/images2/common/ico_navi1_2.svg')}
.page-top .navi-menu .navi-box a.mi03::before{mask: url('/_public/images2/common/ico_navi1_3.svg')}
.page-top .navi-menu .navi-box a.mi04::before{mask: url('/_public/images2/common/ico_navi1_4.svg')}
.page-top .navi-menu .navi-box a.mi05::before{mask: url('/_public/images2/common/ico_navi2_1.svg')}
.page-top .navi-menu .navi-box a.mi06::before{mask: url('/_public/images2/common/ico_navi2_2.svg')}
.page-top .navi-menu .navi-box a.mi07::before{mask: url('/_public/images2/common/ico_navi2_3.svg')}
.page-top .navi-menu .navi-box a.mi08::before{mask: url('/_public/images2/common/ico_navi2_4.svg')}
.page-top .navi-menu .navi-box a.mi09::before{mask: url('/_public/images2/common/ico_navi2_5.svg')}
.page-top .navi-menu .navi-box a.mi10::before{mask: url('/_public/images2/common/ico_navi2_6.svg')}
.page-top .navi-menu .navi-box a.mi11::before{mask: url('/_public/images2/common/ico_navi2_7.svg')}
.page-top .navi-menu .navi-box a.mi12::before{mask: url('/_public/images2/common/ico_navi2_8.svg')}
.page-top .navi-menu .navi-box a.mi13::before{mask: url('/_public/images2/common/ico_navi3_1.svg')}
.page-top .navi-menu .navi-box a.mi14::before{mask: url('/_public/images2/common/ico_navi3_2.svg')}
.page-top .navi-menu .navi-box a.on::before,
.page-top .navi-menu .navi-box a:hover::before{background-color: #FF6725;}


.not-post{padding:50px 0;text-align: center;line-height: normal !important;}
.not-post figure{}
.not-post figure figcaption{display:block;font-size: 19px;font-weight: 600;letter-spacing: 0.19px;color: #202020;}
.not-post figure figcaption span{display: block;margin-top:5px; font-size: 15px;font-weight: normal;letter-spacing: 0.15px;text-align: center;color: #999;}
.not-find{padding:50px 0;text-align: center;line-height: normal !important;}
.not-find figure{}
.not-find figure figcaption{display:block;font-size: 19px;font-weight: 600;letter-spacing: 0.19px;color: #202020;}
.not-find figure figcaption span{display: block;margin-top:5px; font-size: 15px;font-weight: normal;letter-spacing: 0.15px;text-align: center;color: #999;}

/* snb */
.snb{display: inline-block;vertical-align: top;width: 23%;}
.snb h3{font-size:24px;}
.snb ul{margin-top:40px;}
.snb ul li{font-size:18px;font-weight:400;line-height:65px;background:#f5f5f5;border-bottom:1px solid #fff;}
.snb ul li > a{display:block;width:100%;height:100%;padding:0 20px;}
.snb ul li.active,
.snb ul li:hover{background: #333;}
.snb ul li.active > a,
.snb ul li:hover > a{color:#fff;}

#pages .contents{}
#pages .contents .layout{}
#pages .contents .layout.flex{display: flex;}
#pages .contents .layout .snb{display: inline-block;width: 24%;}
#pages .contents .layout .sub-container{display: inline-block;vertical-align: top;width: 76%;padding-left: 5%;margin-top:40px;}



#pages{min-height: calc(100vh - 286px);}

/* pc */
@media all and (max-width:1600px) {

    header{padding:0 20px;}

}

/* pc */
@media all and (max-width:1420px) {

  .layout2 {padding:0 20px;}
  .layout3 {padding:0 20px;}

}

/* pc */
@media all and (max-width:1280px) {



    header .gnb ul li{padding:0 50px;}
    header .util{margin-left: 0;}
}

/* pc */
@media all and (min-width:1025px) {

    .navi-menu .navi-box{display:flex !important}

}

/* tablet */
@media all and (max-width:1024px) {


    #pagination {padding: 15px 0 50px;}
    #pagination a{width: 25px;height: 25px;line-height: 25px;font-size: 13px;}
    #pagination .end-prev,
    #pagination .prev,
    #pagination .next,
    #pagination .end-next {width: 25px;height: 25px;}

    header{height: 64px; padding: 0 12px;}
    header .layout{height: 64px;}
    header .logo img{width: 180px;}
    header .gnb{position: fixed;top:0;right:-100%;padding:80px 20px 20px;height:100%;width:calc(100% - 20px);background: #fff;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;overflow-y: auto;z-index: 1000;}
    header .gnb .gnb-close{display:block;position: absolute;right: 20px;top: 20px;width: 40px;height: 40px;}
    header .gnb .gnb-logo{display:block;position: absolute;left:20px;top:20px;width: 180px;}
    header .gnb ul{display:block;padding:0;max-height:calc(100vh - 160px);overflow:auto;}
    header .gnb ul li{display: block;padding: 0;border-top: 1px solid #ccc;}
    header .gnb ul li > a{position:relative;line-height: 69px;font-size: 22px;font-weight: 500;color: #202020;text-align: left;}
    header .gnb ul li > a.on{color:#29ceb4;}
    header .gnb ul li:hover > a{color:#202020;}
    header .gnb ul li .dropdown{text-align:left;height:auto;position: relative;padding:15px; background: #f8f8f8}
    header .gnb ul li .dropdown a{display: block;padding: 3px 0;text-align:left;display: block;font-size: 18px;font-weight: 500;}
    header .gnb ul li .dropdown a img { top: 3px; position: relative;}
    header .gnb.active{right:0;}
    header .gnb ul li > a.on{color:#F2692D;font-weight: 700;border-bottom: 4px solid #F2692D;}
    header .gnb-bg{position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background-color: rgba(0,0,0,0.5);}
    header .gnb-bg.on{display: block;}

    footer{padding:40px 20px 110px;}
    footer .layout{display: block;}
    footer .layout .f-info .f-top span{font-size: 15px;}
    footer .layout .f-info .f-bottom nav{gap: 20px;}
    footer .layout .f-info .f-sns{position: relative;justify-content: center;margin-top: 40px;}

    footer .layout .rt-quick{top: auto;bottom: 0;right: auto;left: 0;display: flex;width: 100%;height: 60px;box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);transform: translateY(0);}
    footer .layout .rt-quick ul{display: flex;margin-bottom: 0;width: 84% ;}
    footer .layout .rt-quick ul li{flex: 1;}
    footer .layout .rt-quick ul li a{display: flex;justify-content: center;height: 60px;border-radius: 0;border: 0;}
    footer .layout .rt-quick ul li:nth-child(odd) a{background-color: #F3F3F3;}
    footer .layout .rt-quick button{opacity: 1;flex-shrink: 0;width: 16%;height: 60px;background-color: #F2692D;z-index: 1;}


    #pages{min-height:inherit;}
    #pages .contents{}
    #pages .contents .layout{display: block;}
    #pages .contents .layout .snb{display: none;}
    #pages .contents .layout .sub-container{display:block;width:100%;margin:0;padding:0;}

    .page-top .visual .group{height: 600px;}


    .navi-menu{position: relative;z-index: 20;}
    .navi-menu button{position: relative;display: block;width: 100%;height:55px;padding: 0 40px 0 20px;font-size: 16px;color: #F2692D;font-weight: 700;text-align: left;background-color: #fff;border-radius: 10px 10px 0 0;}
    .navi-menu button::after{position: absolute;top: 50%;right: 22px;width: 0;height: 0;content: '';border-left: 7px solid transparent;border-right: 7px solid transparent;border-top: 8px solid #F2692D;transform: translateY(-50%);}
    .navi-menu button.on::after{transform: translateY(-50%) rotate(180deg);}
    .navi-menu .navi-box{display: none;position: absolute;left: 0;width: 100%;background-color: #fff;border-top: 1px solid #ddd;border-radius: 0;z-index:20}
    .navi-menu .navi-box a{display: flex;flex-direction: row;justify-content: flex-start;padding:14px 20px;height: auto;font-size: 16px;border-bottom: 1px solid #ddd;}
    .navi-menu .navi-box a.on{color: #F2692D;background-color: #EDF0F5;font-weight: 600;}
    .navi-menu .navi-box a.on::after{display: none;}
    .langmm {display: flex;margin-top: 0;background: #f8f8f8;left: 0;width: 100%;border-top: 1px solid #ccc;position: absolute;bottom: 0;}
    .langmm button {text-align: left;position: relative;padding: 20px;font-size:16px;width: 50%;font-weight: 700;color: #222}
    .langmm button:first-child{ background: #fff; border-right: 1px solid #ccc; color: #FD601C; }
    .langmm button:last-child::after { content: ''; display: inline-block; width: 6px; height: 6px; border-right: 1px solid #222; border-bottom: 1px solid #222; transform: rotate(315deg) translateY(-2px); margin-left: 10px; }
    .util .lang-btn { display: none;}
}


/* mobile */
@media all and (max-width:768px) {
  .not-post figure figcaption{font-size:16px;}
  .not-post figure figcaption span{font-size:14px;}

  .not-find figure figcaption{font-size:17px;}
  .not-find figure figcaption span{font-size:14px;}

    .page-top .visual .group{padding-top: 30px;height: 450px;}
    .page-top .visual .group .h1-en-tit{margin-bottom: 10px;font-size: 14px;}
    .page-top .visual h1{margin-bottom: 20px;font-size: 35px;}
    .page-top .visual .group p{margin-bottom: 30px;font-size: 16px;}
    .page-top .visual .group .info{gap: 5px;}
    .page-top .visual .group .info li{font-size: 14px;line-height: 35px;}

    .page-top .navi-menu .layout{flex-wrap:wrap;}
    .page-top .navi-menu .layout a{display: inline-block;flex: inherit;width:33.3333%;border:1px solid #ccc;margin:-0.5px;}
    .page-top .navi-menu .layout a:nth-child(3n + 3){border-right:0;}






}