@import url('root.css'); /* 변수 */
@import url('font.css'); /* 폰트 */
@import url('gray.css'); /* 폰트 */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..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} /* delete vertical-align,font:inherit; */
body,html{width:100%; font-size:16px; color:var(--basic); font-weight:400; line-height:1.6; 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;}
.dark_gray{background-color:var(--dark_gray) !important;}
.material-symbols-outlined {font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;}





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


/* 레이아웃 */
#wrap{position:relative; width:100%; min-width:320px;}
.w1590{max-width:1590px; width: 90%; margin:0 auto;}
.w1350{max-width:1350px; width: 90%; margin:0 auto;}
.w1380{max-width:1380px; 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;}

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

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

.fs60{font-size: 3.75rem; font-weight: 700; line-height: 110%; letter-spacing: -1.8px;}
.fs60.eng{letter-spacing: 1.8px; text-transform: uppercase;}
.fs50{font-size: 3.125rem; font-weight: 700; line-height: 120%; letter-spacing: -1.8px;}
.fs50.eng{letter-spacing: 0; text-transform: uppercase;}
.fs45{font-size: 2.813rem; font-weight: 700; line-height: 120%; letter-spacing: -1.8px; color:var(--black);}
.fs36{font-size: 2.25rem; font-weight: 700; line-height: 140%; letter-spacing: -1.44px; color:var(--black);}
.fs30{font-size: 1.875rem; font-weight: 700; line-height: 140%; letter-spacing: -1.2px; color:var(--black);}
.fs24{font-size: 1.5rem; font-weight: 500; line-height: 150%; letter-spacing: -0.96px; color:var(--black);}
.fs20{font-size: 1.25rem; font-weight: 400; line-height: 160%; letter-spacing: -0.8px; color:var(--black);}
.fs18{font-size: 1.125rem; font-weight: 400; line-height: 170%; letter-spacing: -0.72px; color:var(--basic);}
.fs16{font-size: 1rem; font-weight: 400; line-height: 170%; letter-spacing: -0.8px; color:var(--basic);}


.more_btn{display: inline-block; width:180px; height:60px; box-sizing:border-box; transition:all .4s linear; border:2px solid var(--black); text-align:center; position:relative; overflow:hidden;}
.more_btn:before{content:''; display:block; width:0; height:100%; background:var(--black); position:absolute; left:-50%; top:0; transition:all .4s linear; transform: skew(-20deg);}
.more_btn:hover:before{width: 200%;}
.more_btn em{display:inline-block; font-style:normal; font-size:1rem; letter-spacing: 0.32px; color:var(--black); line-height:58px; font-weight:700; font-family:var(--eng); position: relative; z-index: 5; transition:all .4s linear;}
.more_btn.kor em{letter-spacing: -0.32px; font-family:var(--kor);}
.more_btn:hover em{color:var(--white);}


.linkBtn{display: inline-block; width:180px; height:60px; box-sizing:border-box; transition:all .4s linear; border:2px solid var(--black); text-align:center; position:relative; overflow:hidden; background:var(--white);}
.linkBtn:before{content:''; display:block; width:0; height:100%; background:var(--black); position:absolute; left:-50%; top:0; transition:all .4s linear; transform: skew(-20deg);}
.linkBtn:hover:before{width: 200%;}
.linkBtn p{display:inline-block; font-style:normal; font-size:1rem; letter-spacing: -0.32px; color:var(--black); line-height:58px; font-weight:700; position: relative; z-index: 5; transition:all .4s linear;}
.linkBtn span{display: inline-block; font-size:20px; vertical-align: middle; margin:-2px 0 0 5px;}
.linkBtn:hover p{color:var(--white);}



