@charset "utf-8";

/* common */
.contents {max-width: 100rem; margin:0 auto; min-height: 60rem;}

.quick {position: fixed; right: 40px; bottom:40px; z-index: 10;}
.quick ul {display:flex; gap:10px; flex-direction:column}
.quick ul .call {width:150px; height:150px; border-radius: 300rem; border:1px solid #e5e5e5;text-align: center; display: flex; align-items: center; justify-content: center; background:#fff;}
.quick ul .call .txt::before {content: ''; background:url('../img/ico_call.svg') no-repeat; width:26px; height:26px; background-size: 26px; display: block; margin: auto;}
.quick ul .call span:first-child {font-weight: bold; display: block; margin-top: 8px; font-size:1.4rem}
.quick ul .call span:last-child {font-size: 24px; font-weight: bold; color: #00a2b5; display: block; letter-spacing: -0.8px;}

.check_type input.checkbox{display:none;}
.check_type .checkbox + label{cursor:pointer;}
.check_type .checkbox + label:before{content:""; display:inline-block; width:2.2rem; height:2.2rem; background:#fff; border:1px solid #ddd; vertical-align:middle; border-radius: 3px; margin:-4px 8px 0px 0px}
.check_type .checkbox:checked + label:before{content:""; background:url('../img/ico_check.svg') center no-repeat #00a2b5; background-size:1.5rem; border-color:#00808f;}

.radio_type {display: flex; gap:2rem}
.radio_type .radio input[type=radio] {position: absolute; opacity: 0;}
.radio_type .radio input[type=radio] + label:before {content: ""; background: #fff; border-radius: 100%; border: 1px solid #ddd; display: inline-block; width: 2.2rem; height: 2.2rem; position: relative; margin-right: 8px; vertical-align: top; cursor: pointer; text-align: center;  transition: 0.2s all;}
.radio_type .radio input[type=radio]:checked + label:before {background-color: #00a2b5; box-shadow: inset 0 0 0 4px #fff; border: 1px solid #00a2b5}
.radio_type .radio input[type=radio]:focus + label:before {outline: none; border-color: #00a2b5;}
.radio_type .radio input[type=radio]:disabled + label:before {box-shadow: inset 0 0 0 4px #f0f0f0; border-color: #dddddd; background: #b4b4b4;}
.radio_type .radio input[type=radio] + label:empty:before {margin-right: 0;}

.btn_area {display: flex; gap: 1rem; justify-content: center; margin-top:5rem}
.btn_area button {padding: 2rem 7rem; border-radius: 0.5rem; font-weight: bold;}
.btn_gray {border: solid 1px #aaa; background-color: #bbb; color:#fff; transition-duration: 0.3s;}
.btn_gray:hover {border:1px solid #bbb; background:#ccc}
.btn_primary {border: solid 1px #00808f; background-color: #00a2b5; color:#fff; transition-duration: 0.3s;}
.btn_primary:hover {border:1px solid #00a2b5; background:#00b9ce}
.btn_small {font-size:1.4rem; padding:0.6rem 1.2rem; border-radius: 0.3rem;}
.btn_state {display:block; border:1px solid #ddd;color:#666;margin-top:0.5rem}
.btn_state:hover {color:#666; border:1px solid #aaa; transition-duration: 0.3s;}

.mo {display: none;}


/* header */
.header {display: flex; justify-content: space-between; align-items: center; padding:3rem 4rem 0rem}
.header h1 img {height:4rem}
.header .btn_order {font-size:1.4rem; color: #00a2b5; padding: 0.8rem 1.5rem; border-radius: 300rem; border: solid 1px #00a2b5; background-color: #fff;transition-duration: 0.3s;}
.btn_order:hover {background:#00a2b5; color:#fff;}


/* footer */
.footer {background-color:#f2f2f2; border-top:1px solid #eee; color:#999999; font-size:1.4rem; line-height: 1.5;}
.footer .address {max-width:100rem; margin:auto;padding:2.5rem 0rem 2.2rem; position: relative;}
.footer .address p span {padding-right:1rem}
.footer .copyright {color:#cccccc; font-size:1.3rem; margin-top:1rem;}
.footer .btn_admin {background: #aaaaaa; color: #fff; padding: 0.6rem 1.3rem; border-radius: 300rem; position: absolute; right: 0px; top: 2.5rem; transition-duration: 0.3s;}
.footer .btn_admin:hover {background: #888;}

/* main */
.main {text-align: center; margin-top:5rem}
.main .main_title {font-family: 'Bebas Neue', cursive; font-size:15rem; color:#0095A7; display: flex; justify-content: center; line-height: 1;}
.main .main_title span:nth-child(odd) {color:#00a2b5}
.main .sub_title {color:#777}
.main .main_img {margin:6rem 0rem}
.main .search {position: relative; width: 70rem; margin:5rem auto 6rem}
.main .search .field {border: 0.3rem solid #00a2b5; width:100%; border-radius: 300rem; padding: 1.5rem 7rem 1.5rem 3rem; position: relative;}
.main .search .btn_submit {background:url('../img/ico_search.svg') no-repeat; width:3rem; height:3rem; background-size:3rem;border:0; text-indent: -999em; position: absolute; right: 3rem; top: 1.4rem;}


/* sub */
.contents.sub {margin:8rem auto 8rem; line-height: 1.5;}
.contents h2 {font-size:3.6rem; font-weight: bold; letter-spacing: -0.9px; text-align: center; margin-bottom:4rem}
.contents .agree {border-top:2px solid #111 !important; padding:3rem; border:1px solid #ddd;;}
.contents .agree_checkbox {background:#f5f5f5; padding:2rem 2rem 2rem 3rem; border: 1px solid #ddd; border-top:0 !important;}
.top_search {position: absolute; width: 65rem; top: 10px; left: 50%; top: 2.7rem; transform: translate(-50%, 0%);}
.top_search .field {border:1px solid #ddd; width:100%; border-radius: 300rem; padding: 1.3rem 7rem 1.3rem 3rem; position: relative;}
.top_search .btn_submit {background:url('../img/ico_search.svg') no-repeat; width:3rem; height:3rem; background-size:3rem;border:0; text-indent: -999em; position: absolute; right: 3rem; top: 1rem;}
.input {width: 100%; padding: 1.5rem; border-radius: 0.3rem; border: 1px solid #ddd;}

.table_wrap {position: relative;}
.table_wrap h3 {font-size: 2.2rem; font-weight: bold; margin-bottom:1.5rem}
.table_wrap.column {margin-top:4.5rem}
.table_wrap .check_type .checkbox + label:before {margin-right:10px}
.table_wrap .check_type.all {position: absolute; right: 0px; top: 0.5rem;}
.table_wrap .bookinfo {text-align: left; display: flex; align-items: center; gap:10px}
.table_wrap .product_list {width:100%; border-top:2px solid #111; border-left:1px solid #ddd; border-right:1px solid #ddd; text-align: center;}
.table_wrap .product_list li {padding:1.5rem; border-bottom:1px solid #ddd; text-align:left;}
.table_wrap .product_list .product_remove .check_type .checkbox + label:before {margin-right:1.5rem;}
.table_wrap .product_list .product_info img {width:8rem; border:1px solid #eee;}
.table_wrap .product_list .product_info {display: flex; align-items: center; justify-content: space-between;}
.table_wrap .product_list .product_info .info {display: flex; gap: 1.5rem; text-align: left;}
.table_wrap .product_list .product_info .info .txt {display: flex; flex-direction: column; margin-top:1rem}
.table_wrap .product_list .product_info .info .txt .product_total {display:flex; gap:1rem; margin-top:0.5rem}
.table_wrap .product_list .product_info .product_state {text-align: center;}
.table_wrap .table_view,.table_wrap .table_list {border-top:2px solid #111; border-left:1px solid #ddd; border-right:1px solid #ddd;}
.table_wrap .table_view th {background:#f5f5f5;padding:1.5rem 0rem; border-bottom:1px solid #ddd; border-right:1px solid #ddd;}
.table_wrap .table_view td {padding:1.5rem; border-bottom:1px solid #ddd; text-align:left}
.table_wrap .table_list th {background:#f5f5f5;padding:1.5rem 0rem; border-bottom:1px solid #ddd;}
.table_wrap .table_list td {padding:1.5rem; border-bottom:1px solid #ddd; text-align:center}
.table_wrap .table_view dl {display: flex;}
.table_wrap .table_view dt {width:20%; flex-shrink:0; text-align:center; background:#f5f5f5;padding:1.5rem 0rem; border-bottom:1px solid #ddd; border-right:1px solid #ddd; font-weight: bold;}
.table_wrap .table_view dd {width:100%; padding:1.5rem; border-bottom:1px solid #ddd; text-align:left}


.table_wrap .payment span {font-size:2.4rem; display: inline-block; padding:1rem 0rem}
.table_wrap .payment td {position: relative;}
.table_wrap .payment td.add::before {content: ''; position: absolute; display: inline-block; width: 3.5rem; height: 3.5rem; background: url('../img/ico_add.svg') no-repeat; background-size:3.5rem;  left: -1.8rem; top: 2.5rem;}
.table_wrap .payment td.total::before {content: ''; position: absolute; display: inline-block; width: 3.5rem; height: 3.5rem; background: url('../img/ico_total.svg') no-repeat; background-size:3.5rem;  left: -1.8rem; top: 2.5rem;}
.table_wrap .txtinfo {font-size:1.4rem; color: #00a2b5; position: absolute; right:0px; top:1.2rem}
.table_wrap .address_area {display: flex; flex-direction: column; gap:1rem}
.table_wrap .address_area .btn_address {display: flex; gap:1rem}
.table_wrap .address_area .btn_address .input {width:30%}
.table_wrap .btn_address button {background:#111; color:#fff; padding: 1.5rem 3rem; border-radius:0.3rem; border:0;}
.table_wrap .product_list .product_order_number {margin-bottom:1rem; color:#666}

.table_wrap .table_write {border-top:2px solid #111; display: flex; flex-direction: column; gap:1rem; padding:2rem 0rem; border-bottom:1px solid #111;}
.table_wrap .table_write dl {display: flex; align-items: center;}
.table_wrap .table_write dt {width:20%; flex-shrink: 0;}
.table_wrap .table_write dd {width:100%;}
.table_wrap .table_write .radio_area {padding-top:1rem}
.table_wrap .table_write .radio_area dl {align-items: flex-start;}
.table_wrap .table_write .radio_area dd {display: flex; flex-direction: column; gap:1.5rem}

.finish_area {padding: 3rem 1.5rem; border-radius: 5px; background-color: rgba(0, 162, 181, 0.05); color: #00808f; font-size:1.4rem; text-align: center;}
.history_area {width:50rem; margin: auto;}
.form_area {background:#fff;border:1px solid #ddd; padding:5rem; border-radius: 0.5rem; display: flex; flex-direction: column; gap:2rem; margin-top:3rem}
.form_area dt {margin-bottom:1rem}
.form_area .btn_area {margin-top:0 !important;}
.form_area .btn_area button {width: 100%;}
.admin_area {width:50rem; margin: auto;position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.admin_area .form_area {margin-top:0rem; box-shadow: 0px 10px 20px 0px #ddd;}
.admin_area .btn_main {color:#aaa; font-size:1.4rem; text-decoration: underline;display: block; text-align: center; margin-top:2rem}


/* Media Query */
@media (max-width: 1023px) {
  html {font-size: 55%;}
  .header {padding: 2rem 1.5rem 0rem;}
  .contents {max-width: 100%; padding:0px 3rem; min-height: auto;}
  .footer .address {width:100%; padding:2.5rem 3rem}
  .footer .btn_admin {position: relative; margin-bottom:1rem; display: inline-block; top: auto; right: auto;}
  .quick {display: none;}  
  .top_search {position: relative; top:2rem}
  .admin_area {height:430px}
}


@media (max-width: 639px) {
  .main .search {width:auto; margin:4rem auto}
  .main .main_img img {width:90%}
  .top_search {width:100%; padding:0px 1.5rem}
}

@media (max-width: 539px) {
  /*html {font-size: 47%;}*/
  .contents {padding:0px 1.5rem}
  .main .main_title {font-size:12rem}
  .footer {line-height: normal;}
  .footer p {line-height: 1.5;}
  .footer .address {width:100%; padding:2.5rem 1.5rem}
  .contents.sub {margin:5rem auto 5rem}
  .contents h2 {margin-bottom:2rem}
  .btn_area {margin-top:3rem; width:100%;}
  .agree br {display: none;}
  .btn_area button {width:100%;}
  .pc {display: none !important;}
  .top_search .field {font-size:1.4rem}
  .table_wrap .payment {display: flex;}
  .table_wrap .payment thead {flex-shrink: 0; width:35%}
  .table_wrap .payment thead tr,.payment tbody tr {display: flex; flex-direction: column;}
  .table_wrap .payment tbody {width:100%;}
  .table_wrap .payment span {font-size:inherit; padding:0;}
  .table_wrap .payment td {text-align: left !important;}
  .table_wrap .payment td.add::before,.table_wrap .payment td.total::before {display: none;}
  .table_wrap .product_list .product_info {flex-direction: column;}
  .table_wrap .product_list .product_info .product_state {text-align: center; margin-top: 0.5rem; display: flex; justify-content: space-between; width: 100%; align-items: center;}
  .table_wrap .table_write {display: flex; flex-direction: column; gap:1.5rem;}
  .table_wrap .table_write dl {flex-direction: column;}
  .table_wrap .table_write dt {width:100%; margin-bottom:1rem}
  .table_wrap .table_view dt {width:40%;}
  .table_wrap .table_view dd {width:100%; padding:1.5rem; border-bottom:1px solid #ddd; text-align:left}  
  .btn_area button {padding:1.7rem 0rem}
  .btn_state {margin-top:0rem}
  .history_area {width:100%;}
  .admin_area {width:90%; height:390px}
  .form_area {padding:3rem}
  .table_wrap .table_list td {padding:1rem}
  .btn_small {padding:0.6rem 1rem;}
  
}