@charset "euc-kr";

/* common CSS */
body, input, button, textarea, select, option, a {font-family:'Lato','NotoSans',sans-serif; outline-color:#0692cd;}
.wrap {position:relative; width:100%;}
select {border:1px solid #ddd; background:#fff url(/images/ico/sel_ico.png) right 0.625rem top 50% no-repeat; padding:0 2.5em 0 .625rem; box-sizing:border-box;}
select::-ms-expand {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity:0; -webkit-filter: alpha(opacity=0); }
.scrollOff {position:fixed; top:0; left:0; right:0; bottom:0; height:100%; overflow:hidden; touch-action:none;}


/* placeholder */
::-webkit-input-placeholder {color:#999;}
::-moz-placeholder {color:#999;}
:-moz-placeholder {color:#999;}
:-ms-input-placeholder {color:#999;}


/* hidden */
.hidden-b{
  position:absolute;
  overflow:hidden;
  border:0;
  width:1px;
  height:1px;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path:inset(50%);
}
.hidden-i{
display:inline-block;
overflow:hidden;
border:0;
width:1px;
height:1px;
clip: rect(1px, 1px, 1px, 1px);
clip-path:inset(50%);
}

.container {padding: 0 1.25rem; box-sizing: border-box;}

/* header */
#header .top-row {display: flex; align-items: center; justify-content: space-between; height: 4.375em; font-size: 1rem;}
#header .ci-img {width: auto; height: auto; max-width: 4.625em; /*max-height: 51.4%;*/}
#header .logo a {display: block; height: 3.125rem;}
#header .logo img {width: auto; height: 100%;}
#header .btn--all-menu {width: 1.75rem; height: 1.375rem; background: url(../images/btn_menu.png) no-repeat 50% 50%; background-size: contain}
.header__nav {display: flex; align-items: center; justify-content: space-between;}
.header__nav {height: 2.18em; margin-bottom: 0.25em; font-size: 1rem; line-height: 2.18em;}
.header__nav a {color: #222; font-weight: 500; letter-spacing: -0.065em;}

.all-menu { position: fixed; right: -120%; top: 0; width: 100%; height: 100vh; background: #fff; transition: right .3s ease-out; -webkit-transition: right .3s ease-out; -moz-transition: right .3s ease-out; -ms-transition: right .3s ease-out; -o-transition: right .3s ease-out; z-index: 200; }
.all-menu.active {right: 0;}
.all-menu__head {padding: 0 1.25rem 1.875rem 2.5em; background: #f7f7f7; z-index: 100; text-align: right; box-sizing: border-box;}
.all-menu__head .btn--close {display: inline-block; width: 1.3125rem; height: 1.3125rem; margin: 2.125rem 0; background: url(../images/btn_close.png) no-repeat 50% 50%; background-size: contain}
.all-menu__log {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: left;}
.all-menu__log .lnk-btn { display: inline-block; padding: 0 1.85em; background: #fff; border: 1px solid #ddd; color: #666; border-radius: 0.25em; -webkit-border-radius: 0.25em; -moz-border-radius: 0.25em; -ms-border-radius: 0.25em; -o-border-radius: 0.25em; font-size: 0.875rem; font-weight: 500; letter-spacing: -0.065em; line-height: 2.7142em; vertical-align: middle; text-align: center; }
.all-menu__log .lnk-btn + .lnk-btn {margin-left: 0.25em;}
.all-menu__login strong,
.all-menu__user strong {color: #222; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.065em; line-height: 1.2;}
.all-menu__login .lnk--login {padding-right: 0.9em; background: url(../images/arr_more_b.png) no-repeat right 0 top 50%; background-size: 0.3em auto;}
.all-menu__user .lnk-list {font-size: 0;}

.all-menu__body {overflow-y: auto;}
.gnb {padding-left: 2.5em; padding-top: 1.25em; box-sizing: border-box;}
.gnb__group h2{padding: 1.1em 0; margin-bottom: 1.16em; border-bottom: 1px solid #ddd; font-size: 1.125rem; font-weight: 500;}
.gnb__group ul {display: flex; flex-wrap: wrap;}
.gnb__group li {width: 50%; padding-right: 1.25rem; margin-bottom: 1.625rem; box-sizing: border-box;}
.gnb__group a {color: #666; font-size: 1rem; letter-spacing: -0.065em; line-height: 1.25;}

.all-menu .cs-row {padding: 1.25em 0 calc(env(safe-area-inset-bottom) + 1.25em); margin-top: 30px; background: #e42500; color: #fff; font-size: 1rem; font-weight: 500; letter-spacing: -0.065em; text-align: center; line-height: 1.25em;}
.all-menu .cs-row span {padding-left: 1.625em; background: url(../images/ico_tel_w.png) no-repeat 0% 50%; background-size: auto 1.25em;}

/* footer */
.footer {margin-top: 3.125em;}
.footer__nav {display: flex; align-items: center; justify-content: space-between; background: #f7f7f7; font-size: 0;}
.footer__nav li {padding: 1.26em 0; font-size: 0.9375rem; }
.footer__nav a {display:inline-block; font-weight:500; line-height:1.7; letter-spacing:-0.065em; color:#222; line-height: 1.4;}
.footer__nav a span {color: #e42500;}
.footer__info li {color: #888; font-size: 0.875em; font-weight: 500; line-height: 1.71em; letter-spacing: -0.065em; overflow: hidden;}
.footer__info span {display: inline-block; position: relative; margin-right: 1.42em;}
.footer__info span + span::before {content: ''; display: block; position: absolute; left: -0.71em; top: 50%; width: 1px; height: 0.85em; margin-top: -0.425em; background: #ddd;}
.footer .caution {margin: 1.7em 0 1.33em; color: #666; font-size: 0.9375rem; font-weight: 500; line-height: 1.6; letter-spacing: -0.065em;}
.footer .copyright {display: block; margin:1.42em 0 5.4em; font-size: 0.875rem; font-weight:500; line-height:1.7; color:#999;}
.footer .btn--page-top {display:none; position:fixed; z-index: 12; bottom:0; right:0; width:3.125rem; height:3.125rem; background:rgba(0,0,0,.6) url(../images/btn_top.png) 50% 50% no-repeat; background-size: 1.25rem auto;  box-sizing:border-box;}


/* sub header */
.header .btn-list {display: flex; align-items: center;}
.header .btn--back {width: 0.6875rem; height: 1.375rem; margin-right: 1rem; background: url(../images/btn_back.png) no-repeat 50% 50%; background-size: contain}
.header .lnk--home {width: 1.5rem; height: 1.375rem; background: url(../images/ico_home.png) no-repeat 50% 50%; background-size: contain}
.header .page-tit {color: #222; font-size: 1.25em; font-weight: 500; letter-spacing: -0.065em;}

.snb {width:100%; padding:0 1.25rem; margin-bottom: 1.25rem; border-bottom:1px solid #ddd; white-space:nowrap; overflow:hidden; overflow-x:auto; box-sizing:border-box;}
.snb li {display:inline-block; margin-right:7%;}
.snb li:last-child {margin-right:0;}
.snb a {position:relative; display:block; font-size: 1rem; font-weight:500; line-height: 2.5em; letter-spacing: -0.065em; color:#000; box-sizing:border-box;}
.snb .on a {color:#e42500;}
.snb .on a:after {content:''; position:absolute; bottom:-1px; left:0; width:100%; height:3px; background:#e42500;}

/* paging */
.paging {display:flex; justify-content:center; align-items:center; width:100%; margin:12px auto 20px;}
.paging a {width:1.8rem; height:1.8rem; border:1px solid #ddd; line-height:1.8rem; text-align:center; font-size:.8rem; font-weight:500; color:#999; margin:0 2px; box-sizing:border-box;}
.paging a.arrow {font-size:.85rem; letter-spacing:-0.065rem;}
.paging a.on, .paging a.page {width:1.5rem; line-height:1.8rem; border:none; font-weight:500; color:#555; margin:0;}
.paging a.on {color:#222; font-weight:700;}

.sub_ttl {font-size:1.05rem; font-weight:500; line-height:1.4; letter-spacing:-0.045rem; color:#222; background:url(/images/ico/join_ico.png) 0 50% no-repeat; background-size:12px auto; margin-bottom:12px; padding:0 0 0 18px; box-sizing:border-box;}
.sub_ttl + p {font-size:.9rem; font-weight:500; line-height:1.4; letter-spacing:-0.045rem; color:#777; word-break:keep-all; margin:0 0 10px;}

/* bbs common */


.bbs-expert-nav {position: relative; margin-bottom: 2em; color: #666; font-size: 0.9375rem; font-weight: 500; }
.bbs-expert-nav .current {display: block; width: 100%; height: 3em; padding: 0 2.5em 0 .625rem; background: #fff url(/images/ico/sel_ico.png) right 0.625rem top 50% no-repeat; border: 1px solid #ddd; line-height: calc(3em - 2px); letter-spacing: -0.065em; box-sizing: border-box;}
.bbs-expert-nav ul {display: none; position: absolute; left: 0; top: 100%; width: 100%; padding: 1em; background: #f9f9f9; border-width: 0 1px 1px; border-style: solid; border-color: #ddd; box-sizing: border-box; line-height: 1.3; z-index: 30;}
.bbs-expert-nav li + li {margin-top: 0.5em;}
