@charset "utf-8";

/* ==============================================
service-reg
============================================== */

/* -------- service -------- */
.my_contents-wrap {display: flex; justify-content: space-between; }
.noflex {display: block !important;}
.invalid-reg {display: block; width: 60%; font-size: 13px; color:#ea0000; font-weight: 400; margin:-5px 0 10px 20px;}
.data-wrap {width:818px; background-color: #fff;box-shadow:0 0 3px rgb(0 0 0 / 20%); transition:.3s; border-radius: 8px;}
.free section.service_reg {width: 91%; margin: 32px auto;}
/*.free .info_default .info_item th {width:30%;}*/
/*.free .info_default .info_item td {width:70%;width:543px;}*/
.service_reg {width:743px; margin: 32px auto;}
.service {width: 100%;}
.service caption {text-align: left; font-size: 18px; color:#272727; font-weight: 500; margin-bottom: 20px;}
.service .require, .info_default .require, .payment_type .require, .receipt_info .require {font-size:13px; color:#ea0000; display: inline-block;}
.service caption span.txt_info {font-size: 14px; font-weight: 400; margin-left: 20px;}
.service td {display: flex; justify-content: space-between;}
.service td div {width: 360px; border:1px solid #ebebeb; background-color: #f9fafb;}
.free section .service td div {width: 49%;}
.bold {font-size: 24px !important; color:#146af0 !important;}
.period {font-size: 16px;}
.service td div dt {background-color: #fff; padding: 20px 24px; font-size: 24px; font-weight: 500; color:#1a1a1a; display: flex; justify-content: space-between;}
.service td div dd {padding:0 24px 24px 24px; color:#272727;}
.service td div dd strong {font-size: 30px;}
.service_pak label, .service_mail label{ cursor: pointer;}
.service_pak.on {border:4px solid #9cbdff; box-shadow:1px 1px 5px 1px rgb(0 0 0 / 15%); transition:.3s;}
.service_pak.on label {color:#146af0;}
/*.service_pak:hover, .service_mail:hover {border:2px solid #9cbdff;box-shadow:1px 1px 5px 1px rgb(0 0 0 / 15%); transition:.3s;} {border:2px solid #9cbdff;box-shadow:1px 1px 5px 1px rgb(0 0 0 / 15%); transition:.3s;}*/
.service_pak .service_chk, .service_mail .service_chk { -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; width: clamp(20px, 1.9531vw, 24px); height: clamp(20px, 1.9531vw, 24px); vertical-align: middle; border: 1px solid rgb(218, 218, 218); border-radius: 100%; background-color: rgb(255, 255, 255); margin-top: 7px; margin-right: 0; accent-color: #146af0;}

.service td div dt .infotxt_area {display: inline-block; font-size: 16px; position: relative; width:100%; border:none;}
.service td div dt span.service_info_icon { display: inline-block; position: relative; top:-40px; left: 62px; width:22px; height: 22px; background:url('/thymeleaf/front/assets/images/service/icon_question-ef3bae33d4b1c3160b49a125a1ac9cba.png') no-repeat center center; background-size: 22px; margin-top: 0px; cursor: pointer;}
.infotxt_area {display: inline-block; position: relative;}
.service td div dt .service_info { position: absolute; width:auto !important; top: 25px; left: 42px; z-index: 9999; padding: 10px 15px; border-radius: 4px; background: #272727; color:#fff; font-size: 13px; font-weight: 300; white-space: nowrap; transition: .3s;}
.service td div dt .service_info:before { content:''; position:absolute; top:-12px; left:28px; margin-left:-3px; border-style:solid; border-color:transparent transparent #272727 transparent; border-width:6px; }
.free .service td div dt .service_info { top: 35px; left: 34px;}
.service_pak dl.item {display:flex; justify-content: space-between;}
.service_pak dl.item dt { padding: 0; width:100px; height: 45px; font-size: 16px; font-weight: 400; background-color:#f9fafb; display: block;}
.service_pak dl.item dt.periodt{color:#146af0;font-weight: bold;}
.service_pak dl.item dt span {display: block; font-weight: 300;font-size: 13px;}
.service_pak dl.item dd{padding: 0px !important; width: 208px; align-items:center; position: relative;}
.service_mail dl.item {display:flex; justify-content: space-between;}
.service_mail dl.item dt { padding: 0; width:100px; height: 45px; font-size: 16px; font-weight: 400; background-color:#f9fafb; display: block;}
.service_mail dl.item dt.periodt{color:#146af0;font-weight: bold;}
.service_mail dl.item dt span {display: block; font-weight: 300;font-size: 13px;}
.service_mail dl.item dd{padding: 0px !important; width: 208px; align-items: center; position: relative;}
.service td div.number-area {width:100%; text-align: right; background: none; border:none;}
p.number_basic {display: inline-block; margin:0 0 0 0; padding: 0; font-size: 16px; position: absolute; right:0; top:30%;}
p.number_basic strong {font-size:20px !important; color:#146af0;}
.service td div.basic_info {width:100%; border:none; display: block; position: relative;}
.number-area input[type="number"] {width: 30%; height: 32px;font-size:clamp(14px, 1.3672vw, 16px); position: relative;}
.disabled { opacity: 0.6;}
.number_area span {padding-left:200px;}
.number-area input {appearance: none;
    background-color: transparent;
    border-width: 0px 0px 1px;
    border-top-style: initial;
    border-right-style: initial;
    border-left-style: initial;
    border-top-color: initial;
    border-right-color: initial;
    border-left-color: initial;
    border-image: initial;
    border-bottom-style: solid;
    border-bottom-color: rgb(218, 218, 218);
    font-weight: bold;}
.service td div .select-area {background: none; border:none; width:100%; text-align: right}
.service td div .select-area select,
.service td div .select-area input[type="text"],
.service td div .select-area input[type="password"] { padding:0 10px 0 5px; height:36px; border-radius:4px; border:1px solid #dadada; background-color: #fff; letter-spacing: -0.6px;}
.service td div .select-area select {background-color: #fff; cursor: pointer; font-size: 13px; background:url('/thymeleaf/front/assets/images/service/select_arrow_b-64f322248fc61de5a310ad924e4b582d.png') no-repeat right center; background-size: 20px;}
.service td div .select-area select.period {background-color: #fff; border:2px solid #146af0; color:#146af0; font-size: 15px; font-weight: bold;letter-spacing: -1.4px;}

/* -------- option -------- */
.option, .info_default, .payment_type, .receipt_info, .info_situation {width:100%}
.option caption, .info_default caption, .payment_type caption, .receipt_info caption, .payment_item caption, .info_situation caption {text-align: left; font-size: 18px; color:#272727; font-weight: 500; margin-bottom: 10px;}
.option tbody, .info_default tbody, .payment_type tbody, .receipt_info tbody, .payment_item tbody, .info_situation tbody {border-top:1px solid #5d5d5d;}
.option .option_item, .option  .info_item, .pay_item{ display:flex;}
.option .option_item th, .info_default .info_item th, .pay_item th{padding: 20px 0 20px 0px; width:200px; font-size: 14px; font-weight: 400; background-color:#f9fafb; border-bottom: 1px solid #ebebeb; text-align: left;}
.option .option_item th span.service_info_icon { display: inline-block;width:22px; height: 22px; background:url('/thymeleaf/front/assets/images/service/icon_question-ef3bae33d4b1c3160b49a125a1ac9cba.png') no-repeat center center; background-size: 22px; margin-top: 0px; cursor: pointer;}
.infotxt_area {display: inline-block; position: relative;}
.service_info { position: absolute; width:auto; top: 28px; left: -20px; z-index: 9999; padding: 10px 15px; border-radius: 4px; background: #272727; color:#fff; font-size: 13px; font-weight: 300; white-space: nowrap; transition: .3s;}
.service_info:before { content:''; position:absolute; top:-12px; left:28px; margin-left:-3px; border-style:solid; border-color:transparent transparent #272727 transparent; border-width:6px; }

.option_item td, .info_item td, .pay_item td { width:543px; border-bottom: 1px solid #ebebeb; display: flex; padding: 0;}
.option_item td .number-area {margin: 12px 0 0 20px; width: 70%;}
.info_item td .number-area {margin: 12px 0 0 0; width: 70%;}
.option_item td span.etc {font-size: 13px; margin: 20px 0 0 20px;}

.info_default tr.info_item {width:100%; display: flex;}
.info_default .info_item th, .payment_type .pay_item th, .receipt_info .pay_item th/*, .option .option_item th*/ { padding-left: 20px;}
.info_default .info_item td span.etc{font-size: 14px; font-weight: 400; margin-top: 20px; letter-spacing: 0.7px;}
.info_default span.guide {font-size: 14px; line-height: 180%; margin-left: 10px;}
.info_default p {display: inline-block; margin-left: 4px;color:#146af0;position: relative; padding: 0; top:20px; margin: 0;}
.info_default p span {display: inline-block; margin-right: 4px; width: 22px; height: 22px; text-align: center; border-radius: 50%; background-color: #146af0;}
.info_default p span:before{content: '\f00c'; font-size: 15px; font-weight: 400; font-family: 'FontAwesome'; color: #fff;}
.btn_dupl {display: inline-block; position: relative; padding: 0 8px; top:10px; margin: 0; width:78px; height: 42px; font-size: 13px; font-weight: 400; background-color: #f7f9ff; border-color:#69a4ff; color:#146af0;}

.info_item select,
.info_item input[type="text"],
input[type="password"],
.pay_item input[type="text"],
.receipt_info select,
textarea { width:90%; border:1px solid #dadada; border-radius: 4px;}
.pay_item input[type="radio"] {width:20px; height: 20px; margin: 20px 10px 0px 20px; font-weight: 400; font-size:14px;cursor: pointer;accent-color: #146af0;}
.pay_item label {margin-top: 18px; cursor: pointer; font-size: 14px;}
.info_item input.id, .info_item input.pw {width:300px;}
.info_item input, .pay_item input {width:400px; margin: 10px 10px 10px 20px; /*text-indent: 12px;*/ font-weight: 400; font-size:14px;}
.pay_item input {margin-right:0;}
.address_basic input {width:100% !important;}
.info_item input.id, .info_item input.pw {width:60%;}
.info_item input.url {width:58%;}
.info_item dd {padding-left: 20px;}
.info_item input[type="radio"] {width: 20px; height: 20px; margin: 20px 10px 0px 20px; font-weight: 400; font-size: 14px; cursor: pointer; accent-color: #146af0;}
.info_item label { margin-top: 18px; cursor: pointer;font-size: 14px;}
span.end_day { margin: 15px 0 0 20px;}
.info_item select.type {width:87%; background-color: #fff; cursor: pointer; font-size: 13px; /*text-indent: 12px;*/ color:#272727; background:url('/thymeleaf/front/assets/images/service/select_arrow-1b55f2bb98c0789d50b2e9aaddf3a77d.png') no-repeat right center; background-size: 20px; margin:10px 0;}
.info_item .select-area {width: 100%;}
.address_basic {width:50%;}

.info_item .infotxt_area {display: inline-block; position: relative;}
.item div.infotxt_area {display: inline-block; position: relative; border:none; width:22px; height: 22px; }
.item div.service_info {position: absolute; width:auto !important; top: 32px; left: 44px; z-index: 9999; padding: 10px 15px; border-radius: 4px; background: #272727; color:#fff; font-size: 13px; font-weight: 300; white-space: nowrap; transition: .3s;}
.info_item .infotxt_area div.service_info { position: absolute; width:auto; top: 32px; left: -7px; z-index: 9999; padding: 10px 15px; border-radius: 4px; background: #272727; color:#fff; font-size: 13px; font-weight: 300; white-space: nowrap; transition: .3s;}
.info_item .infotxt_area span.service_info_icon{ display: inline-block; position: relative; top:6px; left: 2px; width:22px; height: 22px; background:url('/thymeleaf/front/assets/images/service/icon_question-ef3bae33d4b1c3160b49a125a1ac9cba.png') no-repeat center center; background-size: 22px; margin-top: 0px; cursor: pointer;}
.free .item .infotxt_area span.service_info_icon {top:7px; left: 2px;}
.info_item .infotxt_area div.service_info:before { content:''; position:absolute; top:-12px; left:17px; margin-left:-3px; border-style:solid; border-color:transparent transparent #272727 transparent; border-width:6px; }

.receipt_info td div.select-area {background: none; border:none; width:100%;}
.receipt_info td div.select-area select.type { width:60%; background-color: #fff; cursor: pointer; font-size: 13px; /*text-indent: 12px;*/ color:#272727; background:url('/thymeleaf/front/assets/images/service/select_arrow-1b55f2bb98c0789d50b2e9aaddf3a77d.png') no-repeat right center; background-size: 20px; margin: 10px 0 10px 20px;}
.valid {display: block; font-size: 14px; color:#ea0000; width: 90%; margin: -5px 0 10px 20px;}
.valid2 {display: block; font-size: 14px; color:#ea0000; width: 90%; margin: -5px 0 10px 30px;}
.address_basic {width:50%;}
.address_detail {margin-top:-14px;}
.pay_item .btn_search {display: inline-block; position: relative; padding: 0 8px; top:10px; margin: 0; left:-21px; width:78px; height: 42px; border: 1px solid #dadada; background-color: #fff; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius:0; border-bottom-left-radius:0; color: #272727; font-weight: 400; font-size: 13px; text-align: center; text-decoration: none; vertical-align: top; transition: .3s;}
.pay_item .btn_search:hover {background: #ebebeb; box-shadow: none;}
.payment_type span.service_info_icon { display: inline-block; position: relative; top:5px; left: 2px; width:22px; height: 22px; background:url('/thymeleaf/front/assets/images/service/icon_question-ef3bae33d4b1c3160b49a125a1ac9cba.png') no-repeat center center; background-size: 22px; cursor: pointer;}
.payment_type .service_info {left:88px; top:32px;}
.payment_type .service_info dt {font-size: 14px; padding-bottom: 6px;}

/* -------- payment-calculation -------- */
.payment-wrap {width:440px; /*height: 900px;*/ background-color: #fff;box-shadow:0 0 3px rgb(0 0 0 / 20%); border-radius: 8px;position: sticky;/*position: -webkit-sticky;*/ align-self: flex-start;top: 0; transition:all 0.3s;}
.payment-wrap h2 {text-indent: -999999px; height: 0;}
.payment {width: 360px;margin: 32px auto;}
.payment_item caption {margin-bottom: 20px;}
.payment_item, .payment_item td {width:100%; padding: 12px 20px;}
.payment_item th {padding: 20px 0 20px 20px; font-weight: 400; background-color: #f9fafb; border-bottom: 1px solid #ebebeb; text-align: left; font-size: 24px; font-weight: 500; color:#146af0;}
.payment_item td {border-bottom:1px solid #ebebeb;}
.price_basic, .add, .discount, .price, .total_price {display: flex; justify-content: space-between; font-weight: 400;}
.price_basic dt span, .add dt span, .discount dt span, .total_price dt span {display: block; font-size: 14px; color:#272727;}
.price_basic dt strong, .add dt strong {color:#146af0;font-size: 20px;}
.price_basic dd, .add dd, .discount dd{font-size: 20px; font-weight: 600; vertical-align: middle; margin-top: 10px; text-align: right;}
.price_basic dd span, .add dd span, .discount dd span {font-size: 14px; color:#272727;}
.discount strong {display: block;font-size: 15px; font-weight: 400; color:#146af0;}
.price dd, .total_price dd {font-size: 20px; font-weight: 600; text-align: right;}
.total-wrap { width: 100%; display: block; background-color: #f5f7f9; border: 1px solid #f5f7f9; border-radius: 10px;}
.total_price {padding:15px 0;}
.total_price dt {width: 100px;}
.total_price dd strong {font-size: 24px;}
.total_price dd {width: 220px;color:#146af0; line-height:100%; font-size: 20px;}
.total_price dd span strong {color:#146af0; font-size: 15px; font-weight: 500;}
.price span, .total_price span {font-size:13px; color:#272727;}
.border-b0 {border-bottom: none !important;}
.agree-wrap td {text-align: left; padding:20px 0; line-height: 180%;}
.agree-wrap td input[type="checkbox"] + label:before {width:18px; height: 18px;}
.agree-wrap td label {font-size: 14px; letter-spacing: -0.7px; margin-left: 8px;}
.agree-wrap td input[type="checkbox"] + label:hover {color:#272727;}
.agree-wrap td label a {color:#146af0; font-weight: 400;}
.btn-wrap td {padding: 0;}
.btn-wrap td button {width:100%; padding: 14px; margin: 0 0 10px 0; border-radius: 4px; font-size: 18px; color: #272727; font-weight: 400; background-color:#fff; border:1px solid #dadada;}
.btn-wrap td button.on {background-color:#146af0; color:#fff; border:none;}
.btn-wrap td button.on:hover {background-color:#146af0; box-shadow:1px 1px 5px 1px rgb(0 0 0 / 15%); transition:.3s;}
.btn-wrap td button:hover  {box-shadow:1px 1px 5px 1px rgb(0 0 0 / 15%); transition:.3s;}

/* -------- payment-coupon -------- */
.coupon-btn, .coupon-btn:hover {background-color: #666; color: #fff; padding: 0 6px; border-radius: 4px; margin-left: 4px; font-size: 12px; font-weight:normal;}
.popup-wrap .coupon-area {width:80%; margin: 0 auto; padding: 10px 0;}
.popup-wrap .coupon {margin: 20px 0; background:linear-gradient(120deg,#fcfdff,#ecedf0); border: 1px solid #ecedf0; border-radius: 15px;}
.popup-wrap .coupon_info {position: relative; padding: 25px 30px 15px 30px; text-align: left; -webkit-box-sizing: border-box; box-sizing: border-box;}
.popup-wrap .title {font-size: 20px; font-weight: bold; color:#146af0; padding: 5px 0; letter-spacing: -1px;}
.popup-wrap .title strong {font-size:25px;}
.popup-wrap .infotxt {font-size: 16px;}
.popup-wrap .date {font-size: 14px;}
.popup-wrap .coupon span, .popup-wrap .coupon a {position: absolute; right: -20px; bottom: -26px; z-index: 1; width: 63px; height: 63px; padding: 16px 14px 0; border-radius: 50%; font-weight: bold; font-size: 14px; line-height: 16px; color: #fff; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box;}
.popup-wrap .coupon:after {content: ""; position: relative; display: block; top: -50px; right: -330px; width: 32px; height: 32px; margin-top: -21px; border-radius: 50%; background-color: #fff;}
.popup-wrap .coupon span.complete {background: #03c75a;}
.popup-wrap .coupon a.down {background: #146af0;}
.popup-wrap .scroll {max-height: 550px; overflow-y: scroll;}

/* -------- info-situation -------- */
.info_situation th {display:flex; justify-content: space-between; align-items: center; padding: 20px 20px; background-color: #f9fafb; border-bottom: 1px solid #ebebeb; font-size: 14px; color:#272727;}
.info_situation th span {display: inline-block;}
.info_situation th span.company {font-size: 18px; padding-right: 25px; font-weight: 500;}
.info_situation th span.url {flex: auto;color:#146af0;font-size: 14px; line-height: 200%; letter-spacing: 0px; text-align: left;}
.info_situation th span select {background-color: #fff; cursor: pointer; font-size: 13px; background:url('/thymeleaf/front/assets/images/service/select_arrow_b-64f322248fc61de5a310ad924e4b582d.png') no-repeat right center; background-size: 20px;}
.info_situation th span select.period {background-color: #fff; border:2px solid #146af0; color:#146af0; font-size: 16px; font-weight: bold;letter-spacing: -1px;}
.info_situation th span.url i {display: inline-block; position: relative; top:4px; right:2px; width:18px; height: 18px; background:url(/thymeleaf/front/assets/images/service/icon_url-bfe100a5e5770cd7df618afc877082cd.svg) no-repeat left center; background-size: 18px;}
.info_situation th span.url a {font-weight: 400;}
.info_situation th span.url strong {color:#146af0;}
.info_situation th span.tag {position: relative; font-size: 14px; line-height: 200%; font-weight: 500; text-align: center; vertical-align: middle; width: 64px; text-align: center; right:0;}
.tag_use, .pay_history table caption span.tag_use {color:#05750d;background-color:#b4f6c7;}
.tag_approach, .pay_history table caption span.tag_approach {color:#e04117;background-color:#fff0ec;}
.tag_close, .pay_history table caption span.tag_close {color:#5d5d5d;background-color:#ededed;}
.tag_stop, .pay_history table caption span.tag_stop {color:#651c93;background-color:#efd6ff;}
.info_situation td {display: flex; justify-content: space-between; padding: 20px 20px; border-bottom: 1px solid #ebebeb;}
.info_situation td div {flex: 1; font-size:15px;font-weight: 400; color:#272727;border-right: 1px solid #ebebeb;}
.info_situation td div.bdr-0 {border-right:0;}
.info_situation td h3 { font-size:18px; color:#146af0; font-weight: 500; margin-bottom: 10px;}
.info_situation dt {font-size: 18px;font-weight: 500; padding-bottom: 6px;}
.info_situation dl {font-size: 15px;}
.info_situation p strong, .info_situation dl strong, .end_day strong, .use_info strong {font-size: 17px; font-weight: 500; color:#146af0;}
.info_situation dd {padding-bottom: 2px;}
.option span.choice {font-size:13px; color:#008aea; display: inline-block;}
.option .option_item th.pdl-20 {padding-left: 20px !important;}
.use_info {display: inline-block; margin: 17px 0 0 10px;}

/* -------- guidetxt-tab -------- */
.service_reg .tab {position: relative; width: 100%; border:1px solid #ebebeb; margin: 15px auto 30px auto; padding: 20px; background-color: #fdfdfd; border-radius: 5px; overflow:hidden;}
.service_reg .tab input[type="checkbox"] {appearance:none; padding: 0; margin: 0;}
.service_reg .tab input[type="checkbox"] + label {display: flex; align-items: center; cursor: pointer; margin: 0px !important;}
.service_reg .tab input[type="checkbox"] + label:before {display:none;}
.service_reg .tab label::after {content: '+' ; position: absolute; right: 20px; font-size: 2rem; color:#cbcbcb; transition: 1s;}
.service_reg .tab:hover label::after {color:#272727;}
.service_reg .tab input[type="checkbox"]:checked ~ label::after {transform: rotate(135deg);}
.service_reg .tab label h2 {width:16px; height: 16px; background: #7c7c7c; display: flex; justify-content: center; align-items: center; color:#fff; font-size:13px; border-radius: 50%; margin-right: 8px;}
.service_reg .tab label:nth-child(1) label h2 {}
.service_reg .tab label h3 {position: relative; font-size: 14px; font-weight: 500; color: #272727; z-index: 10;}
.service_reg .tab .content {max-height: 0; transition: .1s; overflow: hidden;}
.service_reg .tab .content dl {position: relative; padding: 15px 20px 0px 20px; border-top:1px solid #ebebeb; margin-top: 15px; color:#272727; z-index: 10; font-size: 14px;}
.service_reg .tab .content dl dt {font-size: 15px; padding-bottom:5px; font-weight: 500;}
.service_reg .tab .content dl dd {font-size: 14px; padding-bottom:8px;}
.service_reg .tab .content dl dd span {color:#146af0; margin: 0;}

.service_reg .tab .m-nav {max-height: 0; transition: .1s; overflow: hidden;}
.service_reg .tab input[type="checkbox"]:checked ~ .content {max-height: 80vh;}
.service_reg .tab .m-nav dl {position: relative; padding: 15px 20px 0px 10px; border-top:1px solid #ebebeb; margin-top: 15px; color:#272727; z-index: 10; font-size: 14px;}
.service_reg .tab .m-nav dl dt {font-size: 15px; padding-bottom:5px; font-weight: 500;}
.service_reg .tab .m-nav dl dd {font-size: 13px; padding-bottom:5px; text-indent: 10px;}
.service_reg .tab .m-nav dl dd:last-child {padding-bottom:0px;}
.service_reg .tab .m-nav dl dd span {color:#146af0;}

.service_reg .ban {position: relative; width: 100%; text-align: center; margin: 15px auto 30px auto; padding: 20px; background-color: #fdfdfd; border:1px solid #ebebeb; overflow:hidden;}
.service_reg .ban h3 {position: relative; font-size: 16px; font-weight: 400; text-align: center; color: #272727; z-index: 10;}

/* -------- finish -------- */
.message-wrap { display: block; width:100%; background-color: rgb(255 255 255 / 70%); padding: 30px 40px; box-shadow: 0 0 3px rgb(0 0 0 / 10%); transition: .3s; border-radius: 8px;}
.message-wrap .finish_message { width: 100%; margin: 0 auto; text-align: center; color: #272727;}
.message-wrap .finish_message h3 {font-size: 24px; font-weight: 500;}
.message-wrap .finish_message h3 strong {color:#146af0;}
.message-wrap .finish_message p {margin-top: 20px; font-size: 15px; font-weight: 400; line-height: 200%;}
.message-wrap .finish_message a {font-weight: 500; margin: 0 5px; color: #146af0; font-size: 18px;}
.message-wrap .finish_message a.highlight {background-color: #e2edff;}
.result-wrap {width: 100%; display: block; margin-top: 30px; background-color: #fff; box-shadow: 0 0 3px rgb(0 0 0 / 20%); transition: .3s; border-radius: 8px;}
.result-wrap section {width:94%; margin: 0 auto; padding: 30px 0;}
.result_table table {width:100%;}
.result_table table caption {text-align: left; font-size: 18px; color: #272727; font-weight: 500; margin-bottom: 10px;}
.result_table table tbody {border-top: 1px solid #5d5d5d; }
.result_table table tbody tr {border-bottom: 1px solid #ebebeb;}
.result_table table tbody th {background-color: #f9fafb;padding: 16px 0;font-size: 14px; color: #272727; font-weight: 400;border-right: 1px solid #ebebeb;}
.result_table table tbody td {padding: 16px 0; font-size: 16px; vertical-align: middle; color: #272727; font-weight: 400; text-align: center; border-right: 1px solid #ebebeb;}
.result_table table tbody th:last-child, .result_table table tbody td:last-child {border-right:none;}
.result_table table tbody td.bdr-1 {border-right:1px solid #ebebeb !important;}
.result_table table tbody .info_item, .result_table table li:last-child {border-bottom: none;}
.result_table table tbody .info_item td {width:100%; padding-left: 20px; text-align: left;}
.result_table table li {border-bottom: 1px solid #ebebeb; padding: 10px;}
.result_table table li:first-child {padding-top: 0;}
.result_table table li:last-child {padding-bottom: 0;}
.cs_info {display: block; margin: 0 auto; padding: 30px 0 0 0; text-align: center; font-weight: 400;}
.cs_info a {background-color: #e2edff; color:#146af0; font-weight: 500;}
.cs_info ul {text-align: left; font-size: 14px;}
.cs_info ul li {margin-left: 20px; padding: 3px 0;}
.cs_info ul li i { display: inline-block; width: 14px; height: 14px; margin: 3px 5px 0 0; background:url(/thymeleaf/front/assets/images/service/icon_check-028dcd708f2f2e1039b562d15485863b.svg) no-repeat left center; background-size: 12px;}
.ori_price { display: block; font-size: 14px; color:#999; text-decoration: line-through;}

/* -------- domain -------- */
.domain-wrap section {display: block; width:100%; background-color:#fff; padding: 40px; box-shadow: 0 0 3px rgb(0 0 0 / 20%); transition: .3s; border-radius: 8px;}
.domain_table table {width:100%;}
.domain_table table caption {text-align: left; font-size: 18px; color: #272727; font-weight: 500; margin-bottom: 10px;}
.domain_table table tbody {border-top: 1px solid #5d5d5d; }
.domain_table table tbody tr {border-bottom: 1px solid #ebebeb;}
.domain_table table tbody th {background-color: #f9fafb;padding: 16px 0;font-size: 14px; color: #272727; font-weight: 400;border-right: 1px solid #ebebeb;}
.domain_table table tbody td {padding: 0; height: 72px; font-size: 16px; vertical-align: middle; color: #272727; font-weight: 400; text-align: center; border-right: 1px solid #ebebeb; background-color: #fff;}
.domain_table table tbody td:first-child {min-width:90px;}
.domain_table table tbody td:last-child {border-right: 0; min-width:264px;}
.domain_table table tbody th:last-child {border-right:none;}
.domain_table table tbody td.bdr-1 {border-right:1px solid #ebebeb !important;}
.domain_table button {margin:0 auto; margin-left: 4px; width:auto; padding: 10px 20px; font-size: 14px; display: inline-block;}
.domain_table button:first-child{margin-left: 0;}
.domain_table button.on {border:1px solid #146af0;}
.domain_table button.reg { position: relative; padding: 10px 25px 10px 25px; color:#fff; background-color:#146af0; border-color:#146af0}
/*.domain_table button.reg:before { content:'+'; display: inline-block; font-size: 22px; position: absolute; left: 20px; top:3px; width:20px; height: 20px; background:url('/thymeleaf/front/assets/images/service/btn_domainadd-0a71b44d8b232c06f776aed322d69134.png') no-repeat; background-size: 20px;}*/
.domain_table button.modify:hover {background-color: #f7f9ff; border:1px solid #aac4ed; color:#146af0;}
.domain_table span {margin: 0 10px;}
.domain_table span.strong {margin: 0 4px;}
.domain_table input[type="text"] {width:30%; font-size:16px; color:#272727; font-weight: 500;}
.domain_table input[type="text"].domain1, .domain_table span.strong {color:#146af0; font-size: 18px; font-weight: 600;}
.domain_table input[type="text"].domain2 {width: 45%;}

/* -------- service-guide -------- */
.service-guide-wrap {display: block; width:100%; background-color: #fff; padding: 40px; box-shadow: 0 0 3px rgb(0 0 0 / 20%); transition: .3s; border-radius: 8px; margin-top: 20px;}
.service-guide-wrap .service_guide h2 {width:260px; min-width:176px; font-size: 18px; text-indent: 30px; display: block; position: relative;}
.service-guide-wrap .service_guide h2:before {content: ''; display: inline-block; position:absolute; top:0; left: 0; width:24px; height: 24px; background: url(/thymeleaf/front/assets/images/service/icon_serviceguide-b5b39f568cd37e209fad323817f5a2b7.png) no-repeat center center; background-size: 24px;}
.service_guide {display: flex;}
.service_guide div {width:100%}

.domain-wrap .tab {position: relative; width: 100%; border:1px solid #ebebeb; margin: 30px auto 0 auto; padding: 20px; background-color: #fdfdfd; border-radius: 5px; overflow:hidden;}
.domain-wrap .tab input[type="checkbox"] {appearance:none; padding: 0; margin: 0;}
.domain-wrap .tab input[type="checkbox"] + label {display: flex; align-items: center; cursor: pointer; margin: 0px !important;}
.domain-wrap .tab input[type="checkbox"] + label:before {display:none;}
.domain-wrap .tab label::after {content: '+' ; position: absolute; right: 20px; font-size: 2rem; color:#cbcbcb; transition: 1s;}
.domain-wrap .tab:hover label::after {color:#272727;}
.domain-wrap .tab input[type="checkbox"]:checked ~ label::after {transform: rotate(135deg);}
.domain-wrap .tab label h2 {width:16px; height: 16px; background: #7c7c7c; display: flex; justify-content: center; align-items: center; color:#fff; font-size:13px; border-radius: 50%; margin-right: 8px;}
.domain-wrap .tab label:nth-child(1) label h2 {}
.domain-wrap .tab label h3 {position: relative; font-size: 16px; font-weight: 500; color: #272727; z-index: 10;}
.domain-wrap .tab .content {max-height: 0; transition: .1s; overflow: hidden;}
.domain-wrap .tab input[type="checkbox"]:checked ~ .content {max-height: 80vh;}
.domain-wrap .tab .content dl {position: relative; padding: 15px 20px 0px 20px; border-top:1px solid #ebebeb; margin-top: 15px; color:#272727; z-index: 10; font-size: 14px;}
.domain-wrap .tab .content dl dt {font-size: 15px; padding-bottom:5px; font-weight: 500;}
.domain-wrap .tab .content dl dd {font-size: 14px; padding-bottom:8px;}
.domain-wrap .tab .content dl dd:last-child {}
.domain-wrap .tab .content dl dd span {color:#146af0; margin: 0;}
.domain-wrap .tab .content dl dd a { border:1px solid #5d5d5d; background-color: #fff; font-size: 13px; color:#272727; padding: 2px 10px; margin-left: 10px; border-radius: 25px; white-space: nowrap;}
.domain-wrap .tab .content dl dd a:hover {color:#146af0; border-color:#146af0;}

.domain_info {width:100%; background-color: #f8f8f8; border-radius: 8px; text-align: center;}
.domain_info p { display: block; font-size: 18px; padding: 30px 0;}
.domain_info p a {margin-left: 10px;}
.domain_info p b {font-size: 24px;}
.domain_info p b span {color:#146af0;}
.domain_info p span.tag{ display:block; color: #ea0000; font-size: 18px; padding: 15px 0 0 0;}

.domain-ad-wrap {width:100%; display: flex; justify-content: space-between; margin-top: 30px; }
.domain-ad-wrap div {display: block; width:49%; text-align: center; background-color: #f0f3ff; border:1px solid #b4c1f4; padding: 30px;border-radius: 8px; box-shadow: 0px 3px 3px 0px rgb(38 38 38 / 15%);}
.domain-ad-wrap div h2 {font-size: 26px; color:#272727; font-weight: 500;}
.domain-ad-wrap div h2 b {color:#146af0;}
.domain-ad-wrap div p {font-size: 16px;}
.domain-ad-wrap div a {display: inline-block; width:auto; margin: 20px auto 0 auto; padding: 10px 50px; background-color: #222c3e; color:#fff; border-radius: 25px;transition:all 0.5s; white-space:nowrap;}
.domain-ad-wrap div a:hover{transform:translateX(-2px) translateY(-2px);box-shadow: 2px 4px 0px 0px rgba(0, 0, 0, 0.2);transition:all 0.5s;}

.service-guide-wrap .tab2 {position: relative; width: 100%; border-bottom:1px solid #ebebeb; margin: 10px auto 0 auto; padding: 4px 0 16px 0px; overflow:hidden;}
.service-guide-wrap .tab2 input[type="checkbox"] {appearance:none; padding: 0; margin: 0;}
.service-guide-wrap .tab2 input[type="checkbox"] + label {display: flex; align-items: center; cursor: pointer; margin: 0px !important;}
.service-guide-wrap .tab2 input[type="checkbox"] + label:before {display:none;}
.service-guide-wrap .tab2 label::after {content: '+' ; position: absolute; right: 20px; font-size: 2rem; color:#cbcbcb; transition: 1s;}
.service-guide-wrap .tab2:hover label::after {color:#272727;}
.service-guide-wrap .tab2 input[type="checkbox"]:checked ~ label::after {transform: rotate(135deg);}
.service-guide-wrap .tab2 label h2 {width:16px; height: 16px; background: #7c7c7c; display: flex; justify-content: center; align-items: center; color:#fff; font-size:13px; border-radius: 50%; margin-right: 8px;}
.service-guide-wrap .tab2 label:nth-child(1) label h2 {}
.service-guide-wrap .tab2 label h3 {position: relative; font-size: 16px; font-weight: 500; color: #272727; z-index: 10;}
.service-guide-wrap .tab2 .content {max-height: 0; transition: .1s; overflow: hidden;}
.service-guide-wrap .tab2 input[type="checkbox"]:checked ~ .content {max-height: 80vh;}
.service-guide-wrap .tab2 .content dl {position: relative; padding: 15px 20px 0px 16px; border-top:1px solid #ebebeb; margin-top: 15px; color:#272727; z-index: 10; font-size: 14px;}
.service-guide-wrap .tab2 .content dl dt {font-size: 15px; padding-bottom:5px; font-weight: 500;}
.service-guide-wrap .tab2 .content dl dd {font-size: 14px; padding-bottom:5px;}
.service-guide-wrap .tab2 .content dl dd:last-child {padding-bottom:0px;}
.service-guide-wrap .tab2 .content dl dd span {color:#146af0;}
.service-guide-wrap .tab2 table { margin: 10px 0 10px 16px; width:95%;}
.service-guide-wrap .tab2 table th {background-color: #f2f2f2; padding: 8px 20px; border: 1px solid #dadada; vertical-align: middle;}
.service-guide-wrap .tab2 table td {padding: 8px 20px; border: 1px solid #dadada; vertical-align: middle;}

/* -------- service-home -------- */
.myservice-wrap section {display: block; width:100%; background-color:#fff; padding: 30px 40px; box-shadow: 0 0 3px rgb(0 0 0 / 20%); transition: .3s; border-radius: 8px;}
.myservice-header {display: flex; justify-content:space-between;}
.my_company {font-size: 24px; color:#272727; font-weight: 600;}
.myservice-wrap .tag, .pay_history table caption span.tag {position: relative; top:-2px; font-size: 16px; line-height: 200%; font-weight: 500; text-align: center; padding: 0 3px; text-align: center;}

.myservice-info div {display: flex;}
.my_service_info, .my_option_info { background-color: #f9f9f9; border-radius: 8px; margin: 20px auto 0 auto; padding: 30px;}
.my_service_info {width:480px;}
.my_service_info dl {width:100%;}
.my_service_info dl dt { height: 24px; font-size: 24px; line-height: 100%; font-weight: 500; color:#272727;}
.my_service_info dl dd {font-size: 16px; padding-top: 24px;}
.my_service_info dl dd p {display: inline-block; margin-left: 6px; font-size: 18px;}
.my_service_info dl dd b {color:#146af0;font-size: 18px;}
.myservice-info button {display: inline-block; width:auto; padding: 9px 17px; margin: 0; font-size: 14px;}
.myservice-header button {display: inline-block; width:auto; padding: 9px 17px; margin: 0 0 0 20px; font-size: 14px;}

.my_option_info { display: block; position: relative; width:700px; margin-left: 20px;}
.my_option_info dl {display: block; width:100%;}
.my_option_info dl dt { font-size: 18px; font-weight: 500; color:#272727;}
.my_option_info button {position: absolute; right:20px; top:20px;}
.my_domain {letter-spacing: 0.7px;}
.my_domain i {display: inline-block; position: relative; top: 4px; right: 2px; width: 18px; height: 18px; background: url(/thymeleaf/front/assets/images/service/icon_url-bfe100a5e5770cd7df618afc877082cd.svg) no-repeat left center; background-size: 18px;}
.my_domain strong {color:#146af0;}
.my_option_info ul {display: flex; justify-content: space-between; margin-top: 25px; height: 74px;}
.my_option_info ul li {width:33%; padding: 0 5px; text-align: center; font-size: 16px;}
.my_option_info ul.col3 li {width:33%;}
.my_option_info ul li:after { content: ''; display: block; position: relative; top:-74px; left:100%; width:2px; height: 68px;background-color: #efefef;}
.my_option_info ul li:last-child::after {display: none;}
.my_option_info ul li i { display: block; width:44px; height: 44px; margin: 5px auto 6px auto; text-align: center;}
.my_option_info ul li i.user {background: url(/thymeleaf/front/assets/images/service/icon_user-329abd5c04e4712070e6f4c1d4aba47e.png) no-repeat center center; background-size: 44px;}
.my_option_info ul li i.data {background: url(/thymeleaf/front/assets/images/service/icon_data-565463ca697f890788620b9a7e2313c3.png) no-repeat center center; background-size: 44px;}
.my_option_info ul li i.messenger {background: url(/thymeleaf/front/assets/images/service/icon_messenger-57b26bf6566164da8c79220c1c8bb83e.png) no-repeat center center; background-size: 44px;}
.my_option_info ul li i.card {background: url(/thymeleaf/front/assets/images/service/icon_card-3b1c7143f52267d3ca2f934110045f2f.png) no-repeat center center; background-size: 44px;}
.my_option_info ul li b {font-size: 18px; color:#146af0;}
.my_option_info ul li b.color {font-size: 16px; font-weight:500; color:#146af0;}

.myservice-info div.detail {display: block !important; margin-top: 20px; padding: 25px 20px 25px 20px; background-color: #f9f9f9; border-radius: 8px;}
.myservice-info div.detail div {display:block; position: relative; width: 100%; overflow:hidden;}
.myservice-info div.detail div input[type="checkbox"] {appearance:none; padding: 0; margin: 0;}
.myservice-info div.detail div input[type="checkbox"] + label {display: flex; align-items: center; cursor: pointer; margin: 0px !important; line-height: 24px; padding: 0 10px;}
.myservice-info div.detail div input[type="checkbox"] + label:before {display:none;}
.myservice-info div.detail div label::after {content: '+' ; position: absolute; right: 10px; font-size: 2.8rem; color:#cbcbcb; transition: 1s;}
.myservice-info div.detail div:hover label::after {color:#272727;}
.myservice-info div.detail div input[type="checkbox"]:checked ~ label::after {transform: rotate(135deg);}
.myservice-info div.detail div label h2 {width:16px; height: 16px; background: #7c7c7c; display: flex; justify-content: center; align-items: center; color:#fff; font-size:13px; border-radius: 50%; margin-right: 8px;}
.myservice-info div.detail div label {position: relative; font-size: 18px; font-weight: 500; color: #272727; z-index: 10;}
.myservice-info div.detail div .detail_table {max-height: 0; transition: .1s; overflow: hidden;}
.myservice-info div.detail div input[type="checkbox"]:checked ~ .detail_table {max-height: 80vh;}
.service_tab .detail_table table {position: relative; padding: 15px 20px 0px 16px; border-top:1px solid #ebebeb; margin-top: 15px; color:#272727; z-index: 10; font-size: 14px;}

.detail_table {padding: 0 10px;}
.detail_table table { margin: 20px 0 10px 0; width:100%; border-top:1px solid #272727;}
.detail_table table tr {border-bottom: 1px solid #dadada;}
.detail_table table th {background-color: #f8f8f8; padding: 8px 20px; font-size: 14px; color:#272727; vertical-align: middle; border-right: 1px solid #dadada;}
.detail_table table td {padding: 8px 20px; vertical-align: middle; font-size: 16px; border-right: 1px solid #dadada; background-color: #fff;}
.detail_table table td.total {background-color: #f7f9ff;}
.detail_table table td.used {background-color: #fff;}
.detail_table table td.item {background-color: #fdfdfd; font-size: 14px;}
.detail_table table td:last-child {border-right:0;}
.detail_table table td b {color:#146af0; font-size: 18px;}


/* ==============================================
responsive
============================================== */
@media only screen and (min-width:1281px) {
    .my_option_info li br {display: none;}
    
    .respon .service td div {width:100%;}
    .respon .service td div dt.choice {background-color: #e1ebff; padding: 10px 0px 10px 17px;}
    .respon p.number_basic {margin: 0 25px 0 0;}
    .respon .select-area select.choice {font-size: 18px !important; font-weight: 400; padding: 0 0; height: 40px; border:none !important; background-color: transparent !important;}
    .respon .service td div .select-area select.choice {background-size:30px;}
    .respon .service td div dd {padding: 0 25px 16px 25px !important;}
    .respon .service_pak dl.item dd {width: 50%;}
}
@media only screen and (max-width:1280px) {
    .service, .option, .info_default, .payment_type, .receipt_info, .info_situation {width:98%; margin: 0 auto;}
    .service td div {width:49%;}
    .data-wrap {width:760px;}
    .free {width: 100% !important;}
    .option .option_item th, .info_default .info_item th, .pay_item th {width:180px;}
    .option_item td, .info_item td, .pay_item td { width:85%; }
    .payment-wrap {width:400px; /*height: 945px;*/}
    .payment {width:400px;padding: 0 20px;}
    .payment_item {width: 98%; margin: 0 auto; padding: 0 0;}
    .payment_item td {padding: 15px 20px !important;}
    .payment_item input[type="checkbox"] + label { margin: 0 0 0 -10px;}
    .payment_item td.pd-15 {padding: 15px 0 !important;}
    .total_price {margin: 0 auto;}
    .service_reg .tab, .service_reg .ban {width:98%;}
    
    .bg-white {background-color: #fff;}
    .respon .service td div {width:100%;}
    .respon .option .option_item th, .respon .option .option_item th {padding: 14px 0 5px 0; background-color: #fff; border-bottom: none;}
    .respon .info_default .info_item th, .respon .pay_item th {padding: 10px 0 5px 0; background-color: #fff; border-bottom: none; color:#272727; font-weight: 500;}
    .respon .pay_item th {padding: 18px 0 0 0;}
    .respon .option_item td, .respon .option_item td, .respon .info_item td, .respon .pay_item td {width:100% !important; padding: 0 0; background-color: #fff; border-bottom: none;}
}
@media only screen and (max-width:1210px) {
    .service_reg { width:94%; margin:0 auto; padding:24px 0;}
    .my_contents-wrap { display: block;}
    .data-wrap {width:100%;}
    .payment-wrap {width:100%; display: block;}
    .payment {width:94%; padding: 30px 0;}
    .pay_item .btn_search {left:-2px;}
    .total-wrap td {width:100%; display: block;}
    .total_price {width:100%;}
    .total_price dt {width:30%;}
    .total_price dd {width:70%;}
    .free section.service_reg {width:94%; margin: 0 auto;}
    
    .respon .service_reg { width:95%; margin:0 auto; padding:24px 0;}
    .respon dl {background-color: #fff;}
    .respon .data-wrap {width:100%; /*background-color: transparent; box-shadow: none;*/}
    .respon .service caption span.txt_info {font-size:13px;}
    .respon .select-area select.choice {font-size: 18px !important; font-weight: 400; padding: 0 0; height: 40px; border:none !important; background-color: transparent !important;}    
    .respon .service td div .select-area select.choice {background-size:30px;}
    .respon .service td div dt.choice {background-color: #e1ebff; padding: 10px 0px 10px 17px;}
    .respon .service td div.basic_info {background-color: #fff;}
    .respon .service td div dd strong {font-size: 22px;}
    .respon .service td div dd {padding: 0 16px 16px 16px;}
    .respon .service td div dd.mrt-24 {margin-top:18px !important;}
    .respon p.number_basic {top:15%; font-size: 15px;}
    .respon .service_pak dl.item dt span {font-size: 12px; font-weight: 400;}
    .respon .service_pak dl.item dt {width: 80px; font-size: 14px; font-weight: 400; background-color: #fff; height: auto;}
    .respon .total_price {width:100%; background-color: transparent;}
    .respon .service td div .select-area select.period {font-size: 13px;}
    .respon .service td div.number-area {text-align: ;}
    .respon .number-area input[type="number"] {text-align: center;}
    .respon .info_default .info_item td span.etc {letter-spacing: -0.5px;}
}
@media only screen and (max-width:1150px) {
    .pay_item .btn_search {left:-4px;}
}
@media only screen and (max-width:1123px) {
    .pay_item .btn_search {left:-12px;}
}
@media only screen and (max-width:1024px) {
    .domain_table table tbody td {font-size: 14px;}
    .domain-ad-wrap div h2 {font-size: 20px;}
    .domain-ad-wrap div p {font-size: 15px;}
    
    .respon input[type="checkbox"] + label {margin-left: 0;}
    .respon .service td div {width:100%;}
    .respon .service td {display: block; width:100%;}
    .respon .my_logo {width:180px; left:20px; top:38%;}
    .respon .m-menu input[type=checkbox]+label {right:20px;}
    .respon .my_header span {font-size: 14px;}
    .respon .my_logo a img {width:100px;}
    .respon .inner {padding: 100px 14px 0px 14px}
    .respon .info_item span {margin-left: 0 !important;}
    .respon .info_item input.url, .respon .info_item input.url {margin-left: 0;}
    .respon .payment_item th {padding: 12px 0 12px 0; font-size: 20px; text-align: center;}    
    .respon .total_price dd strong {font-size: 20px;}
    .respon .total_price dd span strong {font-size: 16px;}
    .respon .agree-wrap td {padding: 15px 0 !important;}
}
@media only screen and (max-width:960px) {    
    .domain_table button {padding:8px 16px;}
    .myservice-wrap section {padding: 30px 30px;}
    .my_service_info, .my_option_info {padding: 20px;}
    .my_service_info dl dt {font-size: 20px;}
    .my_service_info dl dd {font-size: 14px;}
    .my_service_info dl dd b, .detail_table table td b {font-size: 16px;}
    .my_service_info dl dd p {font-size: 14px; margin-left: 0;}
    .my_option_info ul li, .detail_table table td {font-size: 14px;}
    .myservice-info .detail .detail_table {padding:0 !important;}
    .myq_table table tbody td, a.myq p span, .myq_table th span {font-size: 14px !important;}
    a.myq .title {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
}
@media only screen and (max-width:852px) {
    .my_domain {letter-spacing: 0.8px;}
    .myservice-header button {padding: 9px 14px; margin-left: 10px;}
    .myservice-info button {padding: 9px 14px;}
    .my_service_info dd span {display: none;}
    .my_service_info dl dd p {display: block;}
    .my_service_info dl dd {padding-top:16px;}
    .my_option_info ul li b, .my_option_info ul li b.color {font-size: 14px;}
    .my_option_info ul li i { display: block; width:36px; height: 36px; margin: 5px auto 6px auto; text-align: center;}
    .my_option_info ul li i.user {background: url(/thymeleaf/front/assets/images/service/icon_user-329abd5c04e4712070e6f4c1d4aba47e.png) no-repeat center center; background-size: 36px;}
    .my_option_info ul li i.data {background: url(/thymeleaf/front/assets/images/service/icon_data-565463ca697f890788620b9a7e2313c3.png) no-repeat center center; background-size: 36px;}
    .my_option_info ul li i.messenger {background: url(/thymeleaf/front/assets/images/service/icon_messenger-57b26bf6566164da8c79220c1c8bb83e.png) no-repeat center center; background-size: 36px;}
    .my_option_info ul li i.card {background: url(/thymeleaf/front/assets/images/service/icon_card-3b1c7143f52267d3ca2f934110045f2f.png) no-repeat center center; background-size: 36px;}
}

@media only screen and (max-width:780px) {
    .popup {width:90%;}
    .domain_table table {overflow-x: auto;}
}
@media only screen and (max-width:800px) {
    .info_situation th {display: block;}  
    .service_reg .tab .content dl {padding:15px 0;}
    .service_reg .tab .content dd {text-indent: 0;}
    .result_table table tbody td {font-size: 14px;}
}
@media only screen and (min-width:752px) and (max-width:960px) {
    .pay_item .btn_search {left:-15px;}
}
@media only screen and (max-width:776px) {
    .free .service td {width:100%; display: block;}
    .free .service td div {width:100% !important;}
    .free .service_mail {margin-top: 20px !important;}
    .free .info_item input.url {width:50%;}
    .free .info_item input.id, .info_item input.pw {width:90%;}
}
@media only screen and (max-width:767px) { 
    .memeber-wrap {width: 98%; margin: 0 auto; display: block; background-color: #fff; box-shadow: 0 0 3px rgb(0 0 0 / 20%); transition: .3s; border-radius: 8px; padding: 40px 0;}
    .join_reg {width:80%;margin: 0 auto;}
    .join_reg h3 {margin-bottom: 20px;}
    .join_reg div label {display: block; padding: 10px 0;}
    .join_reg div input {width: 100%;}
}
@media only screen and (min-width:751px) and (max-width:848px) {
    .service td div dd {padding: 0 14px 24px 14px !important;}
    .service_pak dl.item dd, .service_mail dl.item dd {width:auto;}    
}
@media only screen and (min-width:751px) {
    .forpc {display: block;}
    .formobile {display: none;}
    .result-wrap section.result_table button {width:35% !important;}
}
@media only screen and (max-width:750px) {
    .respon .inner {padding: 100px 15px 40px 15px}
    .forpc {display: none;}
    .formobile {display: block;}
    .service td {width:100%; display: block;}
    .service td div {width:100%;}
    .service_mail {margin-top: 20px;}
    .info_item input.url, .respon .info_item input.url {width:50% !important; margin-left: 10px;}
    .pay_item label {font-size: 13px;}
    .pay_item input[type="radio"] {width:16px; height: 16px; margin: 20px 5px 0px 20px; cursor: pointer;}
    .pay_item label {margin-top: 18px; cursor: pointer;font-weight: 400;}
    /*.info_item input, .pay_item input { text-indent: 6px;}*/
    .info_item input.id, .info_item input.pw {width:75%;}
    .pay_item .btn_search {left:-6px;}
    
    .respon .pay_item input[type="radio"] {margin:15px 5px 0px 0px;}
    .respon .pay_item label {margin:12px 5px 0 0;}
    .respon .result_table {width:96%; margin: 0 auto;}
}
@media only screen and (max-width:700px) {
    .result-wrap section.result_table button {width:35% !important;}
    .respon .info_default tr.info_item, .respon .option .option_item, .option .info_item, .pay_item {display: block;}
    .option_item td, .info_item td, .pay_item td { width:68%;}
    /*.respon .option .option_item th, .info_default .info_item th, .pay_item th {display: block; width: 100%; padding-left: 0; padding: 10px 0 0 0; background-color:#fff; border-bottom: none;}
    .respon .option_item td, .info_item td, .pay_item td {width: 100%;border-bottom: none;}*/
    
    .respon .info_item input, .pay_item input {margin: 5px 0;}
    .respon .info_item select, .info_item input[type="text"], input[type="password"], .pay_item input[type="text"], .receipt_info select, textarea {width: 100%}    
    .respon .option_item td .number-area {margin-top:0;}
    .respon .agree-wrap td label {font-size: 12.5px;}
    .respon .total-wrap {background: #fff; border-top:1px solid #f5f7f9; border-bottom:1px solid #f5f7f9; border-left: none; border-right: none;}
    .respon .payment_item td {padding: 10px 5px !important;}
    .respon .total_price dt {width:40%;}
    .respon .btn_dupl {top:5px;}
    .respon .receipt_info td div.select-area select.type {margin-left:0; width:100%;}
    .respon .pay_item .btn_search {top:5px;}
    .respon .pay_item .btn_search {height: 39px;}
    .respon .result_table table tbody tr {display: block;}
    .respon .result_table table tbody th {display: block; width:100%;padding:14px 0 0 0; text-align: left; border-right: none; font-size: 15px; font-weight: 500; width:100%;background-color: #fff;}
    .respon .result_table table tbody td {padding:5px 0 16px 0;}
}
@media only screen and (max-width:440px) {
    .respon .service_pak dl.item dd {width:100%;}
    .respon .service td div .select-area select {background-size: 24px; letter-spacing: -1.8px;}
}
@media only screen and (max-width:420px) {
    .bg-none {background-color:transparent; box-shadow: none;}
}