@charset "utf-8";

@font-face {font-family: 'Noto Sans KR'; font-style: normal; font-weight: 300; src: url(../fonts/NotoSans-Light.woff2) format('woff2'), url(../fonts/NotoSans-Light.woff) format('woff')}
@font-face {font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; src: url(../fonts/NotoSans-Regular.woff2) format('woff2'), url(../fonts/NotoSans-Regular.woff) format('woff')}
@font-face {font-family: 'Noto Sans KR'; font-style: normal; font-weight: 500; src: url(../fonts/NotoSans-Medium.woff2) format('woff2'), url(../fonts/NotoSans-Medium.woff) format('woff')}
@font-face {font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; src: url(../fonts/NotoSans-Bold.woff2) format('woff2'), url(../fonts/NotoSans-Bold.woff) format('woff')}

/* 태그초기화 */
* {margin:0; padding:0;-webkit-tap-highlight-color: rgba(255,255,255,0)}
html, body {height: 100%}
body {font-family: 'Noto Sans KR',dotum,'돋움',arial,sans-serif; font-size: 13px; color: #666; font-weight: 300; line-height: 1.4; -webkit-text-size-adjust: none; -webkit-overflow-scrolling:touch; word-break: keep-all}
ol, ul, li ,dl, dt, dd {list-style: none outside none}
hr {display:none}
fieldset, img, table, caption, tbody, tfoot, thead, tr, th, td, button, hr {border: 0}
address, caption, cite, code, dfn, em, strong, th, var {font-style: normal}
blockquote, q {quotes: none}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none}
table {width: 100%; border-collapse: separate; border-spacing: 0;table-layout: fixed}
caption {/*position: absolute; left: -10000px; top: auto; width:1px; height:1px; overflow: hidden*/ display: none}
img {vertical-align: top; width: 100%}
a {text-decoration: none; color: #666}
select, input, textarea, button {font-family: 'Noto Sans KR',dotum,'돋움',arial,sans-serif; font-weight: 300; color: #666}
select, input[type="text"], input[type="password"] {height: 39px; padding: 0 8px;  border: 1px solid #d3d3d3;}
select, input[type="text"], input[type="password"], textarea {border-radius: 0; font-size: 13px; box-sizing: border-box; background-color: #fff}
button {font-size: 16px; border-radius: 0; margin: 0; overflow: visible; text-transform: none; -webkit-appearance: button; cursor: pointer; border: 0; background: none;outline:0}
input::-ms-clear {display: none}
select::-ms-expand {display: none}
select,input[type=text],textarea {-webkit-appearance:none; -moz-appearance:none; appearance:none}
textarea {padding:8px 12px;resize: none; font-size: 15px; border: 1px solid #d3d3d3}
label {cursor: pointer}
::-webkit-input-placeholder{font-family: 'Noto Sans KR',dotum,'돋움',arial,sans-serif; font-weight: 300; color: #999}
::-moz-placeholder{font-family: 'Noto Sans KR',dotum,'돋움',arial,sans-serif; font-weight: 300; color: #999}
:-ms-input-placeholder{font-family: 'Noto Sans KR',dotum,'돋움',arial,sans-serif; font-weight: 300; color: #999}
:-moz-placeholder{font-family: 'Noto Sans KR',dotum,'돋움',arial,sans-serif; font-weight: 300; color: #999}

/* 단축클래스 */
.fl {float: left !important}
.fr {float: right !important}
.fn {float: none !important}
.clear-fix:after {content: ''; display: block; clear: both}
.txt-left {text-align: left !important}
.txt-right {text-align: right !important}
.txt-center {text-align: center !important}
.no-bt {border-top: 0 !important}
.no-br {border-right: 0 !important}
.no-bb {border-bottom: 0 !important}
.no-bl {border-left: 0 !important}
.no-dpn {display: none !important}
.no-dpb {display: block !important}
.ellipsis {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all}
.m-content {display: block}
.pc-content {display: none}

/* 공통 */
select {background: #fff url(../images/arrow_select.gif) no-repeat right 8px top 50%; padding: 0 10px 0 10px}
select, input[type="text"], input[type="password"] {height: 31px}
.cal-wrap {position: relative}
.cal-wrap input {width: 97px}
.cal-wrap .ui-datepicker-trigger {position: absolute; top: 50%; right: 8px; width: 15px; height: 16px; margin-top: -8px}
.cal-wrap .ui-datepicker-trigger i {vertical-align: top}
.blind {position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden}
.color-mint {color: #2fb2ab !important}
.ui-widget.ui-widget-content {z-index: 999 !important}
.header {padding: 0 20px; height: 48px; background-color: #f4f4f4; border-bottom: 1px solid #d3d3d3; z-index: 99}
.header .inner {height: 100%}
.header .logo {display: inline-block; width: 110px; height: 100%; line-height: 46px}
.header .logo img {vertical-align: middle}
.header .top span {display: inline-block; margin-right: 10px; vertical-align: middle}
.header .top .btn {display: inline-block; height: 24px; padding: 0 10px; font-size: 13px; color: #444; line-height: 24px; border: 1px solid #333;font-weight:400}
.header .btn-close{display:none}
.content {padding: 60px 10px 50px}
.content:after {content: ''; display: block; clear: both}


@media screen and (min-width: 1024px){	
	body {font-size: 14px; line-height: 1.53}
	select {background: #fff url(../images/arrow_select.gif) no-repeat right 15px top 50%; padding: 0 8px 0 15px}
	select, input[type="text"], input[type="password"] {height: 39px}
	select, input[type="text"], input[type="password"], textarea {font-size: 14px}
	textarea {padding: 10px 15px}
	.header {position: relative}
	.m-content {display: none}
	.pc-content {display: block}
	.cal-wrap .ui-datepicker-trigger {right: 15px}
	.gb-menu > ul > li > a > i{display:none}
	.header {height: 80px; padding: 0}
	/*.header .inner {position: relative; padding: 0 15px; margin: 0 auto; max-width: 1170px}*/
	.header .inner {position: relative; padding: 0 15px; margin: 0 auto; width: calc(100% - 142px);}
	.header .inner > .top {position: absolute; top: 20px; right: 15px; display: block; padding: 0; border-bottom: 0}
	.header .inner > .top span {margin-right: 20px; vertical-align: baseline}
	.header .inner > .top .btn {height: 37px; padding: 0 14px; font-size: 14px; line-height: 37px}
	.header .logo {width: 204px; max-width: none; line-height: 76px}
	.header .btn-menu {display: none}	
	.gb-menu {float: left; display: block; width: 181px; min-height: calc(100vh - 81px); border-left: 1px solid #d3d3d3; border-right: 1px solid #d3d3d3}
	.gb-menu > ul > li {border-bottom: 1px solid #d3d3d3}
	.gb-menu > ul > li > a {display: block; position:relative;height: 50px; padding-left: 20px; font-weight: 400; color: #444; line-height: 50px;background-color:#fff}
	.gb-menu .active2 i,.gb-menu > ul > li > a:hover > i{display:block;position:absolute;right:20px;top:20px;font-size:12px;transform:rotate(270deg)}
	.gb-menu > ul > li > a.active2, .gb-menu > ul > li > a:hover {background-color: #2fb2ab; background-repeat: no-repeat; background-position: calc(100% - 20px) 50%; font-weight: 500; color: #fff}
	.gb-menu > ul > li ul {display: none; padding: 12px 0 12px 20px; background: #f4f4f4; border-top: 1px solid #d3d3d3}
	.gb-menu > ul > li ul a {position: relative; display: block; padding: 3px 0 3px 11px; font-size: 14px}
	.gb-menu > ul > li ul a.on, .gb-menu > ul > li ul a:hover{font-weight: 500; color: #444;text-decoration:underline}
	.gb-menu > ul > li ul a.active2:before, .gb-menu > ul > li ul a:hover:before {background: #444}
	.gb-menu > ul > li ul a:before {content: ''; position: absolute; top: 50%; left: 0; width: 6px; height: 1px; background: #999}
	.gb-menu > ul > li > a.active2 + ul {display: block;}
	/*.r-content {float: right; width: calc(100% - 198px); max-width: 977px; min-height: 550px; padding: 44px 15px 50px 0; box-sizing: border-box}*/
	.r-content {float: right; width: calc(100% - 198px); min-height: 550px; padding: 44px 15px 50px 0; box-sizing: border-box}
	.content {margin: 0 auto; padding: 0 15px}
}

@media screen and (min-width: 1240px){
	.header .inner > .top {right: 0}
	/*.content {width: 1200px; padding: 0}*/
	.content {width: calc(100% - 82px); padding: 0}
	.r-content {padding-right: 0}
}

@media screen and (max-width:1023px) {
	.header {position:fixed;width:100%;left:0;top:0;box-sizing:border-box;padding:0 10px}
	.header .inner > .top {display:none;margin-top:10px}
	.gb-menu{display:none}
	.header .btn-menu {position: absolute; top: 0; padding: 0 0 0 10px; right: 10px; height: 100%; line-height: 45px}
	.header .btn-menu i {font-size: 18px; color: #222; vertical-align: middle}
	.gb-menu-open .header .logo,.gb-menu-open .header .btn-menu{display:none}
	.gb-menu-open .header .top,.gb-menu-open .header .btn-close{display:block}
	.gb-menu-open .gb-menu{display:block}
	.mobile .gb-menu{position: fixed; top: 48px; left: 0; z-index:100; width: 100%; height: calc(100vh - 48px) !important; overflow-y:auto; background: rgba(0,0,0,0.5)}
	.mobile .gb-menu>ul {background: #fff}
	.mobile .gb-menu li a {position: relative; display: block; height: 40px; line-height: 40px}
	.mobile .gb-menu > ul > li {border-bottom: 1px solid #d3d3d3}
	.mobile .gb-menu > ul > li > a {padding-left: 10px; font-weight: 400; color: #444}
	.mobile .gb-menu > ul > li > a i{position:absolute;right:10px;top:50%;margin-top:-6px;font-size:12px;color:#888}
	.mobile .gb-menu > ul > li > a.m-active {font-weight: 400; color: #fff; background: #2fb2ab}
	.mobile .gb-menu > ul > li > a.m-active i {color: #fff; transform:rotate(180deg)}
	.mobile .gb-menu > ul > li > a.m-active + ul {display: block;}
	.mobile .gb-menu ul ul {display:none;background: #f4f4f4; border-top: 1px solid #d3d3d3}
	.mobile .gb-menu ul ul li {border-bottom: 1px dashed #d3d3d3}
	.mobile .gb-menu ul ul li a {position: relative; padding-left: 25px; font-size: 13px}
	.mobile .gb-menu ul ul li a:before {content: ''; position: absolute; top: 50%; left: 15px; width: 6px; height: 1px; background: #999}
	.mobile .gb-menu ul ul li:last-child {border-bottom: 0}
	.mobile .btn-close {position: absolute; top: 0; right: 10px; padding: 0 0 0 10px; height: 100%; line-height: 54px;}
	.mobile .btn-close i {font-size: 21px; color: #222}
	
}