.d-flex {
    display: flex;
}

.align-items-center {
    align-items: center;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-between {
    justify-content: space-between;
}

.text-center {
    text-align: center;
}

.me-3 {
    margin-right: .75rem;
}

.mt-3 {
    margin-top: .75rem;
}

.mt-4 {
    margin-top: 1.25rem;
}

.mb-3 {
    margin-bottom: .75rem;
}

.mb-4 {
    margin-bottom: 1.25rem;
}

.p-2 {
    padding: .5rem
}

.p-3 {
    padding: .75rem;
}

.text-primary {
    color: #d3135a !important
}

.text-danger {
    color: #df0c0c !important
}

.bg-primary {
    background-color: #d3135a !important;
}

.w-700 {
    width: 700px;
    max-width: 100%;
}

.card {
    width: 100%;
    background: white;
    border: 1px solid rgba(233, 233,233, 1);
    border-radius: .5em;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
}

.card.card-500 {
    width: 500px;
    max-width: 95%;
}

.card.card-700 {
    width: 700px;
    max-width: 95%;
}
.card.card-800 {
    width: 900px;
    max-width: 95%;
    margin-top:30px;
    padding-top:100px;
    padding-bottom:100px;
}
.card .card-body {
    padding: 1.5rem;
    border-radius: inherit;
}

.card .card-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: .5rem;
    padding: 1.25rem 1.5rem .75rem 1.5rem
}

.card .btn {
    padding: .75em 1em;
    background-color: #d3135a;
    color: #fff !important;
    line-height: 1.5;
}

.card .btn.btn-outline-primary {
    background-color: #fff;
    color: #d3135a !important;
    border: 1px solid #d3135a;
}

.card .btn.btn-secondary {
    background-color: #d5d5d5;
    color: #333 !important;
    border: 1px solid #333;
}

.form-group {
    margin-bottom: .75rem;
    position: relative;
}

.form-group label {
    margin-bottom: .25rem;
    display: block;
    font-weight: bold;
}

.form-group label.label-required::after {
    content: '*';
    padding-left: 4px;
    color: #c31818;
}

.form-group .form-control {
    width: 100%;
    position: relative;
}

.form-group .form-control.has-invalid input {
    border: 1px solid #c31818;
}

.form-group .invalid-feedback {
    color: #c31818
}

.form-group .form-control > .tooltip {
    position: absolute;
    top: 50%;
    left: -10px;
    transform: translateY(-50%) translateX(-100%);
    background-color: #333;
    border-radius: 6px;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    text-align: center;
    padding: .5rem .75rem;
    word-break: break-all;
    color: #fff;
    font-size: 12px;
    transition: .35s;
    visibility: hidden;
    opacity: 0;
}

.form-group .form-control > .tooltip::after {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    content: '';
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #333;
}

.form-group .form-control input, .form-group .form-control select {
    padding: .75rem;
    border-radius: 6px;
    border: 1px solid #d5d5d5;
    height: auto;
    font-size: 16px;
    width: 96%;
}

.form-group .form-control select {
    width: 100%
}

/** Start - Signup */

#signup-section div {
    box-sizing: border-box;
}

.signup-types {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: #d3135a;
    padding: 0 1rem;
    position: relative;
}

.signup-types--item {
    width: 33.33%;
    padding: .5rem .5rem 0 .5rem;
    cursor: pointer;
    transition: .35s;
}

.signup-types--item:first-child {
    padding-left: 0;
}

.signup-types--item:last-child {
    padding-right: 0;
}

.signup-types--item__content {
    height: 100%;
    padding: .25rem;
    text-align: center;
    background-color: transparent;
    color: #fff;
    font-size: 18px;
    line-height: 2;
    font-weight: 600;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.signup-types:not(.disabled) .signup-types--item:hover .signup-types--item__content, .signup-types--item.active .signup-types--item__content {
    background-color: #fff;
    color: #d3135a
}

.signup-types:not(.disabled) .signup-types--item:active .signup-types--item__content {
    background-color: #fff;
    color: #d3135a
}

.signup-types--title {
    font-size: 16px;
    margin-bottom: 1rem;
    padding: .75rem 1.5rem;
    background-color: #fff;
    border: 1px solid #d3135a;
    margin-bottom: .75rem;
}

#signupForm .card-body  {
    padding-top: .5rem;
}

