@import url('root.css'); /* 변수 */
@import url('font.css'); /* 폰트 */
@import url('https://use.typekit.net/vst3koz.css');

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:165%; letter-spacing:normal} /* delete vertical-align,font:inherit; */
body,html{width:100%; font-size:15px; color:var(--basic); font-weight:400; line-height:165%; 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("/assets/images/newImg/cat_arrow_bk.svg") no-repeat right 10px center/8px 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);}

.redFont{color:var(--sub3) !important;}
.blueFont{color:var(--sub2) !important;}
.blackFont{color:var(--black) !important;}
.whiteFont{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;}
.grayBg2{background-color:var(--grayBg2) !important;}
.widthBg{background-color:var(--white) !important;}
.material-symbols-outlined {font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48;}
.underline_txt{display: inline-block; text-decoration:underline;}





/* 슬릭기본 */
.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;}
/* 슬릭기본 */


/* 레이아웃 */
.wrapper{position: relative; width: 100%; max-width: 680px; min-width: 320px; margin: 0 auto;}
.basic_in{max-width: 680px; width: 90%; box-sizing:border-box; margin: 0 auto;}
.w1720{max-width: 680px; width: 90%; box-sizing:border-box; margin: 0 auto;}


.scrollbar::-webkit-scrollbar {width:5px; height:5px;}
.scrollbar::-webkit-scrollbar-thumb {background-color:var(--border); border-radius:5px; background-clip:padding-box; border:0;}
.scrollbar::-webkit-scrollbar-track {background-color:var(--white); box-shadow:inset 0px 0px 5px white;}

/* 폰트 */
.fs45{font-size:2.133rem; letter-spacing: -1.8px; line-height: 120%; font-weight: 500; color:var(--black);}
.fs45.eng{letter-spacing: 0;}
.fs36{font-size:1.733rem; letter-spacing: -1.08px; line-height: 130%; font-weight: 200; color:var(--black);}
.fs36 b{display: inline; font-weight: 700; letter-spacing: inherit; line-height: inherit;}
.fs29{font-size:1.4rem; letter-spacing: -1.45px; line-height: 135%; font-weight: 700; color:var(--black);}
.fs25{font-size:1.2rem; letter-spacing: -1.25px; line-height: 140%; font-weight: 700; color:var(--black);}
.fs21{font-size:1.133rem; letter-spacing: -0.75px; line-height: 150%; color:var(--black);}
.fs19{font-size:1.067rem; letter-spacing: -0.57px; line-height: 145%; font-weight: 600; color:var(--black);}
.fs17{font-size:1rem; letter-spacing: -0.51px; line-height: 165%;}
.fs15{font-size:0.867rem; letter-spacing: -0.45px; line-height: 165%;}
.fs13{font-size:0.867rem; letter-spacing: -0.25px; line-height: 160%;}


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

.subpad {padding:30px 0; box-sizing:border-box;}
.subpad_t {padding:30px 0 0; box-sizing:border-box;}
.subpad_b {padding:0 0 30px; box-sizing:border-box;}


.subpad2 {padding:40px 0; box-sizing:border-box;}
.subpad2_t {padding:40px 0 0; box-sizing:border-box;}
.subpad2_b {padding:0 0 40px; box-sizing:border-box;}


/* Header */
.header{position: fixed; left:50%; transform:translateX(-50%); top:0; z-index: 99999999; transition:all .4s; width: 100%; max-width: 680px; min-width: 320px; height: 60px; overflow: hidden;}
.header:before{content:''; display:block; width: 100%; height: 1px; position: absolute; left:0; top:59px; background:var(--border); opacity: 0; transition:all .3s; z-index: 6;}
.header .header_in{padding: 20px 0; display: flex; align-items:center; justify-content: space-between;}
.header .header_in .logo{position: relative; z-index: 5;}
.header .header_in .logo a{display: block; width: 160px; height: 14px;}
.header .header_in .logo a svg{width: 100%; height: auto; position: absolute; left: 0; top:0; transition:all .3s linear;}
.header .header_in .logo a svg.logo_m{opacity: 0;}
.header .header_in .top_util{display: flex; align-items:center; position: relative; z-index: 5;}
.header .header_in .top_util ul{display: flex; margin-right: 15px;}
.header .header_in .top_util ul li{padding:0 16px 0 0; position: relative;}
.header .header_in .top_util ul li:after{content:''; display:block; width: 1px; height: 10px; background:rgba(255,255,255,.2); position: absolute; right: 8px; top:50%; margin-top: -5px;}
.header .header_in .top_util ul li:last-child:after{display: none;}
.header .header_in .top_util ul li:last-child{padding: 0;}
.header .header_in .top_util ul li a{display: block; font-size:12px; letter-spacing: -0.42px; line-height: 150%; font-weight: 600; color:var(--white); transition:all .3s linear;}
.header .header_in .top_util ul li a:hover{opacity: 0.7;}
.header .header_in .top_util .btnMenu_m{}
.header .header_in .top_util .btnMenu_m a{display: block; width: 20px; height: 20px;}
.header .header_in .top_util .btnMenu_m a svg{width: 100%; height: auto; margin: 2px 0 0;}
.header .header_in .top_util .btnMenu_m a line{stroke:var(--white); transition:all .3s linear;}





