@import url('root.css'); /* 변수 */
@import url('font.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:160%; letter-spacing:normal} /* delete vertical-align,font:inherit; */
body,html{width:100%; font-size:18px; 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("/assets/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; letter-spacing: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;}

/*
img {pointer-events:none; }
*/



/* Common */
.brFixed {display: block !important;}
.ls0 {letter-spacing:0 !important;}
.eng {font-family:var(--eng);}
/* .white {color:var(--white) !important;}
.black {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;}
.material-symbols-outlined {font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48;}
.scFont {font-family:var(--eng);}





/* 슬릭기본 */
.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%; min-width:320px;}
.basic_in {max-width:1590px; width: 90%; margin:0 auto;}
.w1350{max-width:1350px; width: 90%; margin:0 auto;}
.w1120{max-width:1120px; width: 90%; margin:0 auto;}

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


/* 버튼 */
.btn_box{padding:45px 0 0; display: flex; justify-content: center; padding-bottom:10px !important;}
	.more_btn{display:inline-block; padding:0 30px; box-sizing:border-box; border-radius:var(--borderR15); text-align:left; border: 2px solid var(--black); background: var(--white); box-shadow: 2px 5px 0px 0px rgba(0, 0, 0, 0.20); height: 75px; margin: 0 10px 0 0; position: relative; overflow: hidden;}
	.more_btn:before{content:''; display: block; width: 100%; height: 100%; position: absolute; left:0; top:0;}
	.more_btn.ver1:before{background: linear-gradient(-45deg,  var(--white) 0%,var(--white) 50%, rgba(209, 204, 189, 0.5) 51%, rgba(209, 204, 189, 0.5) 60%, var(--white) 61%,var(--white) 100%); background-repeat: no-repeat; background-position:0px; background-size:400%;}
	.more_btn.ver2:before{background: linear-gradient(-45deg,  var(--main) 0%,var(--main) 53%, rgba(255,255,255,.2) 54%,rgba(255,255,255,.2) 60%,var(--main) 61%,var(--main) 100%); background-repeat: no-repeat; background-position:0px; background-size:400%;}
	.more_btn.ver3:before{background: linear-gradient(-45deg,  var(--sub3) 0%,var(--sub3) 53%, rgba(255,255,255,.2) 54%,rgba(255,255,255,.2) 60%,var(--sub3) 61%,var(--sub3) 100%); background-repeat: no-repeat; background-position:0px; background-size:400%;}
	.more_btn.ver4:before{background: linear-gradient(-45deg,  var(--main) 0%,var(--main) 53%, rgba(255,255,255,.2) 54%,rgba(255,255,255,.2) 60%,var(--main) 61%,var(--main) 100%); background-repeat: no-repeat; background-position:0px; background-size:400%;}
	.more_btn:hover:before{animation:light 1s infinite;}
	.more_btn:last-child{margin: 0;}
	.more_btn em {display: inline-block; font-style:normal; font-size:1.111rem; font-weight: 700; line-height: 73px; color:var(--black); letter-spacing: -1px; font-family:var(--eng); position: relative; z-index: 2; white-space: nowrap;}
	.more_btn em:after {content:''; display:inline-block; vertical-align:middle; margin:-2px 0 0 30px; width: 33px; height:33px;}
	.more_btn.ver1 em:after{background:url('/assets/img/save/img/book_icon.png') no-repeat center/100% auto;}
	.more_btn.ver2 em:after{background:url('/assets/img/save/img/form_icon.png') no-repeat center/100% auto;}
	.more_btn.ver3 em:after {background:url('/assets/img/save/img/complete_icon.png') no-repeat center/100% auto;}
	.more_btn.ver4 em:after {background:url('/assets/img/save/img/docu_icon.png') no-repeat right/auto 100%;}
	.more_btn.ver1{background:var(--white); border-color:var(--black);}
	.more_btn.ver2{background:var(--main); border-color:var(--black);}
	.more_btn.ver2 em{color:var(--white);}
	.more_btn.ver4 em{color:var(--white);}

	
	.more_btn.ver3{background:var(--sub3); border-color:var(--black);}
	.more_btn.ver3 em{color:var(--black);}


/* Header */
.header {position:fixed; top:0; left:0; height:135px; width:100%; min-width:320px; z-index:999999; transition:all 0.3s ease; overflow:hidden;}
.header::after {content:''; width:100%; height:1px; background:rgba(255,255,255,0.3); position:absolute; top:134px; left:0;}
.header .header_in {padding:28px 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.header .header_in .logo {display:inline-block;}
.header .header_in .logo a {display:flex; flex-wrap:wrap; align-items:center; line-height:1;}
.header .header_in .logo a svg {display:block; line-height:1;}
.header .header_in .logo a svg * {transition:all 0.3s ease;}
.header .header_in .top_util {display:flex; flex-wrap:wrap; align-items:center; gap:0 38px;}
.header .header_in .top_util ul {display:flex; flex-wrap:wrap; align-items:center; gap:0 20px;}
.header .header_in .top_util ul li a {display:flex; flex-wrap:wrap; align-items:center; gap:0 5px; color: var(--white); font-size: 0.88rem; font-weight: 600; line-height:175%; letter-spacing: -0.64px; opacity:0.7;  transition:all 0.3s ease;}
.header .header_in .top_util ul li a:hover {opacity:1; transition:all 0.3s ease;}
.header .header_in .top_util ul li a::before {font-size:22px; font-family:var(--icon); color:var(--white); font-weight:400;  transition:all 0.3s ease;}
.header .header_in .top_util ul li a.login::before {content:'\ea77';}
.header .header_in .top_util ul li a.logout::before {content:'\e9ba';}
.header .header_in .top_util ul li a.join::before {content:'\ef86';}
.header .header_in .top_util ul li a.mypage::before {content:'\e853';}
.header .header_in .top_util ul .btnMenu_m {display:none;}
.header .header_in .top_util ul .btnMenu_m.btnMenu_mClose a {display:block; background:url("/assets/img/close_btn.svg")no-repeat center;}
.header .header_in .top_util ul .btnMenu_m.btnMenu_mClose svg {opacity:0;}



.header .gnb {position:absolute; top:0; left:50%; margin-left:-430px; z-index:10;}
.header .gnb ul {display:flex; flex-wrap:nowrap; gap:0 30px;}
.header .gnb ul li {position:relative; height:300px;}
.header .gnb ul li > a {position:relative; color: var(--white); font-size: 1.11rem; font-weight: 600; line-height:160%; letter-spacing: -0.8px; padding:55px 25px 44px; box-sizing:Border-box; display:block; transition:all 0.3s ease;}
.header .gnb ul li > a::after {content:''; width:0; height:3px; background:var(--main); position:absolute; top:132px; left:50%; transform:translateX(-50%); transition:all 0.3s ease;}
.header .gnb ul li:hover > a {color:var(--main) !important; transition:all 0.3s ease;}
.header .gnb ul li:hover > a::after {width:100%; transition:all 0.3s ease;}
.header .gnb ul li dl {position:absolute; top:162px; left:0;  box-sizing:border-box; width:100%; transition:all 0.3s ease;}
.header .gnb ul li dl dd {display:block; line-height:1; text-align:center;}
.header .gnb ul li dl dd+dd {margin:5px 0 0;}
.header .gnb ul li dl dd a {position:relative; display:inline-block; font-size:0.88rem; line-height: 175%; letter-spacing: -0.64px;}
.header .gnb ul li dl dd a:hover {font-weight: 600; color: var(--main); transition:all 0.3s ease;}



.header.up {background:var(--white); height:375px; transition:all 0.3s ease;}
.header.on {background:transparent !important; height:auto !important; transform:translateY(0) !important;}
.header.on .gnb {display:none;}
.header.on .header_in .top_util ul .btnMenu_m {display:block;}
.header.on .header_in .save_logo svg .up, .header.up .header_in .save_logo svg .up, .header.fixed .header_in .save_logo svg .up {fill:var(--black);  transition:all 0.3s ease;}
.header.up::after {background:var(--border);  transition:all 0.3s ease;}
.header.up .gnb ul li > a , .header.fixed .gnb ul li > a{color:var(--black);  transition:all 0.3s ease;}
.header.on .header_in .top_util ul li a, .header.up .header_in .top_util ul li a, .header.fixed .header_in .top_util ul li a {color:var(--black);  transition:all 0.3s ease;}
.header.on .header_in .top_util ul li a::before, .header.up .header_in .top_util ul li a::before, .header.fixed .header_in .top_util ul li a::before {color:var(--black);  transition:all 0.3s ease;}
.header.on .header_in .top_util ul li a svg *, .header.up .header_in .top_util ul li a svg *, .header.fixed .header_in .top_util ul li a svg * {fill:var(--black);}

.header.nofixed {transform:translateY(-100%); transition:all 0.3s ease;}
.header.fixed {background:var(--white); transition:all 0.3s ease; box-shadow:5px 1px 15px rgb(0 0 0 / 5%);}


.header .head_banner {position:absolute;; max-width:315px; top:165px; right:50%; margin-right:-800px;}
.header .head_banner .head_banner_roll {}
.header .head_banner .head_banner_roll li {overflow: hidden; aspect-ratio: 3 / 1.7143;}
.header .head_banner .head_banner_roll li img {display: block; width: 100%; height: 100%; object-fit: cover;}
.header .head_banner .banner_info {position:absolute; bottom:15px; right:10px; z-index:90; display:flex; flex-wrap:nowrap; align-items:center; gap:0 10px;}
.header .head_banner .banner_info .slick-page {display:flex; flex-wrap:nowrap; align-items:center;}
.header .head_banner .banner_info .slick-page li {color: rgba(255, 255, 255, 0.50); font-size: 12px; font-weight: 700; line-height: 150%; letter-spacing: 0.6px; text-transform: uppercase;}
.header .head_banner .banner_info .slick-page li.cur {color:var(--white);}
.header .head_banner .banner_info .buttons  {display:flex; flex-wrap:nowrap; align-items:center; gap:0 5px;}
.header .head_banner .banner_info .buttons .slick-arrows {position:relative !important; width:auto !important; height:auto !important; padding:0 !important; margin:0 !important;}
.header .head_banner .banner_info .buttons .slick-arrows::before {display:block; font-size:20px; font-family:var(--icon); line-height:1; color:var(--white); font-weight:300;}
.header .head_banner .banner_info .buttons .slick-arrows.prev::before {content:'\e5e0'; padding-left:7px; box-sizing:border-box; width:20px;}
.header .head_banner .banner_info .buttons .slick-arrows.next::before {content:'\e5e1';}
.header .head_banner .banner_info .buttons .playBtn {font-size:0; display:block; line-height:1;}
.header .head_banner .banner_info .buttons .playBtn::before {content:'\e037'; display:block; font-size:15px; font-family:var(--icon); line-height:1; color:var(--white); font-variation-settings: 'FILL' 1;}
.header .head_banner .banner_info .buttons .playBtn.play::before {content:'\e034';}


/* 모바일 메뉴 */
.mo_menu {width:100%; height:var(--vh); position:fixed; right:0; top:0; z-index:99999; overflow-x:hidden;overflow-y:auto;display:none;}
.mo_menu .menuList {height:100%; width:100%; background:url("/assets/img/sitemap_bg.jpg")no-repeat center / cover; position:absolute; right:-600px; box-sizing:border-box; display:flex; flex-wrap:wrap; align-content:center; padding:0 5%; box-sizing:border-box;}
.mo_menu .menuList ul, .mo_menu .menuList li{list-style:none;}
.mo_menu .mo_member_list {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0 20px; margin:0 0 20px; width:100%; display:none;}
.mo_menu .mo_member_list a {display:flex; flex-wrap:wrap; align-items:center; gap:0 5px; color: var(--black); font-size: 1rem; font-weight: 600; line-height:175%; letter-spacing: -0.64px; opacity:0.7;  transition:all 0.3s ease;}
.mo_menu .mo_member_list a::before {font-size:20px; font-family:var(--icon); color:var(--black); font-weight:400;  transition:all 0.3s ease;}
.mo_menu .mo_member_list a.login::before {content:'\ea77';}
.mo_menu .mo_member_list a.logout::before {content:'\e9ba';}
.mo_menu .mo_member_list a.join::before {content:'\ef86';}
.mo_menu .mo_member_list a.mypage::before {content:'\e853';}

.mo_menu .menuList>.list {width:100%; text-align:center;}
.mo_menu .menuList>.list>li {}
.mo_menu .menuList>.list>li+li {margin:15px 0 0;}
.mo_menu .menuList>.list>li>a {display:block; font-size: 2.555rem; font-weight: 600; line-height: 152%; letter-spacing: -1px; color:rgba(34,34,34,0.5);} 
.mo_menu .menuList>.list>li.active>a {color:var(--black);}
.mo_menu .menuList>.list .sMenu {display:none;}
.mo_menu .menuList>.list .sMenu>li {}
.mo_menu .menuList>.list .sMenu>li+li {padding:6px 0 0;}
.mo_menu .menuList>.list .sMenu>li>a{font-size:1rem; line-height: 171.429%; letter-spacing:-0.42px; color: var(--LightFont);}

.mo_menu .menuList .btnMenu_mClose{position:absolute; right:15px; top:23px; z-index:999; width:28px; height:28px; cursor:pointer;} 
.mo_menu .menuList .btnMenu_mClose:after{content:'\e5cd'; font-family: "Material Symbols Outlined"; display: inline-block; color:var(--black); font-size:28px;} 





/* Footer */
.footer{/* background:rgba(241,241,241,.98); */ padding:50px 0 70px; background:var(--white);}
.footer .footer_in{overflow: hidden;}
.footer .sns_list{display:flex;}
.footer .sns_list li{margin:0 15px 0 0;}
.footer .sns_list li a{display:block; width:31px; height:31px; transition:all .3s linear;}
.footer .sns_list li a:hover{opacity: 0.7;}
.footer .sns_list li a img{width:100%; height:auto;}
.footer .foot_menu{margin:20px 0 0;}
.footer .foot_menu ul{}
.footer .foot_menu ul li{width:auto; padding:0 30px 0 0; line-height: 120%; position:relative;}
.footer .foot_menu ul li:after{content:''; display:block; width:1px; height:14px; position:absolute; right:15px; top:50%; margin-top: -7px; background:var(--sub2); opacity: 0.5;}
.footer .foot_menu ul li:last-child:after{display:none;}
.footer .foot_menu ul li a{display:block; font-size:0.778rem; letter-spacing: -0.56px; line-height:140%; color:rgba(119,119,119,.7); transition:all .3s linear;}
.footer .foot_menu ul li a:hover{color:var(--black);}
.footer .foot_menu ul li a strong{display:block; color:var(--black); font-weight: 600; letter-spacing: inherit; line-height:inherit;}
.footer .foot_info{margin:15px 0 0;}
.footer .foot_info ul{font-size:0;}
.footer .foot_info ul li{display: inline-block; vertical-align:top; font-size:0.778rem; letter-spacing: -0.56px; line-height:140%; color:rgba(119,119,119,.5); box-sizing:border-box; padding:0 15px 8px 0;}
.footer .foot_info ul li.on{color:var(--basic);}
.footer .foot_info .copyright{font-size:0.722rem; line-height: 140%; letter-spacing: 0; color:rgba(119,119,119,.5);}


/* Quick */
#quick{position: fixed; right:40px; bottom:40px; z-index:999999;}
#quick .issue_btn{display: flex; align-items:center; justify-content:center; width: 90px; height:123px; background:var(--white); border:2px solid var(--black); overflow:hidden; box-sizing:border-box; border-radius:var(--borderR30); text-align:center; position: relative; margin: 5px auto 0;}
#quick .issue_btn:before{content:''; display: block; background: linear-gradient(-45deg,  var(--white) 0%,var(--white) 50%, rgba(209, 204, 189, 0.5) 51%,  rgba(209, 204, 189, 0.5) 60%,var(--white) 61%,var(--white) 100%); background-repeat: no-repeat; background-position:0px; background-size:600%; width: 100%; height: 100%; position: absolute; left:0; top:0;}
#quick .issue_btn:hover:before{animation:light 1s infinite;}
#quick .issue_btn em{display:block; font-style:normal; font-size:0.889rem; font-weight: 700; color:var(--black); font-family:var(--eng); line-height: 125%; letter-spacing: -0.8px; position: relative; z-index: 5;}
#quick .issue_btn em:before{content:''; display: block; margin: 0 auto 10px; width:32px; height:32px; background:url('/assets/img/book_icon.png') no-repeat center/100% auto;}

#quick .top_btn{font-size:0; width:60px; height:60px; background:var(--main); border-radius:var(--borderR5); display: block; position: relative; text-align:center; transition:all .3s linear; margin: 15px auto 0; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);}
#quick .top_btn:hover{background:var(--sub3);}
#quick .top_btn:after{content:'\e25a'; display:block; font-family:var(--icon); position:absolute; left:0; top:0; width: 100%; height: 100%; line-height: 60px; font-size:25px; color:var(--white);} 


#quick .quick_btn{display: flex; align-items:center; justify-content: center; margin:5px auto 0; width:90px; height:90px; border-radius:50%; box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.08); background:var(--white); position: relative; overflow: hidden; }
#quick .quick_btn.assemble {width: 90px; height: 110px; border-radius: 30px;}
#quick .quick_btn:before{content:''; display: block; background: linear-gradient(-45deg,  var(--white) 0%,var(--white) 50%, rgba(209, 204, 189, 0.5) 51%,  rgba(209, 204, 189, 0.5) 60%,var(--white) 61%,var(--white) 100%); background-repeat: no-repeat; background-position:0px; background-size:600%; width: 100%; height: 100%; position: absolute; left:0; top:0;}
#quick .quick_btn:hover:before{animation:light 1s infinite;}
#quick .quick_btn img{/* max-width:59px !important; height:auto !important;  */position: relative; z-index: 2;}


@keyframes light {
  0% {
        background-position:-600px; 
  }
  100% { 
        background-position:0px; 
  }
}

@keyframes light2 {
  0% {
        background-position:-1300px; 
  }
  100% { 
        background-position:0px; 
  }
}





/* 팝업 */
.popUp{display:block !important; position: fixed; left: 0; top:0; width: 100%; height:100%; z-index:99999999999; overflow: hidden; opacity: 0; visibility:hidden; transition:all .3s ease;}
.popUp.show{opacity: 1; visibility:visible; transition:all .3s linear;}
.popUp .popup_bg{position:absolute; left:0; top:0; width:100%; height:0; background:rgba(0,0,0,.8); cursor:pointer; transition:all .3s ease;}
.popUp.show .popup_bg{height: 100%; transition:height .4s linear;}
.popUp .popup_in{position: absolute; left: 50%; top:50%; transform:translate(-50%,-50%); max-width:1280px; width:90%; margin-top: -100px; opacity: 0; transition:all .3s ease;} 
.popUp.show .popup_in{opacity: 1; margin-top: 0; transition:all .6s .4s linear;} 
.popUp .popup_in .popup_close{width: 40px; height:40px; font-size:0; cursor:pointer; position: absolute; left:50%; margin-left: -20px; top:-60px;}
.popUp .popup_in .popup_close:after{content:'\e5cd'; display: block; width: 100%; height: 100%; line-height: 40px; font-size:40px; color:var(--white); font-family:var(--icon); position: absolute; left: 0; top:0; text-align:center;	}
.popUp .popup_in .popup_cont{box-sizing:border-box; font-size:1rem; letter-spacing:-0.35pt; line-height: 160%; text-align:center;}
.popUp .popup_in .popup_cont img{max-width:100% !important; height:auto !important;}
.popUp .popup_in .popup_cont .video_wrap{width: 100%; margin: 0 auto; height: 0; padding-bottom: 56.25%; overflow: hidden; position: relative;  border-radius:30px;}
.popUp .popup_in .popup_cont .video_wrap iframe{display:inline-block; position:absolute; left:0; top:0; width:100% !important; height:100% !important;}

.popUp .popup_in .popup_cont::-webkit-scrollbar {width:10px; height:10px;}
.popUp .popup_in .popup_cont::-webkit-scrollbar-thumb {background-color:var(--main); border-radius:10px; background-clip:padding-box; border:2px solid var(--white);}
.popUp .popup_in .popup_cont::-webkit-scrollbar-track {background-color:var(--grayBg); border-radius:10px; box-shadow:inset 0px 0px 5px white;}

.scrollLock {overflow: hidden;}








/* 검색 */
.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:60px 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:var(--basic); 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(--black) !important; font-weight: 700 !important;}
.page_num ul.pagination li a.active:after{content:''; display:block; width:100%; height:2px; background:var(--black); 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; color:var(--basic); background:var(--white);}
.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('/assets/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;}





/* 공통팝업 */
.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,0.65);
    z-index: 9999999991;
    text-align: center;
	padding: 3%;
	box-sizing:border-box;
}

.popup.on {
    display: flex;
	justify-content: center;
	align-items: center;
}

.popup .container {
    width: 100%;
    max-width: 590px;
    background-color: var(--white);
}

.popup .top {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
}

.popup .top .close_btn {
    cursor: pointer;
}

.popup .contents {
    display: inline-block;
    vertical-align: middle;
    padding: 0 20px;
}

.popup h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--black);
    line-height: 120%;
    letter-spacing: -1px;
    margin-top: 60px;
    margin-bottom: 10px;
}