#signupForm .checkbox-section {
    background-color: #e5e5e5;
    border: 1px solid #b5b5b5;
    padding: .75rem .5rem;
    margin-top: .5rem;
    margin-bottom: 1rem;
    border-radius: 6px;
}

#signupForm .form-check {
    margin-bottom: .5rem;
    position: relative;
}

#signupForm .form-check .form-check-label {
    padding-left: 6px;
}

#signupForm .form-check .form-check-input {
    visibility: hidden;
}

#signupForm .form-check .form-check-mark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #e5e5e5
}

#signupForm .form-check .form-check-mark::after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    bottom: 5px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

#signupForm .form-check:last-child {
    margin-bottom: 0;
}

#signupForm .form-check .form-check-label {
    font-weight: bolder;
}

#signupForm .form-check .form-check-input:checked ~ .form-check-mark::after {
    display: block;
}

#signupForm .form-check .form-check-input:checked ~ .form-check-mark {
    background-color: #f6366f;
}

#signupForm .btn {
    background-color: #fff;
    width: 100%;
    color: #f6366f !important;
    border: 2px solid #f6366f;
    font-size: 16px;
    font-weight: bold;
    transition: .35s;
}

#signupForm .btn:hover {
    color: #fff !important;
    background-color: #f6366f;
}

#signupForm .btn:disabled {
    opacity: .5;
    pointer-events: none;
}

#signupForm .btn.btn-secondary {
    color: #fff !important;
    background-color: #333;
    border: 2px solid #333;
    display: inline-block;
    text-align: center;
}

#signupForm .btn-social {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    border: 0;
    outline: none;
    line-height: 0;
    cursor: pointer;
    transition: .35s;
}

#signupForm .btn-social svg, #signupForm .btn-social.btn-naver img {
    width: 36px;
    height: 36px;
}

#signupForm .btn-social.btn-kakao {
    background-color: #fee80f;
}

#signupForm .btn-social.btn-naver {
    background-color: #20c800;
    color: #fff
}

#signupForm .btn-social.btn-naver svg {
    width: 22px;
    height: 22px;
}

#signupForm .btn-social.btn-google img {
    width: 32px;
    height: 32px;
}

#signupForm .btn-social:hover {
    transform: scale(1.1);
}
.nmemberTable {
    margin-top:33px;
}

.nmemberTable .head {
    background-image: url("../img/ngodo/r1.gif");height:113px;
}
.nmemberTable .head .title {
    margin-left:80px;margin-top:20px;color:#D3145A; line-height:25px;
}
.nmemberTable .head span {
 font-size:16px;    padding-top:40px; line-height:25px;
}
.nmemberTable .tap {
    background-image: url('../img/ngodo/r2.gif');
    height:70px;
}
.nmemberTable .tap td {
    width:33%;
    text-align: center;
}
.nmemberTable .tap .tapOn {
    border-radius: 10px 10px 0px 0px;margin-top:10px;margin-left:60px;width:230px;background-color: white;height:50px;color:black;padding-top:1px;
}
.nmemberTable .tap .tapOff {
    border-radius: 10px 10px 0px 0px;margin-top:10px;margin-left:60px;width:230px;height:50px;color:white;padding-top:1px;
}
.nmemberTable .form {
    background-image: url("../img/ngodo/r3.gif");
    height:500px;
}
.pinput {
    border: 0px;
}
.pm_div dl {
    margin: 0px;

}
.pinput dt{
    display: block !important;
    color:black;
    font-size:23px;
    margin-left:50px;
}
.pinput dd {
    width:100%;
    margin-left:50px;
}

.pinput2 {
    border: 0px;
}
.pinput2 dt{
    display: block !important;
    color:black;
    font-size:23px;
    margin-left:50px;
}
.pinput2 dd {
    width:100%;
    margin-left:50px;
}

