@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: 1420px;}
.layout2{position:relative;margin: 0 auto;max-width: 1280px;}
.layout3{position:relative;margin: 0 auto;max-width: 1580px;}
.no-data {display: block !important;font-size: 16px !important;width: 100% !important;padding: 100px 0 !important;text-align: center;margin: 0 !important;}
.page-title{text-align:left;font-size:30px;}
.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%;}

.overlay{display:none;position: fixed;top:0;left:0;width:100%;height:100%;background: rgba(0,0,0,0.7);z-index:9999;line-height: normal;}


.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;}


.tab{text-align: center;font-size:0;}
.tab .button{display: inline-block;width:200px;border-radius: 30px;border: solid 2px #c7b4b0; font-size: 20px;font-weight: 600;letter-spacing: 0.4px;color: #787878;height:60px;}
.tab .button + .button{margin-left:20px;}
.tab .button.active{border-color:#202020;background: #202020;color:#fff;}

.tab2{display: flex;}
.tab2 .button{flex:1;display: inline-block;height:60px;border:1px solid #ccc;text-align: center;font-size: 18px;font-weight: 600;}
.tab2 .button.active{background: #202020;color:#fff;border-color:#202020; }

/* 상단 박스 타입 */
.top-box{background: #f6f6f6;padding:40px;}
.top-box h3{font-size: 26px;font-weight: bold;}
.top-box p{margin-top:25px;font-size: 18px;font-weight: normal;}
.top-box ul{}
.top-box ul li{position:relative;padding-left:12px;font-size:18px;font-weight: bold;}
.top-box ul li:before{content:"";position:absolute;top:11px;left:0;display: inline-block;width:7px;height:2px;background: #202020;}


/* dl style */
.dl-type1{}
.dl-type1 dt{position:relative;clear:left;float:left;}
.dl-type1 dd{position:relative;width:100%;}
.dl-type1 dd:after {content: "";display: table;clear: both;}
/* text style */
.t-align-left {text-align: left !important;}
.t-align-center {text-align: center !important;}
.t-align-right {text-align: right !important;}

.NotoSans {font-family:'Noto Sans KR';}

.button{font-size:15px;line-height: 40px;}
.button-default{background: #333;color:#fff;border:1px solid #333;}
.button-gray{display:inline-block;background:#f3f3f3;text-align: center;color:#000;}
.button-gray2{display:inline-block;background:#f3f3f3;text-align: center;color:#000;}
.button-outline-default{border:1px solid #333;background: #fff;color:#333;}
.button-outline-black{background: #fff;border-color: #333;color: #333;}
.button-large{font-size:18px;line-height: 65px;}

/* form style */
.form-flex {display: flex; justify-content: space-between;}
.form-flex .cmm-form {width: calc(100% - 120px);}
.form-flex .cmm-form:first-child {width: 110px;padding-right: 10px;}
.cmm-form {padding: 20px 0;box-sizing: border-box;}
.cmm-form .form {position: relative;border-bottom: 1px solid #dbdbdb;}
.cmm-form .form.border-bottom-none{border-bottom:0;}
.cmm-form .form .icon-status {position: absolute;right: 10px;top: 11px;font-size: 18px;}
.cmm-form .form .icon-status.icon-error {color: #ff0000;}
.cmm-form .form .icon-status.icon-success {color: #02e266;}
.cmm-form .form + .form {margin-top: 20px;}
.cmm-form .form:after {content: "";opacity: 0;display: inline-block;position: absolute;left: 50%;transform: translateX(-50%);bottom: 0;width: 0;height: 2px;background: #333;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;-ms-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;}
.cmm-form .form label {position: absolute;top: -9999999px;left: -999999px;}
.cmm-form .form input[type="text"],
.cmm-form .form input[type="tel"],
.cmm-form .form input[type="number"],
.cmm-form .form input[type="email"],
.cmm-form .form input[type="password"] {appearance: none;width: 100%;height: 40px;color: #898989;font-size: 14px;border: 0;box-sizing: border-box;padding: 0 10px;font-weight: 300;}
.cmm-form .form input::placeholder {color: #ccc;font-size: 14px;font-weight: 300;}
.cmm-form .form input:focus {border: 0;outline: none;}
.cmm-form .form textarea {border: 0;resize: none;padding: 20px;width: 100%;height: 300px;box-sizing: border-box;}
.cmm-form .form .checkbox {display: inline-block;padding: 20px;}
.cmm-form .form .checkbox label {position: relative;display: inline-block;margin-right: 20px;color: #898989;top: inherit;left: inherit;padding: 10px 0;max-width: 250px;word-break: keep-all;font-size: 13px;font-weight: 500;vertical-align: middle;}
.cmm-form .form .checkbox label strong {display: block;font-size: 18px;color: #333;}
.cmm-form .form.active:after {opacity: 1;width: 100%;height: 2px;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;-ms-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;}
.cmm-form .form.email {color: #898989;}
.cmm-form .form.email em {display: inline-block;font-size: 14px;color: #898989;}
.cmm-form .form.email input[type="text"] {width: 30%;padding: 0 0 0 20px;}
.cmm-form .form.email input[type="text"] + input[type="text"] {width: 35%;padding: 0 10px;}
.cmm-form .form.email select {display: inline-block;padding: 0 20px;width: 30%;height: 40px;color: #898989;box-sizing: border-box;}
.cmm-form .form.addr input[type="text"] {padding: 0px 120px 0px 20px;}
.cmm-form .form.tel {color: #898989;}
.cmm-form .form.tel em {display: inline-block;font-size: 14px;color: #898989;}
.cmm-form .form.tel input[type="tel"] {width: 35%;text-align: center;}
.cmm-form .form.tel select {display: inline-block;padding: 0 20px;width: 20%;height: 40px;color: #898989;box-sizing: border-box;}
.cmm-form .form.tel.id .button {display: inline-block;position: absolute;right: 0;width: 100px;line-height: 40px;background: #333;color: #fff;font-size: 13px;text-align: center;}
.cmm-form .form.tel.id input[type="text"] {padding: 0px 110px 0px 20px;}
.cmm-form .form.tel.addr .addr-button {display: inline-block;position: absolute;right: 0;bottom: 0;width: 100px;line-height: 38px;background: #fff;border: 1px solid #ff4947;color: #ff4947;font-size: 13px;text-align: center;}
.cmm-form .form.tel.calendar .cal-icon {position: absolute;top: 12px;right: 20px;font-size: 16px;}
.cmm-form .label {display: block;padding: 10px 0;font-size: 16px;font-weight: 500;}
.cmm-form .label .info-txt {color: #0db14b;font-weight: 400;display: inline-block;margin-left: 10px;}
.cmm-form .label .warning-txt {color: #ff4947;font-weight: 400;display: inline-block;margin-left: 10px;}
.cmm-form .label .add-button {float: right;display: inline-block;font-size: 16px;}
.cmm-form.error {border-color: #ff4947;}
.cmm-form.error .form input {color: #ff4947;}
.cmm-form.error .form input::placeholder {color: #ff4947;}



.policy {word-break:keep-all;}
.private h3 {font-size:20px;margin:40px 0 15px;}
.private p {font-size:17px;line-height:1.6;}
.private ul {margin-top:12px;}
.private ul li {font-size:17px;line-height:1.5;}
.private ul li + li {margin-top:5px;}

@media all and (max-width:1280px) {
.private h3 {font-size:17px;margin:30px 0 10px;}
.private p {font-size:15px;line-height:1.4;}
.private ul li {font-size:15px;line-height:1.2;}
}

.ios-chk {display:inline-block;position: relative;cursor: pointer;}
.ios-chk input[type="checkbox"]{position: absolute;display: inline-block;opacity: 0;}
.ios-chk label {position:relative !important;top:inherit !important; left:inherit !important;cursor: pointer;display: inline-block;padding-left:60px;color: #555;font-size: 15px;line-height: 27px;vertical-align: middle;font-weight: 400;}
.apple-switch::before {content:"";-moz-transition: all 0.5s;-webkit-transition: all 0.5s;-ms-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;position: absolute;left:0;vertical-align: middle;-webkit-appearance: none;outline: none;width: 50px;height: 25px;background-color: #fff;border: 1px solid #D9DADC;border-radius: 50px;box-shadow: inset -20px 0 0 0 #fff;cursor: pointer;}
.apple-switch:after {content: "";-moz-transition: all 0.5s;-webkit-transition: all 0.5s;-ms-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;position: absolute;top: 3px;left: 1px;background: transparent;width: 22px;height: 22px;border-radius: 50%;box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);}
.ios-chk input[type="checkbox"]:checked + .apple-switch:before {box-shadow: inset 26px 0 0 0 #222;border-color: #222;}
.ios-chk input[type="checkbox"]:checked + .apple-switch:after {left: 20px;box-shadow: -2px 4px 3px rgba(0, 0, 0, 0.05);}

.filebox{position:relative;font-size:0;}
.filebox input[type="file"] {position: absolute;width: 0;height: 0;padding: 0;overflow: hidden;border: 0;}
/* .filebox label {position:relative ;display: inline-block;margin-right:5px;width:127px;color: #fff;font-size:14px;vertical-align: middle;cursor: pointer;border: 1px solid #383838;border-radius: 5px;text-align: center; font-size: 18px;background: #383838; color: #fff; margin-left: 10px;}
.filebox label:hover { background: #000; color: #fff; }
.filebox .upload-name {display: inline-block;width: calc(100% - 260px);height: 50px;font-size: 16px;color: #595757;padding: 0 40px;vertical-align: middle;background: #fafafa url(/_public/images2/icon/link_icon.svg) no-repeat;background-size: 30px 30px;border: 1px solid #bebebe;border-radius: 5px;background-position: 10px 50%;} */


.form-box .filebox{margin-top:30px;}
.form-box .filebox .label{font-size:18px;font-weight:600;color:#121212;margin-bottom:10px;}
.form-box .filebox .file-drop{position:relative; width: 100%}
.form-box .filebox .file-drop input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer;}
.form-box .filebox .file-drop .filebtn{width: 100%; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:150px;border:2px dashed #9d9d9d;border-radius:12px;background:#FAFAFA;text-decoration:none;padding:26px;cursor:pointer;}
.form-box .filebox .fileicon{width: 22px;height: 22px;display: inline-block;background:url(/_public/images2/icon/filebox-icon.svg) no-repeat center/contain;vertical-align: middle;margin-right: 10px;}
.form-box .filebox .filetitle{font-size:16px;font-weight:800;color:#121212;}
.form-box .filebox .filedesc{font-size:16px; margin-top: 10px; font-weight:600;color:#121212;}
.form-box .filebox .filesub{font-size:14px;font-weight:600;color:#8a8a8a;}
.form-box .filebox .fileinput{position:absolute;inset:0;opacity:0;cursor:pointer;}
.form-box .filebox .filelist{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;}
.form-box .filebox .filelist:empty{display:none;}
.form-box .filebox .filelist li{ font-size: 16px; display:flex; position: relative; align-items:center;justify-content:space-between;gap:12px;background:#F2F2F2;border-radius:10px;padding:12px 20px;}

/* .form-box .filebox .filelist li::before{content:"";position:absolute;right:15px;top:50%;width:20px;height:20px;transform:translate(-50%,-50%);background:url(/_public/images2/icon/ico_del2.png) no-repeat center/contain;} */
.form-box .filebox .filelist .name{font-size:15px;font-weight:600;color:#121212;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.form-box .filebox .filelist .del{flex:0 0 22px;width:22px;height:22px;border:0;border-radius:999px;background:#AFAFAF;position:relative;cursor:pointer;}
.form-box .filebox .filebtn:focus-visible{outline:2px solid #1E3A8A;outline-offset:3px;}

.form-box .filebox .filelist .fileclear{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:999px;cursor:pointer;}
.form-box .filebox .filelist .fileclear::before{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;transform:translate(-50%,-50%);background:url(/_public/images2/icon/ico_del2.png) no-repeat center/contain;}




.checkbox-type1{position: relative;display: inline-block;}
.checkbox-type1 input[type="checkbox"]{position: absolute;opacity: 0;}
.checkbox-type1 label{position: relative;padding-left: 30px;font-size: 16px;font-weight: normal;color: #000;transition: all 0.1s;cursor: pointer;}
.checkbox-type1 label:before{content: "";position: absolute;left:0;width:20px;height:20px;background: url(/_public/images2/icon/ico_chk.svg) no-repeat;background-size: cover;transition: all 0.1s;}
.checkbox-type1 input[type="checkbox"]:checked + label{font-weight: 600;}
.checkbox-type1 input[type="checkbox"]:checked + label:before{background: url(/_public/images2/icon/ico_chk_on.svg) no-repeat;background-size: cover;}


.checkbox-type2{display:inline-block;vertical-align:top;width:33.333%;margin:10px 0;}
.checkbox-type2 input[type="checkbox"]{position:absolute;opacity:0;}
.checkbox-type2 label{display:block;font-size:18px;padding-left:40px;position:relative;cursor:pointer;}
.checkbox-type2 label::before{content:'';width:30px;height:30px;border:1px solid #fff;border-radius:50%;position:absolute;left:0;top:-3px;}
.checkbox-type2 label::after{display:none;content:'';width:7px;height:13px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);position:absolute;left:11px;top:3px;}
.checkbox-type2 input[type="checkbox"]:checked + label::before{background:#222;border-color:#222;}
.checkbox-type2 input[type="checkbox"]:checked + label::after{display:block;}

.radio-type1 { margin: -0.5px;}
.radio-type1 input[type="radio"] {display: inline-block;position: absolute;opacity: 0;}
.radio-type1 label {position: relative !important;top: inherit !important;left: inherit !important;cursor: pointer;display: block;text-align: center;font-size: 14px;line-height: 50px;border: 1px solid #e5e5e5;}
.radio-type1 input[type="radio"]:checked + label {background-color: #222;color: #fff;}


.radio-type2{display:inline-block;vertical-align:middle;}
.radio-type2 input[type="radio"]{position:absolute;opacity:0;}
.radio-type2 label{display:block;font-size:18px;padding-left:35px;position:relative;cursor:pointer;}
.radio-type2 label::before{content: '';width: 25px;height: 25px;border: 1px solid #bebebe;border-radius: 50%;position: absolute;left: 0;top: 1px;box-sizing: border-box;}
.radio-type2 label::after{display:none;content:'';width:11px;height:11px;border-radius:50%;background:#202020;position:absolute;left:6.5px;top:8px;}
.radio-type2 input[type="radio"]:checked + label::before{border-color:#202020}
.radio-type2 input[type="radio"]:checked + label::after{display:block;}



header{ background: rgb(0 0 0 / 43%); position:fixed;top:0;left:0;width:100%;padding:0 60px;z-index: 2001;transition: all 0.3s;}
header .h-cont{display: flex;align-items: center;justify-content: space-between;}
header .logo{display: inline-block;width:220px;height:40px;background: url(/_public/images2/common/logo_w.svg) no-repeat;background-size: contain;transition: all 0.3s;}
header .gnb{position: relative;}
header .gnb .gnb-top{display:none;align-items: center;justify-content: space-between;gap:20px;padding-bottom: 30px;border-bottom: 1px solid #ccc;}
header .gnb .gnb-top .btns{display: flex;gap:10px;}


header .gnb ul{display: flex;}
header .gnb ul li{position: relative;}
header .gnb ul li > a{display: block;padding:0 54px;}
header .gnb ul li > a span{ position:relative;display:block;line-height: 90px; font-size: 22px;font-weight: 600;text-align: center;color: #fff;transition: all 0.1s;}
header .gnb ul li > a span:after{content: "";position: absolute;left:50%;transform: translateX(-50%);bottom:0;width:0;height: 4px;background: #F9BD00;transition: all 0.3s;opacity: 0;}
header .gnb ul li .dropdown{display:none;position:absolute;height:332px;padding: 20px 0 51px;left:0;width:100%;z-index: 10;}
header .gnb ul li .dropdown a{display: block;text-align: center;}
header .gnb ul li .dropdown a span{display: inline-block;transition: all 0.3s;font-size: 20px;font-weight: 500;line-height: 2.56;color: #000;}
header .gnb ul li:hover > a span{color:#000;font-weight: bold;}
header .gnb ul li:hover > a span:after{width:100%;opacity: 1;}
header .gnb ul li .dropdown a:hover span{font-weight: bold;text-decoration: underline;}
header .gnb ul li .dropdown a.on span{font-weight: bold;text-decoration: underline;}

header .util-box{ display: flex;}
header .util-box .btn-contact{ font-weight: 500; font-size: 16px;color: #fff;border: 1px solid #fff;border-radius: 5px;padding: 5px 10px;display: inline-block;height: 35px; margin-left: 20px}
header .util-box .btn-contact:hover { font-weight: bold; }

header .open-gnb{display: none;width:30px;height:30px;background: url(/_public/images2/common/navi2.png) no-repeat;background-size: cover;transition: all 0.3s;}
header .gnb-bg{border-top:1px solid rgba(32, 32, 32,0.2);display:none;position: absolute;left:0;width:100%;height:332px;background: #fff;}

header.active{ background: rgb(0 0 0 / 85%) !important}
header.active .logo{background: url(/_public/images2/common/logo_w.svg) no-repeat;background-size: contain;;}
header.active .gnb ul li > a span{color:#fff;}
header.active .gnb-bg{background: rgb(0 0 0 / 85%) !important}
header.active .gnb ul li .dropdown a span{color:#fff;}

header.scroll{background: rgb(255 255 255 / 93%)}
header.scroll .logo{background: url(/_public/images2/common/logo_c.svg) no-repeat;background-size: contain;}
header.scroll .gnb ul li > a span{color:#202020;}
header.scroll .open-gnb{background: url(/_public/images2/common/navi2.png) no-repeat;background-size: cover;}
header.scroll .util-box .btn-contact{ color: #202020;border: 1px solid #202020;}

header.active.scroll{ background: rgb(0 0 0 / 85%) !important}
header.active.scroll .logo{background: url(/_public/images2/common/logo_w.svg) no-repeat;background-size: contain;}
header.active.scroll .gnb ul li > a span{color:#fff;}
header.active.scroll .gnb-bg{background: rgb(0 0 0 / 85%) !important}
header.active.scroll .gnb ul li .dropdown a span{color:#fff;}
header.active.scroll .util-box .btn-contact{ color: #fff;border: 1px solid #fff;}
header.scroll .open-gnb{background: url(/_public/images2/common/navi.png) no-repeat;}

header.white{background: rgb(255 255 255 / 93%)}
header.white .logo{background: url(/_public/images2/common/logo_c.svg) no-repeat;background-size: contain;}
header.white .gnb ul li > a span{color:#202020;}
header.white .open-gnb{background: url(/_public/images2/common/navi2.png) no-repeat;background-size: cover;}
header.white .util-box .btn-contact{ color: #202020;border: 1px solid #202020;}

header.active.white{ background: rgb(0 0 0 / 85%) !important}
header.active.white .logo{background: url(/_public/images2/common/logo_w.svg) no-repeat;background-size: contain;}
header.active.white .gnb ul li > a span{color:#fff;}
header.active.white .gnb-bg{background: rgb(0 0 0 / 85%) !important}
header.active.white .gnb ul li .dropdown a span{color:#fff;}
header.active.white .util-box .btn-contact{ color: #fff;border: 1px solid #fff;}
header.white .open-gnb{background: url(/_public/images2/common/navi.png) no-repeat;}

header.sub{background:rgb(255 255 255 / 93%);}
header.sub .logo{background: url(/_public/images2/common/logo_c.svg) no-repeat;background-size: contain;}
header.sub .gnb ul li > a span{color:#202020;}
header.sub .open-gnb{background: url(/_public/images2/common/navi.png) no-repeat;background-size: cover;}
header.sub .util-box .btn-contact { color: #202020;border: 1px solid #202020;}
header.sub .util-box .btn-contact:after{content: ""; background: url(/_public/images2/icon/tak_icon.svg) no-repeat;background-size: cover;transition: all 0.3s;}

header.active.sub{ background: rgb(0 0 0 / 85%) !important}
header.active.sub .logo{background: url(/_public/images2/common/logo_w.svg) no-repeat;background-size: contain;}
header.active.sub .gnb ul li > a span{color:#fff;}
header.active.sub .gnb-bg{background: rgb(0 0 0 / 85%) !important}
header.active.sub .gnb ul li .dropdown a span{color:#fff;}
header.active.sub .util-box .btn-contact{ color: #fff;border: 1px solid #fff;}
header.sub .open-gnb{background: url(/_public/images2/common/navi.png) no-repeat;}


header .util-box .language{width:100px;height:35px;border-radius:10px;z-index:10;-moz-transition:all 0.3s;-webkit-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s; display: inline-block;}
header .util-box .language button{position:relative;display:block;width:100%;text-align:center;font-size:18px;font-weight:600;color:#fff;height:inherit;}
header .util-box .language button:before{content:"";vertical-align:middle;display: inline-block;width:20px;height:20px;background: url(/_public/images2/icon/lan_icon_w.svg) no-repeat;background-size:cover;margin-right:15px;position:relative;top:-2px;}
header .util-box .language button:after {content:"";vertical-align:middle;display: inline-block;width:10px;height:7px;background: url(/_public/images2/icon/lan_arrow_w.svg) no-repeat;background-size:cover;margin-left:10px;position:relative;top:-2px;}
header .util-box .language .list{position:relative;padding:10px 0;display: none;opacity: 0;background:#fff;border:1px solid #ccc;border-radius:10px;}
header .util-box .language .list a{display: block;text-align: center;font-size:16px;font-weight:500;color:#010000;position:relative;}
header .util-box .language .list a + a{margin-top:5px;}
header .util-box .language .list a.now-lan {font-weight:700;color:#BF0E0E;}
header .util-box .language .list a.now-lan:before {content:"";display:inline-block;width:8px;height:10px;background:url(/_public/images2/icon/lan_selcet.svg) no-repeat;background-size:cover;position: absolute;top:5px;left:15px;}
header .util-box .language.on {background:#fff;border:1px solid #fff;}
header .util-box .language.on button{color:#010000;}
header .util-box .language.on button:before{background: url(/_public/images2/icon/lan_icon.svg) no-repeat;background-size:cover;}
header .util-box .language.on button:after {background: url(/_public/images2/icon/lan_arrow.svg) no-repeat;background-size:cover;}
header .util-box .language.on .list{opacity: 1;}

header.active .util-box .ut-ctc,
header.scroll .util-box .ut-ctc {color:#010000;border-color:#010000;}
header.active .util-box .ut-ctc:hover,
header.scroll .util-box .ut-ctc:hover {color:#fff;border-color:#BF0E0E;}
header.active .util-box .toggle-menu,
header.scroll .util-box .toggle-menu {background: url(/_public/images2/icon/allmenu2.svg) no-repeat;background-size: cover;}
header.active .util-box .language {border-color: #fff;}
header.scroll .util-box .language {border-color: #010000;}
header.active .util-box .language button{color: #fff;}
header.scroll .util-box .language button{color: #010000;}
header.scroll .util-box .language button {border-color: #010000;}
header.active .util-box .language button:before {background: url(/_public/images2/icon/lan_icon_w.svg) no-repeat;background-size:cover;}
header.scroll .util-box .language button:before {background: url(/_public/images2/icon/lan_icon.svg) no-repeat;background-size:cover;}
header.active .util-box .language button:after {background: url(/_public/images2/icon/lan_arrow_w.svg) no-repeat;background-size:cover;}
header.scroll .util-box .language button:after {background: url(/_public/images2/icon/lan_arrow.svg) no-repeat;background-size:cover;}


header.sub .util-box .toggle-menu {background: url(/_public/images2/icon/allmenu2.svg) no-repeat;background-size: cover;}
header.sub .util-box .language {border-color: #010000;}
header.sub .util-box .language button {color: #010000;}
header.sub .util-box .language button:before {background: url(/_public/images2/icon/lan_icon.svg) no-repeat;background-size:cover;}
header.sub .util-box .language button:after {background: url(/_public/images2/icon/lan_arrow.svg) no-repeat;background-size:cover;}

header.sub_pd .util-box .language button { color: #000}
header.sub_pd .util-box .language button:before { background: url(/_public/images2/icon/lan_icon.svg) no-repeat; background-size: cover;}
header.sub_pd .util-box .language button:after {background: url(/_public/images2/icon/lan_arrow.svg) no-repeat; }
header.sub_pd .util-box .language.on button { color: #202020}
header.sub_pd .util-box .language.on button:before { background: url(/_public/images2/icon/lan_icon.svg) no-repeat; background-size: cover;}
header.sub_pd .util-box .language.on button:after {background: url(/_public/images2/icon/lan_arrow.svg) no-repeat; }

header.active.sub_pd .util-box .language button { color: #fff}
header.active.sub_pd .util-box .language button:before { background: url(/_public/images2/icon/lan_icon_w.svg) no-repeat; background-size: cover;}
header.active.sub_pd .util-box .language button:after {background: url(/_public/images2/icon/lan_arrow_w.svg) no-repeat; }


header.active.sub .util-box .language button {color: #fff;}
header.active.sub .util-box .language button:before {background: url(/_public/images2/icon/lan_icon_w.svg) no-repeat;background-size:cover;}
header.active.sub .util-box .language button:after {background: url(/_public/images2/icon/lan_arrow_w.svg) no-repeat;background-size:cover;}

header.active.scroll .util-box .language button {color: #fff;}
header.active.scroll .util-box .language button:before {background: url(/_public/images2/icon/lan_icon_w.svg) no-repeat;background-size:cover;}
header.active.scroll .util-box .language button:after {background: url(/_public/images2/icon/lan_arrow_w.svg) no-repeat;background-size:cover;}

.q-menu{ position: fixed;right:20px;bottom:25px;z-index: 10;display: flex;flex-direction: column; gap:5px}
.q-menu .btn{display: inline-block; }
.q-menu .btn img{border-radius: 99%;}
.q-menu button { }
.q-menu button img {box-shadow:0 4px 7px rgba(0,0,0,0.20); }


@media all and (max-width:1600px) {
    header .gnb ul li > a{padding:0 40px;}
}



@media all and (max-width:1460px) {
    header{padding:0 20px;}
    header .gnb ul li > a{padding:0 30px;}
}

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

}

@media all and (max-width:1100px) {
   header .h-cont{position: relative;height:70px;}
   header .logo{width:200px;height:32px;}
   header .gnb{position: fixed;top:0;left:initial;right:-355px;width:355px;height:100%;background:rgb(0 0 0 / 96%);z-index: 999999;transition: all 0.3s;padding:20px 30px;}
   header .gnb .gnb-top{display: flex;}
   header .gnb.active{right:0;}
   header .gnb ul{flex-direction: column;overflow-y: auto;} /*max-height: calc(100% - 75px);*/
   header .gnb ul li  + li{border-top:1px solid #333;}
   header .gnb ul li > a{padding:0;line-height: 69px;text-align:left;}
   header .gnb ul li > a span{display:block;text-align: left;font-size: 24px;font-weight: 500;color: #ccc;}
   header .gnb ul li > a span:after{transform: none;width:100%;left:0;}
   header .gnb ul li > a.on span{color:#fff;font-weight: bold;}
   header .gnb ul li > a.on span:after{opacity:1;}
   header .gnb ul li .dropdown{position:relative;height:auto;padding:10px 0;}
   header .gnb ul li .dropdown a span{display: block;font-size: 20px;font-weight: 500;line-height: 2;letter-spacing: -0.4px;color: #ccc;text-align: left;}
   header.scroll .gnb ul li > a span {color: #ccc;}
   header .gnb ul li:hover > a span{color:#fff;font-weight: bold;}
   header.scroll .gnb ul li > a.on span {color: #fff;}
   header.scroll .util-box .btn-contact {color: #fff; border: 1px solid #fff}
   header .util-box{display: none;}
   header .open-gnb{display:block;}
   header .gnb .gnb-top .util-box{display: flex; }
   header .gnb .gnb-top .util-box a { font-size: 18px; height: 39px;margin-left:20px; }

    header.sub .gnb-top .util-box .btn-contact { color: #fff; border: 1px solid #fff}
    header.white .util-box .btn-contact { color: #fff; border: 1px solid #fff; font-weight: bold;}
    header.sub.white .gnb ul li > a span{ color: #fff; }
    .product .pro-info { padding: 0 20px;}

    header.white.sub_pd .gnb ul li > a span{ color: #f1f1f1}
    header.white.sub_pd .gnb ul li > a.on span{ color: #fff;}


    header.sub .gnb ul li > a span { color: #fff;}
    header .util-box .language{ width:100px;}
    header .util-box .language button{font-size:16px;}
    header .util-box .language button:before{width:17px;height:17px;}
    header .util-box .language .list a{font-size:14px;height: auto;}
    header.scroll .util-box .toggle-menu {background:url(/_public/images2/icon/allmenu.svg) no-repeat;background-size:cover;}
    header.scroll .util-box .language button { color: #fff}
    header.scroll .util-box .language button:before { background: url(/_public/images2/icon/lan_icon_w.svg) no-repeat; background-size: cover;}
    header.scroll .util-box .language button:after {background: url(/_public/images2/icon/lan_arrow_w.svg) no-repeat; }
    header.scroll .util-box .language.on button { color: #202020}
    header.scroll .util-box .language.on button:before { background: url(/_public/images2/icon/lan_icon.svg) no-repeat; background-size: cover;}
    header.scroll .util-box .language.on button:after {background: url(/_public/images2/icon/lan_arrow.svg) no-repeat; }


    header.sub .util-box .language button { color: #fff}
    header.sub .util-box .language button:before { background: url(/_public/images2/icon/lan_icon_w.svg) no-repeat; background-size: cover;}
    header.sub .util-box .language button:after {background: url(/_public/images2/icon/lan_arrow_w.svg) no-repeat; }
    header.sub .util-box .language.on button { color: #202020}
    header.sub .util-box .language.on button:before { background: url(/_public/images2/icon/lan_icon.svg) no-repeat; background-size: cover;}
    header.sub .util-box .language.on button:after {background: url(/_public/images2/icon/lan_arrow.svg) no-repeat; }

}



@media all and (max-width:1024px) {
    header.sub_pd {position:fixed;}


    .q-menu { bottom: 15px; right: 15px;gap: 6px}
    .q-menu .btn { width: 45px; height: 45px}
    .form-box .filebox .file-drop .filebtn { gap:0; padding: 15px 5px; }
    .form-box .filebox .filedesc { font-size: 15px; margin-top: 10px;line-height: 1;text-align: center; word-break: keep-all;}
    .form-box .filebox .filesub { font-size: 15px;margin-top: 5px; }
    .form-box .filebox .filelist { gap:5px }
}


@media all and (max-width:460px) {

    header .gnb{width:calc(100% - 20px);right:calc(-100% - 20px)}
}





/* s::footer */
footer{background:#001121;padding:40px 0 67px;}
footer .layout{ max-width:1400px;}
footer .layout .f-logo { margin-bottom: 20px; display: block;}
footer .layout .footbox { display: flex;justify-content: space-between;}
footer .layout .footbox .address { display: block; }
footer .layout .footbox .address strong { color: #fff; font-size: 18px; display: block; margin: 0 0 20px;}
footer .layout .footbox .address ul { }
footer .layout .footbox .address ul li { line-height: 1.8}
footer .layout .footbox .address ul li p { font-size: 16px; color: #fff; display: inline-block;}
footer .layout .footbox .address ul li p:first-child { width:660px}
footer .layout .footbox .address ul li p span{ color: #999; width: 210px; display: inline-block; font-weight: 600;}
footer .layout .footbox .address ul li p.ftel span{  width: 40px;}
footer .layout .footbox .infotxt { padding-left: 50px; border-left: 1px solid #4D5964; width: 20%}
footer .layout .footbox .infotxt strong { color: #fff; font-size: 18px; display: block; margin: 0 0 20px;}
footer .layout .footbox .infotxt ul { }
footer .layout .footbox .infotxt ul li  { line-height: 2;  font-weight: 600;}
footer .layout .footbox .infotxt ul li a { color: #999; font-size: 16px; }
footer .layout .footbox .infotxt ul li a.txtdeco{ text-decoration: underline;}
footer .layout .footbox .infotxt ul li:last-child a { color: #fff}
footer .layout .footbox .infotxt ul li i img { vertical-align: middle; margin-right: 10px}
footer .layout .footbox .infotxt p.copyright{ font-size: 14px; color: #787878; position: absolute; bottom: 0}

/* 서브상단 */
.page-top{border-bottom: 1px solid #ccc;}
.page-top .visual{position: relative; height: 290px}
.page-top .visual .group{ position: relative; top: 140px;}
.page-top .visual h1{position:relative;transform:none;text-align: center;color:#202020;font-size: 52px;font-weight: bold;line-height: 1;}
.page-top .visual .breadcrumbs{position: absolute; right: 0; top: 0;}
.page-top .visual .breadcrumbs i:before{ content: ""; position: relative; top: 3px; display: inline-block;width:19px;height:19px;background: url(/_public/images2/common/nvhome.svg) no-repeat;background-size: cover;}
.page-top .visual .breadcrumbs > ul { display:flex; align-items:center; gap:14px; }
.page-top .visual .breadcrumbs > ul > li { position:relative; display:flex; align-items:center; gap:8px; }
.page-top .visual .breadcrumbs > ul > li span {position:relative;display: inline-block;font-size:18px;font-weight: 300;color:#202020;}
.page-top .visual .breadcrumbs > ul > li + li:before { content:""; background:#B2B2B2; border-radius: 99px; margin:0 2px 0 0; width: 4px; height: 4px}
.page-top .visual .breadcrumbs .sub-menu-btn { display:inline-flex; align-items:center; gap:6px; font-size:18px; font-weight:700; color:#0b3fae; background:none; border:0; cursor:pointer; padding:0; }
.page-top .visual .breadcrumbs .sub-menu-btn .arrow { width:19px; height:19px; background: url(/_public/images2/common/mu-selloff.svg); transition:transform .2s ease;  }
.page-top .visual .breadcrumbs > ul > li.open .sub-menu-btn .arrow { transform:rotate(-360deg); width:19px; height:19px; background: url(/_public/images2/common/mu-sellon.svg); transition:transform .2s ease; }
.page-top .visual .breadcrumbs > ul > li > ul { position:absolute; top:calc(100% + 10px); right:0; min-width:160px; padding:8px 0; background:#fff; border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.12); display:none;}
.page-top .visual .breadcrumbs > ul > li.open > ul { display:block; }
.page-top .visual .breadcrumbs > ul > li > ul > li > a { display:block; padding:10px 16px; font-size:18px; color:#111; text-decoration:none; transition:background .2s ease, color .2s ease; }
.page-top .visual .breadcrumbs > ul > li > ul > li > a:hover { background:#f4f6fb; color:#0b3fae; }
.page-top .visual .breadcrumbs > ul > li > ul > li > a.on { color: #04327B; font-weight: bold;}

#pages{position:relative;}
#pages .page-top{position:relative;z-index:20;}
#pages .contents{position:relative;z-index:10;}
.page-top .visual{position:relative;z-index:30;}
.page-top .visual .breadcrumbs{z-index:40;}
.page-top .visual .breadcrumbs>ul>li{position:relative;}
.page-top .visual .breadcrumbs>ul>li>ul{position:absolute;z-index:50;}

.navi-menu {display: flex;justify-content: center;bottom: -45px;position: relative;}
.navi-menu a { font-size: 21px; letter-spacing: -0.5px;font-weight: 600;padding: 10px 11px; color: #787878; position: relative;text-align: center; margin: 0 5px}
.navi-menu a.on { color: #04327B;}
.navi-menu a.on::before { content: ""; background: #04327B; height: 3px; display: block; position: absolute; width: 100%; bottom: -3px;; left: 0;}
.navi-menu a:hover { color: #000}
.navi-menu a:hover::before { content: ""; background: #ccc; height: 3px; display: block; position: absolute; width: 100%; bottom: -3px; left: 0;}
.navi-menu a.on:hover { color: #04327B;}
.navi-menu a.on:hover::before { content: ""; background: #04327B; height: 3px; display: block; position: absolute; width: 100%; bottom: -3px;; left: 0;}


/* 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;}


.faq{}
.faq dl{margin-top:40px;border-top:2px solid #0025a5;}
.faq dl dt{position: relative;padding:25px 100px;font-size: 18px;font-weight: 500;letter-spacing: -0.45px;color: #0c0c0c;border-bottom:1px solid #cecece;cursor: pointer;}
.faq dl dt:before{content: "Q";position:absolute;top:18px;left:30px;font-size: 28px;font-weight: 500;letter-spacing: -0.7px;color: #0025a5;}
.faq dl dt:after{content: "";position:absolute;top:32px;right:20px;display: inline-block;width:20px;height:12px;background: url(/_public/images1/icon/arrow.svg) no-repeat;background-size: cover;}
.faq dl dt.on:after{transform: rotate(-180deg);}
.faq dl dd{display:none;position:relative;padding:25px 100px; font-size: 16px !important;font-weight: normal;line-height: normal !important;letter-spacing: -0.4px;background: #f8f8f8;border-bottom:1px solid #cecece;}
.faq dl dd *{padding:0 !important;font-size: 17px !important;font-weight: normal;line-height: normal !important;}
.faq dl dd:before{content: "A";position:absolute;top:18px;left:30px;font-size: 28px;font-weight: 500;letter-spacing: -0.7px;color: #818bb0;}

#pages{min-height: calc(100vh - 286px);}
#pages .contents{padding:60px 0 130px;}


@media all and (max-width:1600px) {
.navi-menu a { padding: 10px 8px;  margin: 0 5px; font-size: 19px}
.layout3 { padding: 0 60px;}
}

@media all and (max-width:1440px) {
.navi-menu a { font-size: 18px; margin: 0 2px;}
.navi-menu a:hover.before { bottom: -3px}
.navi-menu a.on::before { bottom: -3px}
.navi-menu a.on:hover::before { bottom: -3px}
footer .layout { padding: 0 20px}
}

/* tablet */
@media all and (max-width:1280px) {
    #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;}

    footer{padding:40px 20px 50px;}
    footer .layout{ display: block; padding: 0}
    footer .layout .footbox { flex-direction: column;}
    footer .layout .footbox .address ul li p span:first-child { width: 100%}
    footer .layout .footbox .address ul li p:first-child { width: 100%}
    footer .layout .footbox .address strong { font-size: 16px}
    footer .layout .footbox .address ul li p { display: block;}
    footer .layout .footbox .address ul li p span { width: auto;margin-right: 7px;}
    footer .layout .footbox .address ul li { line-height: 1.5; margin-bottom: 15px}
    footer .layout .footbox .address ul li p { font-size: 14px;}
    footer .layout .footbox .address ul li p.ftel span { width: 24px}

    footer .layout .footbox .infotxt { width: 100%; padding-left: 0; border-top: 1px solid #4D5964; padding-top: 20px; border-left:0}
    footer .layout .footbox .infotxt strong { font-size: 16px}
    footer .layout .footbox .infotxt ul li a { font-size: 14px}
    footer .layout .footbox .infotxt p.copyright { position: relative; margin-top: 40px;}

    .page-top .visual{position: relative;padding-top:0;height: 220px;}

    #pages{padding-top:60px;min-height:inherit;}
    #pages .contents{padding:60px 0 130px;}
    #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 h1{font-size:45px;}
    .page-top .visual .group{ top:48px }
    .page-top .visual .breadcrumbs{/* top: -20px; */display: flex;position: relative;justify-content: center;align-items: center;margin: 20px 0 35px;}
    .navi-menu { bottom:0;}
    .navi-menu a {font-size: 17px; padding: 10px 7px; margin: 0 2px;}
    .page-top .visual .breadcrumbs > ul > li span { font-size: 18px}
    .page-top .visual .breadcrumbs .sub-menu-btn { font-size: 18px}
    .navi-menu a.on:hover::before {bottom: -0px;}
    .navi-menu a.on::before {bottom: -0px;}
}


/* mobile */
@media all and (max-width:1024px) {
    #pages .contents { padding: 40px 0 100px}
    .page-top .visual h1{font-size:30px;}
    .navi-menu {bottom: -2px;}
    .navi-menu a {font-size: 16px}
    .page-top .visual .breadcrumbs > ul > li span { font-size: 16px}
    .page-top .visual .breadcrumbs .sub-menu-btn { font-size: 16px}
    .page-top .visual .group{ top:65px }


    .navi-menu{
        justify-content: flex-start;      /* 가운데 정렬 해제 */
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        gap: 6px;
        padding: 0 14px;                  /* 좌우 여백 */
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        cursor: grab;
        user-select: none;
      }
      .navi-menu:active{ cursor: grabbing; }

      .navi-menu a{
        flex: 0 0 auto;                   /* 줄바꿈 방지 */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;                        /* 기존 margin(0 10px) 제거 권장 */
        padding: 10px 12px;
      }

      /* 스크롤바 숨김 */
      .navi-menu::-webkit-scrollbar{ display:none; }
      .navi-menu{ scrollbar-width:none; }
    }


}


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

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

    .dl-type1 dt{float: none;}

    .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;}

    #pages .contents{padding:30px 0 65px;}

    .filebox .upload-name{width:100%;height:40px;font-size:12px;background-size: 20px 20px;padding: 0 10px 0 20px;background-position: 0 50%;}
    .filebox label{line-height: 38px;font-size:14px;margin-left:0;margin-top:10px;width:100%;}
    .radio-type2 label{padding-left:25px;font-size:14px;}
    .radio-type2 label::before{width:20px;height:20px;top:0;}
    .radio-type2 label::after{left:5px;top:5px;}



    .terms-box .chk-box{text-align: center;}

    .form-box dl dt{width:100%;top:0;padding:10px 0;}
    .form-box dl dd{padding:0 0 10px;}
    .form-box dl dd input[type="text"],
    .form-box dl dd input[type="tel"],
    .form-box dl dd input[type="date"],
    .form-box dl dd input[type="number"],
    .form-box dl dd input[type="email"],
    .form-box dl dd input[type="password"]{max-width:100%;height:40px;padding:0 10px;font-size:14px;}
    .form-box dl dd select{height:40px;padding:0 10px;font-size:14px;}
    .form-box dl dd .radio-group{padding:10px 0;}
    .form-box dl dd textarea{padding:10px;font-size:14px;}
    .form-box .terms-box .txt-box{font-size:20px; padding: 20px}
    .form-box dl dd .radio-group .radio-type2 + .radio-type2{margin-left:35px;}
    .form-box .terms-box .chk-box .radio-type2 + .radio-type2{margin-left:30px;}


}