@charset "utf-8";
@import url('./common.css');

@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');}


/* 기본 */
body, html, ul, dl, dt, dd, form, input, button, fieldset, img, h1, h2, h3, h4, h5, h6 {margin:0;padding:0;border:0}
header, main, footer, header, menu, nav, section {display:block}
h1, h2, h3, h4, h5, h6 {font-weight: 400;}
ul, dl,dt,dd {list-style:none}
button[type="submit"], input[type="submit"] {cursor:pointer}

select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#333;text-decoration:none}

*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

input[type=text],input[type=password], textarea {
-webkit-transition:all 0.30s ease-in-out;
-moz-transition:all 0.30s ease-in-out;
-ms-transition:all 0.30s ease-in-out;
-o-transition:all 0.30s ease-in-out;
outline:none;
}

input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus {
outline:none;
}


/* 스타일 설정 */
body {font-size:  15px; font-family: 'Noto Sans KR', 'Sans-serif'; line-height: 1.6;color: #333;letter-spacing: -1px;font-weight:300;}
select,input,textarea,button {font-size:  15px; font-family: 'Noto Sans KR', 'Sans-serif'; }
table {  table-layout: fixed;  border-collapse: collapse;  word-break: break-all;}
#header {margin: 0 0 30px ; padding-top: 15px; border-bottom: 1px solid #d2d2d2;height: 100px; }
.container {margin: 0 auto; max-width: 1273px; padding: 0 15px}
.content{margin-bottom: 50px;overflow: hidden; padding: 0}
.flex-right { margin-top: 12px; margin-left: auto;}
.float-right {float: right }
.btn {padding: 6px 10px; font-size: .797em; margin-left: 5px}
.crow {  --bs-gutter-x: 1.5rem;   --bs-gutter-y: 0;  display: flex;  flex-wrap: wrap;}
.current-page { margin-bottom: 20px; font-size: .879em}
@media (max-width: 767px) {
  #header {position: fixed; background: #fff; width: 100%;  border-bottom: 0; margin-bottom:  0;z-index: 1000;height:180px}
  .mo-none {display: none}
  .mo-w{width: 100% !important;}
}

/* 로고 */
#header .logo-top {display: block; width: 100%; height: 69px;}
#header .logo-top h1{font-size: 0.897em; margin-bottom: -0.8em}
#header .logo-top a {font-family: 'Black Han Sans', sans-serif; font-size: 36px; }
#header .logo {position: relative; float: left;}
#header .logo-top .btn-top {margin-top: 12px}
#header .logo-top .btn-top .btn-top-mn { background-color: #fff; border: 2px solid #faa619;border-radius: 8px;color: #faa619;}
#header .logo-top .btn-top .btn-top-mn:hover { background-color: #faa619; border: 2px solid #faa619;border-radius: 8px;color: #fff;}
#header .logo-top .formSearch {display: flex;}
#header .logo-top .search-all { width: 300px; text-align: center; margin: 0 auto;  border-bottom: 1px solid;padding-top: 20px;}
#header .logo-top .search-all input {width: 100%; height: 40px; padding: 10px; font-weight: 700; font-size: 1.289em}
#header .logo-top .search-all input::placeholder { font-size: 0.789em; color: #b4b6bd; font-weight: 300}
#header .logo-top .search-all input::-webkit-input-placeholder { /* WebKit browsers */color: #b4b6bd;font-size: 0.789em;}
#header .logo-top .search-all input::-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #b4b6bd;font-size: 0.789em; opacity: 1;}
#header .logo-top .search-all input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #b4b6bd;font-size: 0.789em; opacity: 1;}
#header .logo-top .search-all input::-ms-input-placeholder { /* Internet Explorer 10+ */ color: #b4b6bd;font-size: 0.789em;}

#header .logo-top .search-all .btn-search {background: none; font-size: 1.5em;padding-right: 10px}
@media (max-width: 767px) {
  #header .logo-top { text-align: center; height:auto; margin-bottom: -30px;}
  #header .logo-top .float-right {position: relative; }
  #header .logo-top > div:nth-child(2){float: left;}
  #header .logo {float: none;}
  #header .logo-top .btn-top {margin-top: 0; top:-45px}
  #header .logo-top .search-all {position: relative; display: inline-block; width: 100%; border: 1px solid; padding:  0; top:-30px}
  #header .logo-top .search-all input {font-size: 1.34em; font-weight: 500;}
}

/* 메뉴 */
#header .menu-top {position: relative; width:70%;top:-50px; padding: 0; margin: 0 auto;}
#header .menu-top ul { display: flex; justify-content: space-between; }
#header .menu-top li a { font-weight: 400; font-size: 17px; color: #333; letter-spacing: -1px; line-height: 34px;padding: 8px 0}

#header .menu-top li{}
#header .menu-top li::after { display:block;content: ''; border-bottom: 2px solid #71a8ff; transform: scaleX(0);transition: transform 180ms ease-in-out;}
#header .menu-top li:hover::after {transform: scaleX(1);}
#header .menu-top li a:hover{  color:#faa619}
#header .menu-top li:hover .submenu {display: block;}
#header .menu-top li.on {  border-bottom: 2px solid #faa619;height:36px;}
#header .menu-top li.on a { color: #faa619 }
#header .menu-top li.on a:hover { color: #faa619;}
#header .menu-top .submenu {display: none;position: absolute; background-color: #fff;padding: 10px;border: 1px solid #71a8ff;margin-top: 3px;z-index: 1000;width:max-content}
#header .menu-top .submenu li{display: table;}
#header .menu-top .submenu li::after {border: 0}
@media (max-width: 767px) {
  #header .menu-top { position: absolute;top:100px; padding: 0; margin: 0px -15px 0;width:100%}
  #header .menu-top ul {display: grid;grid-template-columns: 1fr 1fr 1fr;width:100%}
  #header .menu-top li { text-align: center; background: #f9f9f9; border: 1px solid #ddd; position: relative; margin-left: -1px; margin-top: -1px}
  #header .menu-top li a { display: block;  padding: 6px 0; font-size: .91em; color: #333; font-weight: 400; }
  #header .menu-top li{  border-bottom: 1px solid #ddd;}
  #header .menu-top li:hover{  border-bottom: 1px solid #ddd;}
  #header .menu-top li.on { height:auto;}
  #header .menu-top li::after {border:0}
  #header .menu-top .submenu {z-index: 1000;border: 1px solid #71a8ff}
  #header .menu-top .submenu li {background-color: #fff;border: 0}
}

/* 왼쪽메뉴 */
#main .container .left-menu { position: absolute; left: -170px;margin-top: 20px}
#main .container .left-menu ul { border-radius: 5px; background-color: #f7faff; border: 1px solid #0300e1; padding: 10px}
#main .container .left-menu ul li { border-bottom: 1px solid #d1d3f9; font-size: 14px; font-weight: 400; letter-spacing: -1.5px; padding: 8px}
#main .container .left-menu ul li::after {display: block; content: "➧"; font-weight: 900; width: 20px; height: 20px; float: right; padding-left: 12px;position: relative;top:-1px;}
#main .container .left-menu ul li:last-child {border-bottom: 0}
#main .container .left-menu ul li:hover a {color:#e12300;font-weight: 500;}
#main .container .left-menu ul li:hover::after{color: #e12300}
#main .container .left-menu ul li.active a {color:#e12300;font-weight: 500;}
#main .container .left-menu ul li.active::after{color: #e12300}

/* 메인 상단 */
.main-top {margin-bottom:50px;width:100%;height:448px;background:url('../img/main_bg01.png') no-repeat 0 0;background-size:100% 448px;color:#fff;margin-top:-30px;}

/* 서브 상단 */
.sub-top {margin-bottom:0px;width:100%;height:302px;background:url('../img/main_bg01.png') no-repeat 0 0;background-size:100% 302px;color:#fff;margin-top:-30px;overflow: hidden;}

/* 컨텐츠 */
#main { margin-bottom: 50px}
@media (max-width: 767px) {
 #main { padding-top: 180px}
}

/* 메인 라인 */
.c-line {height: 4px; background-color:#faa619; width:50%; margin: 20px 0;}
.c-line::after{display: block;position: relative;content: "";background-color: #f0f0f0;height: 4px;width: 50%;left: 50%;}

/* 메인 이미지 */
.main-img {min-width: 100%; max-height: 433px; border-radius: 20px;}
@media (max-width: 767px) {
  .main-img { min-width:auto}
 }

/* 상품 */
.row {display: block;padding: 0; padding-bottom: 30px}
.items { display: grid;grid-template-columns: 1fr 1fr 1fr; margin-left: 10px; margin-right: 10px}
.item img {width: 100%}
.item { padding: 20px 30px}
.item h3 { font-size: 1.087em; font-weight: 500; padding-top: 10px}
@media (max-width: 767px) {
 .items { display: grid;grid-template-columns: 1fr 1fr; }
 .detail-con img {width: 100%}
}

/* 상품뷰어*/
.detail { display: grid;grid-template-columns: 1fr 1.5fr}
.detail .thumnail img{ width: 100%}
.detail .explanation { margin-left: 30px}
.detail .explanation h2 {font-size: 1.287em; font-weight: 700}
.detail .options {margin: 15px 0; }
.detail .account {font-size: 1.387em; font-weight: 700}
.detail .brief { position: relative;margin-top: 5px;  padding-left: 10px;  font-weight: 300;  line-height: 1em;}
.detail .brief::before {  display: inline-block;  position: absolute;  left : 0;  top: 7px;  content: '';  width: 3px;  height: 3px;  border-radius: 50%;  background-color: #bbb;}
.detail .btn-apply {margin: 0; width: 50%;   font-size: 1.087em; background: #464d60;    border: 1px solid #464d60;    color: #fff;  letter-spacing: -1.6px;  padding: 15px 0}
.detail-con { margin-top: 30px; padding-top: 30px; border-top: 1px solid #d2d2d2}
@media (max-width: 767px) {
  .detail { display: grid;grid-template-columns: 1fr}
  .detail .explanation { margin-left: 0px}
  .detail .explanation h2 {font-size: 1.487em;letter-spacing: -1px;}
  .detail .account {font-size: 1.687em;}
  .detail .btn-apply  {width: 100%;   font-size: 1.287em; padding: 20px 0}
}

/* 상품신청 */
.order-form { width: 100%; margin-top: 30px; font-size: .987em;padding: 40px}
.order-form h3 {font-size: 1.8em;font-weight: 500;}
.order-form label { float: left; font-size: 1.087em;display: block;}
.order-form input { float: left; width: 40%; border: 1px solid #e2e2e2; padding: 8px 12px}
.order-form .checkbox { width: 20px; height: 20px;margin: 5px}
.order-form .good_thumb {width: 30%;}
.order-form .good_thumb img {width: 100%}
.order-form .agree_cont {overflow-x: hidden; overflow-y: scroll;border:1px solid #e2e2e2;padding: 10px;height: 200px;font-size: 14px; color: #7e7e7e ;line-height: 1.6}
.order-form .alt-txt {padding-left:10px;line-height: 40px}
@media (max-width: 767px) {
  .order-form {padding: 20px}
  .order-form input { width: 65%}
  .order-form .alt-txt {padding-left: 40%;}
}
.taxbox-1, .taxbox-2 {display: none;}

/* 게시판 */
.board-list, .board-view  { width: 100%; margin-top: 30px; font-size: .987em;}
.board-list thead th { padding: 8px 0; border-top: 1px solid #666;    border-bottom: 1px solid #cbccce;    background: #efefef;    font-style: normal; font-weight: normal;}
.board-list tbody td { padding: 8px 0; text-align: center; letter-spacing: -0.5px; border-bottom: 1px solid #cbccce;}
.board-form {margin-top: 30px;}
.board-form ul{width: 70%;margin: 0 auto;padding-top: 30px;background: #f4f4f4; border: 1px solid #d7d7d7}
.board-form li {padding: 0px 40px}
.board-form label {width: 100%; font-size: 1.087em;padding:10px 0 5px;display: block;}
.board-form input {width: 100%; border: 1px solid #e2e2e2; padding: 8px 12px}
.board-form input[type=file] {border: 0;}
.board-form textarea {width: 100%; border: 1px solid #e2e2e2;height: 150px;padding: 10px}
.board-view thead th { padding: 8px 0; border-top: 1px solid #666;    border-bottom: 1px solid #cbccce;    background: #efefef;    font-style: normal; font-weight: normal;}
.board-view tbody td { padding: 8px 5px; letter-spacing: -0.5px; border-bottom: 0px solid #cbccce;}
@media (max-width: 767px) {
  .board-form ul{width: 100%;margin: 0 auto;}
}

/*자주묻는질문 탭메뉴*/
.tabs {overflow: hidden; background-color: #efefef;margin: 30px 0 10px}
.tabs ul{overflow: hidden; }
.tabs li {float: left; padding: 12px 20px}
.tabs-content {padding: 20px 10px}
.tabs-content h2 {font-size: 16px}
#tabs-nav li:hover, #tabs-nav li.active { background-color: #1466e8; }
#tabs-nav li:hover a, #tabs-nav li.active a {color: #fff}
@media (max-width: 767px) {
  .tabs ul{display: grid;grid-template-columns: 1fr 1fr }
}

/* 페이징 */
.paginate-wrap { margin: 10px 0;}
.paginate {padding: 20px 0 0; text-align: center;}
.paginate {padding: 20px 0 0;text-align: center;}
.paginate a,
.paginate strong {display: inline-block;border: 1px solid transparent;padding: 3px 14px 4px 14px;vertical-align: middle;}
.paginate strong {border-color:#333949;background: #646464;color: #fff;border-radius:3px;font-weight:400;}
.paginate a:hover {color: #333;}
.paginate a {color: #333;}
.paginate a.first,
.paginate a.prev,
.paginate a.next,
.paginate a.last {border-color: #dedede;border-radius: 3px;font-weight: normal;letter-spacing: -1px;}
.paginate a.first:hover,
.paginate a.prev:hover,
.paginate a.next:hover,
.paginate a.last:hover {border-color: #dedede;border-radius: 0;text-decoration: none;}
.paginate a span {display: inline-block;width: 0;height: 0;border: 4px solid #666;}
.paginate a.first span,
.paginate a.prev span {border-width: 4px 4px 4px 0;border-color: transparent #666 transparent transparent; }
.paginate a.next span,
.paginate a.last span {border-width: 4px 0 4px 4px;border-color: transparent transparent transparent #666;}

/* 카피라이트 */
#footer { font-weight: 400; font-size: .897em; color: #a9a9a9; background-color: #000726}
#footer .container {padding: 30px 15px}
#footer .container ul {display: flex; }
#footer .container li {float: left; padding-right: 15px;}

@media (max-width: 767px) {
  #footer {margin-bottom: 68px;}
  #footer .container ul {display: inline-block; padding-bottom: 0px;}
  #footer .container li {font-size: 0.81em}
}

/* 로고 */
#footer .logo-bottom {display: block; width: 100%; height: 69px;}
#footer .logo-bottom h1{font-size: 0.897em; margin-bottom: -0.8em;color: #fff;}
#footer .logo-bottom a {font-family: 'Black Han Sans', sans-serif; font-size: 36px; color: #fff;}
#footer .logo {position: relative; float: left;}

@media (max-width: 767px) {
  #footer .logo-bottom { text-align: center; height:auto; margin-bottom: -30px;}
  #footer .logo {float: none;top:-20px}
}