.header.nofixed{top:-200px;}
.header.up{background:var(--white); height: 350px; border-bottom: 1px solid var(--border);}
.header.up:before{opacity: 1;}
.header.up .header_in .logo a svg.logo_m{opacity: 1;}
.header.up .header_in .logo a svg.logo_w{opacity: 0;}
.header.up .header_in .top_util ul li:after{background:var(--border);}
.header.up .header_in .top_util ul li a{color:var(--black);}
.header.up .header_in .top_util .btnMenu_m a line{stroke:var(--black);}

.header.fixed{background:var(--white); box-shadow:0 0 20px rgba(0,0,0,.05);}
.header.fixed .header_in .logo a svg.logo_m{opacity: 1;}
.header.fixed .header_in .logo a svg.logo_w{opacity: 0;}
.header.fixed .header_in .top_util ul li:after{background:var(--border);}
.header.fixed .header_in .top_util ul li a{color:var(--black);}
.header.fixed .header_in .top_util .btnMenu_m a line{stroke:var(--black);}




/* 모바일 메뉴 */
.mo_menu {width:100%; height:100%; max-width:430px; position:fixed; right:0; top:0; z-index:9999999991; overflow-x:hidden;overflow-y:auto;display:none;}
.mo_menu .menuList {height:100%; width:100%; max-width:430px; background: var(--white); position:absolute; right:-680px; box-sizing:border-box;}
.mo_menu .menuList .mo_menu_logo{box-sizing:border-box; padding:40px 20px 30px; line-height: 120%;}
.mo_menu .menuList .mo_menu_logo svg{width: 190px; height: 14px;}
.mo_menu .menuList .mem_list{display: flex; background:var(--main);}
.mo_menu .menuList .mem_list dd{width: 50%; position: relative;}
.mo_menu .menuList .mem_list dd:after{content:''; display:block; width:1px; height:25px; background:rgba(255,255,255,.3); position: absolute; right: 0; top:50%; margin-top: -12px;}
.mo_menu .menuList .mem_list dd:last-child:after{display:none;}
.mo_menu .menuList .mem_list dd a{display: block; font-size:1rem; font-weight: 600; letter-spacing: -0.45px; line-height: 150%; color:var(--white); padding:20px 10px; box-sizing:border-box; text-align:center;}
.mo_menu .menuList .mem_list dd a svg{display: inline-block; margin:-2px 5px 0 0; vertical-align: middle; width: 25px; height: auto;}


.mo_menu .menuList ul, .mo_menu .menuList li{list-style:none;}
.mo_menu .menuList>.list {width:100%;}
.mo_menu .menuList>.list>li{border-bottom: 1px solid var(--border);}
.mo_menu .menuList>.list>li>a {display:block; padding:15px 20px; font-size:1.133rem; font-weight:600; color:var(--black); position:relative; letter-spacing: -0.3pt; width: 100%; box-sizing:Border-box;}
.mo_menu .menuList>.list>li>a:after{content:'\e5cf'; font-family: var(--icon); width:20px; height:20px; line-height:20px; font-size:20px; text-align:center; position:absolute;  right:20px; top:50%; margin-top: -10px; font-weight: 400; color:var(--black); opacity: 0.5; transition:all .3s linear;}
.mo_menu .menuList>.list>li.active>a:after{transform:rotate(180deg);}
.mo_menu .menuList>.list .sMenu {position: relative; background-color:var(--grayBg2); border-top:1px solid var(--border); width: 100%; padding:20px; display:none; box-sizing:Border-box;}
.mo_menu .menuList>.list .sMenu>li {padding:6px 0; line-height: 120%;}
.mo_menu .menuList>.list .sMenu>li>a{font-size:1rem; line-height: 120%; letter-spacing: -0.35pt;}
.mo_menu .menuList>.list .sMenu>li>a svg{display:inline-block; width:12px; margin:-2px 0 0 5px; vertical-align:middle; opacity:0.7;}

.mo_menu .btnMenu_mClose{position: absolute !important; right: 20px; top:30px; width: 30px; height: 30px; cursor:pointer; font-size:0; z-index: 8 !important ;}
.mo_menu .btnMenu_mClose:after{content:'\e5cd'; display: block; font-size:30px; line-height:30px; width: 100%; height:100%; font-family:var(--icon); color:var(--black); text-align:center; transition:all .3s linear; position: absolute; left:0; top:0;}


#grayLayer {width:100%; height:100% !important; background:rgba(0,0,0,.8); position:fixed; left:0; top:0; z-index:999999999; overflow-x:hidden;overflow-y:auto;display:none;}
#grayLayer > a {display:block;width:100%;height:100%}