.cm-scroll-icon{text-align:center;}
.cm-scroll-icon .scroll-txt{display:block; color:#fff; font-size:0; font-weight:700;}
.cm-scroll-icon .scroll-txt em{margin: 0 1px; font-size:0.75rem; font-family:var(--eng); display:inline-block; animation: scroll-down-ani 2s ease-in-out 0s infinite;     font-style: normal;}
.cm-scroll-icon .scroll-txt em:nth-child(1){animation-delay:1s;}
.cm-scroll-icon .scroll-txt em:nth-child(2){animation-delay:1.04s;}
.cm-scroll-icon .scroll-txt em:nth-child(3){animation-delay:1.08s;}
.cm-scroll-icon .scroll-txt em:nth-child(4){animation-delay:1.12s;}
.cm-scroll-icon .scroll-txt em:nth-child(5){animation-delay:1.16s;}
.cm-scroll-icon .scroll-txt em:nth-child(6){animation-delay:1.2s;}
.cm-scroll-icon .scroll-txt em:nth-child(7){animation-delay:1.24s;}
.cm-scroll-icon .scroll-txt em:nth-child(8){animation-delay:1.28s;}
.cm-scroll-icon .scroll-txt em:nth-child(9){animation-delay:1.32s;}
.cm-scroll-icon .scroll-txt em:nth-child(10){animation-delay:1.36s;}
.cm-scroll-icon .scroll-txt em:nth-child(11){animation-delay:1.4s;}
.cm-scroll-icon .arrow .arrow-icon{display:block; text-align:center; font-size:24px; color:red; height:7px; animation: arrow-ani 2s ease-in-out 0s infinite;}
.cm-scroll-icon .arrow .arrow-icon:nth-child(1){animation-delay:0.1s}
.cm-scroll-icon .arrow .arrow-icon:nth-child(2){animation-delay:0.2s}
.cm-scroll-icon .arrow .arrow-icon:nth-child(3){animation-delay:0.3s}
.cm-scroll-icon .arrow .arrow-icon:nth-child(4){animation-delay:0.4s}
.cm-scroll-icon .arrow .arrow-icon:nth-child(5){animation-delay:0.5s}
.last-container .cm-scroll-icon{display:none;}
@keyframes scroll-down-ani {
    0% {
        opacity: 0;
        transform: translateY(-50%) rotateX(90deg)
    }

    15%,85% {
        opacity: 1;
        transform: translateY(0) rotateX(0)
    }

    100% {
        opacity: 0;
        transform: translateY(50%) rotateX(-90deg)
    }
}
@keyframes arrow-ani {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}





/* Header */
#header{position:fixed; left:0; top:0; width:100%; z-index:99999999; transition:all .4s;}
#header:before{content:''; display:block; width:100%; height:0; background:var(--white); transition:all .4s; position:absolute; left:0; top:0;}
#header:after{content:''; display:block; width:100%; height:1px; background:rgba(255,255,255,.2); transition:all .4s; position:absolute; left:0; top:90px;}
#header .header_in{display:flex; align-items:center; justify-content:space-between; padding:30px 0;}
#header .header_in .logo{position: relative; z-index: 5;}
#header .header_in .logo a{display:block; font-size:0; width:138px; height:30px; transition:all .3s linear;}
#header .header_in .logo a svg{width: 100%; height:auto;}
#header .header_in .logo a path{fill:var(--white); transition:all .3s linear;}
#header .header_in .logo a path.on{fill:var(--main) !important;}
#header .header_in .topUtil{display: flex; align-items:center; position: relative; z-index: 5;}

#header .header_in .topUtil ul{display:flex; align-items:center; margin-left:30px;}
#header .header_in .topUtil ul li.btnMenu_m{display: none;}
#header .header_in .topUtil ul li a{display: flex; flex-direction: column; justify-content: center; width:23px; height:23px;}
#header .header_in .topUtil ul li.menuBtn a{}
#header .header_in .topUtil ul li.menuBtn a span{display:block; width: 100%; height:2px; background:var(--white); transition:all .3s linear;}
#header .header_in .topUtil ul li.menuBtn a:hover span{background:var(--main) !important;}
#header .header_in .topUtil ul li.menuBtn a span:nth-child(2){margin:5px 0 0;}

#header .header_in .topUtil .language{cursor:pointer; position:relative; width: 80px;}
#header .header_in .topUtil .language dt{color: var(--white); font-family: var(--eng); font-size: 14px; font-weight: 500; letter-spacing: 0.28px; transition:all .3s linear;}
#header .header_in .topUtil .language dt:before{content:'\e894'; display:inline-block; vertical-align:middle; margin:-2px 5px 0 0; font-size:15px; font-family:var(--icon); color: var(--white); transition:all .3s linear;}
#header .header_in .topUtil .language dt:after{content:'\e313'; display:inline-block; vertical-align:middle; margin:-2px 0 0 3px; font-size:18px; font-family:var(--icon); color: var(--white); transition:all .3s linear;}
#header .header_in .topUtil .language.show dt:after{transform:rotate(180deg);}
#header .header_in .topUtil .language dd{position:absolute; left:0; top:30px; width: 100%; padding:10px 15px; box-sizing:border-box; text-align:center; border-radius:5px; background:rgba(0,0,0,.6); backdrop-filter: blur(5px); opacity: 0; visibility:hidden; transition:all .3s;}
#header .header_in .topUtil .language.show dd{opacity: 1; visibility:visible; transition:all .3s linear;}
#header .header_in .topUtil .language dd a{display: block; color: var(--white); font-family: var(--eng); font-size: 13px; font-weight: 400; letter-spacing: 0.39px; transition:all .3s linear;}




#menu{position: absolute; left:0; top:0; width:100%; transition:all .4s; overflow:hidden;}
#menu ul{text-align:center; font-size:0;}
#menu ul li{display:inline-block; vertical-align:top; line-height:120%; padding: 0 20px; transition:all .3s linear; text-align:center; position:relative;}
#menu ul li > a{display: flex; line-height:120%; font-size:18px; font-weight: 500; color:var(--white); letter-spacing: 0.36px; font-family:var(--eng); box-sizing:border-box; position:relative; padding:35px 16px 34px; transition:all .3s linear;}
#menu ul li:hover > a{color:var(--main) !important;}
#menu ul li > a:after{content:''; display: block; width: 0; height:3px; background:var(--main); position:absolute; left:50%; bottom:0; transform:translateX(-50%); transition:all .3s linear;}
#menu ul li:hover > a:after{width: 100%;}
#menu ul li dl{padding:30px 0; position:absolute; left:0; top:90px; width: 100%; opacity: 0; transition:all .3s .2s linear;}
#menu ul li dl dd{padding: 0 0 8px;}
#menu ul li dl dd:last-child{padding: 0;}
#menu ul li dl dd a{display:block; font-size:1rem; letter-spacing: -0.64px; line-height: 150%; color:rgba(0,0,0,.6); transition:all .3s linear;}
#menu ul li dl dd a:hover{color:var(--main);}


#header.up{}
#header.up:before{height:320px; border-bottom: 1px solid var(--border);}
#header.up:after{background:var(--border);}
#header.up .header_in .logo a path{fill:var(--black) !important;}
#header.up .header_in .logo a path.on{fill:var(--main) !important;}
#header.up .header_in .topUtil ul li.menuBtn a span{background:var(--black) !important;}
#header.up .header_in .topUtil .language dt{color:var(--black) !important;}
#header.up .header_in .topUtil .language dt:before{color:var(--black) !important;}
#header.up .header_in .topUtil .language dt:after{color:var(--black) !important;}
#header.up #menu{height:320px;}
/* #header.up #menu ul li{padding: 0 35px;} */
#header.up #menu ul li > a{color:var(--black) !important;}
#header.up #menu ul li dl{opacity: 1;}


#header.nofixed{top:-200px;}
#header.fixed{background: rgba(0, 0, 0, 0.30); backdrop-filter: blur(2px);}
#header.fixed:after{opacity: 0;}
#header.fixed .header_in .logo a path{fill:var(--white);}
#header.fixed .header_in .topUtil ul li.menuBtn a span{background:var(--white);}
#header.fixed .header_in .topUtil .language dt{color:var(--white);}
#header.fixed .header_in .topUtil .language dt:before{color:var(--white);}
#header.fixed .header_in .topUtil .language dt:after{color:var(--white);}
#header.fixed #menu ul li > a{color:var(--white);}


/* 모바일 메뉴 */
#menuArea {width:100%; height:100%; max-width:430px; position:fixed; right:0; top:0; z-index:9999999991; overflow: hidden; display:none;}
#menuArea .menuList {height:100%; width:100%; max-width:100%; background: var(--dark_gray); position:absolute; overflow-x:hidden;overflow-y:auto; right:-600px; padding:60px 0; box-sizing:border-box;}
#menuArea .menuList .logo{margin:0 0 30px;}
#menuArea .menuList .logo a{display:block; width: 138px; margin:0 auto;}
#menuArea .menuList .logo a svg{width:100%; height:auto;}
#menuArea .menuList .logo a path{fill:var(--white);}
#menuArea .menuList .logo a path.on{fill:var(--main);}
#menuArea .menuList .btnMenu_mClose{position: absolute; right:30px; top:30px; cursor:pointer; width: 32px; height:32px;} 
#menuArea .menuList .btnMenu_mClose span{display:block; width:100%; height:100%; line-height:32px; font-size:32px; color:var(--white);} 
#menuArea .menuList ul{text-align:center;}
#menuArea .menuList ul, #menuArea .menuList li{list-style:none;}
#menuArea .menuList>.list {width:100%;}
#menuArea .menuList>.list>li>a {display:block; padding:10px 20px; font-size:24px; font-weight:700; font-family:var(--eng); color:var(--white); position:relative; letter-spacing: 0.4px; width: 100%; box-sizing:Border-box;} 
#menuArea .menuList>.list.on>li>a{color:rgba(255,255,255,.5);}
#menuArea .menuList>.list.on>li.active>a{color:var(--white);}
#menuArea .menuList>.list .sMenu {position: relative; width: 100%;  padding:0 20px 15px; display:none; box-sizing:Border-box;}
#menuArea .menuList>.list .sMenu>li {padding:6px 0; line-height: 120%;}
#menuArea .menuList>.list .sMenu>li>a{font-size:16px; line-height: 120%; color:rgba(255,255,255,.6); letter-spacing: 0.4px; transition:all .3s linear;}
#menuArea .menuList>.list .sMenu>li>a:hover{color:var(--white);}


#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%} 





/* 사이트맵 */
#sitemap{position:fixed; left:0; top:0; width:100%; height:100%; z-index:99999999; transform:translateY(-100%); opacity:0; transition:all .3s;}
#sitemap.sitemap-open{transform:translateY(0); opacity:1; transition:all 0.4s linear;} 
#sitemap .sitemap_bg{position:absolute; left:0; top:0; background:rgba(0,0,0,.8); width:100%; height:0; transition:all .3s; cursor:pointer;}
#sitemap.sitemap-open .sitemap_bg{height:100%; transition:all 0.6s .1s linear;} 
#sitemap .sitemap_in{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin-top:-100px; opacity:0; background:var(--white); border-top:5px solid var(--main);  transition:all .3s;}
#sitemap.sitemap-open .sitemap_in{margin-top:0; opacity:1; transition:all 0.4s .6s linear;}
#sitemap .sitemap_in .sitemap_cont{position:relative; box-sizing:border-box;} 
#sitemap .sitemap_in .sitemap_head{position:absolute; left:0; top:0; width: 100%; padding:50px 0; display:flex; align-items:center; justify-content:space-between;}
#sitemap .sitemap_in .sitemap_head .logo{}
#sitemap .sitemap_in .sitemap_head .logo a{display:block; width: 138px; height:30px;}
#sitemap .sitemap_in .sitemap_head .logo a svg{width:100%; height:auto;}
#sitemap .sitemap_in .sitemap_head .util{display:flex; align-items:center;}
#sitemap .sitemap_in .sitemap_head .util .storeBtn{display:inline-block; margin:0 30px 0 0; width:105px; height:40px; line-height:38px; text-align:center; border:2px solid var(--black); box-sizing:border-box; transition:all .3s linear; font-family:var(--eng); font-size:1rem; font-weight:700; color:var(--black);}
#sitemap .sitemap_in .sitemap_head .util .storeBtn:hover{color:var(--white); background:var(--black);}
#sitemap .sitemap_in .sitemap_head .util .storeBtn span{display:inline-block; vertical-align:middle; font-weight: 600; margin:-2px 5px 0 0; font-size:18px;}
#sitemap .sitemap_in .sitemap_head .util .closeBtn{display: block; position: relative; width:18px; height:18px;}
#sitemap .sitemap_in .sitemap_head .util .closeBtn span{display:block; position: absolute; width: 100%; height:2px; background:var(--black); transition:all .3s linear;}
#sitemap .sitemap_in .sitemap_head .util .closeBtn span:nth-child(1){transform:rotate(45deg); left:0; top:9px;}
#sitemap .sitemap_in .sitemap_head .util .closeBtn span:nth-child(2){transform:rotate(-45deg); left:0; top:9px;}
#sitemap .sitemap_in .sitemap_list{display:flex;}
#sitemap .sitemap_in .sitemap_list dl{width:16.666%; border-right:1px solid rgba(221,221,221,.5); padding:280px 20px 220px 0; box-sizing:border-box;}
#sitemap .sitemap_in .sitemap_list dl:first-child{border-left:1px solid rgba(221,221,221,.5);}
#sitemap .sitemap_in .sitemap_list dl dt{font-size:2.125rem; line-height:120%; font-weight:700; font-family:var(--eng); color:var(--black); padding:0 0 0 13px; position:relative;}
#sitemap .sitemap_in .sitemap_list dl dt:before{content:''; display:block; width:5px; height:30px; background:var(--main); position:absolute; left:0; top:4px;}
#sitemap .sitemap_in .sitemap_list dl dd{padding:20px 0 0;}
#sitemap .sitemap_in .sitemap_list dl dd a{display:block; font-size:1.125rem; line-height:150%; margin:0 0 8px; transition:all .3s linear;}
#sitemap .sitemap_in .sitemap_list dl dd a:hover{color:var(--main);}
#sitemap .sitemap_in .sitemap_list dl dd a:last-child{margin:0;}




/* Footer */
#footer{background:var(--dark_gray); padding:100px 0;}
#footer .footer_in{position:relative;}
#footer .foot_menu{overflow:hidden; padding:0 0 50px; margin: 0 0 40px; border-bottom: 1px solid rgba(255,255,255,.15);}
#footer .foot_menu ul{}
#footer .foot_menu ul li{width:auto; padding:0 60px 0 0; line-height:120%; position:relative; box-sizing:border-box;}
#footer .foot_menu ul li:after{content:''; display:block; width:1px; height:18px; background:rgba(255,255,255,.3); position:absolute; right:30px; top:50%; margin-top:-9px;}
#footer .foot_menu ul li:last-child:after{display:none;}
#footer .foot_menu ul li a{display:inline-block; font-size:1.125rem; line-height:120%; letter-spacing: 0; font-weight:600; color:var(--white); transition:all .3s linear;}
#footer .foot_menu ul li a:hover{color:var(--main);}
#footer address{box-sizing:border-box; padding:0 200px 0 0; display: block;}
#footer address ul{font-size:0;}
#footer address ul li{display:inline-block; vertical-align:top; font-size:1rem; letter-spacing: -0.64px; line-height:155%; color:rgba(255,255,255,.7); padding:0 20px 8px 0; box-sizing:border-box;}
#footer .copyright{display:inline-block; font-size:1rem; line-height:150%; letter-spacing:0; color:rgba(255,255,255,.5); font-family:var(--eng); box-sizing:border-box; padding:0 20px 0 0;}
#footer .copyright span,
#footer .copyright a{display:inline-block; line-height:inherit; letter-spacing:inherit; color:rgba(255,255,255,.3); font-family:var(--eng); transition:all .3s linear;}
#footer .copyright a:hover{color:rgba(255,255,255,.7);}
#footer .privacy{display:inline-block; font-size:1rem; font-weight:700; color:var(--main); letter-spacing:-0.35pt; position: relative;}
#footer .privacy:before{content: ""; display: block; height: 1px; left: 0; position: absolute; width: 100%; z-index: 1; bottom: 0px; -webkit-transition: background-position 1s ease; transition: background-position 1s ease; background: linear-gradient(90deg,var(--main) 0,var(--main) 33.33%,transparent 0,transparent 66.66%,var(--main) 0,var(--main)) 100%; background-size: 300% 2px;}
#footer .privacy:hover:before{background-position:0;}
 
#footer .sns_list{display:flex; position:absolute; right:0; top:115px;}
#footer .sns_list li{margin:0 3px 0 0;}
#footer .sns_list li:last-child{margin:0;}
#footer .sns_list li a{display:block; box-sizing:border-box; border:1px solid rgba(255,255,255,.3); border-radius:50%; width:40px; height: 40px; transition:all .3s linear;}
#footer .sns_list li a:hover{background:var(--main); border-color:var(--main);}
#footer .sns_list li a svg{width:100%; height:auto;}

#footer .family_site{width:200px; background:var(--dark_gray); border:1px solid rgba(255,255,255,.2); box-sizing:border-box; cursor:pointer; position:absolute; right: 0; top:-8px; border-radius:var(--borderR5); z-index: 10;}
#footer .family_site dt{font-size:1rem; color:rgba(255,255,255,.7); box-sizing:border-box; padding:0 16px; position:relative; letter-spacing:0; font-weight:400; height:45px; line-height: 45px; font-family:var(--eng);}
#footer .family_site dt span{display: inline-block; width:13px; height:13px; font-size:13px; line-height:13px; color:rgba(255,255,255,.5); position:absolute; right:18px; top:50%; margin-top:-6px; transition:all .3s linear; transform:rotate(90deg);}
#footer .family_site.show dt span{transform:rotate(270deg);}
#footer .family_site dd{display: none; position:absolute; left: -1px; top: 45px; width: calc(100% + 2px); background:var(--dark_gray); border:1px solid rgba(255,255,255,.2); box-sizing:border-box; padding: 16px 16px;}
#footer .family_site.show dd{display:block;}
#footer .family_site dd a{display:block; font-size:1rem; font-family:var(--eng); color:rgba(255,255,255,.5); margin:0 0 5px; line-height:150%; transition:all .3s linear;}
#footer .family_site dd a:last-child{margin:0;}
#footer .family_site dd a:hover{color:#fff;}


/* Top */
#topBtn{position: fixed; right:30px; bottom: 200px; display: none; z-index: 99999;}
#topBtn a{display:flex; align-items:center; justify-content:center; width: 70px; height: 70px; font-size:0; border-radius: 20px 20px 0px 0px; background:var(--main); transition:all .3s linear;}
#topBtn a:hover{background:var(--sub); transition:all .3s linear;}
#topBtn a span{font-size:28px; color:var(--white);}








/* 검색 */
.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;}
.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:50px 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;}
.page_num ul.pagination li a{display:inline-block; vertical-align: top; font-size:1rem; line-height: 140%; font-family:var(--eng); color:#999; 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;}
.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; padding:0; box-sizing:border-box; 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:24px; width:24px; height: 24px; line-height: 24px; text-align:center; color:#BBBBBB; 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 1800px
*******************************************************************************/
@media all and (max-width:1800px){


/* 레이아웃 */
.fs60 br{display:none;}
.fs50 br{display:none;}
.fs45 br{display:none;}
.fs36 br{display:none;}
.fs30 br{display:none;}
.fs24 br{display:none;}
.fs20 br{display:none;}
.fs18 br{display:none;}
.fs16 br{display:none;}



/* Header */
/* #header.up #menu ul li{padding: 0 25px;} */


/* 사이트맵 */
#sitemap{}
#sitemap .sitemap_in .sitemap_head{padding:30px 0;}
#sitemap .sitemap_in .sitemap_list{}
#sitemap .sitemap_in .sitemap_list dl{padding:200px 10px 150px 0;}
#sitemap .sitemap_in .sitemap_list dl dt{font-size:1.875rem;}
#sitemap .sitemap_in .sitemap_list dl dd a{font-size:1rem;}



}

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

/* 레이아웃 */
.compad {padding:150px 0;}
.compad_t {padding:150px 0 0;}
.compad_b {padding:0 0 150px;}



.subpad2 {padding:100px 0 150px;}
.subpad2_t {padding:100px 0 0;}
.subpad2_b {padding:0 0 150px;}


/* Header */
#header{}
#header .header_in .topUtil ul li.sitemapBtn{display: none;}
#header .header_in .topUtil ul li.btnMenu_m{display: block;}

#menu{display: none;}


/* Top */
#topBtn{right:30px; bottom: 30px;}

/* 사이트맵 */
#sitemap{display: none !important;}


}

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


