@charset "utf-8";
/*===========================================
01 - default
=============================================*/
@font-face { font-family: 'GmarketSansMedium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'GmarketSansBold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'); font-weight: normal; font-style: normal; }
@import url('https://cdn.rawgit.com/moonspam/NanumSquareAc/master/NanumSquareAc.css');
@import url('../css//webfonts/pretendard.min.css');
:root {
--header-height: 100px;
--max-width: 1200px; /*1172px*/
--sub-visual-height: 30vh;
--util-width: 300px;
--menubg-height: 280px;
--logo-height: 75px;
--logo-width: 230px;
--main-visual: 100vh;
--menu-width: calc(100% - 50rem);
--menu-txt-color: #333;
--menu-color: #cc3333;
--theme-color: #F58220;
--main-color: #05427E;
--point-color: #00a2e5;
--cream-color: #faebd7;
--member-color: #949494;
--set-color: #444;
--gra_violet: linear-gradient(90deg, #00c4cc, #7d2ae8);
--black: #111;
--white: #fff;
--darkgray: #555;
--gray: #888;
--brightgray: #D9D9D9;
--lightgray:#f7f7f7;
--footer-bg: #444;
--footer-sitebg: #4e4e4e;
--transparent: transparent;
--shadow: 1px 1px 5px rgba(0,0,0,.2);
--NanumSquare: 'NanumSquare', sans-serif;
--NanumSquareAcAc: 'NanumSquareAcAc', sans-serif;
--Pretendard: 'Pretendard', sans-serif;
}
@media (max-width:1460px){
:root{
--logo-height: 70px;
--logo-width: 200px;
--menu-width: calc(100% - 48rem);
}
}
@media (max-width:1280px){
:root{
--logo-height: 60px;
--logo-width: 180px;
--menu-width: calc(100% - 40rem);
--sub-visual-height: 25vh;
}
.topNavWrap #topNav {padding-left: 0rem!important; margin-right: -5rem!important;}
.mexico {display: none!important;}
.con_padding {padding: 3rem 3vw!important; width: 100%; margin: 0 auto;}
/*게시판쪽 탭메뉴가려서 삭제*/
[class*=sub_visual] {overflow: unset!important; filter: unset!important;}
[class*=sub_visual] {background-position: center;}
.pageContent {margin:3rem 0 5rem!important;}
/* .wrapper {padding: 0rem 3vw!important; width: 100%!important; margin: 0 auto;} */
}
@media (max-width:1169px){
:root{
--menu-width: calc(100% - 32rem);
}
.topNavWrap #topNav {padding-left: 2rem!important; margin-right: -3rem!important;}
}
@media (max-width:1024px){
:root{
font-size: 0.8rem;
--logo-height: 50px;
--logo-width: 130px;
--header-height: 70px;
--main-visual: 70vh;
}
/*#fixed-top {background-color:rgba(255,255,255,.8)!important; backdrop-filter: blur(5px) brightness(1);}*/
.pc {display:none!important;}
}
@media (max-width:480px){
:root{
font-size: 0.72rem;
--main-visual: 55vh;
}
.foot_menu ul {grid-template-columns: repeat(auto-fit, minmax(50%, auto))!important;}
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p,form,fieldset,input{margin:0;padding:0;border:0;list-style:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:subpixel-antialiased;-webkit-text-stroke:2px transparent}
body{color: var(--set-color);font-family: var(--Pretendard);font-size:16px;letter-spacing: 0em; font-weight: 400; letter-spacing:-0.0355em; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; text-size-adjust: none; word-break: keep-all; -webkit-font-smoothing: antialiased;}
a,a:link,a:active,a:focus,a:visited,input:active,input:focus,input:visited,button:active,button:focus,button:visited{color:inherit;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0); transition:color .25s ease-out; border:none;/* outline:none */}
a:hover{color:inherit}
legend,caption{display:none}
caption{height:1px;width:1px;position:absolute;font-size:0;left:-999em;top:-999em;z-index:-1;text-indent:-999em}
img{border: 0; max-width: 100%; vertical-align: top; height: auto; transition: all 0.4s ease-in-out; overflow: hidden !important;}
img,fieldset,textarea{border:0;margin:0;padding:0}
table{width:100%;border-collapse:collapse;border:0;empty-cells:show;border-spacing:0}
td,th{border:0;empty-cells:show;border-spacing:0}
button{border:0;cursor:pointer;overflow:hidden;background:none;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}
button span{overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0)}
button,button:focus,button:active{padding:0}
button span{position:relative}
input{border:0;overflow:hidden;background:none;padding:0}
header,section,footer,nav,aside{display:block}
input,textarea{-webkit-appearance:none;-webkit-border-radius:0;border-radius:0;padding:1%;border:1px solid #e5e5e5;color:#555A5A;resize:none;}
select{-webkit-border-radius:0;border-radius:0;padding:0;border:solid 1px #CCC;background:#FFF;vertical-align:middle;display:inline-block}
input[type="checkbox"],input[type="radio"]{position:relative;box-sizing:border-box;padding:0;display:inline-block;vertical-align:middle;margin:0}
input[type="checkbox"]{-webkit-appearance:checkbox}
input[type="radio"]{-webkit-appearance:radio;-webkit-border-radius:50%}
input{-webkit-ime-mode:auto;-moz-ime-mode:auto;-ms-ime-mode:auto;ime-mode:auto}
textarea{display:block}
select,input,textarea,button{font-weight:400;font-family:'NanumSquareAc',sans-serif !important;}
input[type="button"],button{margin:0;padding:0;border:0;border-radius:0;-webkit-border-radius:0;-webkit-appearance:none;cursor:pointer}
button,input[type="reset"],input[type="button"],input[type="submit"]{line-height:normal;border:none}
input[type="text"]::-ms-clear{display:none}
input[type="text"],input[type="password"],input[type="tel"]{line-height:1;border-radius:0;-webkit-appearance:none;background:#fff;color:#555A5A;text-indent:1px;display:inline-block;vertical-align:middle}
input[type="file"]{line-height:1;background:#fff;color:#555A5A;cursor:pointer;display:inline-block;vertical-align:middle}
input[type="checkbox"]:checked + label,input[type="radio"]:checked + label{color:#000}
input[type="checkbox"]:disabled + label,input[type="radio"]:disabled + label{color:#999;cursor: default;}
input:disabled{background:#f1f1f1}
input[readonly="readonly"],input[readonly],input[disabled="disabled"],input[disabled]{border:1px solid #e5e5e5;background:#f1f1f1;color:#555A5A;text-indent:1px}
select[disabled]{border:1px solid #e5e5e5;background:#f1f1f1;color:#555A5A}
::-webkit-input-placeholder{color:#ddd}
:-ms-input-placeholder{color:#ddd}
::placeholder{color:#ddd}
::selection{background-color:rgba(0,0,0,0.15)}
hr{border:0;height:0}
.sorry{background:#fff url(../img/common/sorry.gif) center no-repeat;border:5px dashed #ddd;border-radius:11px;height:600px;text-indent:-9999em;}
.hide{position:absolute;width:0;height:0;font-size:0;margin:0;padding:0;line-height:0;overflow:hidden;z-index:-1;left:-1px;top:-1px}
.txtHide{text-indent:100%;white-space:nowrap;overflow:hidden;color:transparent}
.flt{float:left;display:block}
.frt{float:right;display:block}
.wrp{overflow:hidden}
.clr,.clear{clear:both}
.right{text-align:right}
.left{text-align:left}
.center{text-align:center}
.ellips{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}
a.lnk{display: block;position: absolute;top: 0;right: 0;left: 0;bottom: 0;z-index: 4;text-indent: -999em;}
.unit{text-align:right}
.unit_wrap{position:relative}
.unit_wrap .unit{position:absolute;top:0;right:0;margin-top:0;float:none;font-size:15px}
.gap{letter-spacing:-1px}
.wwr{word-wrap:break-word}
.wbr{word-break:break-all}
.d-b{display:block}
.d-i{display:inline}
.d-ib{display:inline-block}
.skip{position:absolute;top:0;left:0;width:100%}
.skip a{position:absolute;display:block;width:100%;left:0;text-align:center;top:-50px;left:0;z-index:999}
.skip a:hover,.skip a:focus,.skip a:active{position:absolute;top:0;left:0;padding:5px 0;font-weight:700;color:#fff;background:#36F;width:100%}
#skipnav{margin:0;padding:0}
#skipnav a{display:block;overflow:hidden;position:absolute;left:0;top:-10000px}
#skipnav a:hover,#skipnav a:focus,#skipnav a:active{padding:15px 0;background-color:#039;color:#fff;font-size:120%;width:100%;text-align:center;top:0;z-index:99999999;text-decoration:underline}
#skip{text-indent:-999em;height:0;width:0;position:absolute;left:-999em;z-index:-1}
a.translink{display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;font-size:0;line-height:0;text-indent:-999em;border:0 solid #000}
.pl0{padding-left:0}
.pl5{padding-left:5px}
.pl10{padding-left:10px}
.pl15{padding-left:15px}
.pl20{padding-left:20px}
.pl30{padding-left:30px}
.pr10{padding-right:10px}
.pr20{padding-right:20px}
.pt0{padding-top:0}
.pt5{padding-top:5px}
.pt10{padding-top:10px}
.pl15{padding-left:15px}
.pt15{padding-top:15px}
.pt20{padding-top:20px}
.pt25{padding-top:25px}
.pt30{padding-top:30px}
.pt40{padding-top:40px}
.pt50{padding-top:50px}
.mb0{margin-bottom:0}
.mb5{margin-bottom:5px}
.mb10{margin-bottom:10px}
.mb15{margin-bottom:15px}
.mb20{margin-bottom:20px}
.mb25{margin-bottom:25px}
.mb30{margin-bottom:30px}
.mb40{margin-bottom:40px}
.mb50{margin-bottom:50px}
.mb60{margin-bottom:60px}
.mb70{margin-bottom:70px}
.mb90{margin-bottom:70px}
.pb0{padding-bottom:0}
.pb10{padding-bottom:10px}
.pb15{padding-bottom:15px}
.pb20{padding-bottom:20px}
.pb25{padding-bottom:25px}
.pb30{padding-bottom:30px}
.pb40{padding-bottom:40px}
.pb50{padding-bottom:50px}
.pb60{padding-bottom:60px}
.pb70{padding-bottom:70px}
.pb80{padding-bottom:80px}
.mt5{margin-top:5px}
.mt10{margin-top:10px}
.mt15{margin-top:15px}
.mt20{margin-top:20px}
.mt25{margin-top:25px}
.mt30{margin-top:30px}
.mt35{margin-top:35px}
.mt40{margin-top:40px}
.mt45{margin-top:45px}
.mt50{margin-top:50px}
.mt10{margin-top:10px}
.mt25{margin-top:25px}
.mt0{margin-top:0}
.mr0{margin-right:0}
.ml0{margin-left:0}
.ml{margin-left:3px}
.ml5{margin-left:5px}
.ml10{margin-left:10px}
.ml15{margin-left:15px}
.ml20{margin-left:20px}
.ml25{margin-left:25px}
.ml30{margin-left:30px}
.ml35{margin-left:35px}
.ml40{margin-left:40px}
.ml50{margin-left:50px}
.lh15{line-height:150%}
.lh18{line-height:180%}
.lh20{line-height:200%}
.lh19{line-height:190%}
.lh20 *{line-height:200%}
.c_12{font-size:.933em}
.c_11{font-size:.867em}
.c_10{font-size:.8em}
.fz11{font-size:11px}
.fz12{font-size:12px}
.fz13{font-size:13px}
.fz14{font-size:14px}
.fz15{font-size:15px}
.fz16{font-size:16px}
.fz17{font-size:17px}
.fz18{font-size:18px}
.fz19{font-size:19px}
.fz30{font-size:30px}
.c_blue{color:#0f4da9}
.c_sky{color:#0393cf}
.c_green{font-weight:500!important}
.c_red{color:#ce0c0c}
.c_yl{color:#f29200}
.c_yg{color:#66993d}
.c_brown{color:#906947}
.c_orange{color:#f45600}
.c_purple{color:#8048b4}
.c_gray{color:#676767}
.c_k{color:#000}
.dotum{font-family: 'dotum' !important;}
.ff_ver{font-family:'verdana'}
.ff_arl{font-family:'arial'}
.fw-n{font-weight:400}
.fw-b{font-weight:700}
a.uline,.uline,.uline *{text-decoration:underline}
.bdb{border-bottom:solid 1px #d9d9d9}
.bdt{border-top:solid 1px #d9d9d9}
span.all_br,span.br_all{display:block}
.desk_x{display:none}
.desk_o{display:block}
div.m_pc_x{display:none}
span.m_o,.m_o,div.m_o{display:none}
.m_s_o{display:none}
span._br,span.br{display:block}
span.br_m,span.m_br{display:inline}
img.m_o{display:none}
.img img,.img{font-size:0;line-height:0;display:block}
.imgX img,img.imgX{display:block;width:auto;margin:0 auto;font-size:0;line-height:0;text-align:center;max-width:100%}
.imgX img.m_o{display:none}
.pc {display:block;}
/********* 버튼공통 yun *********/
.btn a {display:flex; align-items: center; justify-content: center; gap: .1rem;}
.btn {display: inline-flex; align-items: center; justify-content: center; letter-spacing: -1px; gap: 10px; line-height: 1; cursor: pointer; width: fit-content;}
.cursor::before,
.arrow::before,
.check::before,
.pen::before
{content: ""; display: flex; align-items: center; justify-content: center;}
.none::before {display: none;}
/* 버튼크기 */
.btn.mid {font-size: 2rem; font-weight: 600; padding: 2rem 4.5rem 2.2rem;}
.btn.sm {font-size: 1.5rem; font-weight: 400; padding: 1.2rem 1.8rem 1.1rem;}
/* 버튼스타일 */
.btn.round {border-radius: 10rem; border:1px solid rgba(0,0,0,.2);}
.btn.corner {border-radius: 1rem; border:1px solid rgba(0,0,0,.1);}
.btn.line {border-radius: 10rem; border:1px solid rgba(255,255,255,.8);}
/* 버튼컬러,폰트컬러 */
.btn.menucolor {background: var(--menu-color); color: var(--white); transition: .2s; transition-property: background, color;}
.btn.menucolor:hover {background: var(--theme-color); color: var(--white);}
.btn.themecolor {background: var(--theme-color); color: var(--white); transition: .2s; transition-property: background, color;}
.btn.themecolor:hover {background: var(--menu-color); color: var(--white);}
/*******
레이어팝업
********/
.divpop{}
.divpop .popLayerImg{padding:0; border:1px solid #bbbbbb; border-top:0}
.divpop .popLayerImg img,
.popLayerImg a{border:0; display:block !important}
.divpop .popLayerBg{height:100%;padding:0px;background-color:#ffffff}
.divpop .popLayerImg img{font-size:0; line-height:0}
.divpop .titleBar{background: url('../../common/img/common/pop_layerTop.gif') 0 0 no-repeat;cursor:move;height:30px;line-height:30px}
.divpop .titleBar_r{padding:0 5px 0 0;width: 20px;background:url('../../common/img/common/pop_layerTop2.gif') right center no-repeat;height:30px;line-height:30px}
.divpop .layerBtm{background:url('../../common/img/common/pop_layerBtm.gif') 0 0 no-repeat; padding-left:20px;height:30px;}
.divpop .layerBtm_r{background:url('../../common/img/common/pop_layerBtm2.gif') right 0 no-repeat;height:30px;width: 20px;}
.divpop .layerBtm_txt{font-family:'dotum'; font-size:11px; color:#666666;}
/*******
레이어팝업
********/
.layerPop{position:absolute;z-index:999; visibility:visible;min-width: 200px;max-width: 800px;overflow: hidden;}
.layerPop .layerPopImg{padding:0; border:1px solid #bbbbbb; border-top:0}
.layerPop .layerPopImg img,
.layerPopImg a{border:0; display:block !important}
.layerPop .layerPopBg{height:100%;padding:0px;background-color:#ffffff}
.layerPop .layerPopImg img{font-size:0; line-height:0}
.layerPop .titleBar{cursor:move;height:30px;line-height:30px;position: relative;padding-right: 25px;}
.layerPop .titleBar h3{background: url('../../common/img/common/pop_layerTop.gif') 0 0 no-repeat;text-align: left;padding-left: 14px;font-size: 13px;font-weight: bold;}
.layerPop .titleBar_r{padding:0 5px 0 0;width: 20px;background:url('../../common/img/common/pop_layerTop2.gif') right center no-repeat;height:30px;line-height:30px;position: absolute;top: 0;right: 0;display: block;font-size: 0;vertical-align: middle;}
.layerPop .titleBar_r img{line-height: 30px;vertical-align: middle;}
.layerPop .layerBtm{height:30px;position: relative;padding-right: 10px;line-height: 30px;}
.layerPop .layerBtm_r{background:url('../../common/img/common/pop_layerBtm2.gif') right 0 no-repeat;height:30px;width: 10px;position: absolute;top: 0;right: 0;font-size: 0;}
.layerPop .layerBtm_txt{background:url('../../common/img/common/pop_layerBtm.gif') 0 0 ; padding-left:20px;font-family:'dotum'; font-size:11px; color:#666666;}
.layerPop .layerBtm_txt input{display: inline-block;vertical-align: middle;}
@media all and (max-width:1024px) {
.desk_x{display:block}
.desk_o{display:none}
}
@media all and (max-width:815px) {
span.m_o,.m_o,div.m_o{display:block}
img.m_o{display:block}
img.m_x{display:none}
.m_x{display:none}
span._br{display:none;line-height:0}
span.m_s_x{display:none}
span.br_m,span.m_br{display:block}
.img img,.img{width:100%}
.imgX img,img.imgX{display:block;width:100%;margin:0 auto}
span.m_br2{display:none}
.imgX2 img,img.imgX2{display:block;width:87%;margin:0 auto}
.imgX img.m_x{display:none}
.imgX img.m_o{display:block;position:relative;height:50%}
.imgX.mb90{margin-bottom:30px}
.pb80{padding-bottom:40px}
.divpop {z-index: 9999 !important;max-width: 100% !important;width: auto !important;height: auto !important;left:5px !important;top: 5px !important;box-shadow: 2px 2px 15px 0 rgba(0,0,0,0.4);border-radius:10px;overflow: hidden;margin-right: 5px;}
.layerPop, .divpop {z-index: 9999 !important;max-width: 100% !important;width: auto !important;height: auto !important;left: 3.3% !important;right: 3.3% ; }
.layerPop .layerPopImg img,
.divpop .popLayerImg img{width: 100% !important;}
.m_fln,.flr.m_fln,.frt.m_fln{float:none}
body{font-size:15px}
span.br{display:none}
.m_s_o,span.m_br2{display:block}
.imgX2 img,img.imgX2{display:block}
.sorry{background-size:60%;height:140px;font-size:16px;padding-top:170px;margin-bottom:0}
.m_fz11{font-size:11px}
.m_fz12{font-size:12px}
.m_fz13{font-size:13px}
.m_fz14{font-size:14px}
.m_fz15{font-size:15px}
}
/*========================================
02 - layout
=============================================*/
/****************
common layout
***************/
.wrapper{margin: 0 auto; width: calc(100% - 5vw);/* padding: 5rem 0; */max-width: var(--max-width); position: relative; z-index: 1; }
.wrapper .contaienr {text-align:center;}
.wrapper_l{margin: 0 auto;width: 94%;max-width: 1620px;position: relative;z-index: 1;}
.wrapper_m{margin: 0 auto;width: 94%;max-width: 1170px;position: relative;z-index: 1;}
.wrapper_s{margin: 0 auto;width: 94%;max-width: 1000px;position: relative;z-index: 1;}
.wrapper:after{content: '';clear: both;display: block;}
#skip{text-indent: -999em;height: 0;width: 0;}
#fixed-top {position: fixed; top: 0px; width: 100%; height: var(--header-height);z-index: 99999998; background-color:rgba(255,255,255,0.0); backdrop-filter: blur(1px) brightness(1); box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.1);}
@media all and (max-width:1024px) {
}
/****************
mobile menu
***************/
.hop_dimm{position:fixed;background:rgba(0,0,0,0.75);z-index:99999998;left:0;top:0;right:0;bottom:0}
.sb-slidebar{overflow-x:hidden;background-color:#FFF;box-shadow:5px 0 25px 1px rgba(0,0,0,0.35);width:300px!important}
#all_menu ul{text-align:left;padding:10px 25px 0}
#all_menu ul li a.login_m{display:block; height: 40px; line-height: 40px; background-color: #e8e8e8; color: #403f3f; font-size: 14px; text-align: center; margin: 15px 0 5px; border-radius:5px; font-weight: 500; box-sizing:border-box;}
#all_menu ul li a.login_m.active{background-color: #fff; color: var(--menu-color); border: solid 1px currentColor;}
#all_menu ul li a.login_m.active2{background-color: var(--menu-color); color: #fff; border: solid 1px currentColor;}
#all_menu ul li .login_m_wrap{overflow:hidden;}
#all_menu ul li .login_m_wrap a.login_m{float:left; margin-right: 10px; width: calc(50% - 5px);}
#all_menu ul li .login_m_wrap a.login_m:last-child{margin-right: 0;}
#all_menu ul { text-align:left;padding:0 15px ; /* font-family: 'S-CoreDream-3Light';letter-spacing: 0; */}
#all_menu ul li h3 { display:block; color:#ee3523;font-weight: 500;border-bottom: solid 1px #e5e5e5;}
#all_menu ul li h3 a{color:#111;font-size:17px;padding-left:5px;display:block; line-height:50px;position: relative;}
#all_menu ul li h3 a::after{display: block;content: '+';position: absolute;top: 0;right: 10px;color: #999;}
#all_menu ul li h3.open a::after{display: block;content: '';position: absolute;top: 48%;right: 10px;width: 9px;height:2px;background-color: var(--menu-color);}
#all_menu ul li h3.open{border-color: var(--menu-color);}
#all_menu ul li h3.on a,
#all_menu ul li h3.open a{color: var(--menu-color);}
#all_menu ul li ul { overflow:hidden; padding-right:0; margin-bottom:0px;padding:0; }
#all_menu ul li ul li {display:block; border-bottom: dashed 1px #ccc; }
#all_menu ul li ul li a { display:block; line-height:40px; color:#444; text-decoration:none; padding-left:24px;font-size:16px;position: relative; transform: skew(-0.1deg); font-weight: 400;}
#all_menu ul li ul li.on a,
#all_menu ul li ul li a:active,
#all_menu ul li ul li a:hover{color:var(--menu-color);}
#all_menu ul li ul li a::before{border-style: solid;border-color: #999; border-width:0 0 1px 1px ; display: block;content: ''; padding: 3px; transform: rotate(0deg);position: absolute;top: 13px;left: 10px;}
#all_menu ul li ul.cols2{border-top: 1px solid #4a6822;}
#all_menu ul li ul.cols2 li{float: left;width: 50%; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;border-color: #7a9b4e;}
#all_menu ul li ul.cols2 li a{text-align: center;padding-left: 0;color: #FFF;background-color: #FFF; height:37px; line-height:37px;}
#all_menu .all_menu_top { overflow: hidden; height:auto;background: var(--menu-color);padding: 0;position: relative;}
#all_menu .all_menu_top a{line-height: 80px;display: inline-block;color: #fff;background-position:15px center;background-repeat: no-repeat;padding: 0 15px 0 45px;font-size: 14px;}
#all_menu .all_menu_top a.m_login{background-image: url(../img/common/m_top_login.png);padding-left: 57px;background-position: 27px center;}
#all_menu .all_menu_top a.m_logout{background-image: url(../img/common/top_logout_w.gif);padding-left: 57px;background-position: 27px center;}
#all_menu .all_menu_top a.m_edit,
#all_menu .all_menu_top a.m_join{background-image: url(../img/common/m_top_join.png);}
#all_menu .all_menu_top a.home{display: block;text-indent: -999em;background:url('../img/common/logo-white.svg') no-repeat 4px center ;background-size: auto 40px; margin-left: 20px; }
#all_menu .all_menu_top .iconwrap{overflow: hidden;float: left;width: 230px;}
#all_menu span.sb-close{background: url('../img/common/m_top_close_w.png') no-repeat 45% center;height: 80px;display: block;text-indent: -999em;font-size: 0;width: 52px;float: right;cursor:pointer;}
#all_menu ul li.singleMenu{position: relative;}
#all_menu ul li.singleMenu h3 a::after{display:none;}
#all_menu ul li.singleMenu a.singleMenu_a{position: absolute; width: 100%; height: 100%; left: 0; top: 0;}
.m_srch_box{overflow:hidden;margin: 0;height: 45px;background: #55bb58;position: relative;padding:0 25px;width: auto;}
.m_srch_box label{display:none;}
.m_srch_box input.m_srch_text{border:0;outline:none;background:transparent;width:204px;padding:0 5px; height:45px;line-height:44px;float:left;margin:0;display:block;font-weight:normal;color:#FFF;opacity: 0.8;font-size: 15px;overflow:hidden}
.m_srch_box input.m_srch_button{background: url('../img/common/topSearch.png') no-repeat center 45%;display: block;color: transparent;width: 25px;height: 45px;font-size: 0;float: right;position: relative;border: 0;outline: 0;padding: 0 !important;text-indent: -999em;background-size:auto 16px;}
.m_srch_box input.m_srch_text::placeholder { color: #fff; opacity: 1;}
.m_srch_box input.m_srch_text:-ms-input-placeholder { color: #fff;}
.m_srch_box input.m_srch_text::-ms-input-placeholder { color: #fff;}
.m_srch_box input.m_srch_text:focus{opacity: 1;}
#all_menu .m_srch_boxa {display:none;}
/****************
header
***************/
.header{height:var(--header-height); position:relative; /* border-bottom: 1px solid rgba(255,255,255,0.2); */ display: flex; align-items: center; justify-content: space-between; padding: 0 5vw;}
.header:after{display:block;clear:both;content:''}
/* .header a {transition: all 0.25s ease-out;} */
.header h1.topLogo{width: var(--logo-width); height:var(--logo-height);}
.header h1.topLogo a{display:flex; align-items: center; justify-content: center; overflow: hidden; text-indent:-9999em; background:url('../img/common/logo-white.svg') no-repeat center left / contain; width: inherit; height: inherit; }
.header .topIcon{/*width: var(--util-width);*/ z-index:99999999; float:right; /* margin-top: 34px; */ position: absolute; right: 3vw; /* display: flex; align-items: center; justify-content: center; */display: flex; /* flex-direction: row; */ justify-content: flex-end; align-items: center; gap: 0rem;}
.sb_open,
.header .topIcon a{display: flex; align-items: center; justify-content: center; padding: .5rem 1rem; width: fit-content; height: auto; background: var(--menu-color); color: var(--white); font-size: 1rem; border-radius: .5rem;}
.header .topIcon a:last-child{margin-right: 0;}
.header .topIcon a.topMyp{background-image:url('../img/common/topMyp.png');}
.header .topIcon a.topMenu{ background-image:url('../img/common/topMenu.png'); margin-right: 0;}
.header .topIcon a.topLogin{background-image:url('../img/common/topLogin.png');}
.header .topIcon a.topLogin.logout{background-image:url('../img/common/topLogout.png'); background-size: 17px; background-position: left 13px center;}
.header .topIcon a.topSearch{background-image:url('../img/common/topSearch.png');}
/*SNS 목록*/
.header .topIcon .SNS{float:left; position: relative; margin-right: 20px;}
.header .topIcon .SNS a{margin-right: 0;}
.header .topIcon .SNS a.topSns{cursor:pointer; background-image:url('../img/common/icon_sns.png');}
.header .topIcon .SNS a.topSns.on{background-color:#ee3523;}
.header .topIcon .SNS ul{display:none; overflow:hidden; position: absolute; top: -9px; left: 50%; transform:translateX(-50%); z-index:-1; padding-top: 55px; border-radius:99px; background-color: #f8f8f8; padding-bottom: 17px; margin-top: 1px; border: 1px solid #e3dede;}
.header .topIcon .SNS ul.on{display:block;}
.header .topIcon .SNS ul li{padding:0 7.5px; margin-bottom: 10px;}
.header .topIcon .SNS ul li:last-child{margin-bottom: 0;}
.header .topIcon .SNS ul li a{display:block; float:none; border-radius:0; width: 40px; height: 40px; background-repeat:no-repeat; background-position:center; background-color: transparent; background-size:100%;}
.header .topIcon .SNS ul li a.band{background-image:url('../img/common/new_sns_icon04.png');}
.header .topIcon .SNS ul li a.facebook{background-image:url('../img/common/new_sns_icon01.png');}
.header .topIcon .SNS ul li a.youtube{background-image:url('../img/common/new_sns_icon03.png');}
.header .topIcon .SNS ul li a.instagram{background-image:url('../img/common/new_sns_icon02.png');}
.header .topIcon .topSearchBtn{float:left; position: relative; margin-right: 20px; }
.header .topIcon .topSearchBtn a{margin-right: 0;}
.header .topIcon .topSearchBtn a.topSns{cursor:pointer; background-image:url('../img/common/icon_sns.png');}
.header .topIcon .topSearchBtn a.topSns.on{background-color:#ee3523;}
.header .topIcon .topSearchBtn div.topSearch{display: none;overflow: hidden; position: absolute; top: 0; left: 36px; transform: translateX(-50%); z-index: -1; padding-top: 0px; padding-bottom: 0px; margin-top: 1px;}
.header .topIcon .topSearchBtn div.topSearch.on{display:block;margin-top: 74px;width: 246px; border-radius: 5px; }
.header .topIcon .utilBtns{display: flex; align-items: center; justify-content: right; gap: .3rem;}
/* 브링업멕시코로고 */
.header .topIcon .mexico {background: url('../img/common/logo-mexico-white.svg') no-repeat center center / contain; width:8rem; height:3rem; margin-right:1rem;}
.fixed .header .topIcon .mexico {background: url('../img/common/logo-mexico.svg') no-repeat center center / contain; width:8rem; height:3rem; margin-right:1rem;}
/*모바일 sns*/
ul.SNS_m{margin-top: 20px; padding-bottom: 20px !important;}
ul.SNS_m li{float:left; width: 25%; font-size: 0; text-align: center;}
ul.SNS_m li a{display:inline-block; width: 50px; height: 50px; border-radius:25px;}
ul.SNS_m li a.band{background: #57ac48 url('../img/common/new_sns_icon04.png') no-repeat center; }
ul.SNS_m li a.facebook{background: #445d99 url('../img/common/new_sns_icon01.png') no-repeat center; }
ul.SNS_m li a.youtube{background: #d2262b url('../img/common/new_sns_icon03.png') no-repeat center; }
ul.SNS_m li a.instagram{background: #b94195 url('../img/common/new_sns_icon02.png') no-repeat center; }
/**********************
topNavWrap
**********************/
.topNavWrap { position: absolute; top: 0;left: 0;right: 0;z-index: 5; border-bottom: solid 1px rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; width: var(--menu-width); margin: 0 auto; /* padding-right: 2rem; */}
.topNavWrap:after {display:block; content:"";clear:both;}
.topNavWrap ul::after{display: block;content: '';clear: both;}
.topNavWrap #topNav {margin: 0 auto; transition:0.3s; flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(13%, auto)); align-items: center; justify-content: center; margin-right: 0rem;}
.topNavWrap #topNav > li {position:relative;float:left; /* width: 20%; */ text-align: center;}
.topNavWrap #topNav > li:first-child{width: 100%;}
.topNavWrap #topNav li h3{font-weight: normal;position: relative;display: block;}
.topNavWrap #topNav li h3 a { font-size: 1.4rem; color: var(--white); display: inline-flex; line-height: 1.5; text-align: center; letter-spacing: -1px; position: relative; padding: 50px 0 48px 0; font-weight: 600; max-height: 100px; align-content: center; align-items: center; text-shadow: var(--shadow);}
.topNavWrap #topNav li h3 a br.br_on, .topNavWrap #topNav li h3 a br.br_on2 { /*display:none;*/ display:none;}
.topNavWrap #topNav li h3.long a{padding: 27px 0;}
.topNavWrap #topNav li h3::after{display: block;content: '';position: absolute;bottom: -1px;height: 3px;left: 50%;right: 50%;width:100%; background-color: rgba(255,255,255,.0);transition: all 0.25s ease-out;}
.topNavWrap #topNav li h3.long::after{bottom: -3px;}
.topNavWrap #topNav li h3:hover::after,
.topNavWrap #topNav li h3.on::after{left: 0;right: 0;}
.topNavWrap #topNav li ul li {padding:0;background:none;clear:both;line-height:normal;float:none;text-align:center;width: auto;}
.topNavWrap #topNav li ul li a {transform: skew(-0.1deg); font-weight: 400; display:block; padding:6px 3px 6px 3px; line-height:1.2;font-size:16px; color: var(--gray);}
.topNavWrap #topNav li ul li a:hover,
.topNavWrap #topNav li ul li a:focus,
.topNavWrap #topNav li ul li.on a{color: var(--menu-color);}
/*top-back*/
/*.top-back{display:none;position:fixed;width:100%;display:none;top:100px;height: var(--menubg-height);background:#fff;z-index: 4; box-shadow:0 5px 5px rgba(0,0,0,0.03);}*/
.top-back{display:none;position:fixed;width:100%;top:100px;height: var(--menubg-height); background:rgba(255,255,255,1); /* backdrop-filter: blur(5px) brightness(1); */ z-index: 4; /*box-shadow:0 0px 10px rgba(0,0,0,.15);*/ border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; overflow:hidden; }
.header .topNavWrap #topNav li ul.topNavLv_2{display:none; position:absolute;top:101px;width:100%;left:0px; padding-top:15px; height: var(--menubg-height);font-size: 0;border-left: solid 1px rgba(0,0,0,0.05); transition: background-color 0.3s;}
.header .topNavWrap #topNav li ul.topNavLv_2.last{border-right: solid 1px rgba(0,0,0,0.05);}
.header .topNavWrap #topNav li ul.topNavLv_2:hover{background-color: #fdfdfd; margin-top:-3px; margin-bottom:3px; border-top: 3px solid var(--menu-color); /*outline:1px dotted red;*/}
body.fixed .header,
.header.ov{/* background-color: #fff; */ /*border-bottom: 1px solid #ddd;*/}
.header.home{border-bottom: 1px solid #ddd;}
.header.ov .topNavWrap { /* border-bottom: solid 1px #e5e5e5; */}
body.fixed h1.topLogo a,
.header.home h1.topLogo a,
.header.ov h1.topLogo a{background-image: url('../img/common/logo.svg');transition: none}
body.fixed .topNavWrap #topNav li h3 a,
.header.home .topNavWrap #topNav li h3 a,
.header.ov .topNavWrap #topNav li h3 a{color: var(--set-color); text-shadow: unset;}
body.fixed .topNavWrap #topNav li h3 a:hover,
body.fixed .topNavWrap #topNav li h3 a:focus,
body.fixed .topNavWrap #topNav li h3.on a,
.header.home .topNavWrap #topNav li h3 a:hover,
.header.home .topNavWrap #topNav li h3 a:focus,
.header.home .topNavWrap #topNav li h3.on a,
.header.ov .topNavWrap #topNav li h3 a:hover,
.header.ov .topNavWrap #topNav li h3 a:focus,
.header.ov .topNavWrap #topNav li h3.on a{color: var(--menu-txt-color);}
body.fixed .topNavWrap #topNav li h3:hover::after,
body.fixed .topNavWrap #topNav li h3.on::after,
.header.home .topNavWrap #topNav li h3:hover::after,
.header.home .topNavWrap #topNav li h3.on::after,
.header.ov .topNavWrap #topNav li h3:hover::after,
.header.ov .topNavWrap #topNav li h3.on::after{background-color: var(--menu-color);}
.topNavWrap #topNav li ul li.onchk a { color: var(--menu-color);}
#h_search { border: 0; outline: none; width: 200px; padding: 0 5px; height: 40px; line-height: 40px; float: left; margin: 0; display: block; font-weight: normal;
font-size: 15px; overflow: hidden; border: 1px solid #1c6bbd;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px; }
#searcSubmit { height: 42px; background: #1c6bbd; color: #fff; font-size: 15px; width: 46px; padding-bottom: 7px; }
.header .topSearch{height: 40px;width: 50px;float: right;position: relative;z-index: 7; }
.header .topSearch a.searchBtn{background: url('../img/common/search_w.png') no-repeat center center;display: block;color: #fff;width: 50px;height: 50px;font-size: 0;border-radius:50%;top: 50%;position: relative;margin-top: -50%;position: relative;z-index: 2;}
body.fixed .topSearch a.searchBtn,
.header.ov .topSearch a.searchBtn,
.header.home .topSearch a.searchBtn{background-image: url('../img/common/search_s.png');}
.header .topSearch a.searchBtn.close{background-image: none;background-color: #999;}
.header .topSearch a.searchBtn.close::after{content: " \2715"; display: block;color: #fff;font-weight: bold;font-size: 18px;height: 50px;line-height: 50px;text-align: center;width: 50px;}
.top_srch_box{overflow:hidden;margin: 0;border: 1px solid #ddd;border-radius:2.5em;height: 48px;background: #FFF;position: absolute;top: 30px;right: 0; z-index: 1;padding-right: 50px;opacity: 0;width: 50px;transition: all 0.25s ease-out;}
.top_srch_box.open{opacity: 1;width: 210px;}
.top_srch_box label{display:none;}
.top_srch_box input.top_srch_text{border:0;outline:none;background:#fff;width:130px;padding:0 10px 0 20px;height:48px;line-height:48px;float:left;margin:0;display:block;font-weight:normal;font-size: 17px;color:#111;border-radius:2.5em;overflow:hidden}
.top_srch_box input.top_srch_button{background: url('../img/common/top_search_k.gif') no-repeat center;display: block;color: transparent;width: 48px;height: 48px;font-size: 0;float: right;position: relative;border: 0;outline: 0;padding: 0 !important;text-indent: -999em;}
.sb_open{display: none;}
/*스크롤시 (body.fixed)*/
body.fixed .header,
.header.ov {box-shadow:0 0 12px rgba(0,0,0,0.16); border-bottom: 0; background-color: var(--white); text-shadow: unset;}
body.fixed .header .topNav li.topNav_h > a{color: var(--black);}
body.fixed .header .topIcon a{background-color: var(--point-color); transition:0.3s;}
.fixed .header h1.topLogo {}
.fixed .header h1.topLogo a {background: url(../img/common/logo.svg) no-repeat center left / contain;}
.fixed .topNavWrap #topNav li h3 a {color:var(--set-color); text-shadow: unset;}
/****************
clearfix
****************/
.clearfix {*zoom:1;}
.clearfix:before, .clearfix:after {display:block; content: ''; line-height: 0;}
.clearfix:after {clear: both;}
/*****************
sitemap
******************/
.sitemap .menuload{position:static;display:block;right:auto;top:auto;bottom:auto;left:auto;overflow:hidden;height:auto;border:0 solid #000}
.menuload{position:fixed;top:0;left:0;right:-20px;bottom:0;background-color:rgba(255,255,255,.96);z-index:99999999;overflow:auto;display:none}
.menuload .sitemap_menu_wrapper{width: 100%; position: fixed; top: 0; left: 50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); }
.menuload .sitemap_menu_wrapper .menuX{float:right; height:100px;width:100px;display:block;text-indent:-9999em;}
.menuload .sitemap_menu_wrapper .menuX::after{content:" \2715";display:block;color:#1e1215;font-size:30px;line-height:93px;text-align:center;height:100px;width:100px;right:0;position:absolute;top:0;font-weight:100;text-indent:0}
.menuload .sitemap_menu_wrapper .menuX:hover::after{content:" \2715";display:block;color:#01a283;font-size:30px;line-height:93px;text-align:center;height:100px;width:100px;right:0;position:absolute;top:0;font-weight:100;text-indent:0}
.menuload .topNavWrap{height:auto}
.menuload .big_logo{height:auto}
.menuload .sitemap_content{position: fixed; left: 50%; top: 50%; transform:translate(-50%, -50%); width: 90%; max-width:1000px;}
.menuload ul.sitemap_menu > li{position: relative; margin-bottom: 20px;}
.menuload ul.sitemap_menu > li:last-child{margin-bottom: 0;}
.menuload ul.sitemap_menu > li > h4{display:block; font-size: 20px; font-weight: 600; color: #1e1215; transition:0.3s; position: relative; line-height: 40px; transition:0.05s;}
.menuload ul.sitemap_menu > li > h4:before{content:''; display:block; height: 2px; background-color: #000; position: absolute; bottom: 0; left: 0; right: 0;}
.menuload ul.sitemap_menu > li > h4:after{content:''; display:block; height: 2px; background-color: #0074d5; position: absolute; bottom: 0; left: 0; right: 100%; transition:0.3s;}
.menuload ul.sitemap_menu > li > h4:hover{color: #0074d5;}
.menuload ul.sitemap_menu > li > h4:hover:after{right: 0;}
.menuload ul.sitemap_menu > li > h4 a{display:block;}
.menuload ul.sitemap_menu > li ul{margin-top: 8px;}
.menuload ul.sitemap_menu > li ul li{float:left; width: calc(20% - 16px); margin-right: 20px;}
.menuload ul.sitemap_menu > li ul li:nth-child(5n){margin-right: 0;}
.menuload ul.sitemap_menu > li ul li a{transform: skew(-0.1deg); font-weight: 600; display:inline-block; font-size: 16px; line-height: 32px; transition:0.3s; /*font-weight: 300;*/ color: #333; position: relative; overflow:hidden; text-overflow:ellipsis;}
.menuload ul.sitemap_menu > li ul li a:after{content:''; position: absolute; height: 1px; left: 0; right: 100%; background-color: #005ead; bottom: 4px; transition:0.3s;}
.menuload ul.sitemap_menu > li ul li a:hover{color: #005ead;border-radius:5px; }
.menuload ul.sitemap_menu > li ul li a:hover:after{right: 0;}
.menuload ul.sitemap_menu > li h4 a i.link{display:inline-block; margin-left: 8px; width: 9px; height: 22px; background: url('../img/common/ico_link.png') no-repeat center top; vertical-align: middle;}
/****************
Footer
****************/
.footer{background:var(--footer-bg);text-align:center;color:#fff;}
.foot_menu{border-bottom:1px solid rgba(255,255,255,0.1); padding:10px 0!important;letter-spacing:-1px;max-width:100%;margin:0 auto; }
.foot_menu ul{max-width:750px; margin: 0 auto; display: grid ; grid-template-columns: repeat(auto-fit, minmax(20%, auto));}
/* .foot_menu ul li{float:left; display:inline-block; width: auto;} */
.foot_menu ul li a{display:inline-block;/*line-height:59px;*/color:#fff;vertical-align:middle;position:relative;padding:0 20px 0 20px;font-size:17px;font-weight:200;letter-spacing:0;transition:all .25s ease-out}
.foot_menu ul li a:hover{color:#fff}
.foot_menu ul li a::before{display:block;content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:3px;background-color:#666;border-radius:50%}
.foot_menu ul li a.first::before{display:none}
.foot_copy{line-height:1.1;color:#ccc;padding:35px 0}
.foot_copy h3{ width: 14rem; height: 5rem; margin: 0 auto; margin-bottom: 25px; text-indent: -999em; line-height: 0; font-size: 0; background: url('../img/common/logo-white.svg')no-repeat center center / cover ; display:none;}
.foot_copy p.address{padding-bottom:4px;font-size:18px; line-height: 1.5; color:rgba(255,255,255,0.6);}
.foot_copy p.copy{color:rgba(255,255,255,0.6);font-size:18px;letter-spacing:0;font-weight:300}
.familySite{margin:0 auto 45px;line-height:100%;text-align:center;display:inline-block;width:260px}
.box_show_area{width:100%;height:55px;line-height:100%;position:relative}
.box_show_area .btn_show{position:relative;display:block;cursor:pointer;z-index:2;height:53px;padding-left:0;background-color: #fff;}
.box_show_area .btn_show::after{border-style:solid;border-color:#898989;border-width:1px 1px 0 0;display:block;padding:4px;transform:rotate(-45deg);position:absolute;top:43%;right:10%;content:''}
.box_show_area .btn_show button{display:block;line-height:53px;height:53px;text-align:left;padding-left:10%;width:100%;box-sizing:border-box;font-size:16px;position:relative;padding-bottom:4px;color:#000;}
.box_show_area .box_show{width:auto;height:auto;padding:0;position:absolute;z-index:1;bottom:54px;left:0;right:0;display:none;border:solid 1px #CCC;border-bottom:none}
.box_show_area .box_show li{border-bottom:solid 1px #CCC;text-align:left}
.box_show_area .box_show li a{padding-left:10px;font-size:15px;line-height:39px;display:block;height:40px;background:#f0f0f1;color:#676768;transition:all .25s ease-out}
.box_show_area .box_show li a:hover{background:#e0e0e0; color: #555;}
.foot_copy p.address .on {display:none;}
@media (max-width:1300px) {
/*.foot_menu { padding: 10px 0 !important; }*/
}
/****************
Quick
****************/
#quick{position: fixed; right: 25px; top: 120px; z-index:17;}
#quick ul{background:rgba(0,0,0,0.9); border-radius:20px; overflow:hidden;}
#quick ul li{border-bottom: solid 1px rgba(255,255,255,.1); }
#quick ul .quick_on {background:#E7380D; border-bottom:none;}
#quick ul li:last-child{border-bottom: 0; }
#quick ul li a{overflow:hidden; opacity:0.9; display:block; width: 85px; height: 90px; transition:0.2s; position: relative;}
#quick ul li a em{transform: skew(-0.1deg); font-weight: 400; display:block; width:100%; text-align: center; font-size: 13px; color: #fff; font-style:normal; line-height: 1.3; padding-top: 6px; background-repeat:no-repeat; background-position:Center top;}
#quick ul li a:hover{background-color: #0c4781; opacity:1; }
#quick ul li a.quick_1 img {display: block;margin: 10px auto 0px;max-width: 100%;width: 50px;}
#quick ul li a.quick_2 img {display: block;margin: 10px auto 0px;max-width: 100%;width: 50px;}
#quick ul li a.quick_3 img {display: block;margin: 10px auto 0px;max-width: 100%;width: 50px;}
#quick ul li a.quick_4 img {display: block;margin: 10px auto 0px;max-width: 100%;width: 50px;}
#quick ul li a.quick_5 img {display: block;margin: 10px auto 0px;max-width: 100%;width:50px;}
a.goTop { width: 85px; height: 45px;-webkit-border-radius: 25px;-moz-border-radius: 25px;border-radius: 25px; background:#2061a0 url('../img/common/icon_top.png') center no-repeat; cursor: pointer; display: block ; background-size:29px ; font-size: 0; margin:10px auto 0 auto;}
a.goTop:hover { background: #01a283 url('../img/common/icon_top.png') center no-repeat; }
@media all and (max-width:1400px){
#quick{display:none;}
}
@media all and (max-width:1660px){
/* .header h1.topLogo { width:var(--logo-width) } */
}
@media all and (max-width:1600px) {
/* .topNavWrap #topNav { width: 700px; } */
.topNavWrap #topNav li ul li a { font-size:14px; }
.topNavWrap #topNav li h3 a br.br_on { display:block; }
}
@media all and (max-width:1460px){
/* .topNavWrap #topNav { width: 800px; } */
.topNavWrap #topNav li h3 a br.br_on2 { display:block; }
}
@media all and (max-width:1280px) {
/* .top-back, #topNav,.topNavWrap,.btmSearch,.main_content.sitemap {display: none;} */
.main_content.sitemap {display: none;}
}
@media all and (max-width:1100px) {
/* .top-back, #topNav,.topNavWrap,.btmSearch,.main_content.sitemap {display: none;} */
}
@media all and (max-width:1024px){ /* 1300px */
.header {padding: 0 2vw;}
/* .header{padding: 0 1.33%;}
.header .topIcon{right: 1.33%;} */
.topNavWrap #topNav{width: 850px;padding-left: 100px;}
html{width: 100%; overflow-x: hidden}
html,body{ min-height: 100vh;}
html,body{position:relative;}
/**************
mobile frame
****************/
#sb-site.top-padding {position: relative;box-shadow: -5px 0 25px 1px rgba(0,0,0,0.35)}
.header.home{background-color: #fff;}
button,
button:focus,
button:active{outline:0 !important;}
/****************
header
***************/
.top-back, #topNav,.topNavWrap,.btmSearch {display: none;}
/* .header{height: 60px;padding: 0;} */
/* #fixed-top,
.header .topSearch,
.header h1.topLogo a{height: 60px;}
.header h1.topLogo{width: 225px;position: absolute;float: none;left: 12px;right: 50px;}
.header h1.topLogo a{background-size:auto 50px ;background-position: left;} */
.header .topSearch{width: auto;right: 10px;}
.header .topSearch a.searchBtn{width: 40px;height: 40px;}
.header .topSearch a.searchBtn.close{}
.header .topSearch a.searchBtn.close::after{font-size: 16px;height: 40px;line-height:40px;text-align: center;width: 40px;color: #fff;}
body.fixed .header h1.topLogo a{/* background-size:auto 60px ;background-position: left; */}
.header .topIcon{display:none;}
.top_srch_box{height: 38px;top: 5px;padding-right: 40px;opacity: 0;width: 30px;}
.top_srch_box.open{opacity: 1;width: 160px;border-color: #333;}
.top_srch_box label{display:none;}
.top_srch_box input.top_srch_text{width:100px;padding:0 7px 0 13px;height:38px;line-height:38px;font-size: 15px;}
.top_srch_box input.top_srch_button{width: 38px;height: 38px;background-size:auto 16px}
.sb_open{display: block; width: var(--header-height); height: var(--header-height);cursor: pointer;background-repeat: no-repeat;background-position: center;font-size: 0;text-indent: -999em; /* background-color:var(--theme-color); background: var(--theme-color);*/ position: absolute; right: 0; top: 0; border-radius: 0rem;}
.sb_open.sb-toggle-left{display:none; float: left; margin-top: 10px; margin-left: 10px; background-image:url('../img/common/topSearch.png'); background-position:center; background-repeat:no-repeat;}
.sb_open.sb-toggle-right{/* float: right; margin-top: 10px; margin-right: 10px; */ background-image:url('../img/common/topMenu.png'); background-position:center; background-repeat:no-repeat;}
.footer {padding: 0;}
.footer .flt{padding-left: 0;background:none}
/*.foot_menu a{padding: 0 5px; font-size: 13px;}
.foot_menu a::before{display: none;}*/
.footer p.copy{font-size: 12px;}
.footer p.address{padding: 6px 0;font-size: 15px;}
.footer p.address span.last{position: relative;padding-left: 7px;margin-left:5px;}
.footer p.address span.last::before{height: 8px;top: 2px;left: 0;}
.foot_menu ul li a{font-size: 15px; line-height: 30px; padding: 0 15px; transform: skew(-0.1deg); font-weight: 400;}
.foot_copy h3{margin-bottom: 15px;}
.familySite{margin: 0 auto 35px;}
}
@media all and (max-width:450px){
.wrapper{/*padding-left: 0;padding-right: 0;*/}
}
/*========================================
03 - bbs
=============================================*/
/****************
01) 공통 리스트 폼
****************/
/*일반 리스트(썸네일 없음)*/
.notice_list ul li{float:left; width: calc(33.3% - 20px); margin-right: 30px;}
.notice_list ul li:nth-child(3n){margin-right: 0;}
.notice_list ul li:nth-child(n+4){margin-top: 30px;}
.notice_list ul li a{display:block; border: solid 1px #e5e5e5; border-radius:10px; padding: 40px; transition:0.3s;}
.notice_list ul li a span.ele_info{font-size: 15px; color: #888; display:block;}
.notice_list ul li a span.ele_info em{color: #000; display:inline-block; position: relative; padding-right: 15px; font-style:normal;}
.notice_list ul li a span.ele_info em:after{content:''; position: absolute; right: 6px; width: 1px; top: 3px; bottom: 3px; background-color: #ccc;}
.notice_list ul li a b{font-size: 22px; line-height: 1.5; display:block; margin-top: 32px; font-weight: 500; letter-spacing: -1px; overflow:hidden; text-overflow:ellipsis; white-space: normal; height: 3em; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.notice_list ul li a span.btn{display:inline-block; margin-top: 90px; font-size: 14px; letter-spacing: -.5px; padding-bottom: 5px; border-bottom: solid 1px #e9e8e8; padding-right: 24px; transition:0.3s; position: relative;}
.notice_list ul li a span.btn:after{content:''; position: absolute; bottom: -1px; height: 1px; left: 0; right: 0; background-color: #000; width: 0; transition:0.3s;}
.notice_list ul li a:hover span.btn{color: #0c4781 !important;}
.notice_list ul li a:hover span.btn:after{width: 100%; background-color: #0c4781 !important;}
/*썸네일 리스트*/
.thumb_list ul li{width: calc(33.3% - 26.66px); margin-right: 40px;}
.thumb_list ul li:nth-child(n+4){margin-top: 40px;}
.thumb_list ul li a{padding: 0; overflow:hidden; border-radius:10px;}
.thumb_list ul li a span.img_area{display:block; height: 0; padding-bottom: 52%; background-size:cover; background-position:center;}
.thumb_list ul li a span.img_area.no_img{background-image:url('../img/common/no_img.png'); background-size:60%; background-position:center; background-repeat:no-repeat; background-color:#f0f0f0;}
.thumb_list ul li a span.txt_area{padding: 27px 30px 30px 30px; display:block;}
.thumb_list ul li a span.txt_area b{font-size: 18px; line-height: 1.3; height: 2.6em; margin-top: 0;}
.thumb_list ul li a span.txt_area b.single_line{height: auto; display:block; -webkit-line-clamp: 1; white-space:nowrap;}
.thumb_list ul li a span.txt_area span.ele_info{margin-top: 10px; font-size: 16px; color: #555; line-height: 1.3; overflow:hidden; text-overflow:ellipsis; white-space: normal; height: 2.6em; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.thumb_list ul li a span.txt_area span.btn{margin-top: 40px;}
.thumb_list ul li a span.txt_area span.date{display:block; font-size: 14px; margin-top: 15px; color: #666;}
.thumb_list ul li a:hover {padding: 0px; overflow:hidden;}
/*링크 없음(콘텐츠 준비중)*/
.notice_list ul li a span.txt_area span.btn.no_link{color: #888; border-color:#fff;}
.notice_list ul li a span.txt_area span.btn.no_link:after{display:none;}
/****************
02) 공통 view 폼
****************/
.seeker/*검색*/{text-align:center;/* margin:0 auto 20px; */background:#f9f9f9;padding:15px 0;border:solid 1px #eee;margin-top: 40px;}
.seeker2/*검색*/{text-align:center;/* margin:0 auto 20px; */background:#f9f9f9;padding:15px 0;border:solid 1px #eee;margin-top: 40px; border-radius:5px; }
.viewpage{ /*border-bottom: solid 1px #ccc;*/ }
/*타이틀영역*/
.viewpage .ttl_area{padding: 35px 10px; /*border-top: solid 1px #000;*/border-bottom: solid 1px #e5e5e5; text-align: center;}
.viewpage .ttl_area h4{font-size: 26px; font-weight: 500; letter-spacing: -1px; line-height: 1.3;}
.viewpage .ttl_area em{display:block; margin-top: 20px; font-size: 16px; color: #555; font-style:normal;}
/*타이틀영역 : 짧은 타이틀*/
.viewpage .ttl_area.simple{padding: 40px 0;}
.viewpage .ttl_area.simple h4{font-size: 30px; font-weight: 600;}
.viewpage .ttl_area.simple em{margin-top: 15px;}
.viewpage .ttl_area.simple em.status{transform: skew(-0.1deg); font-weight: 400; margin-top: 0; font-size: 14px; display:inline-block; padding: 5px 10px; background-color: #e8e8e8; color: #555; margin-bottom: 15px; border-radius: 99px;}
.viewpage .ttl_area.simple em.status.on{background-color: #0079C2; color: #fff; border-radius: 99px;}
.viewpage .ttl_area.simple em.status.off{background-color: #f49c1f; color: #fff; border-radius: 99px;}
/*콘텐츠영역*/
.viewpage .con_area{padding: 40px; font-size: 18px; line-height: 1.4; min-height: 200px;}
.viewpage .con_area img{margin-bottom: 30px; max-width: 100%;}
/*단일이미지영역*/
.viewpage .img_area{text-align: center;padding-top: 50px;}
.viewpage .img_area img{max-width: 100%;}
/*첨부파일영역*/
.viewpage .file_area{border-top: solid 1px #e5e5e5; padding: 30px 40px;}
.viewpage .file_area em{display:block; float:left; width: 100px; font-size: 16px; color: #555; font-style:normal;}
.viewpage .file_area p.file_link{float:left; width: calc(100% - 120px);font-size: 16px; padding-left: 20px; background: url('../img/common/icon_file.png') no-repeat left center; }
.viewpage .file_area p.file_link a{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; line-height: 1em;}
.viewpage .file_area p.file_link a:hover{text-decoration:underline;}
/*하단 버튼*/
.btm_btnset{margin-top: 50px; position: relative; min-height:50px;}
.btm_btnset .center{position: absolute; left: 50%; transform:translateX(-50%); text-align: center; top: 0; width: auto;}
.btm_btnset .center a{display:inline-block; line-height: 50px; height: 50px; padding: 0 70px; box-sizing:border-box; border: solid 1px #ccc; font-size: 18px; color: #888; margin-right: 8px; transition:0.3s;}
.btm_btnset .center a:last-child{margin-right: 0;}
.btm_btnset .center a.on,
.btm_btnset .center a:hover{background-color: #0c4781; border-color:#0c4781; color: #fff;}
.btm_btnset .right{float:right;}
.btm_btnset .right a{display:inline-block; line-height: 50px; height: 50px; padding: 0 30px; box-sizing:border-box; border: solid 1px #ccc; font-size: 18px; color: #888; margin-right: 5px; transition:0.3s;}
.btm_btnset .right a:last-child{margin-right: 0;}
/*view 테이블*/
h4.table_ttl{font-size: 22px; font-weight: 600; letter-spacing: -.5px; margin-top: 50px; margin-bottom: 20px; line-height: 1;}
table.view_table{border-top: solid 1px #000;}
table.view_table tr th,
table.view_table tr td{padding: 20px 10px; font-size: 18px; border-bottom: solid 1px #e5e5e5; line-height: 1.3;}
table.view_table tr th{text-align: left; font-weight: 500;}
table.view_table tr th.lc{vertical-align: top;}
/*view 테이블 type gray*/
table.view_table.type_gray tr th,
table.view_table.type_gray tr td{padding: 20px 15px;}
table.view_table.type_gray{border-top: 0 !important;}
table.view_table.type_gray tr th{background-color: #f8f8f8;}
table.view_table.type_gray.single{border-top: solid 2px #000 !important;}
/*지도 api*/
.viewpage .map_area{display:block; margin-top: 30px; background-color: #f2f2f2; color: #888; text-align: center; font-size: 0;}
.viewpage .map_area #map{width:100%;display:inline-block;height:350px;}
/****************
03) 공통 list_btm
****************/
.list_btm{margin-top: 50px; position: relative;}
/* 글쓰기 */
.list_btm .btns{position: absolute; right: 0; top: 0;}
.list_btm .btns a{display:inline-block; line-height: 50px; height: 50px; padding: 0 30px; box-sizing:border-box; border: solid 1px #ccc; font-size: 18px; color: #888; transition:0.3s;}
.list_btm .btns a:hover{background-color: #268eef; border-color:#268eef; color: #fff;}
/* 페이징 */
.list_pager{overflow:hidden;text-align:center;}
.list_pager a{display:inline-block;min-width:30px;text-align:center;padding:0 7px; position:relative;line-height:30px;height:30px; background-color:transparent;color:#666;font-size:13px;margin:0 5px;transition:all .25s ease-out; border-radius:15px;}
.list_pager a::after,.list_pager a::before{content:'';display:block;position:absolute}
.list_pager a:hover{background-color:#ddd;}
.list_pager a.present{color:#fff;background-color:#268eef;}
.list_pager a.page_first,.list_pager a.page_prev,.list_pager a.page_next,.list_pager a.page_last{text-indent:-999em}
.list_pager a.page_first::before,.list_pager a.page_prev::before,.list_pager a.page_next::before,.list_pager a.page_last::before{border-style:solid;border-color:#777;border-width:0 0 2px 2px;left:37%;transform:rotate(-135deg);top:40%;padding:2px}
.list_pager a.page_last::before{left:25%}
.list_pager a.page_first::before{border-width:2px 2px 0 0;left:55%}
.list_pager a.page_prev::before{border-width:2px 2px 0 0;left:48%}
.list_pager a.page_first::after{width:8px; left:2px;height:9px;border-right:solid 2px #777;top:11px}
.list_pager a.page_last::after{width: 8px; right: 2px; height: 9px; border-left: solid 2px #777; top: 11px;}
.list_pager a.page_first:hover::after,.list_pager a.page_last:hover::after,.list_pager a.page_first:hover::before,.list_pager a.page_prev:hover::before,.list_pager a.page_next:hover::before,.list_pager a.page_last:hover::before{border-color:#fff}
/****************
04) 프로그램_list
****************/
.program_list ul li{float:left; width: calc(33.3% - 20px); margin-right: 30px;}
.program_list ul li:nth-child(3n){margin-right: 0;}
.program_list ul li:nth-child(n+4){margin-top: 30px;}
.program_list ul li a{display:block; border: solid 1px #e5e5e5; padding: 40px; transition:0.3s;}
.program_list ul li a span.ele_info{font-size: 15px; color: #888; display:block;}
.program_list ul li a span.ele_info em{color: #000; display:inline-block; position: relative; padding-right: 15px; font-style:normal;}
.program_list ul li a span.ele_info em:after{content:''; position: absolute; right: 6px; width: 1px; top: 3px; bottom: 3px; background-color: #ccc;}
.program_list ul li a b{font-size: 22px; line-height: 1.5; display:block; margin-top: 25px; font-weight: 500; letter-spacing: -1px; overflow:hidden; text-overflow:ellipsis; white-space: nowrap;}
.program_list ul li a span.con{display:block; margin-top: 10px; font-size: 15px; letter-spacing: -.5px; color: #555; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.program_list ul li a span.btn{display:inline-block; margin-top: 50px; font-size: 14px; letter-spacing: -.5px; padding-bottom: 5px; border-bottom: solid 1px #000; padding-right: 24px; transition:0.3s; position: relative;}
.program_list ul li a span.btn:after{content:''; position: absolute; bottom: -1px; height: 1px; left: 0; right: 0; background-color: #000; width: 0; transition:0.3s;}
.program_list ul li a span.vlnt_con{display:block; margin-top: 15px; font-size: 15px; letter-spacing: -.5px; color: #555; line-height: 1.5;}
.program_list ul li a span.vlnt_con b{font-size: 15px; display:inline;}
.program_list ul li a:hover span.btn{color: #2093ff;}
.program_list ul li a:hover span.btn:after{width: 100%; background-color: #2093ff;}
/****************
05) Form 테이블
****************/
h3.form_ttl{font-size: 35px; font-weight: 400; letter-spacing: -2px; text-align: center;}
h3.form_ttl b{font-weight: 700;}
table.form_table{border-top: solid 2px #000;}
table.form_table tr th,
table.form_table tr td{padding: 16px 10px; font-size: 18px; border-bottom: solid 1px #e5e5e5; line-height: 1.3;}
table.form_table tr th{text-align: left; font-weight: 500;}
table.form_table tr th:before{content:''; display:inline-block; vertical-align: middle; width: 8px; height: 8px; background-color: #ddd; border-radius:100%; margin-right: 10px;}
table.form_table tr th.lc{vertical-align: top;}
table.form_table tr th span.strong{color: #2089e8; margin-left: 5px;}
table.form_table input[type="text"]{border: 0; padding: 10px; line-height: 1.3; background-color: #f0f0f0; font-size: 16px; display:inline-block;}
table.form_table input[type="text"]::placeholder{color: #aaa;}
/*노멀인풋*/
table.form_table input.input_nm{width: calc(100% - 20px); width: -webkit-calc(100% - 20px); max-width:200px}
table.form_table input.input_nm.short{max-width:100px}
/*노멀인풋 + 단위*/
table.form_table span.input_unit{position: relative; background-color: #f0f0f0; padding-right: 50px; display:inline-block;}
table.form_table span.input_unit em.unit{position: absolute; right: 10px; text-align: right; line-height: 40px; font-style:normal; color: #888;}
/*체크박스/라디오*/
table.form_table span.form_chk{font-size: 16px; margin-right: 20px;}
table.form_table span.form_chk:last-child{margin-right: 0;}
table.form_table span.form_chk input{margin-right: 3px;}
table.form_table span.form_chk input[type="text"]{margin-right: 0px; margin-left: 5px;}
/*체크박스/라디오가 한줄씩일때*/
table.form_table .form_chk_col span.form_chk{line-height: 40px; display:block;}
/*셀렉박스*/
table.form_table span.form_slct{font-size: 16px; margin-right: 15px;}
table.form_table span.form_slct:last-child{margin-right: 0;}
table.form_table span.form_slct select{margin-right: 8px; padding: 3px; font-size: 16px;}
table.form_table span.form_slct.normal{margin-right: 5px;}
table.form_table span.form_slct.normal:last-child{margin-right: 0;}
table.form_table span.form_slct.normal select{margin:0; width: 100%; max-width:250px}
table.form_table span.form_slct_mlty_wrap{display:block;}
table.form_table span.form_slct.mlty{margin-right: 5px; display:block; float:left; width: 100%; max-width:140px;}
table.form_table span.form_slct.mlty:last-child{margin-right: 0;}
table.form_table span.form_slct.mlty select{margin:0; width: 100%;}
/*전화번호*/
table.form_table span.form_call{overflow:hidden;}
table.form_table span.form_call .form_call_wrap{display:block; float:left;}
table.form_table span.form_call .form_call_wrap:after{content:''; display:inline-block; vertical-align: middle; width: 10px; height: 1px; background-color: #ccc; margin: 0 5px;}
table.form_table span.form_call .form_call_wrap:last-child:after{display:none;}
table.form_table span.form_call .form_call_wrap input{width: calc(100% - 20px); width: -webkit-calc(100% - 20px); max-width:50px; text-align: center;}
/*주소*/
table.form_table span.form_adrs{display:block;}
table.form_table span.form_adrs input{width: calc(100% - 20px); width: -webkit-calc(100% - 20px); max-width:430px;}
table.form_table span.form_adrs .clearfix{display:block; margin-bottom: 10px; width: 100%; max-width:450px;}
table.form_table span.form_adrs .clearfix input{float:left; width: calc(100% - 110px); width: -webkit-calc(100% - 110px);}
table.form_table span.form_adrs .clearfix a{display:block; float:left; font-size: 16px; color: #fff; background-color: #333; margin-left: 10px; width: 80px; text-align: center; padding: 10px 0;}
/*첨부파일*/
table.form_table input[type="file"]{border: 0; padding: 10px; line-height: 1.3; background-color: #f0f0f0; font-size: 16px; width: calc(100% - 20px); width: -webkit-calc(100% - 20px); max-width:400px}
table.form_table .file_viewer{margin-top: 10px; overflow:hidden;}
table.form_table .file_viewer input.inputFiled{float:left;}
table.form_table .file_viewer span.del{float:left; margin-top: 10px; margin-left: 10px;}
/*textarea*/
table.form_table textarea{display:block; border: 0; padding: 10px; line-height: 1.3; background-color: #f0f0f0; font-size: 16px; width: calc(100% - 20px); width: -webkit-calc(100% - 20px);}
/*날짜와 시간 함께 선택*/
table.form_table span.day_with_time span.day_with_time_ele,
table.form_table span.day_with_time span.day_with_time_sepa{float:left;}
table.form_table span.day_with_time span.day_with_time_sepa{line-height: 40px; margin: 0 10px;}
/*증명사진 등록*/
.idpic{padding: 30px 0; text-align: center; background-color: #f8f8f8; margin-top: 40px;}
.idpic input{display:none;}
.idpic label{display:inline-block; width: 100%; max-width:150px; height: 180px; border: solid 1px #e5e5e5; background-size:cover; background-position:center; box-sizing:border-box; position: relative; font-size: 0; background-color: #fff; }
.idpic label p.idpic_txt{display:block; font-size: 14px; color: #555; text-align: center; margin-top: 55px; line-height: 1.3;}
.idpic label p.idpic_txt b{display:block; font-size: 20px; color: #222; font-weight: 500; margin-bottom: 10px;}
.idpic label .uploadRlt{width: 100%; height: 100%; display:block; position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); background-size:cover; background-position:center; background-repeat:no-repeat;font-size: 0;}
/*충남장애인체육대회 신청서*/
table.form_table.contest{margin-top: 40px;}
table.form_table.contest tr th{background-color: #f8f8f8; border-right: solid 1px #e5e5e5;}
table.form_table.contest tr th:before{display:none;}
table.form_table.contest tr th,
table.form_table.contest tr td{padding: 16px 15px; font-size: 16px;}
table.form_table.contest tr th.center,
table.form_table.contest tr td.center{text-align: center;}
table.form_table.contest tr th.bl,
table.form_table.contest tr td.bl{border-left: solid 1px #e5e5e5;}
table.form_table.contest tr th.brx,
table.form_table.contest tr td.brx{border-right: 0;}
table.form_table.contest tr th.blx,
table.form_table.contest tr td.blx{border-right: 0;}
table.form_table.contest span.m_th{display:none;}
table.form_table.contest span.sm_ttl{display:inline-block; font-size: 14px; font-weight: 400; margin-right: 5px; margin-left: 10px;}
table.form_table.contest span.sm_ttl:first-child{margin-left: 0;}
/****************
06) 신청완료
****************/
.complete{text-align: center;}
.complete h4{font-size: 35px; font-weight: 500; letter-spacing: -1px; padding-top: 90px; background-image: url('../img/content/complete_icon.png'); background-position:center top; background-repeat:no-repeat; letter-spacing: -1.5px;}
.complete P{font-size:18px; line-height: 1.4; letter-spacing: -.5px; margin-top: 30px;}
/****************
99) 반응형
****************/
@media all and (max-width:815px) {
.list_pager {margin-top: 30px; margin-bottom: 40px;}
table.form_table .form_chk_col span.form_chk{line-height: 30px;}
table.form_table span.form_chk input[type="text"]{margin-left: 0;}
table.form_table input.input_nm.short{max-width:80px; font-size: 14px;}
table.form_table span.form_slct{font-size: 14px; margin-right: 10px;}
table.form_table span.day_with_time span.day_with_time_ele{margin-bottom: 5px;}
table.form_table span.day_with_time span.day_with_time_sepa{display:block; margin: 0; width: 100%; text-align: center; line-height: 20px;}
/*증명사진*/
.idpic{margin-top: 20px; padding: 20px 0;}
/*충남장애인체육대회 신청*/
table.form_table.contest{margin-top: 20px;}
table.form_table.contest tr th, table.form_table.contest tr td{padding: 8px 0; font-size: 14px;}
table.form_table.contest tr th{background-color: #fff; border-right: 0; padding-bottom: 0; margin-bottom: 0; padding-top: 10px;}
table.form_table.contest tr td{padding-bottom: 10px;}
table.form_table.contest tr th.bl, table.form_table.contest tr td.bl{border-left: 0;}
table.form_table.contest tr th.m_x,
table.form_table.contest tr td.m_x{display:none;}
table.form_table.contest span.m_th{display:block; text-align: left; font-size: 14px; font-weight: 500; margin-bottom: 5px; margin-left: 0 !important;}
table.form_table.contest span.input_unit{width: calc(100% - 50px);}
}
@media all and (max-width:600px) {
.list_pager{margin-top: 20px; margin-bottom: 30px;}
.list_pager a{padding: 0 4px; line-height: 24px; height: 24px;}
.list_pager a.page_first,
.list_pager a.page_last{padding: 0 6px;}
.list_pager a.page_first::after,
.list_pager a.page_last::after{height: 8px; top: 8px;}
}
/* custom selectbox */
.custom-select{ position: relative;}
.custom-select select{ display: none;}
.select-selected{ background-color: #fff; }
.select-selected:after{ position: absolute; content: ""; top: 14px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: #000 transparent transparent transparent; }
.select-selected.select-arrow-active:after{ border-color: transparent transparent #000 transparent; top: 7px; }
.select-items div,
.select-selected{ color: #555; padding: 8px 16px; border: 1px solid transparent; border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; cursor: pointer; }
.select-items{ position: absolute; background-color: #fff; top: 100%; left: 0; right: 0; z-index: 99; }
.select-hide{ display: none; }
.select-items div:hover, .same-as-selected{ background-color: rgba(0, 0, 0, 0.1); }
/* 검색툴 */
.list_search{float:right; width:320px; font-size: 15px; position: absolute; right: 0; top: 0; border: solid 1px #e5e5e5;}
.list_search .custom-select{width: 100px; float:left; line-height: 45px; height: 45px;}
.list_search .select-selected{border: 0; font-size: 15px;}
.list_search .select-selected:after{top: 20px; border: 5px solid transparent; border-color:#000 transparent transparent transparent;}
.list_search .select-selected.select-arrow-active:after{top: 15px; border-color:transparent transparent #000 transparent;}
.list_search input{float:left; padding: 0; border: 0; font-size: 15px; line-height: 45px; width: calc(100% - 165px); padding-left: 10px; height: 45px;}
.list_search input::placeholder{font-size: 15px; color: #b8b8b8;}
.list_search a.btn_search{display:block; float:right; width: 45px; height: 45px; background: url('../img/common/ico_search.gif') no-repeat center; background-size:16px ;font-size: 0;}
.list_search .select-items{border: solid 1px #e5e5e5; border-top: 0; margin-left: -1px;}
.list_search .select-items div{padding: 15px 16px;}
.list_search select{float:left; width: 110px; padding: 0 10px !important; line-height: 45px; height: 45px !important; border: 0; position: relative;}
.list_search2{float:right; width:320px; font-size: 15px; position: absolute; right: 0; top: 0; border: solid 1px #e5e5e5;}
.list_search2 .custom-select{width: 100px; float:left; line-height: 45px; height: 45px;}
.list_search2 .select-selected{border: 0; font-size: 15px;}
.list_search2 .select-selected:after{top: 20px; border: 5px solid transparent; border-color:#000 transparent transparent transparent;}
.list_search2 .select-selected.select-arrow-active:after{top: 15px; border-color:transparent transparent #000 transparent;}
.list_search2 input{float:left; padding: 0; border: 0; font-size: 15px; line-height: 45px; width: calc(100% - 165px); padding-left: 10px; height: 45px;}
.list_search2 input::placeholder{font-size: 15px; color: #b8b8b8;}
.list_search2 a.btn_search{display:block; float:right; width: 45px; height: 45px; background: url('../img/common/ico_search.gif') no-repeat center; background-size:16px ;font-size: 0;}
.list_search2 .select-items{border: solid 1px #e5e5e5; border-top: 0; margin-left: -1px;}
.list_search2 .select-items div{padding: 15px 16px;}
.list_search2 select{float:left; width: 110px; padding: 0 10px !important; line-height: 45px; height: 45px !important; border: 0; position: relative;}
@media all and (max-width:500px) {
.list_search .select-selected{font-size: 13px; padding: 13.5px 10px;}
.list_search .select-items div{font-size: 13px; padding: 13.5px 10px;}
.list_search input{font-size: 13px; line-height: 40px;}
.list_search a{width: 40px; height: 40px;}
.list_search select{line-height: 40px; height: 40px;}
.list_search2 .select-selected{font-size: 13px; padding: 13.5px 10px;}
.list_search2 .select-items div{font-size: 13px; padding: 13.5px 10px;}
.list_search2 input{font-size: 13px; line-height: 40px;}
.list_search2 a{width: 40px; height: 40px;}
.list_search2 select{line-height: 40px; height: 40px;}
}
/* 하단 검색툴 wrap */
.btm_search{margin-top: 40px;}
.btm_search .list_search{float:none; position: static; width:100%; max-width:500px; margin: 0 auto; margin-bottom: 10px; background-color: #fff;}
.btm_search2{margin-top: 10px;}
.btm_search2 .list_search2{float:none; position: static; width:90%; max-width:500px; margin: 0 auto; margin-bottom: 10px; background-color: #fff;}
@media all and (max-width:1024px) {
/* 공통 리스트 폼*/
.notice_list ul li{width: 100%; margin-right: 0; margin-bottom: 20px;}
.notice_list ul li:nth-child(n+4){margin-top: 0;}
.notice_list ul li:last-child{margin-bottom: 0;}
.notice_list ul li a{padding: 25px;}
.notice_list ul li a span.ele_info{font-size: 14px;}
.notice_list ul li a b{font-size: 18px; margin-top: 20px;}
.notice_list ul li a span.btn{margin-top: 20px;}
.thumb_list ul li{margin-right: 10px; width: calc(50% - 5px); margin-bottom: 0; margin-top: 20px;}
.thumb_list ul li a{padding: 0;}
.thumb_list ul li a span.txt_area{padding: 15px;}
.thumb_list ul li a span.txt_area b{font-size: 15px;}
.thumb_list ul li a span.txt_area span.btn{margin-top: 20px;}
.thumb_list ul li:nth-child(3n){margin-right: 10px;}
.thumb_list ul li:nth-child(n+4){margin-top: 20px;}
.thumb_list ul li:first-child,
.thumb_list ul li:nth-child(2){margin-top: 0;}
.thumb_list ul li:nth-child(2n){margin-right: 0;}
.thumb_list ul li a span.txt_area span.ele_info{font-size: 14px; margin-top: 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.list_btm{margin-top: 30px;}
/*공통 view 폼*/
.viewpage .ttl_area{padding: 20px 10px;}
.viewpage .ttl_area h4{font-size: 20px;}
.viewpage .ttl_area em{font-size: 14px; margin-top: 10px;}
.viewpage .con_area{padding: 20px;}
.btm_btnset{margin-top: 20px;}
.btm_btnset .center{position: static; transform:none;}
.btm_btnset .center a{font-size: 16px; height: 45px; line-height: 45px; display:block; margin-right: 0; margin-bottom: 10px;}
.btm_btnset .center a:last-child{margin-bottom: 0;}
.btm_btnset .right{margin-top: 15px; text-align: right;}
.btm_btnset .right a{font-size: 15px; height: 40px; line-height: 40px; padding: 0 20px;}
.viewpage .ttl_area.simple{padding: 20px 10px;}
.viewpage .ttl_area.simple h4{font-size: 20px;}
.viewpage .ttl_area.simple em{font-size: 14px; margin-top: 10px;}
.viewpage .img_area{padding-top: 30px;}
h4.table_ttl{font-size: 18px; margin-top: 30px; margin-bottom: 15px;}
table.view_table{display:grid;}
table.view_table tr{display:block;}
table.view_table tr th,
table.view_table tr td{display:block; font-size: 15px; border-bottom: 0; padding: 0 10px;}
table.view_table tr th{margin-bottom: 5px; padding-top: 10px;}
table.view_table tr th:before{content:''; display:inline-block; width: 4px; height: 4px; background-color: #268eef; margin-right: 5px; vertical-align: middle;}
table.view_table tr td{border-bottom: solid 1px #e5e5e5; padding-bottom: 10px;}
table.view_table tr:last-child td{border-bottom: 0;}
table.view_table.type_gray tr th{background-color: transparent;}
table.view_table.type_gray tr th,
table.view_table.type_gray tr td{padding: 0 10px;}
table.view_table.type_gray tr th{margin-bottom: 5px; padding-top: 10px;}
table.view_table.type_gray tr td{padding-bottom: 10px;}
table.view_table.type_gray.single{border-bottom: solid 1px #ccc;}
.viewpage .map_area #map{height:200px;}
.viewpage .file_area{padding: 15px;}
.viewpage .file_area em{font-size: 14px; width: 60px;}
.viewpage .file_area p.file_link{font-size: 14px;}
.viewpage .ttl_area.simple em.status{margin-bottom: 5px;}
/* 프로그램 list */
.program_list ul li{width: 100%; margin-right: 0; margin-bottom: 20px;}
.program_list ul li:nth-child(n+4){margin-top: 0;}
.program_list ul li:last-child{margin-bottom: 0;}
.program_list ul li a{padding: 25px;}
.program_list ul li a span.ele_info{font-size: 14px;}
.program_list ul li a b{font-size: 18px; margin-top: 20px;}
.program_list ul li a span.btn{margin-top: 20px;}
.program_list ul li a span.con{margin-top: 5px;}
/*Form 테이블*/
h3.form_ttl{font-size: 25px; line-height: 1.3;}
table.form_table{display:block;}
table.form_table tr{display:block;}
table.form_table tr th,
table.form_table tr td{display:block; font-size: 15px; border-bottom: 0; padding: 0 10px;}
table.form_table tr th{margin-bottom: 8px; padding-top: 10px;}
table.form_table tr th:before{content:''; display:inline-block; width: 4px; height: 4px; background-color: #268eef; margin-right: 5px; vertical-align: middle;}
table.form_table tr td{border-bottom: solid 1px #e5e5e5; padding-bottom: 10px;}
table.form_table tr:last-child td{border-bottom: 0;}
table.form_table.type_gray tr th{background-color: transparent;}
table.form_table.type_gray tr th,
table.form_table.type_gray tr td{padding: 0 10px;}
table.form_table.type_gray tr th{margin-bottom: 5px; padding-top: 10px;}
table.form_table.type_gray tr td{padding-bottom: 10px;}
table.form_table tr th span.strong{margin-left: 2px;}
/* 폼 항목 */
table.form_table input.input_nm,
table.form_table span.form_slct.normal select,
table.form_table span.form_slct.mlty{max-width:inherit;}
table.form_table span.form_slct.mlty{margin-right: 0; margin-bottom: 5px;}
table.form_table span.form_slct.mlty:last-child{margin-bottom: 0;}
/*신청완료*/
.complete{padding-top: 20px;}
.complete h4{font-size: 22px; padding-top: 60px; background-size:50px;}
.complete p{font-size: 16px; margin-top: 20px;}
}
@media all and (max-width:768px) {
.btm_search{margin-top: 20px;}
.btm_search2{margin-top: 10px;}
.thumb_list ul li{margin-right: 10px; width: calc(100%); margin-bottom: 20px;}
h3.form_ttl{font-size: 20px; line-height: 1.3;}
h3.form_ttl b{display:block; font-size: 22px;}
.viewpage .img_area{padding-top: 20px;}
}
/*===========================================
06 - calendar
=============================================*/
@font-face {
font-family: 'fontawesome-selected';
src: url("../font/fontawesome-selected.eot");
src: url("../font/fontawesome-selected.eot?#iefix") format('embedded-opentype'), url("../font/fontawesome-selected.woff") format('woff'), url("../font/fontawesome-selected.ttf") format('truetype'), url("../font/fontawesome-selected.svg#fontawesome-selected") format('svg');
font-weight: normal;
font-style: normal;
}
.fc-calendar-container {
position: relative;
height: 400px;
width: 400px;
}
.fc-calendar {
width: 100%;
height: 100%;
}
.fc-calendar .fc-head {
height: 30px;
line-height: 30px;
background: #ccc;
color: #fff;
}
.fc-calendar .fc-body {
position: relative;
width: 100%;
height: 100%;
height: -moz-calc(100% - 30px);
height: -webkit-calc(100% - 30px);
height: calc(100% - 30px);
border: 1px solid #ddd;
}
.fc-calendar .fc-row {
width: 100%;
border-bottom: 1px solid #ddd;
}
.fc-four-rows .fc-row {
height: 25%;
}
.fc-five-rows .fc-row {
height: 20%;
}
.fc-six-rows .fc-row {
height: 16.66%;
height: -moz-calc(100%/6);
height: -webkit-calc(100%/6);
height: calc(100%/6);
}
.fc-calendar .fc-row > div,
.fc-calendar .fc-head > div {
float: left;
height: 100%;
width: 14.28%; /* 100% / 7 */
width: -moz-calc(100%/7);
width: -webkit-calc(100%/7);
width: calc(100%/7);
position: relative;
}
/* IE 9 is rounding up the calc it seems */
.ie9 .fc-calendar .fc-row > div,
.ie9 .fc-calendar .fc-head > div {
width: 14.2%;
}
.fc-calendar .fc-row > div {
border-right: 1px solid #ddd;
padding: 4px;
overflow: hidden;
position: relative;
}
.fc-calendar .fc-head > div {
text-align: center;
}
.fc-calendar .fc-row > div > span.fc-date {
position: absolute;
width: 30px;
height: 20px;
font-size: 20px;
line-height: 20px;
font-weight: 700;
color: #ddd;
text-shadow: 0 -1px 0 rgba(255,255,255,0.8);
bottom: 5px;
right: 5px;
text-align: right;
}
.fc-calendar .fc-row > div > span.fc-weekday {
padding-left: 5px;
display: none;
}
.fc-calendar .fc-row > div.fc-today {
background: #fff4c3;
}
.fc-calendar .fc-row > div.fc-out {
opacity: 0.6;
}
.fc-calendar .fc-row > div:last-child,
.fc-calendar .fc-head > div:last-child {
border-right: none;
}
.fc-calendar .fc-row:last-child {
border-bottom: none;
}
/*===========================================
09 - slidebars
=============================================*/
#sb-site, .sb-site-container, .sb-slidebar { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html { height: 100%; }
.sb-scroll-lock.sb-active:not(.sb-static) { overflow: hidden; }
#sb-site, .sb-site-container { width: 100%; position: relative; z-index: 1; background-color: #ffffff; }
.sb-slidebar { height: 100%; overflow-y: auto; position: fixed; top: 0; z-index: 0; display: none; -webkit-transform: translate(0px); }
.sb-left { left: 0; } .sb-right { right: 0; }
.sb-static .sb-slidebar,
.sb-slidebar.sb-static { position: absolute; }
.sb-slidebar.sb-active { display: block; }
.sb-style-overlay { z-index: 99999999; } .sb-momentum-scrolling { -webkit-overflow-scrolling: touch; } .sb-slidebar { width: 30%; } .sb-width-thin { width: 15%; } .sb-width-wide { width: 45%; }
.sb-slide, #sb-site, .sb-site-container, .sb-slidebar { -webkit-transition: -webkit-transform 400ms ease; -moz-transition: -moz-transform 400ms ease; -o-transition: -o-transform 400ms ease; transition: transform 400ms ease; -webkit-transition-property: -webkit-transform, left, right; -webkit-backface-visibility: hidden; }
.sb-hide { display: none; }
@media (max-width: 480px){
.sb-slidebar { width: 70%; } .sb-width-thin { width: 55%; } .sb-width-wide { width: 85%; }
}
@media (min-width: 481px){
.sb-slidebar { width: 55%; } .sb-width-thin { width: 40%; } .sb-width-wide { width: 70%; }
}
@media (min-width: 768px){
.sb-slidebar { width: 40%; } .sb-width-thin { width: 25%; } .sb-width-wide { width: 55%; }
}
@media (min-width: 992px){
.sb-slidebar { width: 30%; } .sb-width-thin { width: 15%; } .sb-width-wide { width: 45%; }
}
@media (min-width: 1200px){
.sb-slidebar { width: 20%; } .sb-width-thin { width: 5%; } .sb-width-wide { width: 35%; }
}
/* sns 풋터 영역 */
.footer_sns {margin-bottom:30px;}
.footer_sns ul li {display:inline-block; margin-right:10px;}
.footer_sns ul li a{display:inline-block; text-indent: -999em; border-radius:30px; width: 50px; height: 50px; background-repeat:no-repeat; background-position:center; background-color: transparent; background-size:100%;}
.footer_sns ul li a.band{background-image:url('../img/common/new_sns_icon04.png'); }
.footer_sns ul li a.facebook{background-image:url('../img/common/new_sns_icon01.png');}
.footer_sns ul li a.youtube{background-image:url('../img/common/new_sns_icon03.png');}
.footer_sns ul li a.instagram{background-image:url('../img/common/new_sns_icon02.png');}
/* 생활체육 - 찾아가는 생활체육서비스 영역 20220714 */
.new_service_wrap {width:1170px; margin:91px auto 91px;}
.new_service_wrap h2 {font-weight:800; font-size:35px; text-align:center;}
.new_service_wrap p {font-weight:400; font-size:25px; text-align:center; margin-top:45px; margin-bottom:90px;}
.new_service_wrap .new_service_content01 {margin-bottom:70px;}
.new_service_wrap .new_service_content01 img {display:block; margin:0 auto; max-width:100%; height:auto;}
.new_service_wrap .new_service_content01 .pc_service01_content {display:block;}
.new_service_wrap .new_service_content01 .m_service01_content {display:none;}
.new_service_content02 {background:#f8f8f8; padding:30px;}
.new_service_content02 ul {}
.new_service_content02 ul li {line-height:36px; font-weight:400; font-size:18px; position:relative;}
.new_service_content02 ul li:before {content:''; border:1px solid #119178; position:absolute; top:14px; left:-14px; width:4px; height:4px; background:#119178; border-radius: 4px;}
.new_service_content02 ul li span {color:#119178; font-size:20px; font-weight:800;}
.new_service_content02 ul li i {color:#0079c2; margin-left:11px; vertical-align: middle;}
.new_service_content02 ul li i a {display:block;}
.lifeSportsProg p.lifeSportsProg_ttl img {max-width:100%; height:auto; vertical-align: middle; margin-right: 2px; margin-top:-18px;}
.lifeSportsProg p.lifeSportsProg_ttl:before {display:none !important;}
@media all and (max-width: 1256px) {
.new_service_wrap {width:94%;}
}
@media all and (max-width:980px) {
.new_service_wrap h2 {font-size:32px;}
.new_service_wrap p {font-size:22px;}
}
@media all and (max-width:650px) {
.new_service_content02 ul li {word-break: break-all;}
.new_service_wrap .new_service_content01 .pc_service01_content {display:none;}
.new_service_wrap .new_service_content01 .m_service01_content {display:block; margin:0 auto; height:42vmin; object-fit:cover; width:100%;}
.new_service_wrap h2 {font-size:30px;}
.new_service_wrap p {font-size:20px;}
}
@media all and (max-width:480px) {
.new_service_wrap h2 {font-size:24px;}
.new_service_wrap p {font-size:18px;}
.new_service_content02 ul li {font-size:16px; transform: skew(-0.1deg); font-weight: 400;}
.new_service_content02 ul li span {font-size:16px; transform: skew(-0.1deg); font-weight: 900;}
.new_service_wrap p {margin-bottom:45px;}
.new_service_wrap .new_service_content01 {margin-bottom:45px;}
}
/* 퀵메뉴 리뉴얼 20220715 */
/****** 퀵메뉴 *****/
.quick_menu_wrap {position: fixed; right: 0; bottom:0; z-index: 200; text-align: right;}
.quick_menu_wrap.main {padding-bottom: 0rem;}
.quick_menu_wrap.sub {padding-top: 200px;}
.quick_menu_wrap .menu {}
.quick_menu_wrap .menu > li {margin-top: 2px;}
.quick_menu_wrap .menu li > .quick_on {background:#E7380D;}
.quick_menu_wrap .menu > li:first-of-type {margin-top: 0;}
.quick_menu_wrap .menu > li > a {transform: skew(-0.1deg); font-weight: 800; display: inline-flex; align-items: center; height: 56px; padding: 0 10px 0 10px; background-color: rgba(0,0,0,0.7); text-align: center; transition: all .25s linear; margin-right: -93px; border-radius:10px 0 0 10px; }
.quick_menu_wrap .menu > li > a .icon {width: 42px;}
.quick_menu_wrap .menu > li > a .icon > img {max-width:100%; height:auto; width:75px;}
.quick_menu_wrap .menu > li > a .txt {width: 90px; padding-left: 6px; color: #fff; text-align: center; font-size: 14px; letter-spacing: -0.05em; line-height: 1.3;}
.quick_menu_wrap .menu > li > a:hover,
.quick_menu_wrap .menu > li > a:focus {background-color:var(--menu-color); margin-right: 0;}
.quick_menu_wrap .btn_box {text-align: right; padding-right: 0; padding-top: 0;}
.quick_menu_wrap .btn_top_1 { width: 5rem; height: 5rem; /* border-radius: 50%; */background-color: rgba(0,0,0,0.8); color: var(--white);/* font-family: 'Roboto','Noto Sans Korean',sans-serif; */letter-spacing: 1px; font-weight: 800;/* font-size: 1rem; padding-top: 2px; */transition: all .25s ease; position:relative; display:none; display: flex; flex-direction: column; align-items: center; justify-content: center;} /*display: flex; flex-direction: column; align-items: center; justify-content: center;*/
.quick_menu_wrap .btn_top_1:hover,
.quick_menu_wrap .btn_top_1:focus {background-color: var(--menu-color);} /*background:rgba(0,0,0,1);*/
.quick_menu_wrap .btn_top_1 .btn_txt { margin-top:6px; }
.quick_menu_wrap .btn_top_1 i { position: absolute; top:9px; left: 50%; transform: translateX(-50%); transition: all .25s ease;}
/* .quick_menu_wrap .btn_top_1:hover i { transform: translate(-7px, -3px); } */
.quick_menu_wrap.seardb .menu > li > a .icon {width: 35px;}
.quick_menu_wrap.seardb .menu > li > a:hover,
.quick_menu_wrap.seardb .menu > li > a:focus {background-color: #ff6c00; margin-right: 0;}
@media all and (max-width:1024px){
.quick_menu_wrap {display: none;}
}
/* 공지시항 리뉴얼 슬라이드 영역 20220718 */
.section2 {position: relative; padding: 85px 0; height: 605px; background: #b3b3b3; }
/*.section2 {position: relative; padding: 85px 0; height: 605px;
background: #0079c2; /* Old browsers */
/* background: -moz-linear-gradient(-45deg, #00a2e5 30%, #62bb46 100%); /* FF3.6-15 */
/* background: -webkit-linear-gradient(-45deg, #00a2e5 30%,#62bb46 100%); /* Chrome10-25,Safari5.1-6 */
/* background: linear-gradient(135deg, #00a2e5 30%,#62bb46 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a2e5 ', endColorstr='#62bb46',GradientType=1 );} background-color: #232e42; background:#194f5c; */
.section2 .container {position: relative; height: 330px;}
section.section2 h2 {position: relative; padding-top: 40px; text-align: left; font-size: 25px; color: #fff; line-height: 1.2;}
section.section2 h2:before {position: absolute; top: 0; left: 0; width: 30px; height: 4px; background-color: #fff; content: "";}
section.section2 h2 strong {font-size: 30px; font-weight: 900;}
section.section2 h2 + p {line-height: 1.5; text-align: left; color:rgba(255,255,255,0.7); font-size:15px; transform: skew(-0.1deg); font-weight: 400;} /*color: #7d8693;*/
section.section2 .notice_main_btn_wrap {transition:all 0.4s; border: 2px solid rgba(255,255,255,0.2); width:80px; margin-top:20px; line-height:32px; height:35px; text-align:center; border-radius:20px;}
section.section2 .notice_main_btn_wrap:hover {background:#01a283; border:2px solid #01a283;}
section.section2 .notice_main_btn_wrap .more01 {font-size: 16px; font-weight: 400; font-weight: 300; position: relative; color:#fff; display:inline-block;}
section.section2 .notice_main_btn_wrap .more01:hover {color:#fff;}
/* section.section2 .notice_main_btn_wrap .more01:after {content: ''; left: 0; position: absolute; bottom: -8px; right: 0; background-color: #fff; height: 1px; transition: 0.3s;} */
.section2 .prev, .section2 .next {padding:7px 10px; position: absolute;bottom: 0;left: 0;display: inline-block;width: 44px;height: 44px;/* line-height: 42px; */text-align: center;font-size: 22px;color: #fff;border:1px solid rgba(255,255,255,0.2);transition: all 0.25s ease;-webkit-transition: all 0.25s ease;} /*#586072*/
.section2 .next {left: 50px;}
.section2 .prev:hover, .section2 .next:hover { background-color: #F14E47; border: 1px solid #F14E47; } /*컬러변경*/
.section2 .outer {position: absolute; top: 85px; right: 0; width: 1290px; height: 330px;}
.section2 .outer:after {position: absolute; top: 0; right: 0; width: 382px; height: 435px; content: ""; background: rgba(9,70,129,0.5); display:none; } /*background-color: rgba(35, 46, 66, 0.85);*/ /*rgba(5,54,66,0.85);*/
.section2 .outer .list > li {float: left; width:444px !important;}
.section2 .outer .list > li { background:#fff; }
.section2 .outer .list > li .img_area { background:#fff; height: 60px; overflow: hidden; display: block; height: 0; padding-bottom: 57.4%; position: relative; overflow: hidden;}
.section2 .outer .list li a {cursor:pointer !important;}
.section2 .outer .list li a:hover .img_area .img {transform: scale(1.1);}
.section2 .outer .list > li .img_area .img {display: block; width: 100%; height: 100%; position: absolute; background-color: #f8f8f8; background-size: cover; background-position: center; background-repeat: no-repeat;
transition: 0.3s;}
.section2 .outer li .content_box { height: 88px; color: #fff; background: #fff; padding: 20px; }
.section2 .outer li .content_box p.tit_txt {color: #333; font-weight: 500; position: relative; }
.section2 .outer li .content_box .con_txt {transform: skew(-0.1deg); font-weight: 400; font-size: 15px; display: block; margin-top: 30px; font-style: normal; color:#333;}
.section2 .outer li .content_box p.tit_txt span {font-size: 20px; font-weight: 600; display: block; word-break:break-all; /* line-height: 1.4; */
letter-spacing: -1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
/* height: 2.6em; */
word-wrap: break-word;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-align:center;
}
.section2 .container {padding-left:0px;}
/*.section2 .outer .list > li + li {margin-left: 10px;}*/
.section2 .outer .list > li > a {position: relative; display: block; width:444px; height: 330px;}
.section2 .outer .list > li > a > img {max-width: 100%; transition: all .5s ease; -webkit-transition: all .5s ease;}
.section2 .outer .list > li > a > p {position: relative; width: 100%; height: 110px; text-align: center; font-size: 2rem; color: #fff; background-color: #000;}
.section2 .outer .list > li > a > p > span {position: absolute; top: 50%; left: 0; width: 100%; line-height: 1.3; font-size:18px; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
.section2 .outer .list .up {position: absolute; bottom: 0; left: 0; padding: 90px 45px; width: 100%; height: 0; text-align: center; color: #fff; background-color: rgba(241,78,71,0.95); opacity: 0; overflow: hidden; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;}
.section2 .outer .list .up strong {position: relative; display: block; margin-bottom: 30px; padding-bottom: 30px; font-size: 2.2rem;}
.section2 .outer .list .up strong:before {position: absolute; bottom: 0; left: 50%; margin-left: -15px; width: 30px; height: 2px; background-color: #fff; content: "";}
.section2 .outer .list .up p {margin-bottom: 50px; height: 70px; line-height: 1.5; overflow: hidden;}
.section2 .outer .list .up span {display: inline-block; width: 160px; height: 50px; line-height: 48px; border: 1px solid rgba(255,255,255,0.5);}
.section2 .outer .list > li > a:hover > img {transform: scale(1.1); -webkit-transform: scale(1.1);}
.section2 .outer .list > li > a:hover .up {height: 100%; opacity: 1;}
.bx-wrapper {max-width:1300px !important;}
.bx-wrapper .bx-viewport {height:435px !important;}
.section2 .container {width:1400px;}
@media screen and (max-width: 1700px) {
/* CENTERS AND BUSINESS GROUP */
.section2 .container {padding-right: 100px; height: 625px;}
#contents > section.section2 h2 strong br,
#contents > section.section2 h2 + p br {display: none;}
.section2 .prev,
.section2 .next {top: 95px; right: 5px; bottom: auto; left: auto;}
.section2 .prev {right: 56px;}
}
@media screen and (max-width: 1670px) {
.section2 .container {width:100%;}
.section2 {padding: 40px 15px 50px; height: 710px;}
#contents > section.section2 h2 {padding-top: 20px;}
#contents > section.section2 h2:before {width: 22px; height: 3px;}
section.section2 h2 {position: relative; padding-top: 40px; text-align: left; font-size: 1.2rem; color: #fff; line-height: 1.2;}
section.section2 h2 strong {font-size: 1.7rem; font-weight: 900;}
section.section2 h2 + p {line-height: 1.5; text-align: left; font-size:13px; /*color: #7d8693;*/}
.section2 .prev,
.section2 .next {right: 0;}
.section2 .prev {right: 50px;}
.section2 .outer {top: 228px;}
}
@media screen and (max-width:980px){
section.section2 .more01 {font-size:16px;}
}
@media screen and (max-width: 768px) {
/* CENTERS AND BUSINESS GROUP */
.section2 {height: 710px;}
.section2 .outer {top: 230px; margin-right: -805px;}
.bx-wrapper {max-width:100% !important;}
}
@media all and (max-width:500px) {
.section2 .container {width:auto !important;}
.section2 .outer .list > li {width:315px !important;}
.section2 .outer .list > li > a {width:315px;}
.section2 .outer .list > li .img_area {padding-bottom:82.4%;}
.section2 .outer li .content_box p.tit_txt span {font-size:18px;}
.section2 .outer li .content_box .con_txt {font-size:14px;}
.section2 .outer li .content_box {height:160px;}
.section2 .outer {margin-right: -611px;}
}
/* 사진갤러리, 동영상갤러리 리뉴얼 영역 20220718 */
/* DJU NEWS */
.section1 {padding: 20px 20px 20px; height: 438px; color: #fff; background-color: #fff; border-radius:15px; overflow:hidden;}
.section1 .tab01 {position: relative;}
.section1 .tab01 > li > a {width:40%; position: relative; float: left; display: inline-block; padding: 0px 10px 15px; text-align: center; font-size: 18px; font-weight: 400; color: #000; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;}
.section1 .tab01 > li > a:hover { background:#eef7ff; } /*미반영*/
.section1 .tab01 > li > a:before {position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background-color: #e4e5ee; content: "";}
.section1 .tab01 > li > a:after {position: absolute; bottom: 0; left: 0; width: 0; height: 4px; background-color: #0079C2; content: ""; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;} /*컬러변경*/
.section1 .tab-info {position: absolute; top:60px; left: 0; width: 100%; height: 0; opacity: 0; visibility: hidden; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;}
.section1 .list li {position: relative; height: 220px; overflow: hidden; width:915px !important;}
.section1 .list {overflow:hidden;}
.section1 .list li a {position:relative; overflow:hidden;}
.section1 .list li .img_area {width:380px; overflow:hidden;}
.section1 .list li .img_area img {width:100%; height:100%; object-fit:cover; overflow:hidden;}
.section1 .list li .gallery_content01 {position:absolute; top:22px; left:403px;}
.section1 .list li .gallery_tit_txt {font-weight: 800; font-size: 25px; margin-top: 10px; width:500px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color:#333;}
.section1 .list li .date_txt {font-size: 15px; transform: skew(-0.1deg); font-weight: 400; color:#333;}
.section1 .list li .gallery_btn01 {position:absolute; top:94px; left:403px;}
.section1 .list li .date em {display: block; margin-top: 12px; font-size: 3.2rem; font-weight: 700;}
.section1 .list li .subj {margin-bottom: 15px; font-size: 18px; font-weight: 600; color: #323232;}
.section1 .list li .cont {margin-bottom: 15px; max-height: 50px; line-height: 1.6; color: #767676; overflow: hidden;}
.section1 .list li .more {position: relative; display: inline-block; padding-right: 15px; color: #727272; transition:all 0.3s; transform: skew(-0.1deg); font-weight: 400;}
.section1 .list li .more:before {position: absolute; top: 0; right: 0; font-family: xeicon; content: "\e914";}
.section1 .list li .more:hover { color:#0079C2; }
.section1 .tab01 > li > a {padding:10px;}
.section1 .tab01 > li.active > a {color: #0079C2; font-weight:600; padding:10px;} /*컬러변경*/
.section1 .tab01 > li.active > a:after {width: 100%;}
.section1 .tab01 > li.active .tab-info { margin-top:0px; opacity: 1; visibility: visible; transition: all 0.25s ease; -webkit-transition: all 0.25s ease; } /*height: 140px;*/
.section1 .tab01 > li.active .tab-info .more_wrap {max-width:911px; text-align:right;}
.section1 .tab01 > li.active .tab-info .more_wrap .more02 { float: right; transition: all 0.4s; font-size: 16px; font-weight: 400; font-weight: 300; position: relative; color: #333; margin-top: 0px; margin-bottom: 15px; display: block; width: 70px; height: 30px; background: #eee; line-height: 30px; text-align: center; border-radius: 20px; color: #000;}
/* .section1 .tab01 > li.active .tab-info .more_wrap .more02:after {content: ''; left: 0; position: absolute; bottom: -5px; right: 0; background-color: #333; height: 1px; transition: 0.3s;} */
.section1 .tab01 > li.active .tab-info .more_wrap .more02:hover {background:#01a283; color:#fff;}
.section1 .tab01 .bx-controls-direction a {position: absolute; top: -69px; padding-left: 50px; width: 50px; height: 50px; line-height: 48px; color: #000; background-color: #fff; border: 1px solid #ddd; overflow: hidden; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;}
.section1 .tab01 .bx-controls-direction a.bx-prev {left: 800px;}
.section1 .tab01 .bx-controls-direction a.bx-next {right: 229px;}
/* .section1 .tab01 .bx-controls-direction a {position: absolute; top: 20px; padding-left: 50px; width: 50px; height: 50px; line-height: 48px; color: #000; background-color: #fff; border: 1px solid #ddd; overflow: hidden; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;} */
.section1 .tab01 .bx-controls-direction a:hover {color: #fff; background-color: #0079C2; border: 1px solid #0079C2; }
.section1 .tab01 .bx-controls-direction a::before {position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; font-family: 'xeicon'; font-size: 32px;}
/* .section1 .tab01 .bx-controls-direction a.bx-prev {left: -110px;} */
/* .section1 .tab01 .bx-controls-direction a.bx-next {right: -110px;} */
.section1 .tab01 .bx-controls-direction a.bx-prev::before {content: '\e93c';}
.section1 .tab01 .bx-controls-direction a.bx-next::before {content: '\e93f';}
@media screen and (max-width: 1299px) {
.section1 {padding: 20px 0 10px 0;}
#wrap > section.section.section1.active > div > h2 { font-size:24px; }
#wrap > section.section.section1.active > div > p { font-size:20px; }
.section1 .tab-info {top: 70px;}
.section1 .tab01 > li > a { font-size:20px; }
.section1 .list li {padding: 0 10px 0 120px; height: 100px;}
.section1 .list li .date {padding-top: 10px; font-size: 16px;width: 100px;}
.section1 .list li .subj {margin-bottom: 5px; height: 50px; overflow: hidden; font-size:16px; }
.section1 .list li .cont {margin-bottom: 0px; max-height: 22px; line-height: 1.6; font-size:14px; color: #767676; overflow: hidden;}
.section1 .list li .date em {display: block; margin-top: 8px; font-size: 2rem; font-weight: 700;}
.section1 .tab01 > li.active .tab-info {height: 100px;}
.section1 .list li .more { font-size:14px; }
.section1 .tab01 .bx-wrapper {padding: 0 20px 0 20px;}
.section1 .tab01 .bx-controls-direction a.bx-prev {left: -22px;}
.section1 .tab01 .bx-controls-direction a.bx-next {right: -22px;}
}
@media screen and (max-width: 1000px) {
#wrap > section.section.section1.active > div > h2 { font-size:22px; }
#wrap > section.section.section1.active > div > p { font-size:18px; }
.section1 {padding: 41px 0 10px 0;}
.section1 .tab-info {top: 70px;}
.section1 .tab01 > li > a { font-size:20px; }
.section1 .list li {padding: 0 10px 0 120px; height: 100px;}
.section1 .list li .date {padding-top: 10px; font-size: 16px;width: 100px;}
.section1 .list li .subj {margin-bottom: 5px; height: 50px; overflow: hidden; font-size:16px; }
.section1 .list li .cont {margin-bottom: 0px; max-height: 22px; line-height: 1.6; font-size:14px; color: #767676; overflow: hidden;}
.section1 .list li .date em {display: block; margin-top: 8px; font-size: 2rem; font-weight: 700;}
.section1 .tab01 > li.active .tab-info {height: 100px;}
.section1 .list li .more { font-size:14px; }
.section1 .tab01 .bx-controls-direction a.bx-prev {left: -22px;}
.section1 .tab01 .bx-controls-direction a.bx-next {right: -22px;}
.section1 .list {width:100% !important;}
.section1 .list li {width:100% !important; float:left !important;}
}
@media screen and (max-width:500px) {
.section1 {min-height:auto;}
.section1 .list li {padding:0 0 0 0;}
.section1 .list li .img_area {width:100%;}
.section1 .tab01 .bx-controls-direction a::before {font-size:24px;}
.section1 .tab01 .bx-controls-direction a {width:20px; height:40px; padding-left:40px; line-height:40px;}
.section1 .tab01 > li > a {width:50%;}
}
/* 사진,동영상 갤러리 타이틀 영역 20220722 */
.m_title01 {color:#333; font-weight:400; font-size:16px; overflow:hidden; display:none; }
.m_title01 > a {float: right;
display: block;
transition: all 0.4s;
padding: 2px;
/* border: 2px solid rgba(0,0,0,0.5); */
background: rgb(162 218 255);
background: #0079c2;
background: -moz-linear-gradient(-45deg, #0079c2 30%, #00a283 100%);
background: -webkit-linear-gradient(-45deg, #0079c2 30%,#00a283 100%);
background: linear-gradient(135deg, #0079c2 30%,#00a283 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0079c2', endColorstr='#00a283',GradientType=1 );
color: #fff;
width: 80px;
margin-top: 5px;
line-height: 32px;
/* height: 35px; */
text-align: center;
border-radius: 20px;}
.m_title01 > p {float:left;}
.pc_more_wrap {position:absolute; z-index:9999; top:-65px; right:0px;}
.pc_more_wrap > a {font-weight:400; display:block; transition: all 0.4s; border: 2px solid #fff; background:#fff; color:#333; width: 80px; margin-top: 20px; line-height: 32px; height: 35px; text-align: center; border-radius: 20px;}
.pc_more_wrap > a:hover {background: #01a283; border: 2px solid #01a283; color: #fff;}
@media all and (max-width:1582px) {
.m_title01 {display:none;}
.section1 {height:435px;}
.main_calendar {height:435px !important;}
}
@media all and (max-width:999px) {
.m_title01 {display:block;}
.pc_more_wrap {display:none;}
}
/* 모바일 탑 버튼 */
.m_btn_box { text-align: right; padding-right: 5px; padding-top: 10px; display:none!important;}
.m_btn_box .btn_call_1 { width: 55px; height: 55px; border-radius: 50%; background-color: #333; color: #fff; font-family: 'Roboto','Noto Sans Korean',sans-serif; letter-spacing: 1px; font-size: 16px; font-weight: 800; padding-top: 2px; transition: all .25s ease; position: relative;}
.m_btn_box .btn_call_1 a {display:block; width:100%; height:100%; }
.m_btn_box .btn_call_1 i {font-size:30px; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); transition: all .25s ease;}
.m_btn_box .btn_top_1 { width: 55px; height: 55px; border-radius: 50%; background-color: #333; color: #fff; font-family: 'Roboto','Noto Sans Korean',sans-serif; letter-spacing: 1px; font-size: 16px; font-weight: 800; padding-top: 2px; transition: all .25s ease; position: relative;}
.m_btn_box .btn_top_1 i {font-size:14px; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); transition: all .25s ease;}
.m_btn_box .btn_top_1 .btn_txt {margin-top: 6px;}
.m_btn_box .btn_call_1:hover,
.m_btn_box .btn_call_1:focus {background-color:#00a2e5;} /*background:rgba(0,0,0,1);*/
.m_btn_box .btn_top_1:hover,
.m_btn_box .btn_top_1:focus {background-color:#62bb46;} /*background:rgba(0,0,0,1);*/
.m_btn_box .btn_top_1:focus {background-color:#00a2e5;} /*background:rgba(0,0,0,1);*/
.m_btn_box .btn_top_1 .btn_txt { margin-top:6px; }
.m_btn_box .btn_top_1 i {font-size:14px; position: absolute; top:9px; left: 50%; transform: translateX(-50%); transition: all .25s ease;}
.m_btn_box .btn_top_1:hover i { transform: translate(-7px,-0px); }
@media all and (max-width:500px) {
.m_btn_box {display: block; position:fixed; right: 0px;}
.m_btn_box.call.scroll {bottom:70px; }
.m_btn_box.call {bottom:4px; z-index:1000; transition: all 0.5s; }
.m_btn_box.top {bottom:10px; z-index:100; }
}
.btn_top_1.active {
display: none;
}
/***************
서브 하단 사이트맵
***************/
/* .bottomNavWrap { position: absolute;top: 0;left: 0;right: 0;z-index: 5; border-bottom: solid 1px rgba(255,255,255,0.05);} */
/*.main_content.sitemap.con_padding {min-height:420px; padding:30px 0; box-shadow:-1px -1px 8px rgba(0,0,0,0.2); background-color:#f7f7f7; }
.bottomNavWrap #bottomNav{margin: 0 auto;width: 1100px; transition:0.3s;}
.bottomNavWrap #bottomNav > li {position:relative;float:left;width: 20%; text-align: center;}
.bottomNavWrap #bottomNav > li:first-child{width: 16.66666666666667%;}
.bottomNavWrap #bottomNav li h3{font-weight: normal;position: relative;display: block;}
.bottomNavWrap #bottomNav li h3 a { font-size: 18px; color: #58595b; display: inline-flex; line-height: 1.5; text-align: center; letter-spacing: -1px; position: relative; padding: 20px 0 18px 0; font-weight: 600; max-height: 100px; align-content: center; align-items: center; }
.bottomNavWrap #bottomNav li h3 a br.br_on, .topNavWrap #topNav li h3 a br.br_on2 { display:none; }
.bottomNavWrap #bottomNav li h3.long a{padding: 27px 0;}
.bottomNavWrap #bottomNav li h3::after{display: block;content: '';position: absolute;bottom: -1px;height: 1px;left: 50%;right: 50%;background-color: #fff;transition: all 0.25s ease-out;}
.bottomNavWrap #bottomNav li h3.long::after{bottom: -3px;}
.bottomNavWrap #bottomNav li ul li {padding:0;background:none;clear:both;line-height:normal;float:none;text-align:center;width: auto;}
.bottomNavWrap #bottomNav li ul li a {transform: skew(-0.1deg); font-weight: 400; display:block;padding:6px 3px 6px 3px;line-height:1.45;font-size:16px; letter-spacing: -1px;color: #777;}
.bottomNavWrap #bottomNav li h3 a:hover,
.bottomNavWrap #bottomNav li ul li a:hover {color:#000; }
.bottomNavWrap #bottomNav li ul.bottomNavLv_2{display:block;position:absolute;top:60px;width:100%;left:0px; height: 284px;font-size: 0;border-left: solid 1px rgba(0,0,0,0.05); }
.bottomNavWrap #bottomNav li:nth-child(1) > ul {border-left:none; }
.bottomNavWrap #bottomNav li ul.bottomNavLv_2.last{border-right: solid 1px rgba(0,0,0,0.05);}*/
.main_content.sitemap {/*min-height:420px;*/ padding:5rem 0; box-shadow:-1px -1px 8px rgba(0,0,0,0.2); background-color:var(--footer-sitebg); }
.bottomNavWrap #bottomNav{margin: 0 auto;width: var(--max-width); transition:0.3s; display: grid; grid-template-columns: repeat(auto-fit, minmax(14%, auto));}
.bottomNavWrap #bottomNav > li {/*position:relative;float:left;width: 20%; text-align: center;*/display: flex; align-items: center; justify-content: center; flex-direction: column; border-right: 1px solid var(--darkgray);}
.bottomNavWrap #bottomNav > li:first-child{/*width: 16.66666666666667%;*/}
.bottomNavWrap #bottomNav > li:last-child {border-right:none;}
.bottomNavWrap #bottomNav li h3{/*font-weight: normal;position: relative;display: block;*/}
.bottomNavWrap #bottomNav li h3 a { font-size: 18px; color: var(--lightgray); display: inline-flex; line-height: 1.5; text-align: center; /* letter-spacing: -1px; */ position: relative; padding: 20px 0 18px 0; font-weight: 600; max-height: 100px; align-content: center; align-items: center; }
.bottomNavWrap #bottomNav li h3 a br.br_on, .topNavWrap #topNav li h3 a br.br_on2 { display:none; }
.bottomNavWrap #bottomNav li h3.long a{padding: 27px 0;}
.bottomNavWrap #bottomNav li h3::after{display: block;content: '';position: absolute;bottom: -1px;height: 1px;left: 50%;right: 50%;background-color: #fff;transition: all 0.25s ease-out;}
.bottomNavWrap #bottomNav li h3.long::after{bottom: -3px;}
.bottomNavWrap #bottomNav li ul li {padding:0;background:none;clear:both;line-height:normal;float:none;text-align:center;width: auto;}
.bottomNavWrap #bottomNav li ul li a {transform: skew(-0.1deg); font-weight: 400; display:block;padding:6px 3px 6px 3px;line-height:1.45;font-size:16px; letter-spacing: -1px;color: var(--brightgray);}
.bottomNavWrap #bottomNav li h3 a:hover,
.bottomNavWrap #bottomNav li ul li a:hover {color:var(--lightgray); }
.bottomNavWrap #bottomNav li ul.bottomNavLv_2{/*display:block;position:absolute;top:60px;width:100%;left:0px; height: 284px;font-size: 0;border-left: solid 1px rgba(0,0,0,0.05);*/display: flex; align-items: center; justify-content: flex-start; flex-direction: column; flex: 1; }
.bottomNavWrap #bottomNav li:nth-child(1) > ul {border-left:none; }
.bottomNavWrap #bottomNav li ul.bottomNavLv_2.last{border-right: solid 1px rgba(0,0,0,0.05);}