/* Footer */
.footer{padding: 20px 0 40px; border-top: 1px solid var(--border);}
.footer .foot_top{}
.footer .foot_top .foot_logo{width: 190px; padding: 30px 0 0; line-height: 120%;}
.footer .foot_top .foot_logo svg{width: 100%; height: auto;}
.footer .foot_top ul{display: flex;}
.footer .foot_top ul li{padding-left: 20px; position: relative;}
.footer .foot_top ul li:first-child{padding-left: 0;}
.footer .foot_top ul li:before{content:''; display:block; width: 1px; height: 10px; background:var(--border); position: absolute; left: 10px; top:50%; margin-top: -5px;}
.footer .foot_top ul li:first-child:before{display: none;}
.footer .foot_top ul li a{display: block; font-size:0.941rem; letter-spacing: -0.48px; line-height: 150%; color:var(--black); transition:all .3s linear;}
.footer .foot_top ul li a:hover{color:var(--main);}
.footer .foot_top ul li a b{font-weight: 800; letter-spacing: inherit;}
.footer .foot_info{padding: 12px 0 0;}
.footer .foot_info .foot_info_box{}
.footer .foot_info .foot_info_btn{font-size:1rem; font-weight: 600; color:var(--black); cursor:pointer; display: inline-block;}
.footer .foot_info .foot_info_btn:after{content:'\e313'; display: inline-block; vertical-align: middle; width: 20px; height: 20px; line-height: 20px; font-size:20px; font-family:var(--icon); margin: -2px 0 0 5px; font-weight: 400; transform:rotate(0); transition:all .3s linear;}
.footer .foot_info .foot_info_box.show .foot_info_btn:after{transform:rotate(180deg);}
.footer .foot_info ul{font-size:0; display: none; padding: 8px 0 0;}
.footer .foot_info .foot_info_box.show ul{display:block;}
.footer .foot_info ul li{display: block; font-size:0.882rem; letter-spacing: -0.45px; line-height:150%; box-sizing:border-box; padding:0 0 6px;}
.footer .foot_info ul li:last-child{padding: 0;}
.footer .foot_info .copyright{padding: 20px 0 0; font-size:0.882rem; letter-spacing: 0; line-height: 150%; color:var(--light);}
.footer .foot_info .copyright span,
.footer .foot_info .copyright a{display: inline-block; letter-spacing: inherit; line-height: inherit; transition:all .3s linear; color:inherit;}
.footer .foot_info .copyright a:hover{color:var(--black);}
.footer .pc_ver{display: block; margin:20px auto 0; width:100%; height:35px; line-height:33px; box-sizing:border-box; border:1px solid var(--border); font-size:0.867rem; letter-spacing: 0; color:var(--basic); text-align:center;}


/* Quick */
#quick{position: fixed; right:20px; bottom: 20px; display: none; z-index: 99999;}
#quick ul{}
#quick ul li{margin: 0 0 5px;}
#quick ul li:last-child{margin: 0;}
#quick ul li a{display:block; width: 50px; height: 50px; font-size:0; border-radius:50%; background:var(--white); transition:all .3s linear; box-shadow: 5px 6px 30px 0px rgba(0, 0, 0, 0.15); position: relative; text-align:center;}
#quick ul li a:after{content:'\e25a'; display:block; width:100%; height:100%; font-size:20px; line-height:50px; font-family:var(--icon); color:var(--black); position: absolute; left: 0; top:0; transition:all .3s linear;}
#quick ul li a:hover{background:var(--black);}
#quick ul li a:hover:after{color:var(--white);}
#quick ul li.consult a{background:var(--main);}
#quick ul li.consult a:hover{background:var(--sub4);}
#quick ul li.consult a:after{content:'\f88c'; color:var(--white);}
#quick ul li.consult a:hover:after{color:var(--white);}









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

/* 게시판 페이징 */
.page_num {padding:30px 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 3px 0 0;}
.page_num ul.pagination li:nth-child(2){margin:0 10px 0 0;}
.page_num ul.pagination li:nth-last-child(2){margin:0 0 0 10px;}
.page_num ul.pagination li:nth-last-child(1){margin:0 0 0 3px;}
.page_num ul.pagination li a{display:inline-block; vertical-align: top; font-size:0.882rem; line-height: 140%; color:var(--light); 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;}
.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: 24px; height: 24px; color:#BBBBBB; padding:0; box-sizing:border-box; font-size:0; transition:all .3s linear; text-align:center;}
.page_num ul.pagination li.arrow a:hover{color:var(--black);}
.page_num ul.pagination li.arrow a:after{display: block; font-family:var(--icon); font-size:24px; width:24px; height: 24px; line-height: 24px; transition:all .3s linear;}
.page_num ul.pagination li.arrow.first a:after{content:'\eac3';}
.page_num ul.pagination li.arrow.prev a:after{content:'\e5cb';}
.page_num ul.pagination li.arrow.next a:after{content:'\e5cc';}
.page_num ul.pagination li.arrow.last a:after{content:'\eac9';}