/* Common */
html,body{font-size:14px;}

/* 레이아웃 */
.compad {padding:100px 0;}
.compad_t {padding:100px 0 0;}
.compad_b {padding:0 0 100px;}

.subpad {padding:60px 0;}
.subpad_t {padding:60px 0 0;}
.subpad_b {padding:0 0 60px;}


.subpad2 {padding:60px 0 100px;}
.subpad2_t {padding:60px 0 0;}
.subpad2_b {padding:0 0 100px;}


.fs60{font-size: 2.857rem;}
.fs50{font-size: 2.5rem;}
.fs45{font-size: 2.143rem;}
.fs36{font-size: 1.857rem;}
.fs30{font-size: 1.714rem;}
.fs24{font-size: 1.429rem;}
.fs20{font-size: 1.143rem;}

.more_btn{width:150px; height:50px;}
.more_btn em{line-height:48px;}

.linkBtn{width:150px; height:50px;}
.linkBtn p{line-height:48px;}
.linkBtn span{font-size:18px;}

/* Header */
#header{}
#header:after{top:70px;}
#header .header_in{padding:20px 0;}
#header .header_in .topUtil ul{margin-left:20px;}



/* Footer */
#footer{padding:60px 0;}
#footer .foot_menu{padding:0 0 20px; margin: 0 0 25px;}
#footer .foot_menu ul{}
#footer .foot_menu ul li{padding:0 40px 0 0;}
#footer .foot_menu ul li:after{height:14px; right:20px; margin-top:-7px;}
#footer .copyright{padding:15px 200px 0 0; display:block;}
#footer .privacy{margin:5px 0 0;}