.pmem {
    width:865px !important;
    border:solid #B3B3B3 3px;
    border-radius:10px;
    height:60px;
}
.pmem:focus {
    outline:1px solid #F92E5D;
    border:solid #F92E5D 3px;
}
.perror {
    color: #F92E5D;
    font-size:15px;
    height:20px;
    font-weight:bold;
}
.yak{
    background-color: #F8F8F8;
    border:1px solid #CDCDCD;
    height:200px;
    width:890px;
    border-radius:10px;
    margin-left:50px;
}
.yak dl {
    font-size:23px !important;
    margin-top:30px;
    margin-left:20px;
    line-height: 10px;
}
.ck_pinput{
    accent-color: #F92E5D;
}
.bigc{
    width:19px;
    height:19px;
}
.ck_pinput_cehck{
    font-size:23px !important;
    margin-left:50px !important;
    margin-top:40px  !important;;
    margin-bottom:18px  !important;;
}

.ntype_select {
    width:890px !important;
    border:solid #B3B3B3 3px;
    border-radius:10px;
    height:90px;
    font-size:18px;
background: url('../img/arrow.jpg') no-repeat 95% 50%; 

-webkit-appearance: none; 
-moz-appearance: none;
appearance: none;
}
.ntype_select:focus {
    outline:1px solid #F92E5D;
    border:solid #F92E5D 3px;
}


.ntype_select2 {
 display:inline-block;
 min-width:200px;
 padding: 0 30px 0 20px;
    border:solid #B3B3B3 3px;
    border-radius:10px;
    height:90px;
    font-size:18px;
background: url('../img/arrow.jpg') no-repeat 95% 50%; 

-webkit-appearance: none; 
-moz-appearance: none;
appearance: none;
}
.ntype_select2:focus {
    outline:1px solid #F92E5D;
    border:solid #F92E5D 3px;
}
.nselect { display:inline-block}
.noti {
    color:gray;
    margin-left:70px;
    margin-top:10px;
}
.ngodosns {
    margin-top:40px;
}
.ngodosns tr td {
    text-align: center;
}
.ngodosns .snstip{
    color:#4D4D4D;font-size: 22px;font-weight:bold;padding-top:20px;
}
.ngodosns .snsbar{
    padding-top:20px;
}
.ngodosns .sntext{
    color:darkgray;font-size: 18px;padding-top:20px;padding-bottom:20px;
}
.ngodosns img {
    cursor: pointer;
}
.pmebox {
    line-height:60px;
    font-size:25px;
}
/** End - Signup */
.godo_payment {
    margin-top:30px;
}
.godo_payment .payment_title{
    color:#FE0958;
    text-align: center;
}
.godo_payment .payment_hr{
    background-color: #F0FFF0;
    width:600px;
}
.godo_payment .payment_content {
    float: left;
    width: 260px;
    margin-left:10px;
}
.payment_si_box p {
    text-align:left;
    font-size:12px;
}
.payment_si_box img {
    width:20px;
    margin-right:10px;
}
.payment_si {
    width:271px;
    margin-top:30px;
}
.payment_si .pt_si_title {
    background-image: url('../img/ngodo/pay-top.gif');
    height:46px;
    color:#FA407F;
    font-size:18px;
    text-align:center;
    line-height: 40px;
}
.payment_si .pt_si_title h3{
    color:#3D3D3D;
    margin-top:10px;
    text-align: center;
}
.payment_si .payment_si_content {
    background-image: url('../img/ngodo/pay-right-mid.gif');
    padding-left:10px;
    text-align: center;
}