.popup h2 {
    font-size: 16px;
    letter-spacing: -0.5px;
    color: var(--basic);
	font-weight: 400;
    line-height: 150%;
    margin-bottom: 20px;
}

.popup h2 span {
    display: inline-block;
    vertical-align: middle;
}

.popup p {
    font-size: 14px;
    letter-spacing: -0.35px;
    color: rgba(34,34,34,.5);
    line-height: 21px;
    margin-bottom: 60px;
}

.popup .bt {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding: 30px 0;
}

.popup .bt button {
    color: #fff;
    background-color: var(--black);
	cursor:pointer;
    width: 146px;
    height: 55px;
    font-size: 16px;
}






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



.header .gnb {margin-left:-390px;}
.header .gnb ul {gap:0;}

.header .head_banner {right:5%; margin-right:0;}

}


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




.header {height:auto !important;}
.header .gnb {display:none;}
.header .header_in .top_util ul .btnMenu_m {display:block;}
.header .header_in .top_util .save_logo svg {width:200px; height:auto;}


/* Quick */
#quick{right:3%; bottom:3%;}



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


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


/* 버튼 */
.btn_box{padding:30px 0 0;}
	.more_btn{padding:0 15px; height: 65px; margin: 0 5px 0 0;}
	.more_btn em{font-size:1rem; line-height: 63px; letter-spacing:-.5pt;}
	.more_btn em:after{margin:-2px 0 0 10px; width: 20px; height:20px;}


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


