@charset "utf-8";


/************************************** 색상 테마 **************************************/
:root {
/* wave */
--sky: #3075A2;
--chacol: #282d33;

/* nia */
--deep-blue: #27356b;
--green-blue: #0c7dcf;

/* samsung01 */
--dark-blue: #0C356A;
--sand-green: #D5FFD0;

/* samsung02 */
--deep-purple:  #461959;
--sand-red: #CD6688;

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

.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}
.btn-wrap button.sky-bg {background:#fff; border: 1px solid var(--sky); color:var(--sky);}
.btn-wrap button.sky-bg:hover {background:var(--sky); color: #fff;}
.btn-wrap button.deep-blue-bg {background:#fff; border: 1px solid var(--deep-blue); color:var(--deep-blue);}
.btn-wrap button.deep-blue-bg:hover {background:var(--deep-blue); color: #fff ;}
.btn-wrap button.dark-blue-bg {background:#fff; border: 1px solid var(--dark-blue); color:var(--dark-blue);}
.btn-wrap button.dark-blue-bg:hover {background:var(--dark-blue); color: #fff ;}
.btn-wrap button.deep-purple-bg {background:#fff; border: 1px solid var(--deep-purple); color:var(--deep-purple);}
.btn-wrap button.deep-purple-bg:hover {background:var(--deep-purple); color: #fff ;}

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

.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 .f-20px { font-size: 2rem; }
.section .sec-title .tit-icon { position: absolute; top: 5px; left:0; width: 5px; height: 20px; }