.payment_si_box {
    background-color: #F7F7F7;
    padding:5px 10px 5px 10px ;
    border-radius: 10px;
    width:228px;
    margin-bottom:10px;
    margin-top:12px;
}
.p_box_p {
    font-weight: bold;
    font-size:16px;
    color:black;
}
.p_box_t {
    color:#FBA706;
    border:1px solid #FBA706;
    padding-top:10px;
    padding-bottom:6px;
    border-radius: 10px;
    width:248px;
}
.p_box_tr {
    color:#0785FF;
    border:1px solid #0785FF;
    padding-top:10px;
    padding-bottom:6px;
    border-radius: 10px;
    width:248px;
}
.p_box_tr  span {
    font-weight:bold;
    font-size:20px;
}
.p_box_t span {
    font-weight:bold;
    font-size:20px;
}
.payment_left_footer{
    background-image: url('../img/ngodo/pay-left-bottom.gif');
    height:112px;
    text-align: center;
    top:0;
    vertical-align : top;
}
.payment_right_footer {
    background-image: url('../img/ngodo/pay-right-bottom.gif');
    height:113px;
    text-align: center;
    top:0;
    vertical-align : top;
}
.p_box_py {
    color:white;
    font-weight: bold;
    font-size:18px;
    line-height: 40px;
}
.p_box_ty {
    color:white;
    font-weight: normal;
    font-size:16px;
    margin-top:10px !important;
}
.p_box_ty span {
    font-weight: bold;
    font-size:20px;
}
.godo_payment_center {
    margin-top:10px;
    margin-left:10px;
    margin-right:10px;
}
.godo_payment_center .gpc_title {
    background-image: url('../img/ngodo/pay-center-top.gif');
    height: 80px;
    text-align: center;
    font-weight: bold;
    color:white;
    font-size:26px;
}
.payment_si_center {
    background-image: url('../img/ngodo/pay-center-mid.gif');
}
.payment_si_center .payment_si_box {
    margin-left:20px;
    width: 276px;
}
.payment_si_center .payment_si_box h3 {
    text-align: center;
    color: black;
}
.p_box_tc {
    text-align:center;
    color:#FB1560;
    border:1px solid #EA9BB8;
    padding-top:10px;
    padding-bottom:6px;
    border-radius: 10px;
    width:310px;
    margin-left:10px !important;
}
.p_box_tc span {
    font-weight:bold;
    font-size:20px;
}
.payment_center_footer {
    background-image: url('../img/ngodo/pay-center-bottom.gif');
    height:136px;
    text-align: center;
    top:0;
    vertical-align : top;
}
.p_box_pc {
    font-weight: bold;
    font-size:16px;
    color:black;
    margin-left:130px;
}
.p_box_pys {
    color:white;
    font-weight: bold;
    font-size:18px;
    line-height: 48px;
}

.ngodo-error-msg{
    font-weight:bold;color:#FF295A;margin-top:20px;margin-left:10px;font-style:oblique;
}



.div-wrapper {
  background-color: #ffffff;
 
  width: 100%;
}

.div-wrapper .div {
  background-color: #ffffff;
  width: 1300px;
  height: 3732px;
  position: relative;
}

.div-wrapper .overlap {
  position: absolute;
  width: 607px;
  height: 961px;
  top: 2069px;
  left: 0px;
  background-color: #ffffff;
  border: 2px solid;
  border-color:#cecece;
}

