/*
메인색 : #050725
yellow : #ffd300
green : #168759
*/

/* root */
:root{
  --btn_header : 60px;
  --btn_footer : 60px;
  --main_color : #17204e;
}

/* common */
body{width:100vw;height:100vh;overflow-x:hidden;overflow-y:auto}
input[type="checkbox"]{vertical-align:middle;margin:0 5px 0 0}
input:read-only{background-color:#dee2e6}
.wrap{width:100%;height:calc(100vh - var(--btn_header) - var(--btn_header));overflow-x:hidden;overflow-y:auto;padding:10px;box-sizing:border-box;background: url(/_data/images/common/main_bg.jpg) center / cover no-repeat;}
.wrap.bg_none { background:none;}
.form-check {display: flex;line-height: 30px;}
.input_basic {width: 100%;border: 1px solid #bfbfbf;height: 40px;text-indent: 5px;box-sizing: border-box;}
.btn { font-weight:bold; color:var(--main_color); }


/* font */
.h_title,.login_more_menu>a{font-weight:bold}

html{font-size:62.5%}
body{font-size:1.4rem}
.auth_chk,.main_footer{font-size:1.2rem}
.intro_text_in>p{font-size:1.6rem}
.it_sub{font-size:1.8rem}
.it_main,.btn_header{font-size:2rem}
/*{font-size:2.5rem}
{font-size:3rem}
{font-size:3.5rem}*/

/* default */ 
.mr-2 {margin-right: 0.2em;}


/* body  */
/*body:before { content: ''; background: url(/_data/images/common/logobg.png);  background-position: center center;  background-repeat: no-repeat;  display: block;  position: fixed;  height: 100%;  width: calc( 100% - 10px ); margin:0 5px; z-index: -1;  background-size: contain;}*/

/* header */
header {width:100%;height:var(--btn_header);line-height:var(--btn_header);background:#fff;padding:0 10px;box-sizing:border-box;border-bottom:1px solid #d9d9d9;}
.header_in { display:flex;justify-content:space-between;align-items: center; height:100%;}
.header_in a { display:flex; align-items: center;}
.header_in img {width: 30px;height: 30px;object-fit: contain;}
.header_in .header_title {font-size: 1.2em; font-weight: bold; color: var(--main_color);}
.header_in .header_title img {width:auto;}
/* footer */
footer{width:100%;height:var(--btn_footer);line-height:var(--btn_footer);position: fixed; bottom: 0;left:0}
.main_footer{  width: 100%;  height: 100%;  padding: 5px 10px;  background: #fff;  border-top: 1px solid #d3dae0;  box-sizing: border-box;}
.main_footer_in{display:flex;justify-content:space-between;text-align:center;width:100%;height:100%;}
.btn_main_footer{display: flex;  justify-content: center;  width: 100%;  height: 100%;  margin: 0 1%;  align-items: center;  flex-wrap: wrap;}
.ic_footer{width:auto;height:60%;line-height:60%;margin:0 0 5px 0}
.ic_footer>img{display:inline-block;width:100%;height:100%;object-fit:contain;}
.footer_name{width:auto;min-width: var(--btn_footer);height:20px;line-height:20px;}

/* common - pagin */
.paging {  width: 100%;  padding: 10px 0;}
.paging .paging_in {  display: flex;  justify-content: center;}
.paging .paging_in li {  list-style: none;  margin: 0 0.5em;}
.paging .paging_in li a {  display: block;  border: 1px solid;  padding: 5px 8px;  border-radius: 5px;}
.paging .paging_in li a:hover {  color: var(--main_color);}
.paging .paging_in li.on a {  background: var(--main_color);  color: #fff;}
.paging .paging_in li.paging_arrow a {  border: 0px;}

/* nav */
nav {display: none;width: 100%;height: 100vh;background: #fff;position: fixed;left: 0;top: 0;z-index: 1024;}
.nav-title {text-align: center;font-size: 1.5em;position: relative;}
.nav-title a {position: absolute;right: 10px;}

.main article { margin: 10px 0 0 0;  padding: 20px;  box-sizing: border-box;  line-height: normal;  background: #fff;  border-radius: 10px;}

/* main user_info */
.user_info .user_name {  padding: 0 0 10px;}
.user_info_box {  border-top: 1px dashed #ddd;  padding: 20px 10px 0;}
.user_info_btn a {  display: flex;  border: 1px solid #ddd;  border-radius: 10px;  align-content: center;  justify-content: space-evenly;  flex-wrap: wrap;  flex-direction: column;  padding: 10px 20px;}
.user_info_btn img {  height: 40px;  vertical-align: middle;}
.user_info_point>div {  display: flex;  align-items: center;  justify-content: space-between;}
.user_info_point {  flex: auto;  padding: 0 0 0 10px;}
.user_info_point img {  height: 30px;  vertical-align: middle;}
.user_info_point .ui_point {  font-size: 1.2em;  font-weight: bold;  flex: auto;  text-align: right;  padding: 0 10px 0 0;}

/* main partner_url */
.main .partner_url_btn {  display: flex;  justify-content: space-evenly;  align-items: center;  padding: 10px;}
.main .partner_url_btn img{  height:40px;}

/* main main_count_box */
.main .main_count_box {  padding: 10px 20px;}
.main_count_box  img {  height:70px;}
.main_count_box>div {  display: flex;  justify-content: space-evenly;  align-items: center;  padding: 10px 15%;}
.main_count_box>div+div {  border-top: 1px dashed #ddd;}
.main_count_box>div>div:last-child {  flex: auto;  font-size: 1.2em;  text-align: center;}
.main_count_box>div:nth-child(2n) {  flex-direction: row-reverse;}

.main .main_product { padding: 10px 20px; }

/* nav */
nav section{height: 100%; overflow: auto;}
.nav-title {  padding: 20px;  display: flex;  justify-content: center;  align-items: center;}
.nav-title img {  height: 60px;}
.nav-title img:last-child {  right: 10px;  position: absolute;  height: 40px;}

.user_info_nav {  background: url(/_data/images/common/main_bg.jpg) center / contain;  color: white;  padding: 0 20px;}
.user_info_nav img {  height: 30px;}
.user_info_nav>div {padding: 10px 20px;  display: flex;  align-items: center;  justify-content: space-between;}
.user_info_nav>div:first-child {padding: 10px 0;  justify-content: space-evenly;}
.user_info_nav>div+div {  border-top: 1px dashed #ddd;}
.user_info_nav>div>span {  display: flex;  flex-wrap: wrap;  align-items: center;}
.user_info_nav>div:not(.ui_haed)>span {min-width: 30%;  text-align: right;  display: block;}

.nav-list {    display: flex;    flex-wrap: wrap;    justify-content: space-evenly;}
.nav-list img {  height: 50px;}
.nav-list>div {  width: 30%;  text-align: center;}
.nav-list a {  display: flex;  margin: 20px;  flex-direction: column;  flex-wrap: wrap;  align-items: center;}
.nav-list a div {  border: 1px solid #ddd;  border-radius: 10px;  width: 100px;  padding: 15px 0;  box-sizing: border-box;  margin-bottom: 10px;  max-width:100%;}

.logout_btn {padding:10px; margin-bottom:20px;}
.logout_btn .btn {background: #7363e0;display: block;padding: 20px;text-align: center;color: #fff;border-radius: 10px;}

.page_title {line-height: 30px;}
.guide_title { font-size: 1.2em; color: #197ec6; font-weight: bold;}
.guide_box {  padding: 5px 10px;  margin: 5px 0 0;  width: 100%;  box-sizing: border-box;  line-height: 1.8em;}

/* myinfo */
.my_info article {padding:10px 20px;}
.my_info article .article_title img {height:30px;}
.article_title {  padding: 0 0 10px;  border-bottom: 1px dashed #ddd;  }
.article_title.none { border-bottom: none;}
.article_title a {display: flex;align-items: center;}

.partner_btn { background: #ffc000 !important;border-color :#ffc000 !important; }


/* btn */
.btn_w100{display:inline-block;width:100%;height:auto;line-height:50px;border-radius:10px;text-align:center;font-weight:bold}
.btn_wh60{display:inline-block;width:60px;height:60px;line-height:60px;text-align:center;}

.btn_bg_b{background-color:#000;color:#fff;border:1px solid #000;box-sizing:border-box}
.btn_bg_w{background-color:#fff;color:#000;border:1px solid #fff;box-sizing:border-box}
.btn_bd_w{background-color:none;color:#fff;border:1px solid #fff;box-sizing:border-box}
.btn_bg_blue{background-color:blue;color:#fff;border:1px solid blue;box-sizing:border-box}

.btn_sns_login{display:inline-block;width:50%;height:50px;line-height:50px;background:red;margin:0 auto;text-align:center;margin:0 0 10px 0}
.btn_nav_close{display:inline-block;width:70px;height:70px;text-align:right;color:#fff;padding:0 10px;box-sizing:border-box;}
.btn_nav_close>i{vertical-align:middle;}




/* search_password */
.search_password_send{margin:0 0 50px 0}
.search_password_input{display:inline-block;width:100%;height:50px;line-height:50px;border-radius:5px;background:#fff;text-align:center;border:1px solid #dee2e6;margin:0 0 20px 0;box-sizing:border-box}
.sp_number{width:100%;height:50px;line-height:50px;display:flex;justify-content:space-between;max-width:600px;margin:20px auto;}
.sp_number>input{display:inline-block;width:50px;height:50px;line-height:50px;border:1px solid #dee2e6;box-sizing:border-box;border-radius:5px;text-align:center}

/* index */
.index_coin{width:100%;height:auto;border:1px solid #dee2e6;box-sizing:border-box}
.index_tab{width:100%;height:40px;line-height:40px;display:flex;justify-content:space-between;}
.index_tab>a{display:inline-block;width:25%;height:100%;text-align:center;background:#dee2e6}
.index_tab>a.on{background:#fff}
.index_coin_list_in{width:100%;height:40px;line-height:40px;border-bottom:1px solid #dee2e6;box-sizing:border-box;display:flex;justify-content:space-between;;padding:0 10px}
.index_coin_list_in:last-child{border-bottom:none}
.index_text_banner{padding:10px 0;}
.index_text_banner>ul{width:100%;height:40px;line-height:40px;}
.index_text_banner>ul li{width:100%;height:100%;background:black}
.index_text_banner>ul li a{display:inline-block;width:100%;height:100%;text-align:center;color:#fff}
.index_coin_box{display:flex;justify-content:space-between;margin:10px auto 20px auto}
.index_coin_box>a{display:inline-block;width:calc(100% / 5);text-align:center}
.index_main_title{width:100%;height:50px;line-height:50px;display:flex;justify-content:space-between;border:1px solid #dee2e6;box-sizing:border-box;border-radius:5px}
.imt_ic{display:inline-block;width:50px;height:50px;line-height:50px;text-align:center}
.imt_text{width:calc(100% - 50px - 50px)}
.imt_more{display:inline-block;width:50px;height:50px;line-height:50px;text-align:center}
.index_img_banner{width:100%;height:50px;line-height:50px;display:grid;grid-template-columns:repeat(2, 1fr);gap:0 10px;}
.index_img_banner>a{display:inline-block;width:100%;height:100%;text-align:center}
.index_img_banner>a>img{display:inline-block;width:100%;height:100%;object-fit:fill;}
.index_footer_menu{width:100%;height:auto;padding:20px 0;box-sizing:border-box;display:flex;justify-content:center;border:solid #dee2e6;border-width:1px 0;margin:20px 0 0 0}
.index_footer_menu>a{display:inline-block;width:auto;height:20px;line-height:20px;padding:0 10px;box-sizing:border-box;}
.index_footer_menu>a.center{border:solid #dee2e6;border-width:0 1px;box-sizing:border-box;}
.index_footer{width:100%;height:auto;margin:10px 0 0 0;border:none}
.index_footer address{height:auto;line-height:20px;text-align:center;}

/* index_table */
.index_table_flex{display:grid;grid-template-columns:repeat(2, 1fr);gap:0 10px;}
.index_table_box{width:100%;height:auto;overflow-x:auto;overflow-y:hidden;margin:10px 0;box-sizing:border-box;padding:0 0 5px 0;}
.index_table{width:100%;white-space: nowrap; border-collapse: collapse;}
.index_table tr{border-bottom:1px solid #dee2e6;box-sizing:border-box;height:30px;line-height:30px;}
.index_table tr.none_date{height:50px;line-height:50px;}
.index_table tr.none_date.line_5{height:150px;line-height:150px;}
.index_table tr th.index_table_more{text-align:right;padding:0;}
.index_table tr th.index_table_more a{display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;}
.index_table tr th,.index_table tr td{padding:0 10px;box-sizing:border-box;text-align:center;}


/* input box */
.info_input {display: flex;justify-content: space-between;}
.info_input>* {  padding: 10px 0;  box-sizing: border-box;  border-radius: 10px;  margin: 10px 2px 0;}

.info_input>label {width: 100px;background: #2f5597;color: white;text-align: center;}
.info_input input, .info_input select, .info_input textarea {flex: 1;padding-left: 10px; border: 1px solid #8faadc;}

.info_input>button {min-width: 60px; padding:10px 15px; background: #604fd0;color: #fff;border: 0;font-size: 0.9em;line-height: 15px;word-break: auto-phrase;border: 1px solid #7030a0;}
.info_input>button.w100 {width:100%;}

.btn.btn-1 {background: linear-gradient(0deg, rgba(66,176,255,1) 0%, rgba(36,192,255,1) 33%, rgba(23,199,255,1) 66%, rgba(0,212,255,1) 100%); color: #000;border: 1px solid #56b6f5;}
.btn.btn-2 {background: #d132d7;color: #fff;border: 1px solid #d132d7;}
.btn.btn-3 {background: #21648f;color: #fff;border: 1px solid #21648f;}
.btn.btn-4 {background: #ff9306;color: #fff;border: 1px solid #ff9306;}
.btn.btn-5 {background: #d9d9d9;color: #3c3c3c;border: 1px solid #a6a6a6;}
.btn.btn_view {  flex: 2;  white-space: nowrap;  border: 1px solid #ddd;  padding: 5px 10px;  border-radius: 10px;  background: #50627c;  color: #fff;  }
.btn.btn_product {  flex: 1;  white-space: nowrap;  border: 1px solid;  color: #fff;  background: var(--main_color);  padding: 5px 10px;  border-radius: 10px;}

.c-type-1 {color:#d132d7;}
.c-type-2 {color:#21648f;}
.c-type-3 {color:#ff9306;}

.main_btn_box {margin: 20px 0 0;border: 1px solid #c6deec;border-radius: 5px;padding:20px 0; background: #fff;}
.main_btn_box img {height: 50px;}
.main_btn_box ul {display: flex;align-items: center;justify-content: space-evenly;}
.main_btn_box ul li a {display: flex;flex-direction: column;align-items: center;}
.main_btn_box .btn_round {border: 1px solid #a8c8dc;border-radius: 50%;overflow: hidden;padding: 10px;margin-bottom: 10px;}


.article_header {display: flex;justify-content: space-between;align-items: center;}
.article_header>div {display:flex; align-items: center; flex-wrap: wrap;}
.article_header span {padding: 0 0 0 5px;}
.article_header img {width:30px; height:30px; object-fit: contain;}

.article_guide {padding: 10px 0; width:100%;}

.product_list {  border-top: 1px solid #ddd;  margin-top: 10px;}
.product_list ul {display:flex;flex-wrap: wrap;}
.product_list ul li {flex: 1;box-sizing: border-box;margin-top: 10px;}
.product_list ul li:nth-child(2n-1) {margin-right: 5px;}
.product_list ul li:nth-child(2n-1)+li { border-left: 1px dashed #ddd;  margin-left: 5px;}

.product_list ul li:last-child {margin-right: 0;}
.product_list .product_box {  width: 100%; min-width:160px; text-align: center;  border: 0px solid #c6deec;  border-radius: 5px;  padding: 10px;  box-sizing: border-box;  margin-top: 10px;background:#fff;}
.product_list .product_box .product_head {  height: 160px;  display: flex;  justify-content: center;  align-items: center;}
.product_list .product_head img { height:auto;max-height:150px; max-width: 70%;  object-fit: contain;}
.product_list .product_title { border-top: 0px solid #c6deec;  padding: 10px 0 5px; }
.product_list .product_botton {  padding: 10px 0;  display: flex;  justify-content: space-around;  flex-wrap: wrap;  align-items: center;}

.product_info {  padding-bottom: 100px;}
.product_info .product_img {  border: 1px solid #adb9ca;  border-radius: 10px;  background: #fff;  padding: 20px;  display: flex;  justify-content: center;}
.product_info .product_img img {  max-width: 100%;  height: 20vh;  object-fit: contain;}
.product_info .product_title {  text-align: center;  padding: 20px;  font-size: 1.2em;  font-weight: bold;  line-height: 2em;}
.product_info .product_content {  border-top : 1px solid #adb9ca;  padding : 20px;  word-break: auto-phrase;}
.product_info .product_content img {  max-width : 100%; height:auto;}
.purchase_btn a.bottom {  position: fixed;  bottom: var(--btn_footer);  margin-bottom: 20px;  max-width: calc(100% - 20px);}
.purchase_btn a {  text-align: center;  color: #fff;  padding: 15px;  box-sizing: border-box;  background: #4e40ac;  border-radius: 10px;  width: 100%;border: 1px solid #7030a0;}

.order_btn a {  display: flex;  align-items: center;  justify-content: center;  align-content: center;  flex-wrap: wrap;  font-size: 1.2em;  color: #00b0f0;}
.order_btn a img {  height: 50px;}


.notice_box {display: flex;border: 1px solid #c6deec;border-radius: 5px;padding: 15px 10px;margin-top: 10px; align-items: center;background:#fff;}
.notice_list .notice_box {  border: none;  padding: 10px;  margin: 0;}
.notice_box .notice_date {font-size: 0.9em;align-items: center;}
.notice_box .notice_title {width: 100%;padding-left: 10px;line-height: normal;word-break: auto-phrase;flex:1}

.copyright { margin-bottom: 20px; text-align:center;}


.my_point_wrap {  display: flex;  justify-content: center;  align-items: center;  flex-wrap: wrap; border: 1px solid #a6a6a6;border-radius: 10px;}
.my_point_wrap>* {  flex: 1;  text-align: center;  min-width: 160px;    padding: 15px 0;}


/* mypage - shop_order */
.my_order_list {min-height: 300px;}
.order_info {  padding: 5px 0;}
.order_info>div {  padding: 5px;}
.order_info table {  text-align: center;  border: 1px solid #e7e6e6;}
.order_info table tbody {  display: flex;  flex-wrap: wrap;  justify-content: space-around;  border-collapse: collapse;}
.order_info table td, .order_info table th {  display: flex;  justify-content: center;  padding: 8px 5px;}
.order_info table tr {  width: 100%;  min-width: 150px;  flex: 1;  border: 1px solid #e7e6e6;}
.order_info table th {  color: var(--main_color);}

/* table list */
.table_list {  overflow-x: auto; min-height:300px;}
.table_list table {  width: 100%;  text-align: center;  min-width: 300px; white-space: nowrap;}
.table_list table th {  padding: 10px 10px;  border: solid #ddd;  border-width: 1px 0 1px;}
.table_list table td {  padding: 15px 10px;  border-bottom: 1px solid #ddd;}
.table_list table tr:nth-child(2n) {  background: rgb(235 237 242 / 50%);}

/* WELLPAID */
.method_WLP {display:none; border: 1px solid #ddd;border-radius: 5px;padding: 10px;background: floralwhite;} 
.btn-wellpaid {padding: 5px 10px; border-radius: 5px;}


/* progress-bar */
@keyframes blink-effect {
  50% {
    opacity: 0;
  }
}

.dot {  font-size: x-large;  font-weight: bold;  line-height: 0.5em;}

.blink:after { animation: blink-effect 1s step-end infinite;}
.loading_bar {  display:flex;  flex-direction: column;  justify-content: center;  align-items: center;  width:100%;  height: 50px;  margin-top:10px;  position: relative;}
.progress-bar {  position: relative;  width: 90%;  height: 20px;   background: #dae3f3;}
.progress-bar-gauge {  position: absolute;  top:0;  left:0;  width:20%;  height:20px; background: url(/_data/images/common/bar_bg.png);
  background-size: cover;}
.progress-bar-gauge:after {  content: "";  position: absolute;  width: 20px;  height: 20px;  background: url(/_data/images/common/ribon.png) 100% / 100% no-repeat;  top: -23px;  left: 100%; }
.progress-bar-gauge.red {background-color:red;}

@media screen and (max-width: 394px) {
  .product_list ul li:nth-child(2n-1)+li {
    border-left: none;
    border-top: 1px dashed #ddd;
  }
}