@charset "utf-8";

:root{
	--primary: #11675a;
	--text-color: #555; 
	--table-border: #e1e2e3;
}

body:has([open]){ overflow: clip; }

body{ margin-inline: auto; max-width: 800px; }

.landing-img{ width: 100%; }

.inr{ position: relative; margin: 0 auto; max-width: 1400px; width: 92%; box-sizing: border-box; z-index: 2; }

.sec17 { contain: content; position:relative;background:url('https://akcdn-beaconmedia.cafe24img.com/dang1/sec17_bg.png')no-repeat center/cover;padding-block: 50rem 100rem;
    --form-gap : 20rem;
    .sec-title figure img{display:block;width:100%;}
    .sec-title .title-logo{width:160rem;}
    .sec-title .title-text{width:420rem;}
    .sec-title{display:flex;flex-direction:column;align-items:center;gap:20rem;}
    .form-wrap{padding:50rem 40rem;background-color:#fff ;box-shadow:0 32px 12px -26px rgb(166 166 166 / 48%);margin-top: 70rem;}
    .form-wrap form{display: flex;flex-direction: column;gap:var(--form-gap);padding-right: 180rem;}
    .form-wrap form input { min-width: 0; font-size: 18rem;padding-inline: 15rem;color: #555;height: 100%;}
    .form-wrap .submit_inquiry{display:flex;align-items:flex-start;justify-content:center;flex-direction:column;gap: 15rem;margin-top: 25rem;}
    
    .ba-pict {position: absolute;bottom: 0;right: -20rem;z-index: 2;}
    .ba-pict img{width:480rem;}

    .kyc-field .form-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40rem;row-gap:var(--form-gap);
        .form-control{display:flex;align-items:center;height: 60rem;
            label{flex-basis:8ch;flex-grow:0;flex-shrink:0;font-size: var(--fs21);}
            input{flex:1;}
            .data_call {height: 100%;width: 100%;}
            .data_call input[type="number"]::-webkit-inner-spin-button,
            .data_call input[type="number"]::-webkit-outer-spin-button {
                -webkit-appearance: none; 
            }
        } 
    }

    .inquiry-field .form-group .form-control {display: flex;align-items: center;height: 60rem;
        label{flex-basis:8ch;flex-grow:0;flex-shrink:0;font-size: var(--fs21);}
        input{flex:1;}
    }

    .form-control input[type="radio"] {display: none;
        &:checked {
            + .box { background-color: var(--primary);
              span { color: white; /* transform: translateY(70px); */
                &:before {
                  transform: translateY(0px);opacity: 1;
                }
              }
            }
          }
    }
    .form-control .box { width: 100%;height: 100%;background-color: white;transition: all 250ms ease;will-change: transition;text-align: center;cursor: pointer;position: relative;font-weight: 700;display: inline-flex;align-items: center;justify-content: center;
         & span{position:static;transition:all .3s ease;font-size:18rem;color:var(--primary);}
    }
    .form-wrap hr{border-top:1px solid #eaeaea;width:100%;}
    .gender-radio{border: solid #d5d5d5 1px;display:flex;flex-direction:row;width: 100%;height: 100%;}
    .gender-radio>label{flex:1!important}
    
    .agree-wrap .form-group{display:flex;justify-content: space-between;}
    .agree-wrap .form-group .form-control{display:flex;align-items: center;gap: 3rem;}
    .agree-wrap .form-group .form-control label{display:flex;flex-direction:row;font-size:14rem;gap:5rem;line-height:1;}
    .agree-wrap .form-group .form-control label a{display:inline;}
    .agree-wrap .form-group .form-control label a:hover{color: #000;}
    .agree-wrap [type=checkbox]{width:14rem;}

    .btn-submit_inquiry {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--primary);
        color: var(--white);
        padding-block: 15rem;
        width: 100%;
        font-weight: 500;
        font-size: var(--fs24);
        transition: all 300ms ease-out;

        &:hover {
            background-color: #129985;
        }
    }
    .submit_inquiry .logo{width:130rem;}
    .submit_inquiry .logo img{width:100%;}

    /* @media (max-width: 1850px) { */
        .form-wrap form {padding-right: 250rem;}
    /* } */
    /* @media (max-width: 1600px) { */
        .form-wrap form {padding-right: 280rem;}
        .ba-pict img{width:420rem}
    /* } */
    /* @media (max-width: 1280px) { */
        .form-wrap form {padding-right: 180rem;}
        .kyc-field .form-group {grid-template-columns: 1fr;}
        .agree-wrap .form-group {flex-direction: column;gap: 10rem;}
        .ba-pict img{width:400rem;}
    /* } */
    /* @media (max-width: 767px) { */
        &{ padding-bottom: 165rem; }
        .form-wrap {margin-top: 50rem;}
        .form-wrap form {padding-right: 0;}
        .kyc-field .form-group .form-control {height: 48rem;} 
        .ba-pict img{width:214rem}
        .sec-title .title-text{width:320rem;}
        label[disabled]{ display: none; }
    /* } */
}

dialog{ max-width: 600rem; padding: 0; border: 0;
	&::backdrop{ background: #00000080; }
	header{ display: flex; align-items: center; justify-content: space-between; padding: 15px; background: var(--primary); font-weight: 700; color: #fff; }
	.close-btn{ --size: 1px; width: 25px; aspect-ratio: 1; background: linear-gradient(45deg, #0000 calc(50% - var(--size)), currentColor calc(50% - var(--size)), currentColor calc(50% + var(--size)), #0000 calc(50% + var(--size))), linear-gradient(-45deg, #0000 calc(50% - var(--size)), currentColor calc(50% - var(--size)), currentColor calc(50% + var(--size)), #0000 calc(50% + var(--size))); }
	.content{ overflow: auto; max-height: 620rem; padding: 15rem; }
}

#privacy .content{color:var(--text-color);padding-bottom:50px;display: flex;flex-direction: column;gap: 15px;
	h3{font-size:24px;font-weight:500;}
	h4{font-size:16px;font-weight:500;margin-block: 5px;}
	p{font-size:14px;margin-block: 0;text-wrap: pretty;}
	ul {margin-block: 5px 0;}
	ul>li {font-size:14px;}
	ul>li:not(:last-child) {margin-bottom: 5px;}
} 

#thirdParty .content{color:var(--text-color);padding-bottom:50px;display: flex;flex-direction: column;gap: 15px;
	h3{font-size:24px;font-weight:500;}
	h4{font-size:18px;font-weight:500;margin-bottom:5px;}
	p{font-size:14px;margin-block: 0 5px;text-wrap: pretty;}
	table,td,th{border-collapse:collapse;}
	td,th{padding:10px;border:solid 1px var(--table-border);text-align:center;font-size: 14px;color: var(--text-color);vertical-align: baseline;}
	th{background-color:#f3f3f3}
	td {text-align: left;}
	td ol{padding-left:10px;}
	caption{margin-bottom:10px;text-align:left;color: var(--text-color);font-weight: 500;}
	tfoot tr td{border:none;}
	colgroup col {width: 25%;}
}

#marketing .content{color:var(--text-color);padding-bottom:50px;display: flex;flex-direction: column;gap: 15px;
	h3{font-size:24px;font-weight:500;}
	h4{font-size:18px;font-weight:500;margin-bottom:5px;}
	p{font-size:14px;margin-block: 0 5px;text-wrap: pretty;}
	table,td,th{border-collapse:collapse;}
	td,th{padding:10px;border:solid 1px var(--table-border);text-align:center;font-size: 14px;color: var(--text-color);vertical-align: baseline;}
	th{background-color:#f3f3f3}
	td {text-align: left;}
	td ol{padding-left:10px;}
	caption{margin-bottom:10px;text-align:left;color: var(--text-color);font-weight: 500;}
	tfoot tr td{border:none;}
	colgroup col {width: 33.33%;}
}

#policy .content{color:var(--text-color);padding-bottom:50px;display: flex;flex-direction: column;gap: 15px;
	p{font-size:14px;margin-block: 0 5px;text-wrap: pretty;}
	li {font-size: 14px;}
	.deep_1 {margin: 0;display: flex;flex-direction: column;gap: 20px;padding-left: 20px;}
	.deep_1 > li {margin-block:5px 0;}
	.deep_1 > li > b {font-weight: 500;}
	.deep_1 > li > p {margin-block: 5px 0;}
	.deep_1 > li > h4 {font-size:14px;margin-block: 10px 0;}
	.deep_2{margin-block:10px 0;display:flex;flex-direction:column;gap:10px;padding-left: 15px;}
	.deep_2>li{margin-block:10px 0;}
	.deep_2>li>b{font-weight:500;}
	.deep_3{padding-left:20px;margin-block:10px 0;}
	.deep_3>li{margin-block:7px 15px;} 
}



footer{ padding: clamp(30px, 2.60416667vw, 21px) 4vw; background: #333; font-size: clamp(14px, 2.34375vw, 19px); color: #fff; text-align: center;
	*{ letter-spacing: -.02em; }
}