@charset "utf-8";


/************************************** 폰트 **************************************/

.f-gma {font-family: 'Gmarket Sans', sans-serif !important;}


/************************************** 버튼 **************************************/

/* 버튼 스타일 */
.btn-wrap {position: relative; text-align: center;}
.btn-wrap:after { content: ''; display: block; clear: both; }
.btn-wrap.inline { display: inline-block; }
.btn-wrap.inline button { float: none; }
.btn-wrap .btn-right {float:right;}
.btn-wrap .btn-left {float:left;}
.btn-wrap .btn-center {display: inline-block; float:none }
.btn-wrap button {margin-right: 5px; font-weight: 500; border:0; background:#3f3f3f; color:#fff; padding:0 15px; min-width: 100px; font-size: 1.4rem; font-weight: 400; transition: background .3s, color .3s; cursor: pointer; float: left; border-radius: 5px; }
.btn-wrap button:last-child {margin-right:0;}
.btn-wrap button.small-btn {padding: 3px 10px; min-width: 90px; font-size: 1.2rem; font-weight: 500; border-radius: 3px; }

/* 버튼 색상 */
.btn-wrap button.white-bg {background:#fff; border: 1px solid #b5b5b5; color:#7C7C7C;}
.btn-wrap button.white-bg:hover {background:#F9F9F9;}
.btn-wrap button.gray-bg {background: #a5a5a5; color: white}
.btn-wrap button.gray-bg:hover {background: #949494}



/************************************** 페이징 **************************************/

.paging { text-align: center; margin-top: 10px;}
.paging ul {display: inline-block;}
.paging ul li {display: inline-block; height: 25px; line-height: 25px; width:25px; text-align: center; margin: 0 2px;}
.paging ul li:hover a { background: #eaeaea; }
.paging ul li.on a {background: #f1f2f6; font-weight: 600; }
.paging ul li a {display: block; width: 100%; height: 100%;color: #333; border-radius: 3px;}
.paging ul li:first-child a img {margin-left: -2px}
.paging ul li a img { width: 20px; height: 20px; margin-top: 2px; opacity: .7; }
.paging .rotate img {transform: rotate(180deg); margin-left: 1px}
.paging .rotate:last-child img {margin-left: 0}

@media all and (max-width: 580px) {
	.paging ul li {font-size: 1.2rem;}
	.paging ul li:first-child,
	.paging ul li:last-child {display: none;}
	.paging ul li a img {margin-top:3px;}
}

@media all and (max-width: 500px) {
	.paging ul {width: 100%;}
	.paging ul li {margin:0;}
	.paging ul li a {border: 0;}
}

@media all and (max-width: 375px) {
	.paging ul li { width: 21px; height: 21px; line-height: 20px; }
	.paging ul li a img { width: 15px; height: 15px; margin-top: 3px; }
}



/************************************** 탭메뉴 **************************************/

.tab-menu-wrap .tab-menu {margin-bottom:20px; position: relative; }
.tab-menu-wrap .tab-menu ul { position:relative; overflow: hidden; height: 37px; font-size:14px; z-index: 1; white-space: nowrap; }
.tab-menu-wrap .tab-menu ul:after {content:''; position:absolute; width:100%; height:1px; background:#3967e3; bottom:0; left:0; z-index: -1;}
.tab-menu-wrap .tab-menu ul li {position:relative; display: inline-block; height:37px; }
.tab-menu-wrap .tab-menu ul li a {min-width:90px; display: block; line-height: 35px; border:1px solid #dee3eb; border-left:none; border-bottom:1px solid #3967e3; text-align: center; background:#f2f2f2; padding:0 15px; font-size:1.2rem;}
.tab-menu-wrap .tab-menu ul li:last-child a { border-left: 1px solid #dee3eb; }
.tab-menu-wrap .tab-menu ul li.on a {background:#fff; border-bottom-color: #fff; border:1px solid #3967e3; border-bottom:1px solid #fff;}
.tab-menu-wrap .tab-menu .tab-control { position: absolute; top: -35px; right: 0; z-index: 10;}
.tab-menu-wrap .tab-menu .tab-control .arr-btn { border:0; outline: 0; background: none; display: inline-block; padding-top: 2px; border-radius: 3px;}
.tab-menu-wrap .tab-menu .tab-control .arr-btn:hover { background: #f0f0f0; }
.tab-menu-wrap .tab-menu .tab-control .arr-btn.next { transform: rotate(180deg); padding-top:0; padding-bottom: 2px;}

.tab-menu-wrap .tab-sub-menu ul { position: relative; width:calc(100% - 40px); white-space: nowrap; margin:0 auto; overflow: hidden;}
.tab-menu-wrap .tab-sub-menu ul li { display: inline-block; }
.tab-menu-wrap .tab-sub-menu ul li a { font-size: 1.3rem; padding: 5px 15px; color: #656565;}
.tab-menu-wrap .tab-sub-menu ul li a:hover { color: #000;}
.tab-menu-wrap .tab-sub-menu ul li.on a:hover,
.tab-menu-wrap .tab-sub-menu ul li.on a { color: #3967e3;}
.tab-menu-wrap .tab-sub-menu { position: relative; padding: 7px 0; margin-bottom:25px; }
.tab-menu-wrap .tab-sub-menu .tab-control .arr-btn { position: absolute; border:0; outline: 0; background: #f4f4f4; display: block; padding: 7px 2px; border-radius: 3px; }
.tab-menu-wrap .tab-sub-menu .tab-control .arr-btn:hover { background:#ebebeb;}
.tab-menu-wrap .tab-sub-menu .tab-control .arr-btn img { width: 16px; height: 16px; opacity: .4; position: relative; top: 1px;}
.tab-menu-wrap .tab-sub-menu .tab-control .arr-btn.prev { top:0; left:0;}
.tab-menu-wrap .tab-sub-menu .tab-control .arr-btn.next { bottom:0; right:0;}
.tab-menu-wrap .tab-sub-menu .tab-control .arr-btn.next img { transform: rotate(180deg); }

@media (max-width: 768px) {
	.tab-menu-wrap .tab-sub-menu ul li a { padding: 5px 10px; font-size: 1.2rem;}
}


/************************************** 페이지 타이틀 **************************************/
.section .sec-title { padding-left: 20px; position: relative; padding-bottom: 20px; }
.section .sec-title h1 { font-size: 1.7rem; }
.section .sec-title .tit-icon { position: absolute; top: 5px; left:0; width: 4px; height: 18px; }