@charset "utf-8";
/* CSS Document */

body {overflow-x:hidden;background:#f0f0f0;}
.expo_wrap {position:relative;background:#fff;}
.expo_wrap.phone, .expo_wrap.result {min-height:100vh;}
.expo_wrap.phone>.header {padding-top:3.0vh;}
.expo_wrap.phone>.header .title {padding:0 34px;}
.expo_wrap.phone>.header .title img {display:block;width:100%;max-width:590px;height:auto;margin:0 auto;}

.expo_wrap.join>.header .gyeongnam {padding-top:calc(1024 / 768 * 100%);background:url('https://charmacistcdn.cafe24.com/expo/bg_join.jpg') no-repeat center center;background-size:contain;}
.expo_wrap.join>.header .gyeonggi .article_01 {padding-top:calc(896 / 768 * 100%);background:url('https://charmacistcdn.cafe24.com/expo/bg_join_02.jpg') no-repeat center center;background-size:contain;}
.expo_wrap.join>.header .gyeonggi .article_02 {padding-top:calc(818 / 768 * 100%);background:url('https://charmacistcdn.cafe24.com/expo/bg_join_03.jpg') no-repeat center center;background-size:contain;}
.expo_wrap.join>.header .gyeonggi .article_03 {padding-top:calc(1087 / 768 * 100%);background:url('https://charmacistcdn.cafe24.com/expo/bg_join_04.jpg') no-repeat center center;background-size:contain;}
.expo_wrap.join>.header .busan_2023 {padding-top:calc(408 / 768 * 100%);background:url('https://charmacistcdn.cafe24.com/expo/bg_join_05.jpg') no-repeat center center;background-size:contain;}

.expo_wrap.order>.header .gyeongnam {padding-top:calc(420 / 768 * 100%);background:url('https://charmacistcdn.cafe24.com/expo/bg_order.jpg') no-repeat center center;background-size:contain;}
.expo_wrap.order>.header .gyeonggi {padding-top:calc(336 / 768 * 100%);background:url('https://charmacistcdn.cafe24.com/expo/bg_order_02.jpg') no-repeat center center;background-size:contain;}
.expo_wrap.order>.header .gyeonggi_2023 {padding-top:calc(408 / 768 * 100%);background:url('https://charmacistcdn.cafe24.com/expo/bg_order_03.jpg') no-repeat center center;background-size:contain;}

.expo_wrap.phone>.content {padding-top:2.12vh;box-sizing:border-box;}
.expo_wrap>.content h3 {margin-bottom:15px;color:#303030;font-size:30px;font-weight:700;}
.expo_wrap>.content h4 {margin-bottom:13px;color:#303030;font-size:22px;font-weight:700;}
.expo_wrap>.content p {color:#5b5b5b;font-size:18px;line-height:1.4;}
.expo_wrap>.content input[type="text"], .expo_wrap>.content input[type="password"], .expo_wrap .content select {width:100%;padding:13px 14px 12px;border:1px solid #b5b5b5;border-radius:6px;font-size:16px;box-sizing:border-box;}
.expo_wrap>.content label {display:inline-block;vertical-align:middle;cursor:pointer;}
.expo_wrap>.content input[type="checkbox"] {width:16px;height:16px;border-radius:0;vertical-align:middle;cursor:pointer;}
.expo_wrap>.content input[type="radio"] {width:20px;height:20px;vertical-align:middle;cursor:pointer;}
.expo_wrap>.content input[type="radio"]+label {display:inline-block;margin:0;padding:0 15px 0 6px;color:#525252;font-size:16px;vertical-align:middle;cursor:pointer;}
.expo_wrap>.content .title {padding-top:20px;margin-bottom:60px;}

.expo_wrap.phone .form_wrap .article_01 {padding:0 15px;}
.expo_wrap.phone .form_wrap .article_02 {position:fixed;bottom:0;max-width:768px;width:100%;padding:0;}
.expo_wrap.result .form_wrap {padding:30px 15px 100px;}
.expo_wrap:not(.phone, .result) .form_wrap {padding:30px 15px;}
.expo_wrap:not(.phone) .form_wrap .info {margin-bottom:43px;}
.expo_wrap:not(.phone) .form_wrap .submit {margin-top:56px;}

.form_wrap .info>label {display:block;margin-bottom:12px;color:#525252;font-size:22px;font-weight:400;}
.form_wrap .info>label span {position:relative;padding-right:22px;font-weight:400;}
.form_wrap .info>label .on:after {content:'';display:block;position:absolute;top:50%;right:0;width:7px;height:7px;margin-top:-3.5px;border-radius:10px;background:#f00;}
.form_wrap .info .desc {margin-bottom:12px;color:#7e7e7e;font-size:16px;}
.form_wrap .info .mobile, .form_wrap .info .email, .form_wrap .info .choice {font-size:0;}
.form_wrap .info .mobile input {width:70px;vertical-align:middle;}
.form_wrap .info .mobile span {padding:0 5px;color:#434343;font-size:22px;vertical-align:middle;}
.form_wrap .info .email {display:block;}
.form_wrap .info .email input {width:100%;margin-bottom:20px;}
.form_wrap .info .email select {width:100%;}
.form_wrap .info .choice label {display:block;padding:10px 0;}
.form_wrap .info .choice label span {margin-left:10px;color:#525252;font-size:16px;}
.form_wrap .info .chk_list {font-size:0;font-weight:300;}
.form_wrap .info .chk_list li {position:relative;padding:8px 0;}
.form_wrap .info .chk_list li label span {display:inline-block;max-width:230px;margin:0 12px 0 6px;color:#191919;font-size:16px;vertical-align:middle;}
.form_wrap .info .chk_list li .price {display:inline-block;}
.form_wrap .info .chk_list li .price del {display:inline-block;margin-right:5px;font-size:14px;vertical-align:middle;}
.form_wrap .info .chk_list li .price span {display:inline-block;color:#1767ae;font-size:16px;font-weight:600;vertical-align:middle;}
.form_wrap .info .chk_list li .cont {display:inline-block;}
.form_wrap .info .chk_list li .cont .more {display:none;z-index:100;position:absolute;top:0;left:50%;margin-left:-175px;width:350px;padding:14px 31px 14px 13px;border:1px solid #b5b5b5;background:#fff;box-sizing:border-box;}
.form_wrap .info .chk_list li .cont .more p {font-size:14px;}
.form_wrap .info .chk_list li .cont .more button {position:absolute;top:0;right:0;padding:10px;font-size:0;}
.form_wrap .info .tag_list {overflow:hidden;margin-top:20px;}
.form_wrap .info .tag_list li {float:left;margin:2px 22px 2px 0;padding:6px 16px;border-radius:16px;background:#00b7db;color:#fff;font-size:0;}
.form_wrap .info .tag_list li button {vertical-align:middle;}
.form_wrap .info .tag_list li span {padding-left:5px;font-size:18px;}
.form_wrap .info .mobile .contact {display:inline-block;width:100%;height:7.0vh;border:0;border-radius:17px;background:#fff;font-size:28px;text-align:center;line-height:7.0vh;vertical-align:middle;box-shadow:0 11px 20px 1px rgba(49, 76, 156, 0.2);box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
.form_wrap .info .postcode input {margin:7px 0;}
.form_wrap .info .postcode input:first-child {margin-top:0;}
.form_wrap .info .postcode button {padding:9px 20px;border:1px solid #b5b5b5;border-radius:6px;color:#525252;font-size:22px;font-weight:400;vertical-align:middle;}
.form_wrap .submit {text-align:center;}
.form_wrap .submit button {width:100%;max-width:360px;height:4.85vh;border:0;border-radius:32px;background:#d1d3d9;color:#fff;font-size:22px;font-weight:500;}
.form_wrap .submit button.on {background:#12abcc;}
.form_wrap .keyboard {overflow:hidden;padding:1% 0;background:#d1d3d9;font-size:0;text-align:center;}
.form_wrap .keyboard ul li {display:inline-block;width:28%;margin:1% 0;padding:0 2%;vertical-align:middle;}
.form_wrap .keyboard button {width:100%;height:5.45vh;border-radius:15px;text-align:center;}
.form_wrap .keyboard button.number {background:#fff;color:#494949;font-size:28px;font-weight:500;}
.form_wrap .keyboard button.assist {background:#d1d3d9;outline:0;}
.form_wrap .agreement {padding:2.1vh 0 1.7vh;}
.form_wrap .agreement p {color:#7e7e7e;font-size:18px;}
.form_wrap .agreement ul {margin-top:10px;}
.form_wrap .agreement ul li {color:#7e7e7e;font-size:15px;}
.form_wrap .agreement .check input {width:17px;height:17px;}
.form_wrap .agreement .check label {padding-left:7px;color:#646464;font-size:16px;line-height:1.5;}
.form_wrap .agreement .caution {padding:20px 15px;border-radius:6px;background:#e8e8e8;}
.form_wrap .agreement .caution li, .form_wrap .agreement .caution p {color:#646464;font-size:16px;line-height:1.5;}
.form_wrap .agreement .caution + .check {margin-top:13px;font-size:0;text-align:right;}
.form_wrap .agreement .caution + .check label {font-size:18px;}
.form_wrap .agreement .more {cursor:pointer;}
.form_wrap .agreement .more p {position:relative;padding-right:45px;font-size:18px;}
.form_wrap .agreement .more p:after {content:'';position:absolute;right:0;width:14px;height:14px;margin-top:7px;border-top:1px solid #b5b5b5;border-left:1px solid #b5b5b5;-webkit-transform:translate(-50%, -50%) rotate(225deg);transform:translate(-50%, -50%) rotate(225deg);transition:all ease 0.3s;}
.form_wrap .agreement .more p + ul {display:none;padding-left:10px;}
.form_wrap .agreement .more p.on:after {margin-top:17px;transform:translate(-50%, -50%) rotate(45deg);}
.form_wrap .agreement .more p.on + ul {display:block;}

.article_01 .success {text-align:center;}
.article_01 .success circle {stroke-dasharray:240px,240px;stroke-dashoffset:480px;animation:circle 0.6s ease-in-out backwards;}
.article_01 .success path {stroke-dasharray:50px,50px;stroke-dashoffset:0;animation:check 0.25s ease-in-out 0.7s backwards;}
.article_01 .success p {margin-top:12px;color:#303030;font-size:22px;font-weight:700;}
.article_01 .notice {position:absolute;min-width:280px;top:50%;left:50%;text-align:center;transform:translate(-50%, -50%);}
.article_01 .notice img {display:block;width:142px;height:222px;margin:0 auto;}
.article_01 .notice span {display:block;margin:28px 0 13px;color:#494949;font-size:24px;font-weight:500;}
.article_01 .notice p {color:#494949;font-size:20px;font-weight:400;}
.article_01 .done {padding-top:30px;}
.article_01 .done p {color:#494949;font-size:20px;font-weight:400;}
.article_01 .done table {margin-bottom:15px;border-style:hidden;border-radius:6px;color:#303030;box-shadow:0 0 0 1px #b5b5b5;}
.article_01 .done table th {width:30%;padding:14px 0;border:1px solid #b5b5b5;background:#e8e8e8;}
.article_01 .done table td {padding:14px 20px;border:1px solid #b5b5b5;}
.article_01 .done table .total {color:#1667ad;}
.article_01 .done table .sale {color:#f00;}
.article_01 .done table ul li {overflow:hidden;padding:4px 0;}
.article_01 .done table ul li p {float:left;font-size:16px;}
.article_01 .done table ul li span {float:right;}
.article_01 .done table ul li:first-child {padding-top:0;}
.article_01 .done table ul li:last-child {padding-bottom:0;}
.article_01 .done table.price td {text-align:right;}

.article_01 .table_area {text-align:center;}
.article_01 .table_area p {color:#494949;font-size:20px;font-weight:400;}
.article_01 .table_area table {margin-bottom:15px;border-style:hidden;border-radius:6px;color:#303030;box-shadow:0 0 0 1px #b5b5b5;}
.article_01 .table_area table th {padding:14px 4px;border:1px solid #b5b5b5;background:#e8e8e8;}
.article_01 .table_area table td {padding:14px 0;border:1px solid #b5b5b5;font-size:14px;}

.footer_wrap.on {padding-bottom:86px;}
.footer_wrap .logo {display:block;padding:15px 10px;background:#fff;}
.footer_wrap .logo a {display:inline-block;}
.footer_wrap .info {display:block;padding:20px 10px;background:#525252;font-size:0;}
.footer_wrap .info p {color:#fff;font-size:16px;letter-spacing:-0.04em;}
.footer_wrap .info .bar {display:inline-block;margin:-3px 8px 0;}
.footer_wrap .info address {margin:8px 0 12px;color:#fff;font-size:14px;letter-spacing:-0.04em;}
.footer_wrap .info small {color:#fff;font-size:12px;letter-spacing:-0.04em;}

.confirm {display:block;position:fixed;bottom:0;width:100%;max-width:768px;}
.confirm a {display:block;width:100%;padding:31px 0;background:#00b7db;color:#fff;font-size:22px;font-weight:500;text-align:center;}

.total_wrap {overflow:hidden;position:fixed;bottom:0;left:0;right:0;width:100%;max-width:768px;margin:0 auto;padding:30px;border-radius:6px 6px 0 0;background:#fff;font-size:20px;box-sizing:border-box;box-shadow:0 0 50px 0 rgba(57, 62, 64, 0.3);}
.total_wrap .price {float:right;}
.total_wrap .price .sale {margin-right:5px;color:#191919;font-size:18px;}
.total_wrap .price .total {color:#1667ad;font-weight:800;font-size:22px;}
.total_wrap span, .total_wrap .price .sale, .total_wrap .price .total {vertical-align:middle;}

#mask {display:none;z-index:1000;position:absolute;top:0;left:0;width:100%;height:100%;background:#000;}
.window {display:none;z-index:1000;position:absolute;top:0;width:300px;border:1px solid #b5b5b5;background:#fff;box-sizing:border-box;}
.window .header {padding:10px 20px;background:#00b7db;text-align:right;box-sizing:border-box;}
.window .content {max-height:466px;}

@keyframes circle {
  0% {stroke-dashoffset:240px}
  100% {stroke-dashoffset:480px}
}
@keyframes check {
  0% {stroke-dashoffset:50px}
  100% {stroke-dashoffset:0}
}

@media screen and (min-width:768px) {
  .expo_wrap {display:block;max-width:768px;margin:0 auto;}
  .expo_wrap.phone>.header {padding-top:60px;}
  .expo_wrap.phone>.content {padding-top:56px;}
  .expo_wrap:not(.phone) .form_wrap {padding:70px 0 101px;}
  .expo_wrap:not(.phone) .form_wrap .article_01, .expo_wrap:not(.phone) .form_wrap .article_02 {padding:0 50px;}
  .expo_wrap>.content h4 {padding-left:20px;}
  .expo_wrap>.content input[type="radio"]+label {padding:0 15px 0 10px;}
  .expo_wrap>.content .title {margin-bottom:60px;}
  .form_wrap .info .mobile input {width:80px;}
  .form_wrap .info .mobile span {padding:0 7px;}
  .form_wrap .info .email input {width:218px;margin-bottom:0;}
  .form_wrap .info .email input:first-child {margin-right:7px;}
  .form_wrap .info .email select {width:218px;margin-left:7px;}
  .form_wrap .info .postcode input:first-child {width:286px;vertical-align:middle;}
  .form_wrap .info .postcode button {margin:0 0 7px 13px;}
  .form_wrap .info .chk_list li label span {max-width:initial;}
  .form_wrap .agreement {padding:28px 0 24px;}
  .form_wrap .agreement .caution {padding:20px;}

  .article_01 .success {padding-top:20px;}
  .article_01 .success p {margin-top:22px;}
  .article_01 .notice img {width:162px;height:253px;}
  .article_01 .done {padding-top:60px;}

  .footer_wrap .logo {padding:15px 50px 10px;}
  .footer_wrap .info {padding:20px 50px 22px;}
  .footer_wrap .info p {font-size:18px;}
  .footer_wrap .info address {font-size:16px;}

  .window {width:466px;}
}