@import url('root.css'); /* 변수 */
@import url('font.css'); /* 폰트 */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+SC:wght@100..900&family=Oswald:wght@200..700&family=Outfit:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');




html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,article,aside,canvas,details,embed,html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0; line-height:160%; letter-spacing:normal; box-sizing:border-box;} /* delete vertical-align,font:inherit; */
body,html{width:100%; font-size:18px; color:var(--basic); font-weight:400; line-height:160%; font-family: var(--kor); word-break: keep-all;}
*{font-family:  var(--kor); word-break: keep-all;}
body{-webkit-text-size-adjust: none; word-break:keep-all;}
ol,ul,li{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table {border-collapse:separate;border-spacing:0; font-size:0.9375rem;}
table caption {overflow:hidden; font-size:0; line-height:0; font-size:0.9375rem;}
tbody,tfoot,thead,tr,th,td {margin:0;line-height:160%;letter-spacing:normal;}
dt{display:block;}
hr{display:none;}
a{cursor:pointer;text-decoration:none;color:inherit;}
a, a:hover{transition:all 0.7s cubic-bezier(0.215,0.61,0.355,1);}
address{font-style:normal;}
input,select,img{vertical-align:middle;}
input:focus, textarea:focus, button:focus {outline:none;}  /* 크롬에서 커서 클릭시 파란색 테두리 제외*/
/* input, button {border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none;} */
select { border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; background: url("/img/cat_arrow_bk.svg") no-repeat right 20px center/10px auto;}
select::-ms-expand {display:none}
input[type=text]::-ms-clear {display: none;}
input::-webkit-input-placeholder {color:#999; }
input:-ms-input-placeholder {color:#999; }
input::placeholder {color:#999; }

span, b, strong, br {line-height:inherit; font-family:inherit;}

/* Web Content Accessibility TTS(Text To Speech) Code */
.blind {position:absolute; top:0px; left:0px; overflow:hidden; display:inline-block !important; width:1px !important; height:1px !important; margin:0 !important; font-size:0 !important; line-height:0 !important;}


/* Common */
.brFixed {display: block !important;}
.ls0 {letter-spacing:0 !important;}
.eng {font-family:var(--eng);}
.white {color:var(--white) !important;}
.center{text-align:center !important;}
.left{text-align:left !important;}
.right{text-align:right !important;}
.bold{font-weight: 700 !important; letter-spacing:inherit; line-height:inherit;}
.semibold{font-weight: 600 !important; letter-spacing:inherit; line-height:inherit;}
.medium{font-weight: 500 !important; letter-spacing:inherit; line-height:inherit;}
.regular{font-weight: 400 !important; letter-spacing:inherit; line-height:inherit;}
.light{font-weight: 300 !important; letter-spacing:inherit; line-height:inherit;}
.pointColor{color:var(--main) !important;}
.grayBg{background-color:var(--grayBg) !important;}
.fill {font-variation-settings:  'FILL' 1}



/* 레이아웃 */
.wrapper{position:relative; width:100%; min-width:320px;}
.basic_in {max-width:1350px; width:90%; margin:0 auto;}
.w1590 {max-width:1590px; width:90%; margin:0 auto;}
.w1350 {max-width:1350px; width:90%; margin:0 auto;}

.compad {padding:200px 0; box-sizing:border-box;}
.compad_t {padding:200px 0 0; box-sizing:border-box;}
.compad_b {padding:0 0 200px; box-sizing:border-box;}




/* 슬릭기본 */
.slick-slider{position: relative; display: block; box-sizing: border-box; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;-ms-touch-action: pan-y; touch-action: pan-y;-webkit-tap-highlight-color: transparent; outline: 0 !important;}
.slick-list{position: relative; display: block; overflow: hidden; margin: 0; padding:0 !important;  outline: 0 !important;}
.slick-track {display:flex; }
.slick-slide{border:0; outline: 0 !important;}
.slick-initialized .slick-slide{display:block; outline: 0 !important;}
/* 슬릭기본 */



/* Header */
.header{position:fixed; left:0; top:0; width: 100%; min-width:320px; height:100px; z-index: 999999; transition:all 0.4s; overflow:hidden;}
.header:before{content:''; display:block; width:100%; height:1px; background:var(--border); position: absolute; left: 0; top:100px; transition:all .3s linear; opacity: 0;}
.header .header_in{display:flex; align-items:center; justify-content:space-between; padding: 22px 0;}
.header .header_in > .logo{width:217px; height:55px; display:inline-block; vertical-align: top; font-size:0; }
.header .header_in > .logo img {max-width:100%; height:auto; width:100%;}
.header .header_in > .logo.one {display:block;}
.header .header_in > .logo.two {display:none;}
.header .header_in .top_util{}
/* .header .header_in .top_util ul{font-size:0; display:flex; align-items: center;} */
.header .header_in .top_util ul li{vertical-align: top; display: inline-block; margin-left: 20px; height:25px; width:25px;}
/* .header .header_in .top_util ul li span {font-size:25px;} */
.header .header_in .top_util ul li:first-child{margin-left: 0;}
.header .header_in .top_util ul li a{display:inline-block; color:var(--white); opacity: 1; transition:all .3s linear; position: relative;}
.header .header_in .top_util ul li a:hover{transition:all .3s linear;} 
.header .header_in .top_util ul li a:hover{transition:all .3s linear;} 
.header .header_in .top_util ul li a:hover span {color:var(--main)}

/* .header .header_in .top_util ul li.menu_btn{} */
.header .header_in .top_util ul li.menu_btn.mobile_btn {display:none}
.header .header_in .top_util ul li.menu_btn a:after{display: none;}

.header.nofixed {box-shadow:0 0 20px rgba(34,34,34,.1); top:-200px;}


/* --- 언어 선택 버튼 정렬 및 간격 수정 시작--- */





/* 메뉴 */
.gnb{position: absolute; left:50%; top:0; transform:translateX(-50%); }
.gnb ul{font-size:0;}
.gnb ul li{line-height: 120%; display: inline-block; vertical-align: top; padding: 0 0 0 55px; position: relative;}
.gnb ul li > a{display:inline-block; font-size:1rem; letter-spacing:-1.26px; line-height: 177%; color:var(--white); font-weight:500; transition:all .3s linear; position: relative; padding:35px 0 30px; box-sizing:border-box;}
.gnb ul li:hover > a{color:var(--main)}
.gnb ul li > a:after{content:''; display:block; width: 0; height: 3px; background:var(--main); position: absolute; left:50%; bottom:-1px; transform:translateX(-50%); transition:all .3s linear; }
.gnb ul li:hover > a:after{width: 100%; transition:all .3s linear; }

.gnb ul li dl{position: absolute; left:67%; transform:translateX(-50%); top:100px; width: 100%; padding: 23px 0; text-align:center; /* opacity:0; display:none;  */margin-left:6px;}
.gnb ul li dl dd{padding:0 0 5px; line-height: 120%;}
.gnb ul li dl dd:last-child{padding:0;}
.gnb ul li dl dd a{display:block; font-size:0.889rem; letter-spacing:-1.12px; line-height:175%; transition:all .3s linear; color:var(--basic); font-weight:400; }
.gnb ul li dl dd a:hover{color:var(--main) !important; text-decoration:underline; font-weight:500;  transition:all .3s linear;}


.header.up{background:#fff; height:345px; box-shadow:0 0 20px rgba(34,34,34,.1);   }
.header.up:before{opacity: 1;}
.header.up .header_in > .logo.one{display:none;}
.header.up .header_in > .logo.two {display:block;}

.header.up .header_in .top_util ul li a{color:var(--black);}
.header.up .header_in a svg .up{fill:var(--black);}
.header.up .gnb ul li > a{color:var(--black);}
.header.up .gnb ul li dl {opacity:1 !important; display:block;}
.header.up .header_in .top_util ul li svg path {stroke:var(--black)}
.header.fixed{transform:translateY(0);}

.header.fixed{background:var(--white); box-shadow:0 0 20px rgba(34,34,34,.1);}
.header.fixed .header_in > .logo.one {display:none;}
.header.fixed .header_in > .logo.two {display:block;}
.header.fixed .header_in .top_util ul li a{color:var(--black);}
.header.fixed .header_in a svg .up{fill:var(--black);}
.header.fixed .gnb ul li > a{color:var(--black);}
/* .header.fixed .header_in .top_util ul li.menu_btn a span{background:var(--black);} */
.header.fixed .header_in .top_util ul li svg path {stroke:var(--black)}



#sitemap {position:fixed; top:0; left:0; z-index:9999999999; width:100%; height:var(--vh); background:url("/img/sitemap_bg.jpg")no-repeat center / cover; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; opacity:0; visibility:hidden; transition:all 0.5s ease;}
#sitemap.visible {opacity:1; visibility:visible; transition:all 0.5s ease;}
#sitemap .site_close {display:block; margin:0 auto; width:50px;}
#sitemap .site_close::before {content:'\e5cd'; font-size:50px; display:block; line-height:1; color:var(--black); font-weight:300; font-family:var(--icon);}
#sitemap .logo {text-align:center; margin:70px 0 80px;}
#sitemap .site-list {display:flex; flex-wrap:wrap; justify-content:center; gap:0 100px;}
#sitemap .site-list dl {text-align:center;}
#sitemap .site-list dl dt {color: var(--black); font-size: 2.222rem; font-weight: 700; line-height:112.5%; letter-spacing: -0.175rem; margin:0 0 25px;}
#sitemap .site-list dl dd {}
#sitemap .site-list dl dd a {display:block; line-height:177.778%; letter-spacing: -1.26px;}
#sitemap .site-list dl dd a+a {margin:5px 0 0;}


#quick {width:90px; position:fixed; bottom:30px; right:30px; z-index:999999;}
#quick ul {width:100%; box-sizing:border-box; padding:15px 10px; border-radius: 70px; background: rgba(255, 255, 255, 0.95); box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.08); backdrop-filter: blur(4px);}
#quick ul li {}
#quick ul li+li {border-top:1px dashed var(--border);}
#quick ul li a {display:block; padding:16px 0 14px; box-sizing:border-box; text-align:center;}
#quick ul li a h3 {color: var(--black); font-size: 0.8333rem; font-weight: 500; line-height:160%; letter-spacing: -0.066rem; display:block; margin:6px 0 0;}
#quick .mainTop {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:100%; width:70px; aspect-ratio: 3 / 3; background:var(--main); margin:10px auto 0;}
#quick .mainTop::before {content:'\e25a'; font-size:30px; font-family:var(--icon); color:var(--white); display:block;}



/* Footer */
.footer {background:var(--blue_black); padding:60px 0 60px; }
.footer .w1350 {position:relative;}
.footer .w1350 ul {display:flex; flex-wrap:wrap;}
.footer .w1350 ul li{font-size:0.889rem; letter-spacing:-1.12px; line-height:175%; color:rgba(255,255,255,.7); font-weight:400;}
.footer .w1350 ul li a{font-size:0.889rem; letter-spacing:-1.12px; line-height:175%; color:rgba(255,255,255,.7); font-weight:400;}

.footer .w1350 .foot_top {padding-bottom:37px; box-sizing:border-box;}
.footer .w1350 ul.page_list {}
.footer .w1350 ul.page_list li { padding:0 20px; position:relative; }
.footer .w1350 ul.page_list li a {color:rgba(255,255,255,.8);}
.footer .w1350 ul.page_list li.pointColor a {opacity:1 !important; font-weight:500;}
.footer .w1350 ul.page_list li a:hover {color:var(--white);}
.footer .w1350 ul.page_list li a.pointColor:hover {font-weight:700;}


.footer .w1350 ul.page_list li:before {position:absolute; left:0; top:6px; width:1px; height:16px; background:var(--white); opacity:0.2; display:block; content:'';}
.footer .w1350 ul.page_list li:first-of-type {padding-left:0; }
.footer .w1350 ul.page_list li:first-of-type:before {display:none;}
.footer .w1350 ul.page_list li a {}


.footer .w1350 .foot_bottom {display:flex; padding-top:53px; box-sizing:border-box; border-top:1px solid rgba(255,255,255,.15);}
.footer .w1350 .foot_bottom .foot_logo {width:217px;}
.footer .w1350 .foot_bottom .foot_logo img {max-width:100%; height:auto; width:100%;}
.footer .w1350 .foot_bottom .info_wrap {width:calc(100% - 217px); padding-left:105px; box-sizing:border-box;}

.footer .w1350 ul.info {margin-bottom:2px;}
.footer .w1350 ul.info li {position:relative; padding-right:20px; box-sizing:border-box;}
.footer .w1350 ul.info li:first-of-type {padding-left:0;}
.footer .w1350 ul.info li a {font-size:0.889rem; letter-spacing:-1.12px; line-height:175%; color:rgba(255,255,255,.7); font-weight:400;}

.footer .w1350 ul.contact {margin-bottom:10px;}
.footer .w1350 ul.contact li {position:relative; padding-left:20px; box-sizing:border-box; margin-right:20px;}
.footer .w1350 ul.contact li:first-of-type {padding-left:0;}
.footer .w1350 ul.contact li:before {position:absolute; left:0; top:1px; font-family:var(--icon); display:block; font-size:16px; color:rgba(255,255,255,.6);  font-variation-settings:  'FILL' 1}
.footer .w1350 ul.contact li.address:before {content:'\e0c8';}
.footer .w1350 ul.contact li.call:before {content:'\e0b0';}
.footer .w1350 ul.contact li.fax:before {content:'\e8ad';}
.footer .w1350 ul.contact li.mail:before {content:'\e158';}

.footer .w1350 ul.quick.pc {}
.footer .w1350 ul.quick.mobile {display:none;}

.footer .w1350 ul.quick {position:absolute; right:0; top:0; gap:2px;}
.footer .w1350 ul.quick li {font-size:0; display:flex; justify-content:center; align-items:center; }
.footer .w1350 ul.quick li a {position:relative; width:42px; height:42px; display:inline-block; border-radius:100%; background:rgba(255,255,255,.1); display:flex; justify-content:center; align-items:center; font-size:0; }
.footer .w1350 ul.quick li a:before {display:block; display:flex; justify-content:center; align-items:center; content:''; background-size:cover !important; background-repeat:no-repeat !important; }
.footer .w1350 ul.quick li.facebook a:before {background:url('/img/facebook.svg'); width:24px; height:24px;}
.footer .w1350 ul.quick li.instagram a:before {background:url('/img/instagram.svg');width:22px; height:22px;}
.footer .w1350 ul.quick li.blog a:before {background:url('/img/blog.svg'); width:12px; height:16px;}
.footer .w1350 ul.quick li.kakao a:before {background:url('/img/kakao.svg'); width:24px; height:20px;}
.footer .w1350 ul.quick li.youtube a:before {background:url('/img/youtube.svg');width:24px; height:24px;}
.footer .w1350 ul.quick li a:hover {background:var(--sub)}

.footer .w1350 ul.copyright li {font-size:15px; color:rgba(255,255,255,.5); text-transform:uppercase;}
.footer .w1350 ul.copyright span {font-size:15px;  color:rgba(255,255,255,.3); transition:all .4s ease; text-transform:none;}
.footer .w1350 ul.copyright span a {font-size:15px;  color:rgba(255,255,255,.3); transition:all .4s ease}
.footer .w1350 ul.copyright span a:hover {color:rgba(255,255,255,1);}



/* Top */
.btn_top{position: fixed; right:30px; bottom: 30px; display: none; z-index: 99999;}
.btn_top a{display:block; width: 70px; height: 70px; font-size:0; border:1px solid transparent; box-sizing:border-box; border-radius:5px; text-align:center; background:var(--main); transition:all .3s linear; position:relative;}
.btn_top a:hover{background:var(--white); transition:all .3s linear;}
.btn_top a:before {display:block; content:'\e25a'; font-family:var(--icon); font-size:27px; color:var(--white);position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.btn_top a:hover:before {color:var(--main);}






/* 검색 */
.searchZone{ position:absolute; top:18px;right: 56px; z-index:89; display:none;}
.mask_search {position:fixed; height:0; width:100%; left:0; top:0; z-index:99999999999999; background:rgba(0,0,0,.8); opacity:0; visibility:hidden; transition:all 0.8s ease-in-out;}
.mask_search.visible {height:100%; transition:all 0.8s ease-in-out; opacity:1; visibility:visible;}
.window {z-index:9999999999; width:90%; max-width:1000px; height:70px; background:var(--white); box-sizing:border-box; padding:20px 30px; position:fixed; transform:translate(-50%, -70%); opacity:0; visibility:hidden; transition:all 0.8s ease-in-out; border-radius:50px;}
.window.visible {transform:translate(-50%, -50%); opacity:1; visibility:visible; transition:all 0.8s ease-in-out; transition-delay:0.5s; }
.window .close{display:block; color:var(--white); position:absolute; top:-50px; right:0;  z-index:999999; cursor:pointer; width: 35px; height: 35px;}
.window .close span{font-size:35px;}
.inputB{width:100%; overflow:hidden; clear:both; }
.inputB dd{float:left; width:calc(100% - 40px); overflow:hidden; }
.inputB dd .input_search{border:none !important;  letter-spacing:-0.55pt; width:100%; height: 28px; font-size:1rem; color:#777; letter-spacing:-0.35pt;}
.inputB dd .input_search::placeholder{font-size:15px;}
.inputB dt{float:right; width: 40px; height: 30px; text-align:right; box-sizing:border-box;}
.inputB dt button{padding:0; border:0; background:none; cursor:pointer; outline:none;}
.inputB dt button span{color:var(--black); line-height: 30px; font-size:28px; font-weight: 600;}

input::-webkit-input-placeholder { color:#999; font-size:13px;}
input::-moz-placeholder { color:#999; font-size:13px;}
input:-ms-input-placeholder { color:#999; font-size:13px;}

.mask {position:fixed;  z-index:9999999;  background-color:#000;  display:none;  left:0; top:0;} 
.mask_pro {position:fixed;  z-index:9999999;  background-color:#000;  display:none;  left:0; top:0;} 





/**  코딩시 지우지 말 것 **/

/* 게시판 페이징 */
.page_num {padding:70px 0 0;}
.page_num ul.pagination {display:flex; flex-wrap:wrap; justify-content: center; align-items:center;}
.page_num ul.pagination li{margin:0 10px;}
/* .page_num ul.pagination li:nth-child(1){margin:0 2px 0 0;}
.page_num ul.pagination li:nth-child(2){margin:0 16px 0 0;} */

/* .page_num ul.pagination li:nth-last-child(2){margin:0 0 0 16px;}
.page_num ul.pagination li:nth-last-child(1){margin:0 0 0 2px;} */

/* ejs 동적 페이지 적용시 오류 발생하여 주석 처리함 */


.page_num ul.pagination li a{display:inline-block; vertical-align: top; font-size:1rem; line-height: 140%; font-family:var(--eng); color:rgba(119,119,119,.5); padding:0 2px; position:relative; transition:all .3s linear; text-align:center;}
.page_num ul.pagination li a:hover{color:var(--black);}

.page_num ul.pagination li a.active {
  color: var(--main) !important;
  font-weight: 700 !important;
  min-width: 26px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}


/* .page_num ul.pagination li a.active{color:var(--main) !important; font-weight: 700 !important;} */
.page_num ul.pagination li a.active:after{content:''; display:block; width:100%; height:2px; background:var(--main); position:absolute; left:0; bottom:0;}
.page_num ul.pagination li.arrow a{width: 34px; height: 34px; padding:0; border-radius:5px; box-sizing:border-box; border:1px solid var(--border); font-size:0; transition:all .3s linear; text-align:center;}
.page_num ul.pagination li.arrow a:hover{border-color:var(--black);}
.page_num ul.pagination li.arrow a span{font-size:18px; width:34px; height: 34px; line-height: 34px; text-align:center; color:#888; transition:all .3s linear;}
.page_num ul.pagination li.arrow a:hover span{color:var(--black);}



/* 에러페이지 */
#error {position:absolute; border:1px solid var(--border); width:500px; padding:200px 50px 50px 50px; text-align:center; background:url('/img/warning_icon.gif') center 50px no-repeat; left:50%; margin-left:-300px; top:49%; margin-top:-203px; box-shadow:0px 5px 0 #f6f6f6;} /*  -moz-transform:translateY(-49%); -ms-transform:translateY(-49%); -webkit-transform:translateY(-49%); transform:translateY(-49%); */
#error h1 {color:#333; font-family:"NanumGothic", "NG", MalgunGothic, Dotum, Arial, sans-serif; margin:0; letter-spacing:-0.5pt;}
#error h1 span {color:#cc141d;}
#error div {color:#666; font-size:18px; letter-spacing:-0.5pt; margin-top:30px; padding-top:30px; line-height:150%; border-top:1px dashed #ccc;}


@media all and (max-width: 1700px) {
/* gnb */
.gnb{ display:none; }

}
/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width: 1500px) {
  
  
/* Header */
.header{height:88px; }
.header:before{top:88px;}
.header .header_in{padding: 20px 0;}
.header .header_in > .logo{width:190px; height:48px;}
/* .header .header_in .top_util ul li{margin-left: 18px; height:25px; width:25px;}
.header .header_in .top_util ul li span {font-size:25px;} */



/* 메뉴 */
.gnb{
  transform:translateX(-50%);
  /* margin-left: -250px;  */
}
.gnb ul li{padding: 0 0 0 45px; position: relative;}
.gnb ul li > a{ font-size:1rem; padding:30px 0 27px; }
.gnb ul li > a:after {bottom:0;}

.gnb ul li dl{top:88px; padding: 20px 0;    margin-left: 5px;}
.gnb ul li dl dd{padding:0 0 5px;}
.gnb ul li dl dd a{font-size:0.889rem; letter-spacing:-1.12px; }

.header.up{height:335px; }


.footer .w1350 .foot_bottom .foot_logo {width:190px;}
.footer .w1350 .foot_bottom .info_wrap {width:calc(100% - 190px);  }

}

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



  
/* Header */
.header{height:79px; }
.header:before{top:79px;}
.header .header_in{padding: 18px 0;}
.header .header_in > .logo{width:170px; height:43px;}


/* Footer */
.footer {padding:50px 0 50px}
.footer .w1350 ul li{font-size:0.889rem; letter-spacing:-1.12px;}
.footer .w1350 ul li a{font-size:0.889rem; letter-spacing:-1.12px;}

.footer .w1350 .foot_top {padding-bottom:30px;}
.footer .w1350 ul.page_list li { padding:0 20px; }


.footer .w1350 ul.page_list li:before {top:6px; width:1px; height:16px; }


.footer .w1350 .foot_bottom {padding-top:48px;}
.footer .w1350 .foot_bottom .foot_logo {width:190px;}
.footer .w1350 .foot_bottom .info_wrap {width:calc(100% - 190px); padding-left:80px; }

.footer .w1350 ul.info {margin-bottom:2px;}
.footer .w1350 ul.info li {padding-right:20px;}
.footer .w1350 ul.info li a {font-size:0.889rem; letter-spacing:-1.12px; }

.footer .w1350 ul.contact {margin-bottom:10px;}
.footer .w1350 ul.contact li {padding-left:20px;;}
.footer .w1350 ul.contact li:before {font-size:16px;}

.footer .w1350 ul.quick.pc {}
.footer .w1350 ul.quick.mobile {display:none;}

.footer .w1350 ul.quick {gap:2px;}
.footer .w1350 ul.quick li a {width:42px; height:42px;}
.footer .w1350 ul.quick li.facebook a:before {width:24px; height:24px;}
.footer .w1350 ul.quick li.instagram a:before {width:22px; height:22px;}
.footer .w1350 ul.quick li.blog a:before {width:12px; height:16px;}
.footer .w1350 ul.quick li.kakao a:before {width:24px; height:20px;}
.footer .w1350 ul.quick li.youtube a:before {width:24px; height:24px;}





 
}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width: 980px) {

/* Common */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{line-height:150%;} /* delete vertical-align,font:inherit; */
body,html{font-size:16px;}



/* Header */
.header{height:74px; }
.header:before{top:74px;}
.header .header_in{padding: 18px 0;}
.header .header_in > .logo{width:150px; height:38px;}



#sitemap .site_close {width:40px;}
#sitemap .site_close::before {font-size:40px;}
#sitemap .logo {margin:45px 0 50px;}
#sitemap .site-list {gap:25px 0;}
#sitemap .site-list dl {width:100%;}
#sitemap .site-list dl dt {font-size:1.888rem; margin:0 0 10px;}
/* #sitemap .site-list dl dd {display:none;} */





/* Footer */
.footer {padding:40px 0 40px}
.footer .w1350 ul li{font-size:0.889rem; }
.footer .w1350 ul li a{font-size:0.889rem;}

.footer .w1350 .foot_top {padding-bottom:30px;}
.footer .w1350 ul.page_list li { padding:0 17px; }


.footer .w1350 ul.page_list li:before {top:5px; width:1px; height:14px; }


.footer .w1350 .foot_bottom {padding-top:36px;}
.footer .w1350 .foot_bottom .foot_logo {width:150px;}
.footer .w1350 .foot_bottom .info_wrap {width:calc(100% - 150px); padding-left:60px; }

.footer .w1350 ul.info {margin-bottom:2px;}
.footer .w1350 ul.info li {padding-right:20px;}
.footer .w1350 ul.info li a {font-size:0.889rem; letter-spacing:-1.12px; }

.footer .w1350 ul.contact {margin-bottom:10px;}
.footer .w1350 ul.contact li {padding-left:20px;  margin-right:16px;}
.footer .w1350 ul.contact li:before {font-size:16px;}

.footer .w1350 ul.quick.pc {}
.footer .w1350 ul.quick.mobile {display:none;}

.footer .w1350 ul.quick {gap:2px;}
.footer .w1350 ul.quick li a {width:40px; height:40px;}
.footer .w1350 ul.quick li.facebook a:before {width:22px; height:22px;}
.footer .w1350 ul.quick li.instagram a:before {width:20px; height:20px;}
.footer .w1350 ul.quick li.blog a:before {width:10px; height:14px;}
.footer .w1350 ul.quick li.kakao a:before {width:20px; height:16px;}
.footer .w1350 ul.quick li.youtube a:before {width:22px; height:22px;}


.footer .w1350 ul.copyright li {font-size:13px; }
.footer .w1350 ul.copyright span {font-size:13px; }
.footer .w1350 ul.copyright span a {font-size:13px; }

/* 게시판 페이징 */
.page_num {padding:50px 0 0;}




/* 검색 */
.window {padding:15px 25px;}
.window.visible {transform:translate(-50%, -50%); opacity:1; visibility:visible; transition:all 0.8s ease-in-out; transition-delay:0.5s; }
.window .close{display:block; color:var(--white); position:absolute; top:-40px; right:0;  z-index:999999; cursor:pointer; width: 30px; height: 30px;}
.window .close span{font-size:30px;}
.inputB dd{float:left; width:calc(100% - 30px); overflow:hidden; }
.inputB dd .input_search::placeholder{font-size:14px;}
.inputB dt{width: 30px; height: 30px; text-align:right; box-sizing:border-box; display:flex; align-items:center; justify-content:center;}
.inputB dt button span{color:var(--black); line-height: 26px; font-size:24px; font-weight: 600; margin-top: 10px;}




}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width: 680px) {

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{line-height:150%;} /* delete vertical-align,font:inherit; */
body,html{font-size:15px; }

/* Header */
.header{height:63px; }
.header:before{top:63px;}
.header .header_in{padding: 10px 0;}
.header .header_in > .logo{width:160px; height:40px;}



#sitemap .site_close {width:30px;}
#sitemap .site_close::before {font-size:30px;}
#sitemap .logo {margin:25px 0 30px;}
#sitemap .logo img {max-width:180px;}
#sitemap .site-list {gap:15px 0;}
#sitemap .site-list dl {width:100%;}
#sitemap .site-list dl dt {font-size:1.555rem; margin:0 0 10px;}
/* #sitemap .site-list dl dd {display:none;} */
#sitemap .site-list dl dd a+a {margin:2px 0 0;}


#quick {right:0; bottom:0; width:100%; min-width:320px;}
#quick ul {border-radius:20px 20px 0px 0px; padding:10px 0; display: grid;  grid-template-columns: repeat(3, 1fr);}
#quick ul li {}
#quick ul li a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0 10px; padding:10px 5px; box-sizing:border-box;}
#quick ul li a h3 {margin:0; line-height:1;}
#quick ul li img {max-width:22px; max-height:22px;}
#quick ul li+li {border-top:0; border-left:1px dashed var(--border); box-sizing:border-box;}
#quick .mainTop {margin:0; position:absolute; top:0; left:50%; width:36px; height:36px; transform:translate(-50%,-60%);}
#quick .mainTop::before {font-size:18px;}



/* Footer */
.footer {padding:40px 0 120px}
.footer .w1350 ul li{font-size:14px;  }
.footer .w1350 ul{ justify-content: center; text-align:center; }
.footer .w1350 ul li a{font-size:14px}

.footer .w1350 .foot_top {padding-bottom:20px;}
.footer .w1350 ul.page_list{ justify-content: center; position: relative; overflow: hidden; flex-wrap: nowrap;}
.footer .w1350 ul.page_list li { padding:0 10px; }


.footer .w1350 ul.page_list li:before {top:5px; width:1px; height:14px; }

.footer .w1350 .foot_bottom {padding-top:27px;}
.footer .w1350 .foot_bottom .foot_logo {display:none;}
.footer .w1350 .foot_bottom .info_wrap {width:100%; padding-left:0; }

.footer .w1350 ul.info {margin-bottom:2px; justify-contetn:center;}
.footer .w1350 ul.info li {padding-right:10px;text-align:center}
.footer .w1350 ul.info li:first-of-type {width:100%; font-weight:500; color:var(--white);}
.footer .w1350 ul.info li a {font-size:14px; letter-spacing:-1.12px; }

.footer .w1350 ul.contact {margin-bottom:10px; justify-content: center; text-align:center;}
.footer .w1350 ul.contact li {padding-left:20px;  margin-right:16px;}
.footer .w1350 ul.contact li:before {font-size:15px;}

.footer .w1350 ul.quick.pc {display:none;}
.footer .w1350 ul.quick.mobile {display:flex; position:unset;}

.footer .w1350 ul.quick {gap:2px; padding-top:18px; box-sizing:border-box;}
.footer .w1350 ul.quick li a {width:38px; height:38px;}
.footer .w1350 ul.quick li.facebook a:before {width:20px; height:20px;}
.footer .w1350 ul.quick li.instagram a:before {width:18px; height:18px;}
.footer .w1350 ul.quick li.blog a:before {width:8px; height:12px;}
.footer .w1350 ul.quick li.kakao a:before {width:18px; height:14px;}
.footer .w1350 ul.quick li.youtube a:before {width:20px; height:20px;}

.footer .w1350 ul.copyright span {width:100%; display:block;}
  
  .footer .w1350 ul.copyright li {font-size:12px; }
.footer .w1350 ul.copyright span {font-size:12px; }
.footer .w1350 ul.copyright span a {font-size:12px; }


/* 게시판 페이징 */
.page_num {padding:30px 0 0;}
.page_num ul.pagination {}
.page_num ul.pagination li{margin:0 5px;}
.page_num ul.pagination li:nth-child(1){margin:0 2px 0 0;}
.page_num ul.pagination li:nth-child(2){margin:0 8px 0 0;}
.page_num ul.pagination li:nth-last-child(2){margin:0 0 0 8px;}
.page_num ul.pagination li:nth-last-child(1){margin:0 0 0 2px;}
.page_num ul.pagination li.arrow a{width: 24px; height: 24px;}
.page_num ul.pagination li.arrow a span{font-size:13px; width: 24px; height: 24px; line-height: 24px;}


/* 검색 */
.window {padding:8px 15px;     height: 50px;}
.window.visible {transform:translate(-50%, -50%); opacity:1; visibility:visible; transition:all 0.8s ease-in-out; transition-delay:0.5s; }
.window .close{display:block; color:var(--white); position:absolute; top:-40px; right:0;  z-index:999999; cursor:pointer; width: 30px; height: 30px;}
.window .close span{font-size:30px;}
.inputB dd{float:left; width:calc(100% - 30px); overflow:hidden; }
.inputB dt{width: 30px; height: 30px; text-align:right; box-sizing:border-box; display:flex; align-items:center; justify-content:center;}
.inputB dt button span{color:var(--black); line-height: 22px; font-size:20px; font-weight: 600; margin-top: 5px;}


}
/*******************************************************************************
    @media ~480px               
*******************************************************************************/
@media all and (max-width: 480px) {


.footer .w1350 ul li{font-size:12px;  }
.footer .w1350 ul li a{font-size:12px}

.footer .w1350 ul.copyright li {font-size:11px; }
.footer .w1350 ul.copyright span {font-size:11px; }
.footer .w1350 ul.copyright span a {font-size:11px; }

}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width: 360px) {
}


  /* CONTACT > Message 텍스트영역 placeholder 톤만 살짝 더 연하게 */
/* CONTACT > Message 텍스트영역 placeholder 살짝 더 두껍게 */
.contact-form textarea[name="remarks"]::placeholder { color:#999; opacity:1; font-weight:500; font-size:13px; }
.contact-form textarea[name="remarks"]::-webkit-input-placeholder { color:#999; opacity:1; font-weight:500; font-size:13px;}
.contact-form textarea[name="remarks"]:-ms-input-placeholder { color:#999; font-weight:500; font-size:13px;}      /* IE 10-11 */
.contact-form textarea[name="remarks"]::-ms-input-placeholder { color:#999; font-weight:500; font-size:13px; }     /* Edge Legacy */


@media (max-width: 680px) {
  html[lang="en"] #quick ul {
    border-radius: 0px 0px 0px 0px;
    grid-template-columns: repeat(2, 1fr);
  }
}


/* !! 'English' 버튼 강제 표시 및 복구 !! */
/* Header 섹션 내의 기존 .header .header_in .top_util ul li 규칙을 아래로 대체 */
.header .header_in .top_util ul li {
    vertical-align: top;
    display: inline-block;
    margin-left: 0; 
    height: auto; 
    width: auto;
}

/* 아이콘 버튼이 있는 li (검색, 메뉴)에만 고정 크기 적용 */
.header .header_in .top_util ul li.search-item,
.header .header_in .top_util ul li.menu-item {
    height: 25px; /* 아이콘 li 원래 크기 유지 (필요하다면) */
    width: 25px;  /* 아이콘 li 원래 크기 유지 (필요하다면) */
    display: flex; /* 아이콘을 중앙 정렬하기 위해 추가 */
    align-items: center;
    justify-content: center;
}
.header .header_in .top_util ul li span {
    font-size: 25px; /* 아이콘 크기 유지 */
    line-height: 1; /* 아이콘 정렬 개선 */
}

/* --------------------------------------------------- */

/* top_util ul (Flexbox 설정으로 가로 정렬, 간격 15px 통일) */
.top_util ul {
    font-size: 0;
    display: flex;
    align-items: center; /* 세로 높이 중앙 정렬 */
    gap: 15px; /* 모든 li 항목 간의 가로 간격을 15px로 통일 */
    margin: 0;
    padding: 0;
    list-style: none;
}

/* lang-switcher 마진 제거 (gap을 사용하기 위해) */


.top_util .lang-switcher .lang-btn {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 미디어 쿼리에서도 margin-right 제거를 강제합니다. */
@media all and (max-width: 1500px) {
    .top_util .lang-switcher { margin-right: 0 !important; }
}
@media all and (max-width: 1300px) {
    .top_util .lang-switcher { margin-right: 0 !important; }
}
/* ... 나머지 미디어 쿼리도 모두 margin-right: 0 !important; 로 수정 ... */
/* ============================
   English 버튼 가시성 & 스타일
   ============================ */

/* top-util 리스트 정렬 보강 (클래스명까지 명시) */
.top_util .top-util-list {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 언어 스위쳐 li 강제 노출 */
.top_util .lang-switcher {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* English 버튼 모양 잡기 */
.top_util .lang-switcher .lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  min-width: 80px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.8);
  background: rgba(0,0,0,0.45);
  font-size: 14px;
  font-weight: 500;
  color: #fff !important;
  line-height: 1;
}

/* 호버 시 살짝 강조 */
.top_util .lang-switcher .lang-btn:hover {
  background:  #334966;   
  color: #fff!important;
  border-color: transparent;
}

/* 헤더가 흰 배경일 때(스크롤 후 / 메뉴 펼쳐졌을 때) 버튼 톤 바꾸기 */
.top_util .lang-switcher .lang-btn {
  display: inline-block;           /* flex 말고 깔끔하게 */
  padding: 0 16px;                 /* 좌우 동일 패딩 */
  height: 30px;                    /* 고정 높이 */
  line-height: 25px;               /* 세로 가운데 정렬 */
  box-sizing: border-box;

  border-radius: 999px;
  background: #334966;             /* 항상 동일 색 */
  border: 1px solid #334966;

  font-size: 14px;
  font-weight: 500;
  color: #fff !important;
  text-align: center;              /* 가로 가운데 정렬 */
  white-space: nowrap;             /* 줄바꿈 방지 */
  letter-spacing: 0;               /* 혹시 상위에서 먹는 자간 초기화 */
}

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

  /* ... 기존 코드 그대로 두고 */

  /* ---- top_util 정리: lang-switcher 따로 처리 ---- */

  /* 전체 li에 고정 크기 주지 말고 기본값 초기화 */
  .header .header_in .top_util ul li {
    margin-left: 0;
    width: auto;
    height: auto;
  }

  /* 아이콘(li.search-item, li.menu-item)만 25x25 유지 */
  .header .header_in .top_util ul li.search-item,
  .header .header_in .top_util ul li.menu-item {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* English 버튼 들어있는 lang-switcher는 pill 크기대로 */
  .header .header_in .top_util ul li.lang-switcher {
    width: auto;
    height: auto;
  }

  /* 간격은 gap으로만 관리 */
  .top_util .top-util-list {
     gap: clamp(4px, 1vw, 12px);
  }
}
.top_util .lang-switcher .lang-btn:hover,
.header.fixed .top_util .lang-switcher .lang-btn,
.header.up .top_util .lang-switcher .lang-btn {
  background: #334966;
  border-color: #334966;
  color: #fff !important;
}