.select_box {   border-color: #4d9dff !important ; }
.select_btn {   background-color: #4d9dff !important ; }
.div-wrapper .overlap-group {
  position: absolute;
  width: 516px;
  height: 385px;
  top: 359px;
  left: 46px;
  background-color: #f3f3f3;
}

.div-wrapper .element-SMS-SMS {
  position: absolute;
  top: 36px;
  left: 50px;
  font-family: "Gmarket Sans-Bold", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 28.4px;
}

.div-wrapper .text-wrapper {
  font-weight: 700;
}

.div-wrapper .span {
  font-family: "Gmarket Sans-Medium", Helvetica;
  font-weight: 500;
}

.div-wrapper .overlap-2 {
  position: absolute;
  width: 607px;
  height: 104px;
  top: 857px;
  left: 0;
background-color: #cecece ;
}

.div-wrapper .text-wrapper-2 {
  position: absolute;
  top: 31px;
  left: 145px;
  font-family: "Gmarket Sans-Bold", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 30px;
  text-align: center;
  letter-spacing: 0;
  line-height: 39.0px;
  white-space: nowrap;
}

.div-wrapper .text-wrapper-3 {
  position: absolute;
  top: 31px;
  left: 224px;
  font-family: "Gmarket Sans-Bold", Helvetica;
  font-weight: 700;
  color: #000000;
  font-size: 24px;
  letter-spacing: 0;
  line-height: 31.2px;
  white-space: nowrap;
}

.div-wrapper .p {
  position: absolute;
  top: 80px;
  left: 135px;
  font-family: "Gmarket Sans-Medium", Helvetica;
  font-weight: 500;
  color: #000000;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0;
  line-height: 26.0px;
  white-space: nowrap;
}

.div-wrapper .element {
  top: 144px;
  left: 154px;
  font-family: "Gmarket Sans-Bold", Helvetica;
  font-weight: 700;
  color: #ff2121;
  font-size: 40px;
  line-height: 52.0px;
  position: absolute;
  letter-spacing: 0;
}

.div-wrapper .text-wrapper-4 {
  font-family: "Gmarket Sans-Bold", Helvetica;
  font-weight: 700;
  color: #ff2121;
  font-size: 40px;
  letter-spacing: 0;
  line-height: 52.0px;
}

.div-wrapper .text-wrapper-5 {
  font-size: 50px;
  line-height: 65.0px;
}

.div-wrapper .overlap-3 {
  position: absolute;
  width: 414px;
  height: 70px;
  top: 239px;
  left: 97px;
}

.div-wrapper .rectangle {
  width: 215px;
  top: 56px;
  left: 139px;
  position: absolute;
  height: 14px;
  background-color: #ffd7d8;
}

.div-wrapper .SMS-SMS {
  position: absolute;
  width: 414px;
  top: 0;
  left: 0;
  font-family: "Pretendard-Medium", Helvetica;
  font-weight: 400;
  color: #737373;
  font-size: 18px;
  text-align: center;
  letter-spacing: 0;
  line-height: 23.4px;
}

.div-wrapper .text-wrapper-6 {
  font-weight: 500;
}

.div-wrapper .text-wrapper-7 {
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700;
}

.div-wrapper .overlap-4 {
  position: absolute;
  width: 186px;
  height: 49px;
  top: 775px;
  left: 211px;
  background-color: #ffffff;
  border: 1px solid;
  border-color: #b3b3b3;
}

.div-wrapper .text-wrapper-8 {
  top: 8px;
  left: 42px;
  font-family: "Pretendard-Medium", Helvetica;
  font-weight: 500;
  color: #737373;
  font-size: 22px;
  text-align: center;
  line-height: 28.6px;
  white-space: nowrap;
  position: absolute;
  letter-spacing: 0;
}

.div-wrapper .overlap-5 {
  position: absolute;
  width: 607px;
  height: 961px;
  top: 2069px;
  left: 670px;
  background-color: #ffffff;
  border: 2px solid;
  border-color: #cecece;
}

.div-wrapper .SMS-SMS-jpg-gif-wrapper {
  position: absolute;
  width: 516px;
  height: 385px;
  top: 359px;
  left: 48px;
  background-color: #f3f3f3;
}

.div-wrapper .SMS-SMS-jpg-gif {
  top: 36px;
  left: 79px;
  font-family: "Gmarket Sans-Bold", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 20px;
  line-height: 28.4px;
  position: absolute;
  letter-spacing: 0;
}

.div-wrapper .overlap-6 {
  position: absolute;
  width: 607px;
  height: 104px;
  top: 857px;
  left: 0;
  background-color: #cecece;
}

.div-wrapper .text-wrapper-9 {
  position: absolute;
  top: 31px;
  left: 162px;
  font-family: "Gmarket Sans-Bold", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 30px;
  text-align: center;
  letter-spacing: 0;
  line-height: 39.0px;
  white-space: nowrap;
}

.div-wrapper .text-wrapper-10 {
  position: absolute;
  top: 31px;
  left: 236px;
  font-family: "Gmarket Sans-Bold", Helvetica;
  font-weight: 700;
  color: #000000;
  font-size: 24px;
  letter-spacing: 0;
  line-height: 31.2px;
  white-space: nowrap;
}

.div-wrapper .text-wrapper-11 {
  top: 80px;
  left: 93px;
  font-family: "Gmarket Sans-Medium", Helvetica;
  font-weight: 500;
  color: #000000;
  font-size: 20px;
  line-height: 26.0px;
  white-space: nowrap;
  position: absolute;
  letter-spacing: 0;
}

.div-wrapper .element-2 {
  top: 156px;
  left: 141px;
  font-family: "Gmarket Sans-Bold", Helvetica;
  font-weight: 700;
  color: #ff2121;
  font-size: 40px;
  line-height: 52.0px;
  position: absolute;
  letter-spacing: 0;
}

.div-wrapper .overlap-7 {
  position: absolute;
  width: 436px;
  height: 70px;
  top: 239px;
  left: 76px;
}

.div-wrapper .rectangle-2 {
  width: 118px;
  top: 32px;
  left: 318px;
  position: absolute;
  height: 14px;
  background-color: #ffd7d8;
}

.div-wrapper .rectangle-3 {
  width: 149px;
  top: 56px;
  left: 42px;
  position: absolute;
  height: 14px;
  background-color: #ffd7d8;
}

.div-wrapper .div-2 {
  width: 436px;
  top: 0;
  left: 0;
  font-family: "Pretendard-Medium", Helvetica;
  font-weight: 400;
  color: #737373;
  font-size: 18px;
  text-align: center;
  line-height: 23.4px;
  position: absolute;
  letter-spacing: 0;
}

.div-wrapper .overlap-8 {
  position: absolute;
  width: 729px;
  height: 691px;
  top: -3374px;
  left: 728px;
}

.div-wrapper .polygon {
  position: absolute;
  width: 452px;
  height: 452px;
  top: 239px;
  left: 0;
}

.div-wrapper .union {
  position: absolute;
  width: 336px;
  height: 336px;
  top: 0;
  left: 393px;
}

.div-wrapper .star {
  position: absolute;
  width: 345px;
  height: 345px;
  top: -3364px;
  left: 327px;
}

.div-wrapper .overlap-9 {
  position: absolute;
  width: 240px;
  height: 519px;
  top: 614px;
  left: 218px;
  background-color: #caf2e5;
  border-radius: 500px;
  border: 0.5px solid;
  border-color: #dddddd;
  box-shadow: 3px 6px 15.4px #00000012;
}

.div-wrapper .overlap-10 {
  position: absolute;
  width: 239px;
  height: 259px;
  top: 260px;
  left: 0;
  background-color: #ffffff;
  border-radius: 0px 0px 500px 500px;
}

.div-wrapper .text-wrapper-12 {
  top: 24px;
  left: 47px;
  -webkit-text-stroke: 0.2px #ffffff;
  font-family: "Gmarket Sans-Bold", Helvetica;
  font-weight: 700;
  color: #222222;
  font-size: 24px;
  text-align: center;
  line-height: 31.2px;
  white-space: nowrap;
  position: absolute;
  letter-spacing: 0;
}

.div-wrapper .text-wrapper-13 {
  top: 185px;
  left: 77px;
  font-family: "Pretendard-Medium", Helvetica;
  font-weight: 500;
  color: #acacac;
  font-size: 16px;
  text-align: center;
  line-height: 20.8px;
  text-decoration: underline;
  white-space: nowrap;
  position: absolute;
  letter-spacing: 0;
}

.div-wrapper .text-wrapper-14 {
  width: 222px;
  top: 86px;
  left: 8px;
  font-family: "Pretendard-Medium", Helvetica;
  font-weight: 500;
  color: #555555;
  font-size: 18px;
  text-align: center;
  line-height: 23.4px;
  position: absolute;
  letter-spacing: 0;
}

.div-wrapper .online-examination {
  position: absolute;
  width: 183px;
  height: 183px;
  top: 46px;
  left: 23px;
  object-fit: cover;
}

.div-wrapper .overlap-11 {
  position: absolute;
  width: 240px;
  height: 519px;
  top: 614px;
  left: 540px;
  background-color: #c8c2ff;
  border-radius: 500px;
  border: 0.5px solid;
  border-color: #dddddd;
  box-shadow: 3px 6px 15.4px #00000012;
}

.div-wrapper .text-wrapper-15 {
  top: 185px;
  left: 75px;
  font-family: "Pretendard-Medium", Helvetica;
  font-weight: 500;
  color: #acacac;
  font-size: 16px;
  text-align: center;
  line-height: 20.8px;
  text-decoration: underline;
  white-space: nowrap;
  position: absolute;
  letter-spacing: 0;
}

.div-wrapper .text-wrapper-16 {
  width: 219px;
  top: 74px;
  left: 10px;
  font-family: "Pretendard-Medium", Helvetica;
  font-weight: 500;
  color: #555555;
  font-size: 18px;
  text-align: center;
  line-height: 23.4px;
  position: absolute;
  letter-spacing: 0;
}

.div-wrapper .text-wrapper-17 {
  top: 24px;
  left: 40px;
  -webkit-text-stroke: 0.2px #ffffff;
  font-family: "Gmarket Sans-Bold", Helvetica;
  font-weight: 700;
  color: #222222;
  font-size: 24px;
  text-align: center;
  line-height: 31.2px;
  white-space: nowrap;
  position: absolute;
  letter-spacing: 0;
}

.div-wrapper .flash-sale-discount {
  position: absolute;
  width: 198px;
  height: 198px;
  top: 39px;
  left: 21px;
  object-fit: cover;
}

.div-wrapper .overlap-group-2 {
  position: absolute;
  width: 240px;
  height: 519px;
  top: 614px;
  left: 864px;
  background-color: #ffc7d0;
  border-radius: 500px;
  border: 0.5px solid;
  border-color: #dddddd;
  box-shadow: 3px 6px 15.4px #00000012;
}

.div-wrapper .text-wrapper-18 {
  top: 185px;
  left: 76px;
  font-family: "Pretendard-Medium", Helvetica;
  font-weight: 500;
  color: #acacac;
  font-size: 16px;
  text-align: center;
  line-height: 20.8px;
  text-decoration: underline;
  white-space: nowrap;
  position: absolute;
  letter-spacing: 0;
}

.div-wrapper .text-wrapper-19 {
  width: 211px;
  top: 86px;
  left: 14px;
  font-family: "Pretendard-Medium", Helvetica;
  font-weight: 500;
  color: #555555;
  font-size: 18px;
  text-align: center;
  line-height: 23.4px;
  position: absolute;
  letter-spacing: 0;
}

.div-wrapper .text-wrapper-20 {
  top: 24px;
  left: 24px;
  -webkit-text-stroke: 0.2px #ffffff;
  font-family: "Gmarket Sans-Bold", Helvetica;
  font-weight: 700;
  color: #222222;
  font-size: 24px;
  text-align: center;
  line-height: 31.2px;
  white-space: nowrap;
  position: absolute;
  letter-spacing: 0;
}

.div-wrapper .market-analysis {
  position: absolute;
  width: 172px;
  height: 172px;
  top: 57px;
  left: 34px;
  object-fit: cover;
}

.div-wrapper .text-wrapper-21 {
  top: 457px;
  left: 0px;
  font-family: "Gmarket Sans-Bold", Helvetica;
  font-weight: 700;
  color: #1b1b1b;
  font-size: 40px;
  line-height: normal;
  white-space: nowrap;
  position: absolute;
  letter-spacing: 0;
}

.div-wrapper .text-wrapper-22 {
  position: absolute;
  top: 1271px;
  left: 0px;
  font-family: "Gmarket Sans-Bold", Helvetica;
  font-weight: 700;
  color: #1b1b1b;
  font-size: 40px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.div-wrapper .text-wrapper-23 {
  top: 1958px;
  left: 0px;
  font-family: "Gmarket Sans-Bold", Helvetica;
  font-weight: 700;
  color: #1b1b1b;
  font-size: 40px;
  line-height: normal;
  white-space: nowrap;
  position: absolute;
  letter-spacing: 0;
}

.div-wrapper .text-wrapper-24 {
  top: 3169px;
  left: 0px;
  font-family: "Gmarket Sans-Bold", Helvetica;
  font-weight: 700;
  color: #1b1b1b;
  font-size: 40px;
  line-height: normal;
  white-space: nowrap;
  position: absolute;
  letter-spacing: 0;
}

.div-wrapper .text-wrapper-25 {
  position: absolute;
  width: 848px;
  top: 457px;
  left: 317px;
  font-family: "Gmarket Sans-Medium", Helvetica;
  font-weight: 500;
  color: #4b4b4b;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 26.0px;
}

.div-wrapper .text-wrapper-26 {
  width: 921px;
  top: 1271px;
  left: 317px;
  font-family: "Gmarket Sans-Medium", Helvetica;
  font-weight: 500;
  color: #4b4b4b;
  font-size: 20px;
  line-height: 26.0px;
  position: absolute;
  letter-spacing: 0;
}

.div-wrapper .text-wrapper-27 {
  top: 1702px;
  left: 832px;
  -webkit-text-stroke: 0.2px #ffffff;
  font-family: "Gmarket Sans-Bold", Helvetica;
  font-weight: 700;
  color: #222222;
  font-size: 30px;
  text-align: center;
  line-height: 39.0px;
  white-space: nowrap;
  position: absolute;
  letter-spacing: 0;
}

.div-wrapper .text-wrapper-28 {
  width: 209px;
  top: 1766px;
  left: 819px;
  font-family: "Pretendard-Medium", Helvetica;
  font-weight: 500;
  color: #555555;
  font-size: 20px;
  text-align: center;
  line-height: 26.0px;
  position: absolute;
  letter-spacing: 0;
}

.div-wrapper .text-wrapper-29 {
  top: 1702px;
  left: 316px;
  -webkit-text-stroke: 0.2px #ffffff;
  font-family: "Gmarket Sans-Bold", Helvetica;
  font-weight: 700;
  color: #222222;
  font-size: 30px;
  text-align: center;
  line-height: 39.0px;
  white-space: nowrap;
  position: absolute;
  letter-spacing: 0;
}

.div-wrapper .text-wrapper-30 {
  width: 227px;
  top: 1766px;
  left: 294px;
  font-family: "Pretendard-Medium", Helvetica;
  font-weight: 500;
  color: #555555;
  font-size: 20px;
  text-align: center;
  line-height: 26.0px;
  position: absolute;
  letter-spacing: 0;
}

.div-wrapper .img {
  position: absolute;
  width: 1300px;
  height: 238px;
  top: 0px;
  left: 0px;
  object-fit: cover;
}

.div-wrapper .overlap-12 {
  position: absolute;
  width: 473px;
  height: 78px;
  top: 3497px;
  left: 423px;
  background-color: #ff1962;
  border-radius: 100px;
}

.div-wrapper .text-wrapper-31 {
  top: 19px;
  left: 178px;
  font-family: "Gmarket Sans-Bold", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 30px;
  text-align: center;
  line-height: 39.0px;
  white-space: nowrap;
  position: absolute;
  letter-spacing: 0;
}

.div-wrapper .checkbox {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 3288px;
  left: 240px;
}

.div-wrapper .element-3 {
  top: 3359px;
  left: 0px;
  font-family: "Pretendard-Medium", Helvetica;
  font-weight: 500;
  color: #4c4c4c;
  font-size: 20px;
  line-height: normal;
  position: absolute;
  letter-spacing: 0;
}

.div-wrapper .text-wrapper-32 {
  top: 3285px;
  left: 0px;
  font-family: "Pretendard-SemiBold", Helvetica;
  font-weight: 600;
  color: #000000;
  font-size: 24px;
  line-height: normal;
  position: absolute;
  letter-spacing: 0;
}

.div-wrapper .image {
  width: 351px;
  left: 748px;
  object-fit: cover;
  position: absolute;
  height: 234px;
  top: 1443px;
}

.div-wrapper .image-2 {
  width: 356px;
  left: 229px;
  position: absolute;
  height: 234px;
  top: 1443px;
}

.layer-btn {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 15px 25px;
    margin: 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
}

.layer-btn:hover {
    background: #45a049;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
}

.modal-content {
    background: white;
    margin: 5% auto;
    padding: 0;
    width: 95%;
    max-width: 1300px;
    max-height: 90vh;
    border-radius: 10px;
    position: relative;
    display: flex;
    flex-direction: column;overflow-y: auto
}

.close {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 28px;
    cursor: pointer;
    z-index: 1001;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.modal-image {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    min-height: 0;
}

.modal-image img {
    width: 100%;
    height: auto;
    display: block;
}

.modal-buttons {
    padding: 20px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    display: flex;
    gap: 10px;
    justify-content: center;
}

.consult-btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    flex: 1;
    max-width: 200px;
}

.consult-btn:hover {
    background: #0056b3;
}

.close-btn-bottom {
    background: #6c757d;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    flex: 1;
    max-width: 120px;
}

.close-btn-bottom:hover {
    background: #545b62;
}

/* 모바일 최적화 */
@media (max-width: 600px) {
    .modal-content {
        margin: 2% auto;
        width: 98%;
        max-height: 95vh;
    }
    
    .layer-btn {
        display: block;
        width: 100%;
        margin: 10px 0;
    }
    
    .modal-buttons {
        flex-direction: column;
    }
    
    .consult-btn, .close-btn-bottom {
        max-width: none;
    }
}