@charset "UTF-8";

/* ----- 회원가입 ----- */
.join .title {font-size: 23px; font-weight: 600; color: #161616; margin-bottom: 15px;}

.wrap {min-height: 100vh; padding: 20px 20px 20px; background: #f7fbff; min-width: 280px;}
.join {max-width: 1200px; margin: 0px auto; box-shadow: 0px 0px 10px #1c1c1c1a; border-radius: 30px; background-color: #fff; /* padding: 50px 40px 40px; */}
.join > * {padding: 50px 40px 45px;}
.join form {/* border-radius: 25px; *//* max-width: 1000px; *//* margin: 0 auto; */}
.join form .cont-box {margin-bottom: 50px;}
.join form .cont-box:last-child {margin-bottom: 0;}

.join-title {border-bottom: 1px solid #eaeced; display: flex; justify-content: center;}
.join-title img {max-width: 320px; display: block;}
.join-title span {font-size: 35px; font-weight: bold; margin-left: 20px;}

.join .skyblue {color: #5693c1;}
.join .red {color: #d81d1de1;}
.join .red::before, .join .red::after {background: #d64848;}
.join .red li::before {background: #e5350e;}
.join .yellow {color: #eea502;}
.join .yellow::before, .join .yellow::after {background: #f7be22;}
.join .orange {color: #e77800;}
.join .orange::before, .join .orange::after {background: #e77800;}
.join .green {color: #30a74e;}
.join .green::before, .join .green::after {background: #6dc05b;}
.join .green li::before {background: #30a74e;}
.join .blue {color: #255994;}
.join .blue::before, .join .blue::after {background: #3481bb;}
.join .blue li::before {background: #255994;}
.join .skyblue::before, .join .skyblue::after {background: #91c0e3;}
.join .dark::before, .join .dark::after {background: #595b5c;}

.join .required {position: relative; color: #ea0303; font-size: 16px; font-weight: bold; margin-left: 3px;}
.join .required-star {position: relative; padding: 0;}
.join .required-star::before {content: '*'; position: absolute; color: #ea0303; font-size: 16px; font-weight: bold; left: -9px; top: -4px;}
.join .badge {border: 1px solid rgba(var(--bs-primary-rgb)); font-size: 11px; position: relative; top: -3px; margin-left: 4px; padding-right: 8px;}
.join .badge.text-danger {border-color: rgba(var(--bs-danger-rgb));}

.join .input-inline {display: flex; width: 100%;}
.join .input-inline span {display: flex; flex-direction: column; justify-content: center;}
.join .input-inline span.txt {padding-left: 5px;}
.join .input-inline span.hypen {padding: 0 8px;}

.join .check-wrap {display: flex; flex-wrap: wrap;}
.join .check-wrap li {display: flex; margin: 10px 0px; margin-right: 1%;}
.join .check-wrap li > * {margin: 0; line-height: 1;}
.join .check-wrap li input {margin-right: 5px;}
.join .check-wrap li.etc-txt {height: 19px; margin-right: 0;}
.join .check-wrap li.etc-txt input[type="text"] {line-height: 1; border-radius: var(--bs-border-radius) !important; top: -6px;}

.join .check-wrap.col3 li {width: 32%;}
.join .check-wrap.col4 li {width: 24%;}
.join .check-wrap.col5 li {width: 19%;}

/* notice-icon */
.join .con-notice {padding: 5px 0; padding-left: 40px; position: relative;}
.join .con-notice:before, .con-notice:after {content: ''; position: absolute; aspect-ratio: 1/1; height: 25px; top: 5px;}
.join .con-notice:before {left: 0; border-radius: 50px; font-family: bootstrap-icons; text-align: center; z-index: 1; font-size: 14px; padding: 3px 0; color: #fff;}
.join .con-notice:after {clip-path: polygon(100% 48%, 0 0, 0 100%); left: 14px; width: 16px; z-index: 0;}
.join .con-notice.icon01::before {content: '\F269'; font-size: 19px; padding: 2px 0;}
.join .con-notice.icon02::before {content: '\F18A';}
.join .con-notice.icon03::before {content: '\F50C'; font-size: 19px; padding: 1px 0;}
.join .con-notice.icon04::before {content: '\F5D4';}
.join .con-notice.icon05::before {content: '\F151'; font-size: 11px; padding: 6px 0;}
.join .con-notice.icon06::before {content: '\F63C'; font-size: 17px; padding: 1px 0;}
.join .con-notice.icon07::before {content: '\f60b'; font-size: 19px; padding: 0px 2px; padding-right: 0;}

.join .certify {}
.join .text-area {text-align: center;}
.join .text-area p {word-break: keep-all;}
.join .text-area p span {color: #ea0303; font-weight: 500;}
.join .text-area .title {font-size: 30px; font-weight: bold; margin-bottom: 20px;}
.join .text-area .txt1 {font-size: 18px;}
.join .text-area .txt2 {font-size: 16px; opacity: 0.8; margin-top: 5px;}
.join .cert-box {justify-content: center; padding: 35px 20px; margin: 0 15px;}
.join .cert-box a {display: block; padding: 30px 25px; border-radius: 80px; box-shadow: 0px 0px 10px #4947471c; transition: 0.3s; max-width: 350px; margin: 0 auto; text-align: center; border: 3px solid #fff;}
.join .cert-box a img {margin: 0 auto; margin-bottom: 10px; width: 50%; max-width: 80px;}
.join .cert-box a p {color: #4e4e4e; font-weight: 500; line-height: 1; transition: 0.1s; font-size: 21px;}
.join .cert-box a:hover {box-shadow: 0px 0px 15px #42424236; transition: 0.3s; /* border-color: #377ed6; */}
.join .cert-box a:hover img {}
.join .cert-box a:hover p {transition: 0.1s; font-weight: bold;}

@media (max-width:768px) {
    .join .con-notice {font-size: 18px; padding-left: 35px;}
    .join .con-notice:before, .con-notice:after {height: 23px; top: 6px;}
    .join .con-notice:before {left: 0; font-size: 12px; padding: 4px 0;}
    .join .con-notice:after {left: 12px; width: 15px;}
    .join .con-notice.icon01::before {font-size: 16px;}
    .join .con-notice.icon05::before {font-size: 9px; padding: 6px 0;}
    .join .con-notice.icon06::before {font-size: 17px; padding: 2px 0;}
    .join .con-notice.icon07::before {font-size: 19px;}
}
@media (max-width:550px) {
    .join .con-notice {font-size: 17px; padding-left: 30px;}
    .join .con-notice:before, .con-notice:after {height: 21px; top: 5px;}
    .join .con-notice:before {left: 0; font-size: 11px; padding: 4px 0;}
    .join .con-notice:after {left: 12px; width: 13px;}
    .join .con-notice.icon01::before {font-size: 14px;}
    .join .con-notice.icon03::before {font-size: 17px; padding: 0px 0;}
    .join .con-notice.icon05::before {padding: 5px 0;}
    .join .con-notice.icon06::before {font-size: 14px;}
    .join .con-notice.icon07::before {font-size: 17px;}
}

/* 스텝박스 */
.join-step {padding-bottom: 0 !important;}
.join-step ul {display: flex; justify-content: space-between; max-width: 900px; margin: 0 auto;}
.join-step ul li {text-align: center; position: relative; width: 250px; z-index: 1;}
.join-step ul li:before {content: ''; position: absolute; width: 150%; border: 2px solid #e9e9e9; left: 0; top: 50%; transform: translateY(-50%); z-index: -2;}
.join-step ul li:last-child:before {display: none;}
.join-step ul li:first-child i.circle {display: none;}

.join-step ul li a {background: #fff; padding: 15px 10px; border-radius: 90px; display: flex; border: 3px solid #e9e9e9; flex-direction: column; justify-content: center; height: 100%; cursor: default;}
.join-step ul li i {}
.join-step ul li i.circle {font-size: 18px; z-index: 1; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);}
.join-step ul li i:first-child {font-size: 25px; margin-bottom: 13px;}
.join-step ul li i:before {background: #fff;}
.join-step ul li i, .join-step ul li p {color: #cfcfcf;}
.join-step ul li p {line-height: 1;}
.join-step ul li .num {font-size: 18px;}
.join-step ul li .txt {font-weight: bold; font-size: 21px; position: relative; padding: 3px 5px; display: none;}

.join-step ul li.on i, .join-step ul li.end .circle, .join-step ul li.end i {color: #307ccf;}
.join-step ul li.on a, .join-step ul li.end a, .join-step ul li.end:before {border-color: #307ccf;}
.join-step ul li.on i:first-child {}
.join-step ul li.on p {color: #212121;}
.join-step ul li.on .num {}
.join-step ul li.on .txt {display: block;}
.join-step ul li.on .txt:before {content: ''; position: absolute; bottom: 0px; left: 0; width: 100%; height: 9px; background: #d6e8f6; z-index: -1; border-radius: 2px;}
.join-step ul li.end a {}
.join-step ul li.end p {color: #557eda; transform: translateY(10px); font-weight: bold;}
.join-step ul li.end i:before {}
.join-step ul li.end i:first-child {margin-bottom: 0px; font-size: 35px; margin-top: -10px;}
.join-step ul li.end i:first-child:before {content: '\f058'; font-weight: 900;}

/* 주의사항 */
.join .note {padding: 15px 25px; border-radius: 8px; word-break: keep-all; background: #f9fcff; margin-bottom: 30px; border: 1px solid #dae3ec;}
.join .note p {font-size: 18px; color: #212121; padding-left: 35px;}
.join .note ul {padding-left: 3px;}
.join .note ul li {margin-bottom: 5px; color: #252525; padding-left: 20px; position: relative; word-break: keep-all;}
.join .note ul li:last-child {margin-bottom: 0;}
.join .note ul li:before {content: '\f058'; position: absolute; left: 0; top: 2px; font-size: 15px; aspect-ratio: 1/1; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: #7f868a;}

.join .red-note {margin-top: 20px; /* border: 2px dashed #e9e9e9; */ border-radius: 30px; word-break: keep-all; background: #f7fcff;}
.join .red-note p {font-size: 20px; font-weight: 500; color: #e20606; margin-bottom: 15px; padding-left: 0px !important;}

.join .con-notice:before, .join .con-notice:after {top: 5px; font-size: 19px; height: 23px;}
.join .con-notice:after {left: 12px;}

/* 01 약관동의 */
.join .pri-box {}
.join .pri-box ul.cont {max-height: 300px; overflow-y: auto; padding-right: 10px;}
.join .pri-box ul.cont::-webkit-scrollbar {width: 6px;}
.join .pri-box ul.cont::-webkit-scrollbar-thumb {background-color: #6a6a6a;}
.join .pri-box ul.cont::-webkit-scrollbar-track {background-color: #e6e6e6;}
.join .pri-box ul li {font-size: 16px; margin-bottom: 10px;}
.join .pri-box ul li:last-child {margin-bottom: 0;}
.join .pri-box ul li strong {margin-bottom: 6px; display: block;}
.join .pri-box ul li p {font-size: 16px; margin-left: 5px;}
.join .pri-box ul li li {margin-bottom: 5px;}

.join .pri-box h2 {position: relative;}
.join .pri-box h2 button {background: #fff; font-size: 20px; padding: 20px; padding-left: 60px !important; font-weight: 500;}
.join .pri-box h2 button:after {margin: 0; width: 25px; aspect-ratio: 1/1; display: block; position: absolute; top: 20px; right: 18px; background-size: cover; opacity: 0.6;}
.join .pri-box h2 button input {margin: 0; position: absolute; right: 0;}
.join .pri-box h2 .chk-box {position: absolute; left: 0; top: 0; margin: 0; z-index: 3; padding: 0 18px; height: 100%;}
.join .pri-box h2 .chk-box input {position: absolute; top: 50%; transform: translateY(-50%); z-index: 0; margin: 0; width: 100%; background: transparent; height: 100%; right: 0; border: none;}
.join .pri-box h2 .chk-box input:focus {box-shadow: none;}
.join .pri-box h2 .chk-box input:checked + label i {color: #557de5;}
.join .pri-box h2 .chk-box label {font-size: 28px; height: 100%; display: flex; flex-direction: column; justify-content: center; cursor: pointer; position: relative; z-index: 10;}
.join .pri-box h2 .chk-box label i {color: #d7d7d7;}

.join .pri-box .checkall {}
.join .pri-box .checkall button {padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x); font-weight: bold; font-size: 20px;}
.join .pri-box .checkall button:after {display: none;}

.join .btn-wrap {display: flex; justify-content: center; overflow: visible; margin-top: 0;}
.join .btn-wrap > * {margin: 0 5px;}
.join .go-btn {margin-top: 50px;}
.join .go-btn .btn {overflow: visible;}
/* .join .go-btn p {padding: 13px 35px; background: #393d4a;}
.join .go-btn .btn:before {background: #18446f3d;}
.join .go-btn .btn p:hover {color: #2f3b60; box-shadow: 0px 0px 15px #12407563;}
.join .go-btn.ver02 .btn p { color: #2f3b60; border: 1px solid #2f3b60;}
.join .go-btn.ver02 .btn p span {background:#2f3b60} */

/* 02 정보입력 */
.join table .form-check-input[type=radio] {margin-top: 2px;}
/* .join .icon {max-width: 90px; margin: 0 auto; aspect-ratio: 1/1; width: 100%; display: flex; flex-direction: column; justify-content: center; border-radius: 100px; margin-bottom: 20px; font-weight: bold; font-size: 35px; color: #fff; position: relative;}
.join .icon:before {content:''; position: absolute; width: 87%; aspect-ratio: 1/1; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 3px solid #fff; border-radius: 500px;}
.join .le1 {background: #2d2e30;}
.join .le2 {background: #556c83;}
.join .le3 {background: #bfa25e;}
.join .le4 {background: #a8a8a8;} */

.join .level-box li {padding: 45px 10px 20px; position: relative; overflow: hidden; /* border-color: transparent; */ width: 24%; transition: 0.3s;}
.join .level-box li .icon {max-width: 80px; margin-bottom: 15px;}
.join .level-box li .title {font-size: 22px;}
.join .level-box li .txt1 {font-size: 17px;}
.join .level-box li .txt2 {font-size: 25px;}
.join .level-box li .txt3 {font-size: 16px;}
.join .level-box li input[type=radio] {margin: 0 auto !important; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: none; border-radius: 30px; /* border: none; */ border-color: #fff; cursor: pointer; transition: 0.3s; border-width: 4px;}
.join .level-box li input[type=radio]:before {content: ''; position: absolute; width: 20px; height: 20px; left: 50%; transform: translateX(-50%); top: 11px; border-radius: 50px; border: 1px solid #c5c5c5;}
.join .level-box li input[type=radio]:checked {border-color: #307ccf; /* margin-top: 2px; *//* border-width: 4px; */ transition: 0.3s;}
.join .level-box li input[type=radio]:checked:before {content: '\F26E'; background: #307ccf; font-family: 'bootstrap-icons'; color: #fff; font-size: 15px; border-color: #307ccf; padding: 0px 1px;}
.join .level-box li:hover {border-color: #76a7dd; transition: 0.3s;}

/* 03 회원가입 완료 */
.join .complete {background: #f9f9f9; padding: 50px 30px; text-align: center; border-radius: 15px;}
.join .complete img {margin-bottom: 10px; width: 20%; max-width: 100px; min-width: 100px;}
.join .complete p {word-break: keep-all;}
.join .complete .txt1 {font-size: 25px; font-weight: bold; margin-bottom: 5px;}
.join .complete .txt2 {}
@media (max-width:1024px) {
    .wrap {padding: 20px;}
    .join > * {padding: 40px 30px 35px;}
    .join-title img {max-width: 300px;}

    .join .table > tbody > tr > th, .join .table > tbody > tr > td {height: auto; padding: 10px;}
    .join .level-box {flex-wrap: wrap;}
    .join .level-box li {width: 48%;}

    .join .note br {display: none;}
}
@media (max-width:768px) {
    .join > * {padding: 30px 20px 25px;}
    .join-title img {max-width: 200px;}
    .join-title span {font-size: 25px; margin-left: 15px;}
    .join .note {padding: 13px 18px; border-radius: 15px; font-size: 16px;}

    /* .join-step ul li a {padding: 15px 10px; border-width: 2px;}
    .join-step ul li i.circle {font-size: 14px; left: -6px;}
    .join-step ul li i:first-child {font-size: 23px; margin-bottom: 8px;}
    .join-step ul li p {line-height: 1;}
    .join-step ul li .num {font-size: 17px;}
    .join-step ul li .txt {font-size: 19px;}
    .join-step ul li.end p {transform: translateY(8px);}
    .join-step ul li.end i:first-child{font-size: 28px; margin-top: -5px;} */

    .join-step ul {}
    .join-step ul li {width: 100%;}
    .join-step ul li:before {left: 50%; width: 100%; transform: initial; top: 8px;}
    .join-step ul li i.circle {display: none;}
    .join-step ul li i:first-child {margin-bottom: 10px !important; font-size: 23px;}
    .join-step ul li i:before {content: '\f192'; border-radius: 100px;}
    .join-step ul li .num {font-weight: normal !important; font-size: 15px;}
    .join-step ul li .txt {display: inline-block !important; font-size: 18px;}
    .join-step ul li a {padding: 0; border: none; background: transparent; display: block;}
    .join-step ul li.on .circle, .join-step ul li.end .circle {}
    .join-step ul li.end i:first-child {font-size: 25px; margin-top: -3px;}
    .join-step ul li.end p {transform: translateY(0);}

    .join .level-box {flex-direction: row;}
    .join .level-box li {margin-top: 0; border-radius: 20px; margin-bottom: 15px;}
    .join .level-box li .icon {max-width: 70px; font-size: 30px; margin-bottom: 10px;}
    .join .level-box li .icon:before {border-width: 2px;}
    .join .level-box li .title {font-size: 20px;}
    .join .level-box li .txt1 {font-size: 16px;}
    .join .level-box li .txt2 {font-size: 22px; margin-bottom: 10px;}
    .join .level-box li .txt3 {font-size: 15px;}
    .join .level-box li input[type=radio] {border-radius: 20px;}
}
@media (max-width:550px) {
    .join > * {}
    .join-title {flex-direction: column;}
    .join-title img {max-width: 170px; margin: 0 auto;}
    .join-title span {margin-left: 0; text-align: center; margin-top: 8px;}

    .join .pri-box .checkall button {font-size: 18px; padding: 13px 18px;}
    .join .pri-box h2 button {font-size: 16px; padding-left: 40px !important;}
    .join .pri-box h2 button:after {width: 20px; top: 19px; right: 13px;}
    .join .pri-box h2 .chk-box {padding: 0px 10px;}
    .join .pri-box h2 .chk-box label {font-size: 23px;}
    .join .pri-box h2 button:not(.collapsed)::after {top: 13px;}
    .join .pri-box .accordion-body {padding: 15px 18px; padding-right: 11px;}
    .join .pri-box ul {padding-right: 8px;}
    .join .pri-box ul li p {margin-left: 5px;}

    .join .con-notice:before, .join .con-notice:after {font-size: 17px; height: 21px;}
    .join .con-notice:after {left: 12px;}

    .join .table > tbody > tr > th, .join .table > tbody > tr > td {padding: 8px;}
    .join .table > tbody > tr > th br {display: none;}

    .join .complete {padding: 30px 20px;}
    .join .complete .txt1 {font-size: 20px;}
    .join .complete .txt2 {font-size: 16px;}

    .join .level-box li {width: 100%;}
    .join .level-box li:last-child {margin-bottom: 0;}
}

/* 회원가입 테이블 모바일 */
@media (max-width:1024px) {
    .required-star::before {left: 50%; transform: translateX(-50%); top: -10px;}
    .mo-table:before {z-index: 1;}
    .mo-table col {width: auto;}
    .mo-table > tbody > tr {display: flex; flex-wrap: wrap; width: 100%;}
    .mo-table > tbody > tr > th, .mo-table > tbody > tr > td {height: auto;}
    .mo-table > tbody > tr > th {width: 180px; position: relative; display: flex; flex-direction: column; justify-content: center;}
    .mo-table > tbody > tr > td {width: calc(100% - 180px);}
    .mo-table > tbody > tr > th span.required-star {transform: translateY(3px);}

    .check-wrap li {margin-right: 3%; width: auto !important;}
    .check-wrap li.etc-txt {min-width: 300px;}
}
@media (max-width:768px) {
    .mo-table > tbody > tr > th {width: 150px;}
    .mo-table > tbody > tr > td {width: calc(100% - 150px);}

    .check-wrap li {margin: 5px 0px; width: 50% !important;}
}
@media (max-width:550px) {
    .required-star::before {top: -3px; left: -4px;}
    .mo-table > tbody > tr {flex-direction: column;}
    .mo-table > tbody > tr > th, .mo-table > tbody > tr > td {width: 100% !important;}
    .mo-table > tbody > tr > th {display: inline-block; line-height: 1; padding: 10px;}

    .check-wrap li {width: 100% !important;}
    .check-wrap li input {margin-top: -2px;}
    .check-wrap li.etc-txt {width: 100%; min-width: 1px;}
    .badge {top: -2px; margin-left: 4px;}
}

/* 가입하기 버튼 */
.join .go-btn {display: flex; justify-content: center;}
.join .go-btn .btn {padding: 8px 18px; font-size: 17px; display: flex; align-items: center; justify-content: center; border-radius: 5px; transition: all 0.3s ease-in-out;}

.btn-wrap {display: flex; justify-content: center; overflow: visible; margin-top: 0; padding-bottom: 0; flex-wrap: wrap;}
.btn-wrap .go-btn {margin: 15px 5px;}
.info-wrap .btn-wrap {justify-content: flex-start; margin-top: 30px;}
.info-wrap .btn-wrap > *:first-child {margin-left: 0;}
.info-wrap .btn-wrap .go-btn .btn p {padding: 10px 30px;}

.go-btn {text-align: center; margin: 50px auto;}
.go-btn .btn {border: none; padding: 0; position: relative; overflow: visible;}
.go-btn .btn:before {content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #aed5fc; border-radius: 50px; animation: btn-ani 1.0s cubic-bezier(0.26, 0.03, 0.56, 1.03) both alternate infinite;}
.go-btn .btn p {font-weight: bold; text-align: center; position: relative; overflow: hidden; z-index: 0; transition: 0.5s; padding: 15px 35px; font-size: 20px; background: #307ccf; border-radius: 500px; color: #fff;}
.go-btn .btn span {position: absolute; width: 25%; height: 100%; background-color: #ffffff; transform: translateY(150%); border-radius: 50%; left: calc((var(--n) - 1) * 25%); transition: 0.5s; transition-delay: calc((var(--n) - 1) * 0.1s); z-index: -1;}
.go-btn .btn:hover p {color: #307ccf; box-shadow: 0px 0px 15px #5e9fe763; background: #fff;}
.go-btn .btn:hover p span {transform: translateY(-20px) scale(2);}
.go-btn span:nth-child(1) {--n: 1;}
.go-btn span:nth-child(2) {--n: 2;}
.go-btn span:nth-child(3) {--n: 3;}
.go-btn span:nth-child(4) {--n: 4;}

.go-btn.aninone .btn:before {display: none;}

.go-btn.ver02 .btn p {background: #fff; color: #307ccf; border: 1px solid #307ccf;}
.go-btn.ver02 .btn p span {background: #307ccf;}
.go-btn.ver02 .btn p:hover {color: #fff !important;}

.go-btn.ver03 .btn p {background: #373737; box-shadow: 0px 0px 15px #8d8d8d4f;}
.go-btn.ver03 .btn p span {background: #fff;}
.go-btn.ver03 .btn p:hover {color: #000 !important; background: #fff;}

@keyframes btn-ani {
    0% {width: 100%; height: 100%; opacity: 1;}
    100% {width: calc(100% + 40px); height: calc(100% + 30px); opacity: 0;}
}
@keyframes btn-ani-m {
    0% {width: 100%; height: 100%; opacity: 1;}
    100% {width: calc(100% + 30px); height: calc(100% + 20px); opacity: 0;}
}
@media (max-width:768px) {
    .go-btn .btn:before {animation: btn-ani-m 1.0s cubic-bezier(0.26, 0.03, 0.56, 1.03) both alternate infinite;}
    .go-btn .btn p {padding: 10px 30px; font-size: 18px;}
    .info-wrap .btn-wrap > * {margin-top: 20px; margin-right: 5px;}
    .info-wrap .btn-wrap .go-btn .btn p {padding: 8px 20px;}
}
@media (max-width:550px) {
    .go-btn {margin: 20px auto;}
    .go-btn .btn p {padding: 8px 20px; font-size: 16px;}

    .btn-wrap .go-btn {margin: 5px 3px;}
    .go-btn.ver03 .btn p {box-shadow: 0px 0px 5px #8d8d8d4f;}
    .go-btn .btn:hover p {box-shadow: 0px 0px 5px #5e9fe763;}
    .info-wrap .btn-wrap {margin-top: 0;}
    .info-wrap .btn-wrap > * {margin-top: 10px;}
    .info-wrap .btn-wrap .go-btn .btn p {font-size: 16px;}
}