#footer .sns_list{top:auto; bottom: -10px;}
#footer .family_site{width:180px; top:70px;}




/* Top */
#topBtn{right:3%; bottom: 3%;}
#topBtn a{width: 60px; height: 60px;}
#topBtn a span{font-size:24px;}



}
/*******************************************************************************
    @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:13px; font-weight:400;}
select, .select {background-position:right 10px center; background-size:8px auto;}

/*** 모바일 폰트 크기 조정 ***/
* {
 -webkit-text-size-adjust : none;  /* 크롬, 사파리, 오페라(신) */
 -ms-text-size-adjust : none;  /* IE */
 -moz-text-size-adjust : none;  /* 파이어폭스 */
 -o-text-size-adjust : none;  /* 오페라(구)*/
}


/* 레이아웃 */
.compad {padding:60px 0;}
.compad_t {padding:60px 0 0;}
.compad_b {padding:0 0 60px;}


.subpad {padding:30px 0;}
.subpad_t {padding:30px 0 0;}
.subpad_b {padding:0 0 30px;}


.subpad2 {padding:30px 0 60px;}
.subpad2_t {padding:30px 0 0;}
.subpad2_b {padding:0 0 60px;}



.fs60{font-size: 2.571rem;}
.fs50{font-size: 2.143rem;}
.fs45{font-size: 2rem;}