/* Header */
.header {height:auto;}
.header::after {top:auto; bottom:1px;}
.header .header_in {padding:20px 0;}
.header .header_in .logo a svg {width:160px; height:auto;}
.header .header_in .top_util {gap:0 20px;}
.header .header_in .top_util ul {gap:0 15px;}
.header .header_in .top_util .save_logo {line-height:1;}
.header .header_in .top_util .save_logo svg {width:150px; height:auto;}







/* Footer */
.footer .footer_in{box-sizing:border-box; padding: 0 100px 0 0;}
.footer .foot_menu ul li a{font-size:0.833rem;}
.footer .foot_info ul li{font-size:0.833rem;}
.footer .foot_info .copyright{font-size:0.778rem;}



/* Quick */
#quick .issue_btn{width: 70px; height:100px; margin: 10px auto 0;}
#quick .issue_btn em:before{margin: 0 auto 6px; width:24px; height:24px;}

#quick .top_btn{width:50px; height:50px; margin: 5px auto 0;}
#quick .top_btn:after{line-height: 50px; font-size:20px;} 

#quick .quick_btn{width:70px; height:70px;}
#quick .quick_btn.assemble {width:70px; height:90px;}
#quick .quick_btn img{max-width:45px !important;}


}
/*******************************************************************************
    @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:14px; font-weight:400;}
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:70px 0;}
.compad_t{padding:70px 0 0;}
.compad_b{padding:0 0 70px;}

/* 버튼 */
.btn_box{padding:20px 0 0; flex-wrap:wrap;}
	.more_btn{width: 100%; height: 50px; margin: 0 0 2px; }
	.more_btn em{line-height: 48px; position: relative; display:block;}
	.more_btn em:after{margin:0; position: absolute; right: 0; top:50%; margin-top:-10px; width: 20px; height:20px;}


