@charset "utf-8";


/************************************** g마켓산스 폰트 **************************************/

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



/************************************** 텍스트 정렬 **************************************/

.txt-center {text-align: center !important}
.txt-left {text-align: left !important}
.txt-right {text-align: right !important}
.txt-ellipsis { text-overflow: ellipsis; overflow: hidden; width:100%; white-space: nowrap; }


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

/* 버튼 스타일 */
.btn-wrap {position: relative; text-align: center;}
.btn-wrap:after { content: ''; display: block; clear: both; }
.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: 600; border:0; background:#aeaeae; color:#fff; height: 35px; padding: 0 40px; font-size: 1.3rem; cursor: pointer; float: left; border-radius: 50px; }
.btn-wrap button:last-child {margin-right:0;}
.btn-wrap button.small-btn {padding: 3px 15px; height: 25px; min-width: 90px; font-size: 1.2rem; font-weight: 500; border-radius: 20px; }

.btn-wrap.inline { display: inline-block; }
.btn-wrap.inline button { float: none; }
.btn-wrap.mg-t20 { margin-top: 20px; }

/* 버튼 색상 */
.btn-wrap button.theme-btn {background: var(--theme-color); color: white}
.btn-wrap button.theme-btn:hover {background: var(--theme-color)}
.btn-wrap button.theme-border-btn {border:1px solid var(--theme-color); color: var(--theme-color); background:#fff; font-weight: 600;}
.btn-wrap button.theme-gray-btn {background: #ebe8f5; color: #050c3d}
.btn-wrap button.white-btn {background:#fff; border: 1px solid #7C7C7C; color:#1f0042;}
.btn-wrap button.white-btn:hover {background:#F9F9F9;}
.btn-wrap button.gray-btn {background: #f4f4f4; color: white;color:#1f0042;}
.btn-wrap button.gray-btn:hover {background: #e5e5e5}

.btn-wrap button.square-btn {border-radius:7px; padding:12px;box-shadow:0 0 10px rgba(0,0,0,0.15); border:0; height:auto;}
.btn-wrap button.square-btn.normal {box-shadow: none; padding:12px 20px}

.btn-wrap button { transition: transform 0.2s ease, background 0.3s ease; }
.btn-wrap button:active { transform: scale(0.94); } 
/************************************** 테이블 **************************************/


/* 기본 테이블 */
table.normal-table { width: 100%; table-layout: fixed;  margin-bottom:10px}
table.normal-table tr { border-bottom: 1px solid #ddd }
table.normal-table tr th { font-size: 1.5rem; font-weight: 600; height: 55px; word-break: break-all; color: #3e3e3e;;text-align: center; border-top: 1px solid #000}
table.normal-table tr td { padding: 5px; font-size: 1.5rem; height: 40px; word-break: break-all; color: #7e7e7e; line-height: 20px; text-align: center}

@media(max-width: 572px) {
	table.normal-table tr td { font-size: 1.3rem; padding: 10px; }
	table.normal-table tr th { font-size: 1.3rem; padding: 10px; }
}

/* 버티컬 테이블 */
table.vertic-table { table-layout: fixed; width: 100%; border-bottom: 1px solid #d3d3d3; border-right:0; border-top:1px solid #d3d3d3;}
table.vertic-table tr {border-bottom: 1px solid #d3d3d3;}
table.vertic-table tr th { width:140px; padding: 15px; font-size: 1.5rem; word-break: keep-all; border-bottom: 1px solid #ddd; color: #3e3e3e;  font-weight: 600; background:#efefef;}
table.vertic-table tr td { padding:15px; font-size: 1.5rem; height: 35px; word-break: keep-all; color: #3c3c3c }
table.vertic-table tr td.detail-cont {min-height:150px; height:150px; vertical-align: top; line-height:20px}
span.th-important { display: inline-block; height: 4px; width: 4px; border-radius: 50%; margin: 0 0 8px 5px; background: #f05050;}

@media all and (max-width: 768px) {
	table.vertic-table tr td {font-size:1.4rem}
	table.vertic-table tr th {font-size:1.4rem;}
	table.vertic-table tr td .file-input { width: calc(100% - 60px); }
	table.vertic-table tr td .file-row .add-wrap { margin-left: 4px; }
	table.vertic-table tr td .add-wrap { width: 50px; }
}
@media all and (max-width: 572px) {
	table.vertic-table tr td { font-size: 1.3rem; padding: 10px; }
	table.vertic-table tr th { font-size: 1.3rem; padding: 10px; width: 85px; }
	table.vertic-table tr td input[type="text"].text-input { width: 100%; }
	table.vertic-table tr td.num input[type="text"].text-input { width: 30%; }
}



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


.paging { text-align: center; margin-top: 30px;}
.paging ul {display: inline-block;}
.paging ul li {display: inline-block; height: 30px; line-height: 30px; width:30px; text-align: center; margin:0 2px; }
.paging ul li:hover a { background: #eaeaea; }
.paging ul li.select a {background: #333; color: #fff; }
.paging ul li a {display: block; width: 100%; height: 100%;color: #333; border-radius: 30px;}
.paging ul li:first-child a img {margin-left: -2px}
.paging ul li a img { width: 20px; height: 20px; margin-top: 5px; 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 {height: 25px; line-height: 23px; width: 25px; 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; }
}


/************************************** 인풋, 셀렉트박스, 첨부파일 **************************************/


/* 셀렉트박스 */
.select-box { width: 100%; height:40px; position: relative; display: inline-block; float: left;}
.select-box select {border:1px solid #c4c4c4; border-radius: 5px; width: 100%; height: 100%; padding: 0 40px 0 10px; font-size: 1.4rem; background: url(../../img/common/select_arrow.png); background-repeat: no-repeat; -webkit-background-size: 10px 6px; background-size: 10px 6px; color: #4C4C4C;background-color: #fff; background-position: calc(100% - 20px); cursor:pointer;}
.select-box select:disabled {cursor:no-drop}
.select-box select:hover {border-color: #9f9f9f;}
@media (max-width: 800px) {
	.select-box {width: 100%;}
}

/* 인풋 텍스트 */
input[type="text"].text-input { height:36px;  width: 100%; display: inline-block; font-size: 1.3rem; padding:0 10px; border: 1px solid #f0f0f0; color: #686868; border-radius: 3px; background:#f0f0f0; transition: box-shadow .3s ease}
input[type="text"].text-input:hover {background:#f5f5f5;}

/* 인풋 텍스트 */
input[type="text"].text-input { height:36px;  width: 100%; display: inline-block; font-size: 1.3rem; padding:0 10px; border: 1px solid #f0f0f0; color: #686868; border-radius: 3px; background:#f0f0f0; transition: box-shadow .3s ease}
input[type="text"].text-input:hover {background:#f5f5f5;}

/* 텍스트아레아 */
textarea {width: 100%; resize: none; padding:10px; font-size: 1.4rem; min-height: 200px;border:1px solid #c4c4c4; border-radius: 5px}
textarea:hover {border-color: #9f9f9f;}

/* 첨부파일 */
.added-file { display: inline-block; cursor: pointer; background: #e8e8e8; height: 33px; line-height: 32px; padding: 0 20px; border-radius: 30px; margin-right: 10px; font-size:1.3rem; color:#424242 ; margin: 3px 10px 3px 0; font-weight: 600; }
.added-file:last-of-type { margin-right: 0; }
.added-file:hover {background: #e0e0e0}
.added-file img { margin-right: 5px; opacity: 0.7; width: 12px; height: 14px; position:relative;}

@media(max-width: 768px) {
	.added-file {font-size: 1.3rem}
}

@media(max-width: 500px) {
	.added-file {font-size: 1.2rem}
	.added-file img {width: 10px; height: 12px;}
}

/* 파일 커스텀 */
.file-input { display: inline-block; text-align: left; width: 250px; position: relative; padding-left: 20px; font-size: 1.5rem; line-height: 35px; vertical-align: middle; background-color: #fff; cursor: pointer; border: 1px solid #c4c4c4; font-weight: 400; border-radius: 7px; height:36px;}
.file-input:hover { border-color: #9f9f9f;}
.file-input > input[type='file'] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 301; cursor: pointer; }
.file-input > .button { position: absolute; top:0px; right:20px; font-size: 18px; }
.file-input > .label { color: #333; white-space: nowrap; vertical-align: top; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block;}
.file-row:not(:first-child) { margin: 5px 0 0; }

/* 파일 추가 제거 버튼  */
.file-row .add-wrap { display: inline-block; margin-left: 10px; position: relative; }
.file-row .add-wrap button { border-style: none; background: transparent; width: 20px; height: 20px; margin-right: 3px; }
.file-row .add-wrap button img {opacity: .4; cursor: pointer; width:20px; height:20px}
.file-row .add-wrap button:hover img {opacity: 1;}

@media(max-width:500px) {
	.file-input {font-size:1.3rem}
}

/************************************** 체크박스, 라디오 버튼 **************************************/


/* 체크박스 */
.check-input-box {display: inline-block}
input[type=checkbox]:not(old) { margin:0; padding:0; background:url("../../img/common/check_box_off.png") no-repeat 0 0; opacity:0; width: 0} 
input[type=checkbox]:not(old) + label { display: inline-block; text-align: left; padding-left: 25px; background: url("../../img/common/check_box_off.png") no-repeat 0 0;vertical-align: top;position: relative; top:0;  line-height: 20px;margin-right: 10px; color: #000;font-size: 1.4rem}
input[type=checkbox]:not(old):checked + label { background: url("../../img/common/check_box_on.png") no-repeat 0 0;  top:0; margin-right: 10px;font-size: 1.4rem}

/* 라디오 */
.radio-input-box {display: inline-block}
input[type=radio]:not(old) { margin:0; padding:0; opacity:0; background:url("../../img/common/radio_box_off.png") no-repeat 0 0; width:0; } 
input[type=radio]:not(old) + label {text-align: left; padding-left: 20px; background: url("../../img/common/radio_box_off.png") no-repeat 0 0;  vertical-align: middle ;position: relative; top:0; line-height:20px; margin-right: 10px; color: #000;width: 15px; font-size: 1.4rem}
input[type=radio]:not(old):checked + label { background: url("../../img/common/radio_box_on.png") no-repeat 0 0; position: relative; top:0; margin-right: 10px;font-size: 1.4rem}


/************************************** search ui **************************************/

/* 검색 공통  */
.search-ui-wrap .search-ui { width:100%; position: relative; border-radius: 100px; padding:25px 150px 25px 40px; }
.search-ui-wrap .search-ui input[type="text"].search-input { border:0; width:100%; height:100%; font-size: 1.7rem; font-weight:600; }
.search-ui-wrap .search-ui button.search-btn { position: absolute; top:12px; right:20px; border:0; background:var(--theme-color); color:#fff; font-weight: 600; padding: 15px 35px; border-radius: 50px; letter-spacing: 0.6px; transition: padding .2s; }
.search-ui-wrap .search-ui button.search-btn .material-icons { font-size: 18px; position: absolute; top: 13px; right:30px; opacity: 0; transition: opacity .2s, right .2s; }
.search-ui-wrap .search-ui button.search-btn:hover { padding-right: 45px; }
.search-ui-wrap .search-ui button.search-btn:hover .material-icons { right: 22px; opacity: 1;}

/* 인풋 그림자 스타일 */
.search-ui-wrap .search-ui-01 { width:100%; background:#fff; box-shadow: 3px 3px 8px 4px rgba(0,0,0,0.1); position: relative; border-radius: 100px; padding:25px 150px 25px 40px; border:1px solid #fff; transition: border .2s; }
.search-ui-wrap .search-ui-01:hover { border:1px solid var(--theme-color); }

/* 인풋 보더 테마컬러 스타일 */
.search-ui-wrap .search-ui-02 { background:#fff; border:1px solid var(--theme-color); transition: border .2s; }
.search-ui-wrap .search-ui-02 input[type="text"].search-input { border:0; width:100%; height:100%; font-size: 1.7rem; font-weight:600; }
.search-ui-wrap .search-ui-02 button.search-btn { position: absolute; top:12px; right:20px; border:0; background:var(--theme-color); color:#fff; font-weight: 600; padding: 15px 35px; border-radius: 50px; letter-spacing: 0.6px; transition: padding .2s; }
.search-ui-wrap .search-ui-02 button.search-btn .material-icons { font-size: 18px; position: absolute; top: 13px; right:30px; opacity: 0; transition: opacity .2s, right .2s; }
.search-ui-wrap .search-ui-02 button.search-btn:hover { padding-right: 45px; }
.search-ui-wrap .search-ui-02 button.search-btn:hover .material-icons { right: 22px; opacity: 1;}

/* 인풋 스몰 스타일 */
.banner-text-wrap.ui-03 .search-ui-sub {width:100%;}
.search-ui-wrap .search-ui-03 {border-radius: 5px; padding:6px 50px 6px 20px; border:1px solid #d2d2d2; box-shadow:2px 4px 20px 0px rgba(0,0,0,0.05); height:46px; }
.search-ui-wrap .search-ui-03 input[type="text"].search-input {font-size:1.5rem;}
.search-ui-wrap .search-ui-03 button.search-btn.ui03-btn {border-radius:5px; top:7px; right:7px; padding:7px }
.search-ui-wrap .search-ui-03 button.search-btn.ui03-btn:hover  {padding:7px}
.search-ui-wrap .search-ui-03 button.search-btn.ui03-btn .material-icons {opacity:1; position:static; top:auto; left:auto;}
.search-ui-wrap .search-ui-03 button.search-btn.ui03-btn:hover .material-icon {top:auto; left:auto; right:auto}

@media (max-width: 768px) {
    /* 검색 공통  */
    .search-ui-wrap .search-ui { padding: 15px 110px 15px 20px; }
    .search-ui-wrap .search-ui input[type="text"].search-input { font-size: 1.4rem;}
    .search-ui-wrap .search-ui button.search-btn { padding: 8px 20px; top: 8px; right:10px;}
    .search-ui-wrap .search-ui button.search-btn:hover { padding-right: 30px; }
    .search-ui-wrap .search-ui button.search-btn:hover .material-icons { top: 7px; right:10px;}
	.search-ui-wrap .search-ui-03 {height:40px; padding: 8px 20px 8px 10px; background:#fff;}
	.search-ui-wrap .search-ui-03 button.search-btn.ui03-btn {top:4px; right:5px;}
	.search-ui-wrap .search-ui-03 button.search-btn.ui03-btn .material-icons {font-size:16px}	
	.search-ui-wrap .search-ui-03 input[type="text"].search-input {font-size:1.2rem}
}

/* top 검색어 */
.ranking-wrap { padding-top: 30px; }
.banner-text-wrap.ui-03 .ranking-wrap{padding-top:15px}
.ranking-wrap .ranking .tit { position: relative; top:5px; display: inline-block; font-size: 1.5rem; color:#5c607d; letter-spacing: -0.2px; font-weight: 900; float: left; }
.ranking-wrap .ranking .tit > img { width:20px; position: relative; top:-3px; }
.ranking-wrap .ranking .top-list { display: inline-block; padding-left:15px;float: left; }
.ranking-wrap .ranking .top-list ul li { display: inline-block; padding:5px 18px; color: #b3b6c9; font-size: 1.2rem; border-radius: 30px; font-weight: 600; letter-spacing: 0; cursor: pointer; background:#f0eef5; transition: background .15s, color .15s; }
.ranking-wrap .ranking .top-list ul li:hover { background:#e8e2f5; color:#6d5aa2;}


@media (max-width: 768px) {
	
	/* top 검색어 */
	.ranking-wrap .ranking { text-align: center; }
	.ranking-wrap .ranking .tit { float:none; padding-bottom:20px; width: 100%; }
    .ranking-wrap .ranking .top-list { float:none; width: 100%; padding-left:0; }
    .ranking-wrap .ranking .top-list ul li { margin-bottom: 10px;}
	.fix-banner-wrap.scroll .ranking-wrap {display:none}
}




/************************************** tab menu ui **************************************/


/* 탭메뉴 */
.tab-menu-wrap { border-bottom: 1px solid var(--theme-color); margin-bottom: 30px;}
.tab-menu-wrap .tab-menu { width: 1200px; margin: 0 auto; }
.tab-menu-wrap .tab-menu ul { display: block; height: 100%; }
.tab-menu-wrap .tab-menu ul li { display: block; height: 100%; float: left; width: 20%; }
.tab-menu-wrap .tab-menu ul li:hover {background:#f0eef5}
.tab-menu-wrap .tab-menu ul li a { display: block; height: 100%; text-align: center; font-size: 1.5rem; color: #999; border-bottom: none; border-right: none; padding: 15px 0;}
.tab-menu-wrap .tab-menu ul li.tab-select a { border-color: var(--theme-color); background:var(--theme-color); position: relative; color: #fff; }
.tab-menu-wrap .tab-menu ul li.tab-select a:after { position: absolute; z-index: 2; content: ''; width: calc(100% + 1px); left: 0; bottom: -1px; background: var(--theme-color); height: 1px; }
.tab-menu-wrap .tab-menu ul li.tab-select a:before { position: absolute; z-index: 3; content: ''; width: 1px; right: -1px; height: calc(100% + 2px); background: var(--theme-color); top: -1px; }

@media(max-width:1200px) {
	.tab-menu-wrap .tab-menu {width:100%}
}

@media(max-width:768px) {
	.tab-menu-wrap .tab-menu ul li a {font-size:1.4rem}
}

@media(max-width:500px) {
	.tab-menu-wrap .tab-menu ul li a {font-size:1.3rem;}
}

/************************************** 팝업 CSS **************************************/

.popup-wrap {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index: 9999;}
.popup-wrap .popup {position: absolute; top: 50%; left: 50%; width: 800px; height: 55vh; background-color: #fff; transform: translate(-50%,-50%); border-radius: 10px; box-shadow: 0px 10px 20px #929292; overflow:hidden; }
.popup-wrap .popup .modal-title-area {padding: 20px; font-size: 1.7rem; font-weight: 600;
    border-bottom: 1px solid #dee3eb; position: relative;}
.popup-wrap .popup .modal-title-area .close-btn { position: absolute; right:20px; top: 18px; cursor: pointer; padding:3px; border-radius: 3px; background: #eeecf2; width:25px; height: 25px; text-align: center; }
.popup-wrap .popup .modal-title-area .close-btn img {width: 17px; height: 17px; opacity: 0.5}
.popup-wrap .popup .modal-title-area .close-btn:hover { background: #e4e0ee; }

.popup-wrap .popup .modal-text-area {padding: 20px; font-size: 1.5rem; line-height: 20px;overflow-y: auto; height: calc(100% - 145px);}
.popup-wrap .popup .modal-foot-area {padding: 20px; border-top: 1px solid #dee3eb; background-color: #fff;}
.popup-wrap .popup .modal-foot-area .btn-wrap button { height:50px; font-size: 1.6rem; padding: 0 50px;}
.popup-wrap .popup .modal-foot-area .btn-wrap button .material-icons { padding-right: 5px;}



@media(max-width: 768px) {
	.popup-wrap .popup {width: calc(100% - 40px)}
	.popup-wrap .popup .modal-title-area {font-size: 1.5rem;padding: 15px;}
	.popup-wrap .popup .modal-title-area .close-btn {top: 14px; right: 15px;}
	.popup-wrap .popup .modal-foot-area {padding: 15px;}
	.popup-wrap .popup .modal-text-area {height: calc(100% - 120px)}
}

@media(max-width: 500px) {
	.popup-wrap .popup .modal-title-area {font-size: 1.5rem;}
	.popup-wrap .popup .modal-title-area .close-btn {top: 13px}
	.popup-wrap .popup .modal-text-area {height: calc(100% - 115px);}
	.popup-wrap .popup .modal-foot-area .btn-wrap button {min-width: 90px; font-size: 1.3rem; line-height: 35px; height: 35px;}
}


/************************************** scroll bar custom **************************************/
.scroll {
	overflow-y: auto;
	/* ie scrollbar css */
	scrollbar-arrow-color: #efefef;
	scrollbar-Track-Color: #efefef;
	scrollbar-base-color: #dfdfdf;
	scrollbar-Face-Color: #dfdfdf;
	scrollbar-3dLight-Color: #dfdfdf;
	scrollbar-DarkShadow-Color: #dfdfdf;
	scrollbar-Highlight-Color: #dfdfdf;
	scrollbar-Shadow-Color: #dfdfdf
}

.scroll::-webkit-scrollbar {
	width: 6px;
}

.scroll::-webkit-scrollbar-thumb {
	height: 17%;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 10px;
}

.scroll::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0);
}