.more_btn{width:130px; height:45px;}
.more_btn em{line-height:43px;}

.linkBtn{width:130px; height:45px;}
.linkBtn p{line-height:43px;}
.linkBtn span{font-size:16px;}

/* Header */
#header{}
#header:after{top:60px;}
#header .header_in{padding:15px 0;}
#header .header_in .topUtil ul{margin-left:10px;}



/* Footer */
#footer{padding:30px 0 35px;}
#footer .foot_menu{padding:0 0 15px; margin: 0 0 20px;}
#footer .foot_menu ul{}
#footer .foot_menu ul li{padding:0 24px 0 0;}
#footer .foot_menu ul li:after{height:10px; right:12px; margin-top:-5px;}
#footer address{padding:0;}
#footer address ul li{display: block; padding:0 0 6px;}
#footer .copyright{padding:20px 0 0;}

#footer .sns_list{margin: 15px 0 0; top:auto; bottom: auto; right:auto; position: relative;}

#footer .family_site{margin: 10px 0 0; width:100%; top:auto; bottom: auto; right:auto; position: relative;}

/* Top */
#topBtn a{width: 45px; height: 45px; border-radius: 10px 10px 0px 0px;}
#topBtn a span{font-size:20px;}


/* 검색 */
.window {height:50px; padding:10px 15px;}
.window .close{width:30px; height:30px; top:-40px;}
.window .close span{font-size:30px;}
.inputB dt {}
.inputB dt span{font-size:20px;}


/* 게시판 페이징 */
.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: 20px; height: 20px;}
.page_num ul.pagination li.arrow a span{font-size:20px; width: 20px; height: 20px; line-height: 20px;}

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





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




}