/* Header */
.header .header_in {padding:15px 0;}
.header .header_in .logo a img {width:100px; height:auto;}
.header .header_in .top_util ul li {display:none;}
.header .header_in .top_util ul .btnMenu_m {display:block;}
.header .header_in .top_util .save_logo {position:absolute; top:50%; left:calc(5% + 110px); margin-top:-13px;}
.header .header_in .top_util .save_logo svg {width:100px;}



.mo_menu .mo_member_list {display:flex;}
.mo_menu .menuList>.list>li>a {font-size:2rem;}



/* Footer */
.footer{padding:30px 0 50px;}
.footer .footer_in{padding: 0;}
.footer .sns_list{justify-content:center;}
.footer .sns_list li{margin:0 10px 0 0;}
.footer .sns_list li a{width:24px; height:24px;}
.footer .foot_menu{margin:15px 0 0;}
.footer .foot_menu ul{}
.footer .foot_menu ul li{padding:0 20px 0 0;}
.footer .foot_menu ul li:after{height:10px; right:10px; margin-top: -5px;}
.footer .foot_info{margin:10px 0 0; text-align:center; }
.footer .foot_info ul li{padding:0 10px 6px 0;}
.footer .foot_info ul li.on {width:100%; padding-right:0;}


/* Quick */
#quick .issue_btn{width: 40px; height:40px; border-radius:var(--borderR5); margin: 5px auto 0;}
#quick .issue_btn em{font-size:0;}
#quick .issue_btn em:before{margin: 0; width:20px; height:20px;}
#quick .quick_btn.assemble {width:40px; height:40px; }

#quick .top_btn{width:40px; height:40px; margin: 5px auto 0;}
#quick .top_btn:after{line-height: 40px; font-size:18px;} 


#quick .quick_btn{width:40px; height:40px;}
#quick .quick_btn img{max-width:30px !important;}
#quick .quick_btn.assemble {width:40px; height:55px; border-radius:5px;}



.popUp .popup_in .popup_close {width:30px; height:30px; margin-top:-15px;  top:-50px;}
.popUp .popup_in .popup_close:after {font-size:30px; line-height:30px;}
.popUp .popup_in .popup_cont .video_wrap {border-radius:15px;}




/* 검색 */
.window {height:50px; padding:10px 15px;}
.window .close{width:30px; height:30px; top:-25px;}
.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: 25px; height: 25px;}
.page_num ul.pagination li.arrow a span{font-size:14px; width: 25px; height: 25px; line-height: 25px;}



.popup h2{}
.popup h2 span{display: inline;}

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





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




}

/* ============================================
   SNS 로그인 뱃지 (공통)
   ============================================ */
.sns-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 1.2;
}
.sns-badge.kakao {
  background: #FEE500;
  color: #191919;
}
.sns-badge.naver {
  background: #03C75A;
  color: #fff;
}