@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url("../swiper-bundle.min.css");
html{font-size: 1px;}

.ut-scroll{overflow: hidden;max-height: 200rem;/* border: #ededed solid 1rem; */position: relative;}
.ut-scroll .testbox{background-image: linear-gradient( -180deg,#fafbfc,#eff3f6 90%);padding: 10rem;}

.txt-l{text-align:left !important;}
.txt-r{text-align:right !important;}
.txt-c{text-align:center !important;}

img{max-width: 100%;}
/* a:focus,button:focus,textarea:focus,
[tabindex]:not([tabindex='-1']):focus{outline: 3px solid rgba(0, 114, 255,0.5);border-radius: 2rem;} */
button{cursor:pointer;background: none;border: none;}
button[disabled]{/* cursor:default */}


select {padding: 7rem 20rem 7rem 7rem; width: 100%; border: 1px solid #ddd; cursor: pointer; font-size: 14rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(../img/common/select_arrow.svg) no-repeat; background-position: 95% 50%; background-size: 10rem 10rem; color: #222;}
input[type="password"],
input[type="text"] {border: 1px solid #ddd; width: 100%; font-size: 16rem; padding: 10rem; font-weight: 400; height: 50rem;}

input[type="password"]::placeholder, 
input[type="text"]::placeholder {}


/* [class*="protected"].flx{display:flex; align-items: center; padding-left:0;}
[class*="protected"].flx::before {flex:0 0 49rem; position: initial;}
[class*="protected"].flx p.txt {padding-left:12rem;}
*/




.blind{position: absolute !important;left: 0rem !important;top: 0rem !important;width: 1rem !important;height: 1rem !important; opacity: 0 !important; overflow: hidden;margin-left: -1rem !important;border: 0 none !important;background: transparent !important;color: transparent !important;}

h1 {font-size: 18rem; font-weight: 700;}
h2 {font-size: 16rem; font-weight: 700; margin-top: 20rem; margin-bottom: 10rem}







/* 버튼 셋 */
.btn{display: inline-flex; justify-content: center; align-items: center; vertical-align:middle; cursor:pointer; white-space:nowrap; border: 1rem solid #ddd; background-color: #fff; color: #333; height: 45rem; padding:12rem 16rem; font-size: 18rem; box-sizing: border-box;}
.btn.db{display:block;}
/* .btn.xs{height: 24rem;min-width: 30rem;padding: 0 6rem;font-size: 12rem;line-height: 1;border-radius: 3rem;} */
.btn.sm{height: 33rem;min-width: 56rem;padding: 0 14rem;font-size: 14rem;}
.btn.md{height: 60rem; min-width: 200rem; font-size: 22rem;font-weight: 500;}
/* .btn.lg{height: 60rem;min-width: 261rem;padding: 0 30rem;font-size: 18rem;font-weight: 500;}
.btn.xl{height: 70rem;min-width: 80rem;padding: 0 10rem;font-size: 18rem;font-weight: 700;} */



.btn:disabled,
.btn.disabled{border-color: #d2d4d9; background-color: #fff; color: #d2d4d9;}
/* .btn.disabled[class*='ico-']:after,
.btn:disabled[class*='ico-']:after,
.btn.disabled[class*='ico-']:before,
.btn:disabled[class*='ico-']:before{opacity:0.3;} */

.btn.a{border-color: #6384E5; background-color: #6384E5; color:#fff;}
/* .btn.a:hover{border-color:#66b1ff; background-color: #66b1ff;} */
.btn.a:disabled,
.btn.a.disabled{color: #b5bcc3; border-color: #e6eaf1; background-color: #e6eaf1;}
a.btn.disabled{ pointer-events: none; }

.btn.b{border-color: #999; background-color: #999; color: #fff;}
/* .btn.b:hover{border-color:#c3c6cb; background-color: #c3c6cb;} */
.btn.b:disabled,
.btn.b.disabled{border-color: #e9eaed; background-color: #e9eaed; color: #bbb;}

.btn.c{border-color: #777; background-color:#fff; color: #242424;}
.btn.c:hover{border-color:#272b33; color: #272b33;}
.btn.c:disabled,
.btn.c.disabled{border-color: #d2d4d9; background-color: #fff; color: #d2d4d9;}

.btn.d{border-color: #bdc0c7; background-color:#fff; color: #242424; border-radius: 4rem;}
.btn.d:active{border-color:#272b33;}
.btn.d:disabled,
.btn.d.disabled{border-color: #d2d4d9; background-color: #fff; color: #d2d4d9;}

.btn.e{border-color: #f56c6c; background-color: #f56c6c; color:#fff;}
.btn.e:hover{border-color: #f78989; background-color: #f78989; color:#fff;}
.btn.e:disabled,
.btn.e.disabled{border-color: #e6eaf1; background-color: #e6eaf1; color: #b5bcc3;}

.btn.f{border-color: #4381e4; background-color: #ddeeff; color: #2166d4;}
.btn.f:disabled,
.btn.f.disabled{border-color: #bcd6ff; background-color: #f1f8ff; color: #bcd6ff;}
.btn.f.comp{border-color: #4381e4; background-color: #fff; color: #2166d4;}

.btn.g{border-color: #4381e4; background-color: #fff; color: #2166d4;}
.btn.g:disabled,
.btn.g.disabled{border-color: #bcd6ff; background-color: #fff; color: #bcd6ff;}




/* 라디오 텍스트 */
.radio.text {display:inline-flex; position: relative; align-items: center;}
.radio.text span {font-size: 14rem; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)}
.radio.text [type="radio"] {margin:0; padding:0; margin-right: 0rem; appearance: none; border: 1rem solid #ddd; border-radius: 0; height: 33rem; width: 56rem;; }
.radio.text [type="radio"]:checked {border: 1rem solid #6384E5; background-color: #6384E5; }
.radio.text [type="radio"]:checked + span {color: #fff;}
.radio.text [type="radio"]:disabled { background-color: lightgray; opacity: 1}
.radio.text [type="radio"]:disabled + span {opacity: 1;}



/* 라디오, 체크 디자인 */
.radio {display:inline-flex; align-items: center;}
.radio span {font-size: 16rem;}
.radio [type="radio"] {margin:0; padding:0; margin-right: 10rem; appearance: none; background: url(../../img/common/icon_radio2.svg); width: 20rem; height: 20rem; border-radius: 0; background-size: cover;}
.radio [type="radio"]:checked {background: url(../img/common/icon_radio.svg); background-size: cover; }
.radio [type="radio"]:disabled {background-color: lightgray; opacity: 0.7}
.radio [type="radio"]:disabled + span {opacity: 0.7;}


.checkbox {display:inline-flex; align-items: center; }
.checkbox span {font-size: 16rem;}
.checkbox [type="checkbox"] {margin:0; padding:0; margin-right: 10rem; appearance: none; background: url(../../img/common/icon_checkbox2.svg); width: 20rem; height: 20rem;  background-size: cover;}
.checkbox [type="checkbox"]:checked {background: url(../../img/common/icon_checkbox.svg); background-size: cover;}
.checkbox [type="checkbox"]:disabled {background-color: lightgray; opacity: 0.7}
.checkbox [type="checkbox"]:disabled + span {opacity: 0.7;}




/* 레이아웃 */
.wrap {padding: 0rem;}

.header { border-bottom: 1rem solid #ddd;}
.header .top-menu {width: 1260rem; margin: 30rem auto 0rem;}
.header .top-menu ul {display: flex; align-items: center; justify-content: flex-end; margin: 0 auto;}
.header .top-menu ul li::before {display: inline-flex; content:''; width: 1rem; height:10rem; background: #666; margin-left:10rem; margin-right: 10rem;}
.header .top-menu ul li:first-of-type:before {display: none}
.header .top-menu ul li a {color:#666; font-size: 16rem}
 

.header .header-inner {display: flex; align-items: center; justify-content: space-between; width: 1260rem; margin: 0 auto; }
.header .inner {display: flex; justify-content: space-between; width: 1080rem;  padding: 37rem 0 37rem; box-sizing: border-box;}
.header .inner h1.logo {width: 185.55rem; height: 26rem;}
.header .inner h1.logo a {display: block; height: 100%;}
.header .inner .hamburger-icon{ display: none;}
/* .header .inner .gnb-menu {border: 1px solid red;} */
.header .inner .gnb-menu .gnb-innner {left: 0;}
.header .inner .gnb-menu .gnb-innner .close-menu {display: none;}
.header .inner .nav-list {display: flex; }
.header .inner .nav-list li:first-of-type {margin-left: 0;}
.header .inner .nav-list li {margin-left: 120rem}
.header .inner .nav-list li a {font-size: 24rem; font-weight: 400; color: #222;}
.header .multi-item {display: flex; align-items: center; margin-left: 60rem;}
.header .multi-item .item {width: 90rem; height: 35rem; background-color: #222; color: #fff; font-size: 14rem; white-space: nowrap;}
.header .multi-item .item + .item {margin-left: 10rem;}


/* .main-visual {background-color: #F0F4FF;}
.main-visual .inner {width: 1260rem; height: 380rem; margin: 0 auto; background: url(../../img/pc/main_visual.png) no-repeat; } */

.main-wrap {}





.container {width: 1260rem; margin: 0 auto; padding-bottom: 100rem;}
.container.visual {width: 100%; margin: 0 auto; padding-bottom: 100rem;}
.container .inner {}


/* footer */
.footer {background-color: #F9F9F9; border-top: 1rem solid #D9D9D9}
.footer .company-info {width: 1260rem; margin: 0 auto; padding-top: 50rem; display: flex; align-items: center;}
.footer .company-info  a img {width: 120rem; height: 18rem}
.footer .company-info ul {display: flex; margin-left: 100rem;}
.footer .company-info ul li {margin-right: 40rem;}
.footer .company-info ul li a {font-size: 16rem; font-weight: 500}

.footer .inner {width: 1260rem; margin: 0 auto; display: flex; align-items: flex-start; justify-content: space-between; align-items: center; background-color: #F9F9F9; padding: 30rem 0 50rem; }
.footer .inner .txt {font-size: 16rem; color: #222;}
.footer .inner .txt ul li {display: flex; align-items: center; margin-bottom: 6rem;}
.footer .inner .txt ul li p {font-size: 16rem; color: #222;}
.footer .inner .txt ul li p:first-of-type::before {display: none;}
.footer .inner .txt ul li p::before {display: inline-flex; content:''; width: 1rem; height:10rem; background: #D9D9D9; margin: 0 10rem 0; }

.footer .inner .sns-item {display: flex; margin-top: 35rem;}
.footer .inner .sns-item a {display: block; width: 40rem; height: 40rem; margin-left: 20rem;}
.footer .inner .sns-item a:first-of-type {margin-left: 0;}

.footer .inner .sns > .inner a:first-of-type {margin-left: 0;}
.footer .inner .sns > .inner a {margin-left: 20rem; width: 40rem; height: 40rem; display: inline-flex;}
.footer .inner .sns .in{ background: url(../../img/common/foot_Icon01.png); background-size: cover;}
.footer .inner .sns .fa{ background: url(../../img/common/foot_Icon02.png); background-size: cover;}
.footer .inner .sns .yu{ background: url(../../img/common/foot_Icon03.png); background-size: cover;}
.footer .inner .sns .ka{ background: url(../../img/common/foot_Icon04.png); background-size: cover;}


/* 메인 슬라이드 */
.main-wrap .swiper {width: 100%;height: 100%;}
.main-wrap .topSwiper .swiper-slide {height: 200rem; text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center;     }
.main-wrap .topSwiper .swiper-wrapper {}
.main-wrap .topSwiper .swiper-wrapper .swiper-slide {background: #F0F4FF; height: 770rem}

.main-wrap .topSwiper .swiper-wrapper .swiper-slide .box {width: 1260rem; height: 100%; margin : 0 auto; padding-top: 90rem; background: url(../../img/temp/visual_bg01.png) no-repeat center bottom; background-size: 1000rem 396rem;}
.main-wrap .topSwiper .swiper-wrapper .swiper-slide .box .heading {font-size: 46rem; color: #222;}
.main-wrap .topSwiper .swiper-wrapper .swiper-slide .box .heading strong {font-weight: 600}
.main-wrap .topSwiper .swiper-wrapper .swiper-slide .box .btn {margin-top: 30rem; border: 1rem solid #222; width: 200rem; height: 54rem; background: none; }
.main-wrap .topSwiper .swiper-wrapper .swiper-slide .box .btn span {display: flex; justify-content: space-between; width: 100%; font-size: 22rem; font-weight: 500;}
.main-wrap .topSwiper .swiper-wrapper .swiper-slide .box .btn span::after {content:''; width: 24rem; height: 24rem; background: url(../../img/common/main_iconBtn.svg) no-repeat; }



/* 디자인 다름으로 인해서 주석 처리  */
/* .main-wrap .topSwiper .swiper-wrapper .swiper-slide .box bg02 {width: 1260rem; height: 100%; margin : 0 auto; padding-top: 90rem; background: url(../../img/temp/visual_bg02.png) no-repeat right bottom; background-size: 669rem 540rem; position: relative;}
.main-wrap .topSwiper .swiper-wrapper .swiper-slide .box bg02 > div {text-align: left; margin-top: 220rem;}
.main-wrap .topSwiper .swiper-wrapper .swiper-slide .box bg02 .heading {font-size: 46rem; color: #222;}
.main-wrap .topSwiper .swiper-wrapper .swiper-slide .box bg02 .heading strong {font-weight: 600}
.main-wrap .topSwiper .swiper-wrapper .swiper-slide .box bg02 .btn {margin-top: 30rem; border: 1rem solid #222; width: 200rem; height: 54rem; background: none; }
.main-wrap .topSwiper .swiper-wrapper .swiper-slide .box bg02 .btn span {display: flex; justify-content: space-between; width: 100%; font-size: 22rem; font-weight: 500;}
.main-wrap .topSwiper .swiper-wrapper .swiper-slide .box bg02 .btn span::after {content:''; width: 24rem; height: 24rem; background: url(../../img/common/main_iconBtn.svg) no-repeat; } */



.main-wrap .topSwiper .swiper-button-prev { height: 50rem; width: 50rem; background: url(../../img/common/swiper_arrow.svg);}
.main-wrap .topSwiper .swiper-button-next { height: 50rem; width: 50rem; background: url(../../img/common/swiper_arrow.svg); transform: rotate(-180deg);;}
.main-wrap .topSwiper .swiper-button-prev::after {display: none;}
.main-wrap .topSwiper .swiper-button-next::after {display: none;}
.main-wrap .topSwiper .swiper-button-next, .swiper-rtl .swiper-button-prev {right: 0;;}
.main-wrap .topSwiper .swiper-button-prev, .swiper-rtl .swiper-button-next {left: 0;}






.main-wrap .main-section {width: 1260rem; margin: 0 auto; display: flex; justify-content: flex-start; align-items: flex-start; padding: 120rem 0 120rem}
.main-wrap .main-section .title-box {margin-right: 160rem}
.main-wrap .main-section .title-box .title {font-size: 46rem; font-weight: 600; color:#222; margin:0; margin-bottom: 20rem}
.main-wrap .main-section .title-box a {font-size: 20rem; color:#222}
.main-wrap .main-section .title-box a span {display: flex;}
.main-wrap .main-section .title-box a span::after {display: block; content:''; width: 24rem; height: 24rem; background: url(../../img/common/notice_arrow.svg) no-repeat; margin-left: 5rem} 


.main-wrap .main-section .notice ul li:first-of-type {margin-top: 0;}
.main-wrap .main-section .notice ul li{margin-top: 25rem;}
.main-wrap .main-section .notice ul li a {display: flex; justify-content: flex-start; align-items: center; font-size: 20rem;}
.main-wrap .main-section .notice ul li a p {color: #999}
.main-wrap .main-section .notice ul li a p + p {color: #222; margin-left: 45rem}




.main-wrap .bottomSwiper {}
.main-wrap .bottomSwiper .swiper-slide {text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center;  background: #F9F9F9;   }
.main-wrap .bottomSwiper .swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover;}
.main-wrap .bottomSwiper .swiper-wrapper {}
.main-wrap .bottomSwiper .swiper-wrapper .swiper-slide {height: 600rem}
.main-wrap .bottomSwiper .swiper-wrapper {position: relative;}
.main-wrap .bottomSwiper .swiper-navi {position: absolute; left: 50%; transform: translateX(-50%); bottom: 40rem ; z-index: 10; width: 145rem; margin: 0 auto; height: 40rem; background: #fff; border-radius: 20rem; display: flex; align-items: center; }

.main-wrap .bottomSwiper .swiper-button-prev { height: 24rem; width: 24rem;  top: 30rem; background: url(../../img/common/notice_arrow.svg);transform: rotate(-180deg);}
.main-wrap .bottomSwiper .swiper-button-next { height: 24rem; width: 24rem; top: 30rem; background: url(../../img/common/notice_arrow.svg); ;}
.main-wrap .bottomSwiper .swiper-pagination { top: 12rem;}
.main-wrap .bottomSwiper .swiper-button-prev::after {display: none;}
.main-wrap .bottomSwiper .swiper-button-next::after {display: none;}
.main-wrap .bottomSwiper .swiper-button-next, .swiper-rtl .swiper-button-prev {right: 10rem;  z-index: 20;;}
.main-wrap .bottomSwiper .swiper-button-prev, .swiper-rtl .swiper-button-next {left: 10rem; z-index: 20;}

.main-wrap .bottomSwiper .swiper-slide {}
.main-wrap .bottomSwiper .swiper-slide .box {display: flex; align-items: center; justify-content: flex-start; width: 1260rem; height: 100%; padding-left: 620rem; background: url(../../img/temp/visual_bg03.png) no-repeat left center; background-size: 558rem  426rem;}
.main-wrap .bottomSwiper .swiper-slide .box.bg02 {background: url(../../img/temp/visual_bg04.png) no-repeat left center; background-size: 453rem  453rem;}
.main-wrap .bottomSwiper .swiper-slide .box .text-box { text-align: left; font-size: 40rem; font-weight: 700;}
.main-wrap .bottomSwiper .swiper-slide .box .text-box div {margin-top: 30rem; font-size: 20rem; color: #222; font-weight: 400; }
.main-wrap .bottomSwiper .swiper-slide .box .text-box .point {color: #6384E5}

.main-wrap .button-box {background: #6384E5; height: 400rem;}
.main-wrap .button-box .box {width: 1260rem; margin: 0 auto; text-align: center; padding: 115rem 0 115rem}
.main-wrap .button-box .box .tit {color:#fff; font-size: 46rem; font-weight: 600rem; margin-bottom: 40rem;}
.main-wrap .button-box .box .btn-area .btn {width: 280rem; height: 70rem; background: #fff;}
.main-wrap .button-box .box .btn-area .btn span {font-size: 24rem; font-weight: 600; color: #6384E5}

.main-wrap .button-box .box .btn-area .btn + .btn {border: 2rem solid #fff; background: none; margin-left: 10rem}
.main-wrap .button-box .box .btn-area .btn + .btn span {color:#fff;}


/* 입력 */
.input-field {padding-top: 90rem;}
/* .input-field h2 {font-size: 46rem; text-align: center; font-weight: 400; margin-bottom: 40rem} */
.input-field h2 {font-size: 46rem; text-align: center; font-weight: 400; margin-bottom: 40rem; color:#222;}
.input-field h3 {font-size: 20rem;  font-weight: 500; margin-bottom: 20rem;}
.input-field .sns-login {margin-bottom: 40rem}
.input-field .sns-login h2 {font-size: 40rem;  margin-bottom: 15rem; }
.input-field .sns-login p {font-size: 20rem; text-align: center; font-weight: 400; margin-bottom: 40rem; display: flex; justify-content: center; align-items: center;}
.input-field .sns-login p.naver::before {display: block;  content:''; width: 26rem; height: 26rem; background: url(../../img/common/icon_naver.svg) no-repeat left center; margin-right: 10rem;}
.input-field {width: 410rem; margin: 0 auto}
.input-field button:first-of-type {margin-top:0;}
.input-field button {width: 100%; height: 60rem; margin-top: 20rem; font-size: 22rem; color:#333F50}
.input-field button.default {background: #6384E5; border-color: #6384E5; color:#fff;}
.input-field button.naver {background: #03C75A; border-color:#03C75A; color:#fff;}
.input-field button.kakao {background: #FEE500; border-color:#FEE500; color:#371F1F}
.input-field .info-text {text-align: center; font-size: 14rem; color:#333F50; margin-top: 50rem}






.input-field .item ul li {margin-bottom: 20rem;}
.input-field .item .set { display: flex;}
.input-field .item .btm { margin-top: 10rem; display: flex; align-items: flex-start; justify-content: space-between;}
.input-field .item .btm .error-txt {margin-top: 0;}
.input-field .item .set input {width: calc(100% - 80rem); margin-right: 10rem;}
.input-field .item .set button {width: 80rem; height: 50rem; background: #222;}
.input-field .item .set button span {color:#fff; font-size: 16rem;}
.input-field .item .file-upload{margin-bottom: 50rem;}

.input-field .check-list {border-top: 1rem solid #ddd; padding-top: 30rem; margin-top: 30rem; margin-bottom: 50rem}
.input-field .check-list li {margin-bottom: 20rem; display: flex; justify-content: space-between; align-items: center;}
.input-field .check-list li button,
.input-field .check-list li a {color:#888; font-size: 16rem; display: block; background: url(../../img/common/icon_arrow03.svg) no-repeat right center; background-size: 24rem 24rem; padding-right: 24rem}


.input-field .item li .id {background: url(../../img/common/icon_id.svg) no-repeat 10rem center; background-size: 24rem 24rem; padding-left: 40rem}
.input-field .item li .password {background: url(../../img/common/icon_password.svg) no-repeat 10rem center; background-size: 24rem 24rem; padding-left: 40rem}
.input-field .item li .business-area {position: relative;}
.input-field .item li .business {background: url(../../img/common/icon_business.svg) no-repeat 10rem center; background-size: 24rem 24rem; padding-left: 40rem}
.input-field .item li .business-area button {width: 24rem; height: 24rem; position: absolute; top: 50%; right: 10rem; transform: translateY(-50%); background: url(../../img/common/icon_zoom.svg) no-repeat ;}

.input-field .btn-area{ }
.input-field .btn-area .btn span{position: relative;}
.input-field .btn-area .btn .login-history {position: absolute; right: -80rem; top: 50%; transform: translateY(-50%); background: #222; color:#fff; border-radius: 15rem; font-size: 12rem; padding: 6rem 10rem; z-index: 1;}
.input-field .btn-area .btn .login-history::before {content:''; position: absolute; left:-5rem; top: 8rem;  color:#fff; z-index: 0; width: 0; height: 0; border-left: 5px solid transparent;  border-right: 5px solid transparent; border-bottom: 10px solid #222; transform: rotate(-90deg); }

.input-field .text {padding: 20rem 0 20rem; font-size: 14rem; color:#333F50}
.input-field .text-area {border-top: 1px solid #ddd; display: flex; align-items: center; justify-content: space-between;}
.input-field .text-area .btn {border-top: 1px solid #ddd; color:#fff; background: #222; width: 120rem;; height: 37rem; font-size: 14rem;}


.sub-header .back {display: none;}


.or::before {display: block; content:''; width: 100%; height: 1rem; background: #ddd; }
.or {padding: 30rem 0 30rem; position: relative; font-size: 18rem; margin: 20rem 0 20rem; color: #ddd}
.or span {position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);padding: 10rem 30rem; background: #fff;}
.or + button {margin-top: 0;}





/* 회원가입 선택 */
.select-field {width: 540rem; margin: 0 auto; padding-top: 100rem;}
.select-field + .select-field {padding-top: 0; margin-top: 80rem}
.select-field .logo {width : 160rem; height: 22rem; margin-bottom: 18rem;}
.select-field h2 {font-size: 40rem; font-weight: 400; margin:0; margin-bottom: 20rem}
.select-field .text {font-size: 20rem; font-weight: 400; margin-bottom: 20rem}
.select-field .btn.phone {padding: 0; justify-content: center;  font-size: 16px;  font-weight: 500; color: #222; border: 1px solid #333F50;  width: 100%; height: 95px;  background: url(../../img/common/icon_arrow02.svg) no-repeat calc(100% - 20px) center; display: flex; }
.select-field .btn.phone span {display: flex; align-items: center; padding-left: 30px; text-align: left; flex: 1; }
.select-field .btn.phone span::before {content: ''; width: 19px; height: 30px; background: url(../../img/common/icon_phone.svg) no-repeat center 0; margin-right: 20rem;}



/* 파일 업로드 */
.file-upload {width: 100%;height: 100px;border: 1px solid #ddd; box-sizing: border-box;display: flex;align-items: center;justify-content: center; }
.file-upload input[type="file"] {width: 0;opacity: 0;height: 0;appearance: none;cursor: pointer;}
.file-upload label {display: block; font-size: 16rem; display: flex; align-items: center;  justify-content: center; text-align: center;  width: 100%;  height: 100%; color:#888 }


.join-confirm {text-align: center; display: flex; justify-content: center; align-items: center; padding: 200rem 0 140rem}
.join-confirm .welcome-text {font-size: 46rem; color:#222; vertical-align: middle; line-height: 70rem; font-weight: 400rem}
.join-confirm .welcome-text img{ width: 280rem; height: 39rem; vertical-align: baseline;}
.join-confirm .btn-area {width: 410rem; margin:70rem auto;}
.join-confirm .btn-area button {width: calc(100% / 2 - 10px) !important; height: 60rem; margin:0 auto;}


.password-confirm  {text-align: center; display: flex; justify-content: center; align-items: center; padding: 100rem 0 140rem; color:#222;}
.password-confirm .big {font-size: 32rem; margin-bottom: 20rem;}
.password-confirm .txt01 {font-size: 20rem; margin-bottom: 50rem;}
.password-confirm .txt02 {font-size: 20rem; margin-bottom: 20rem;}
.password-confirm .txt03  {font-size: 24rem; margin-bottom: 50rem; font-weight: 700;}
.password-confirm .pdt {padding:100rem 0 100rem;}
.password-confirm .btn-area {width: 410rem; margin: 0 auto; display: flex;;}
.password-confirm .btn-area button {height: 60rem; width: 100%; margin:0 auto; margin-left: 10rem }
.password-confirm .btn-area button:first-of-type { margin-left: 0 }



/* 탭 메뉴 */
.ui-tab {}
.ui-tab .tab-menu {display: flex; justify-content: space-between; align-items: center;}
.ui-tab .tab-menu > button {display: inline-flex; justify-content: center; align-items: center; width: 100%; padding: 10rem; margin:0; border-bottom: 4rem solid #ddd; font-size: 20rem;}
.ui-tab .tab-menu > button.isActive {border-bottom: 4rem solid #222}
.ui-tab .tab-menu > button .help {padding-bottom:4rem; margin-left: 5rem}
.ui-tab .tab-menu > button .help img {width: 14rem; height: 14rem;}
.ui-tab .tab-content {padding-top: 30rem;}
.ui-tab .tab-content > div {display: none;}
.ui-tab .tab-content > div.isActive {display: block;}

.search-item { display: flex; justify-content:space-between; align-items: center; margin-top: 40rem}
.search-item li {position: relative; width: 100%; text-align: center; }
.search-item li:first-of-type::before {display: none;}
.search-item li::before { content:''; width: 1rem; height:10rem; background: #D9D9D9; position: absolute; top: 50%; left: 0; transform: translateY(-50%)}
.search-item li a {font-size: 16rem; color:#333F50; display: block; }




.list-item .infinite-wrap {margin-top: 30rem;  overflow-y: scroll; }
/* .list-item .infinite-wrap .list {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;} */
.list-item .infinite-wrap .list .row {display: flex; justify-content: flex-start; align-items: flex-start; } 
.list-item .infinite-wrap .list .row > div:first-of-type {margin-left: 0;}
.list-item .infinite-wrap .list .row > div.soldout:first-of-type {margin-left: 0;}
.list-item .infinite-wrap .list .row > div {width: 300rem; margin-left: 20rem; margin-bottom: 70rem; padding-bottom: 20rem;}
.list-item .infinite-wrap .list .row > div.soldout {position: relative; border-radius: 10rem; overflow: hidden;;}
.list-item .infinite-wrap .list .row > div.soldout::after {display: block; content:'SOLD OUT'; font-size: 30rem; font-weight: 800; text-align: center; padding-top: 80rem; color:#fff; position: absolute; top:0; right:0; bottom:0; left:0; background: rgba(0, 0, 0, 0.60); box-sizing: border-box;}
.list-item .infinite-wrap .list .item-tit {font-size: 22rem; color: #222; margin-top: 25rem;}
/* .list-item .infinite-wrap .list .img {background: url(../../img/common/preparing_product.svg); background-size: cover; width: 300rem; height: 200rem; overflow: hidden; border-radius: 10rem;} */
.list-item .infinite-wrap .list .img {width: 300rem; height: 200rem; overflow: hidden; border-radius: 10rem;}
.list-item .infinite-wrap .list .tag {margin-top: 15rem;}
.list-item .infinite-wrap .list .tag span {font-size: 18rem; color:#666; padding: 5rem 8rem 5rem; border: 1rem solid #ddd}
.list-item .infinite-wrap .list .price {color:#6384E5; font-size: 30rem; margin-top: 20rem;}



/* 타이틀  */
.title {margin-top: 100rem; margin-bottom: 20rem; font-weight: 500;}
.title h3 {font-size: 24rem;}


/* 서브 페이지 타이틀 */
.top-tit {margin-top: 60rem; margin-bottom: 30rem; display: flex; justify-content: space-between; align-items: center;}
.top-tit .tit {font-size: 32rem; font-weight: 500; margin-bottom: 20rem;}
.top-tit .tag {margin-top: 15rem;}
.top-tit .tag span {font-size: 18rem; color:#666; padding: 5rem 8rem 5rem; border: 1rem solid #ddd}
.top-tit .price {font-size: 40px; font-weight: 500; color: #6384E5;}
.mo-tit {display: none;}








/* 팝업 알럿 */
.isAlert {position: relative; overflow: hidden;}
.isAlert::after {content:''; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3);  white-space: nowrap; }
.ui-alert {display:block; position: fixed; top: 50%; left: 50%; z-index:10; width: 400rem; transform: translate(-50%, -50%); font-size: 14rem; white-space: normal; background-color: #fff; border-radius: 8rem;}
.ui-alert .pop-header {display: flex; justify-content: space-between; align-items: center; padding: 20rem;}
.ui-alert .pop-header h3{font-size: 16rem; font-weight: 700}
.ui-alert .pop-content {padding: 20rem;}
.ui-alert .pop-footer {padding: 20rem; display: flex; justify-content: space-between; align-items: center;}
.ui-alert .pop-footer .btn {width: 100%;}




/* 모달 팝업 */
.isPopup {position: relative; overflow: hidden;}
.isPopup::after {content:''; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index:10}

.ui-popup {display: none; position: fixed; z-index:11; width: 100%; font-size: 14rem;  background-color: #fff; border-radius: 8rem; overflow: auto;}
.ui-popup .btn-close {width: 20rem; height: 20rem; background: url(../../img/common/popup_close.svg) no-repeat; background-size: cover;}
.ui-popup .pop-header {display: flex; justify-content: space-between; align-items: center; padding: 16rem 20rem ;}
.ui-popup .pop-header h3{font-size: 18rem; font-weight: 400}
.ui-popup .pop-content {padding: 20rem;}
.ui-popup .pop-footer {padding: 20rem; display: flex; justify-content: space-between; align-items: center;}
.ui-popup .pop-footer .btn {width: 100%; min-width: auto; }
.ui-popup .pop-footer .btn + .btn {margin-left: 10rem;}
.ui-popup.isAnimated {transition: all 0.3s;}


/* 팝업 위치 */
.ui-popup.top { border-radius: 0 0 8rem 8rem}
.ui-popup.center { width: calc(100% - 40rem); height: auto; top:50%; left:50%; transform : translate(-50%, -50%);}
.ui-popup.bottom { }

.ui-popup.center.modal {border-radius: 0; width: 340rem; height: auto !important; padding: 20rem;}
.ui-popup.center.modal .pop-header  {text-align: center; padding:0; margin-bottom: 10rem;}
.ui-popup.center.modal .pop-header h3 {font-size: 24rem; margin: 0 auto}
.ui-popup.center.modal .pop-content {padding:10rem; height: auto !important; }
.ui-popup.center.modal .pop-content .inner {padding:0; text-align: center; }
.ui-popup.center.modal .pop-footer {padding:20rem 0 0rem; }
.ui-popup.center.modal .pop-footer > button {height: 50rem; color:#fff; background: #222; border: 0;}


.ui-popup.center.modal-business {border-radius: 0; width: 400rem; height: auto !important; padding: 20rem;}
.ui-popup.center.modal-business .pop-header {padding: 0; border-bottom: 1rem solid #ddd;}
.ui-popup.center.modal-business .pop-header dl {display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; width: 100%; margin-bottom: 15rem;}
.ui-popup.center.modal-business .pop-header dt {width: calc(100% - 110rem); text-align: left;font-size: 16rem; font-weight: 500;}
.ui-popup.center.modal-business .pop-header dd {font-size: 16rem;  font-weight: 500;}
.ui-popup.center.modal-business .pop-content {padding:15rem 0 0; height: auto !important; }
.ui-popup.center.modal-business .pop-content .inner {padding:0; text-align: center; }
.ui-popup.center.modal-business .pop-content .inner dl {display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;}
.ui-popup.center.modal-business .pop-content .inner dl dt {width: calc(100% - 110rem); text-align: left; margin-bottom: 15rem; font-size: 16rem}
.ui-popup.center.modal-business .pop-content .inner dl dd {margin-bottom: 15rem;font-size: 16rem}
.ui-popup.center.modal-business .pop-footer > button {height: 50rem; color:#fff; background: #222; border: 0;}















/* 스타일 컴보박스 */
.styled-combo { border-radius: 4rem; position: relative;}
.styled-combo +.styled-combo {margin-top: 20rem;}

.styled-combo.isActive {}
.styled-combo.isActive .custom-select-box{ display: block; position: absolute; top: 42rem; left:0; right:0; z-index: 1;}
.styled-combo.isActive .custom-select-box.bottom { display: block; position: absolute; top:unset; bottom: 42rem; left:0; right:0; z-index: 1;}

.styled-combo.isActive .combo-title::after {display: block; content:''; transform: translate(0, -50%) rotate(-180deg)/*; transition: all .5s;*/}
.styled-combo .combo-title {font-size: 14rem; padding: 14rem; box-sizing: border-box; border: 1rem solid #ddd; position: relative; cursor:pointer; background: #fff; margin-bottom: 35rem; }

.styled-combo .combo-title:hover {background: #ddd;}
.styled-combo .combo-title::after {display: block; content:''; background: url(../../img/common/icon_arrow.svg) no-repeat; width:24rem; height:24rem; position: absolute; top: 50%; right:20rem; transform: translate(0, -50%) rotate(0deg);}
.styled-combo .custom-select-box {display: none;}
.styled-combo .custom-select-box ul {border-top:0; border: 1rem solid #ddd; overflow: hidden;;}
.styled-combo .custom-select-box ul li:first-of-type {border-top: 0;}
.styled-combo .custom-select-box ul li {background: #fff; transition: all .3s; cursor:pointer; padding: 14rem; box-sizing: border-box;}
.styled-combo .custom-select-box ul li:hover {background-color: #ddd;}

.footer .styled-combo .combo-title {height: 47rem; margin-bottom: 0;}




/* 퀵 메뉴 */
/* .quick-menu {position: fixed; top: 50%; right: 20rem; transform: translateY(-50%); z-index: 1000; } */
.quick-menu {position: fixed; bottom: 30rem; right: 30rem; z-index: 900; }
.quick-menu ul li {width: 76rem; height: 76rem;}
.quick-menu ul li a {display: block; height: 100%; text-decoration: none; color: #333; background: url(../../img/temp/q_img01.svg) no-repeat; background-size: cover;}


.error-txt {font-size: 12rem; color: #FC0000; margin-top: 10rem;}




/* 베타 테스트  */
.wrap.betta {}
.wrap.betta .header-inner .inner {align-items: center;}
.wrap.betta .header-inner .logo {width: auto; height: auto; display: flex;  align-items: center; color:#222; }
.wrap.betta .header-inner .logo a img {width: 186rem; }
.wrap.betta .header-inner .logo span {font-size: 28rem; color:#222; margin-left: 10rem;}
/* .wrap.betta .header-inner .logo a {display: block; height: auto; margin-right: 10rem} */


.wrap.betta .betta-visual {background: #F0F4FF;padding: 108rem; text-align: center;}
.wrap.betta .betta-visual .inner {color:#222;}
.wrap.betta .betta-visual .inner .txt01{font-size: 64rem; font-weight: 500; }
.wrap.betta .betta-visual .inner .txt01 strong { font-weight: 700; color:#4381e4;}
.wrap.betta .betta-visual .inner .txt02{font-size: 38rem; font-weight: 400; margin: 20rem 0 28rem}
.wrap.betta .betta-visual .inner .txt03{font-size: 32rem; margin: 22rem 0 22rem}
.wrap.betta .betta-visual .inner .txt04{font-size: 26rem; margin-bottom: 40rem}
.wrap.betta .betta-visual .inner .betta-link {background: #E85729; color:#fff; font-size: 28rem; height: 70rem; padding: 20rem 30rem; border-radius: 35rem; display: inline-flex; align-items: center; justify-content: center;}


.wrap.betta .betta-section {}
.wrap.betta .betta-section .inner {width: 1130rem; margin: 0 auto; }
.wrap.betta .betta-section .inner ul li {position: relative; height: 440rem; overflow: hidden;}
.wrap.betta .betta-section .inner ul li .item {height: 440rem;display: flex; align-items: center; opacity: 0;  position: absolute;
    }
.wrap.betta .betta-section .inner .item .text-box{color:#222; width: 100%;}
.wrap.betta .betta-section .inner .item .text-box .tit {font-size: 52rem; font-weight: 700; white-space: nowrap; }
.wrap.betta .betta-section .inner .item .text-box .tit span { font-weight: 700; color:#4381e4;}
.wrap.betta .betta-section .inner .item .text-box .txt{width:763px; margin-top: 34rem; font-size: 26rem;}
.wrap.betta .betta-section .inner ul li:nth-of-type(odd)  .item{padding-left: 420rem; left: 100%; top: 0; transition: left 1.5s ease, opacity 1.5s ease;}
.wrap.betta .betta-section .inner ul li:nth-of-type(even) .item {text-align: right; padding-right: 420rem; right: 100%; top: 0; transition: right 1.5s ease, opacity 1.5s ease;}
.wrap.betta .betta-section .inner ul li:nth-of-type(1) .item {background: url(../../img/beta/beta_bg01.svg) no-repeat 0 center; background-size: 300rem 300rem; ;}
.wrap.betta .betta-section .inner ul li:nth-of-type(2) .item {background: url(../../img/beta/beta_bg02.svg) no-repeat right center; background-size: 300rem 300rem; ;}
.wrap.betta .betta-section .inner ul li:nth-of-type(3) .item {background: url(../../img/beta/beta_bg03.svg) no-repeat 0 center; background-size: 300rem 300rem; ;}
.wrap.betta .betta-section .inner ul li:nth-of-type(4) .item {background: url(../../img/beta/beta_bg04.svg) no-repeat right center; background-size: 300rem 300rem; ;}
.wrap.betta .betta-section .inner ul li:nth-of-type(5) .item {background: url(../../img/beta/beta_bg05.svg) no-repeat 0 center; background-size: 300rem 300rem; ;}

.wrap.betta .betta-section .inner ul li:nth-of-type(odd)  .item.isActive  {top: 0; left: 0%; opacity: 1;}
.wrap.betta .betta-section .inner ul li:nth-of-type(even) .item.isActive  {top: 0; right: 0%; opacity: 1;}
.wrap.betta .betta-section .inner .item.isActive .tit {}
.wrap.betta .betta-section .inner .item.isActive .txt{}




/* 작은 화면(예: 스마트폰)에 대한 스타일 */
@media screen and (max-width: 768px) {


    /* 베타 테스트  */
    .wrap.betta .header {height: 60rem;}
    .wrap.betta .header-inner .inner {align-items: unset;}
    .wrap.betta .header-inner .logo { width: 100% !important; height: auto; display: flex;  justify-content: center; align-items: center; color:#222; }
    .wrap.betta .header-inner .logo a img {display: inline-flex; width: 157rem; }
    .wrap.betta .header-inner .logo span {font-size: 24rem; color:#222; margin-left: 10rem; white-space: nowrap;}

    .wrap.betta {}
    .wrap.betta .betta-visual { padding: 60rem 20rem 60rem; }
    .wrap.betta .betta-visual .inner {color:#222;}
    .wrap.betta .betta-visual .inner .txt01{font-size: 28rem; }
    .wrap.betta .betta-visual .inner .txt02{font-size: 20rem; }
    .wrap.betta .betta-visual .inner .txt03{font-size: 16rem;}
    .wrap.betta .betta-visual .inner .txt04{font-size: 12rem; }
    .wrap.betta .betta-visual .inner .betta-link {font-size: 18rem; height: 46rem; padding: 12rem 25rem; border-radius: 23rem; }
    .wrap.betta .mobr  {display: none !important;}


    .wrap.betta .betta-section {}
    .wrap.betta .betta-section .inner {width: auto;}
    .wrap.betta .betta-section .inner .item {height: auto; padding: 220rem 0 30rem; display: flex; align-items: center;}
    .wrap.betta .betta-section .inner .item .text-box {text-align: center; width: 100%;  padding: 0 20rem 0; }
    .wrap.betta .betta-section .inner .item .text-box .tit {font-size: 28rem; font-weight: 700; white-space: unset;}
    
    .wrap.betta .betta-section .inner ul li .item .text-box .txt{width:auto;  margin-top: 10rem; font-size: 18rem;}
    .wrap.betta .betta-section .inner ul li .item .text-box {min-height: 165rem}
    
    .wrap.betta .betta-section .inner ul li .item {position: unset; transition: unset}

    .wrap.betta .betta-section .inner ul li:nth-of-type(odd)  .item{padding-left: 0;}
    .wrap.betta .betta-section .inner ul li:nth-of-type(even) .item {text-align: unset; padding-right: 0;}
    .wrap.betta .betta-section .inner ul li:nth-of-type(1) .item {background: url(../../img/beta/beta_bg01.svg) no-repeat center 30rem; background-size: 160rem 160rem; ;}
    .wrap.betta .betta-section .inner ul li:nth-of-type(2) .item {background: url(../../img/beta/beta_bg02.svg) no-repeat center 30rem; background-size: 160rem 160rem; ;}
    .wrap.betta .betta-section .inner ul li:nth-of-type(3) .item {background: url(../../img/beta/beta_bg03.svg) no-repeat center 30rem; background-size: 160rem 160rem; ;}
    .wrap.betta .betta-section .inner ul li:nth-of-type(4) .item {background: url(../../img/beta/beta_bg04.svg) no-repeat center 30rem; background-size: 160rem 160rem; ;}
    .wrap.betta .betta-section .inner ul li:nth-of-type(5) .item {background: url(../../img/beta/beta_bg05.svg) no-repeat center 30rem; background-size: 160rem 160rem; ;}
    
    
    


   
    .header {width: auto;}
    .header .top-menu {display: none;}
    .header {width: 100%; padding: 15rem 20rem; box-sizing: border-box; position: relative; border-bottom: 1rem solid #ddd}
    .header .header-inner { width: auto; margin: 0 auto; border-bottom: 0}
    .header .inner {flex-direction: row-reverse; width: auto;  padding: 0rem;}
    .header .inner h1.logo {background-size: cover; width: 157rem; height: 22rem; position: absolute; left:50%; transform: translate(-50%, 0);}
    .header .inner h1.logo a {display: block; height: 100%;}
    .header .inner .hamburger-icon{ display: block; width: 24rem; height: 24rem; background: url(../../img/mo/gnb_icon.svg) no-repeat;}
    .header .inner .gnb-menu {position: relative;}
    .header .inner .gnb-menu .gnb-innner { transition: all 0.3s; display: none; left: -100%; top:0; bottom:0;  width: 0%; height: 0%;}
    .header .inner .gnb-menu.isActive .gnb-innner{position: fixed; background-color: #fff; left:0; top:0; bottom:0; height: 100%; z-index: 9999;}
    .header .inner .gnb-menu .gnb-innner .close-menu {display: block; background-color: #6384E5; width: 100%; font-size: 18rem; font-weight: 700; text-align: left; padding: 20rem; border-bottom: 1rem solid #ddd; position: relative; color:#fff; white-space: nowrap;}
    .header .inner .gnb-menu .gnb-innner .close-menu .close {position: absolute; right:20rem; top:50%; content:''; display: block; background: url(../../img/common/gnb_close.svg); width: 20rem; height: 20rem; transform: translate(0%, -50%) rotate(-90deg);;}
    .header .inner .gnb-menu .nav-list {display: block; margin-left:0; }
    .header .inner .gnb-menu .nav-list li:first-of-type {margin-left: 0;}
    .header .inner .gnb-menu .nav-list li {margin-left: 0; border-bottom: 1rem solid #ddd; width: 100%;}
    .header .inner .gnb-menu .nav-list li a {display: block; font-size: 18rem; font-weight: 700; padding: 20rem; position: relative;}
    .header .inner .gnb-menu .nav-list li a::after {position: absolute; right:20rem; top:50%; content:''; display: block; background: url(../../img/common/select_arrow.svg); width: 20rem; height: 20rem; transform: translate(0%, -50%) rotate(-90deg);;}

    .isGnb {overflow: hidden;}
    .isGnb::after {position: fixed; right:0; top:0; bottom:0; content: ''; display: block; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 9998}

    .header .multi-item {display: block; align-items: center; margin:0 }
    .header .multi-item .item {display: block; width: 90rem; height: 35rem; background-color: #222; color: #fff; font-size: 14rem; white-space: nowrap;}
    .header .multi-item .item + .item {margin-left: 0rem; display: none;}


    /* 서브페이지 상단 타이틀 변경처리 */
    .sub-header {position: fixed; left: 0; top:0; right:0; background: #fff; height: 54rem; z-index: 1;}
    .sub-header .back {display: block; width: 54rem; height: 54rem;  background: url(../../img/mo/go_back.png) center no-repeat; background-size: 24rem 24rem; }
    .sub-header h2 {text-align: center; font-size: 18rem !important; margin: 0 !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
    
   

    .main-visual { height: 260rem;}
    .main-visual .inner {width: 100%; height: 100%; margin: 0 auto; background: url(../../img/mo/main_visual.png) center no-repeat; background-size: cover; }

    .container {width: 100%; padding: 20rem 20rem 50rem;}

    /* 서브 페이지 타이틀 */
    .top-tit {display: none;}
    .mo-tit {margin-top: 20rem; margin-bottom: 30rem; display: block;}
    .mo-tit .tit {font-size: 24rem; font-weight: 500; margin-bottom: 10rem;}
    .mo-tit .price {font-size: 30px; font-weight: 500; color: #6384E5;}



    .main-wrap {}
    .main-wrap .main-section {width: auto; display: block; padding: 20rem;}
    .main-wrap .main-section .title-box {margin:0;}
    .main-wrap .main-section .title-box .title {font-size: 30rem; margin-bottom: 15rem}
    .main-wrap .main-section .title-box a {font-size: 18rem}
    .main-wrap .button-box .box {width: auto;}

    .main-wrap .main-section .notice {margin-top: 30rem; margin-bottom: 30rem;}
    .main-wrap .main-section .notice ul li:first-of-type {margin-top: 0;}
    .main-wrap .main-section .notice ul li{margin-top: 25rem; border-bottom: 1rem solid #ddd; padding-bottom: 10rem;}
    .main-wrap .main-section .notice ul li a {display: flex; flex-direction: column-reverse; justify-content: flex-start; align-items: flex-start;  }
    .main-wrap .main-section .notice ul li a p {color: #999; font-size: 15rem; margin-top: 6rem}
    .main-wrap .main-section .notice ul li a p + p { margin-left: 0rem; font-size: 16rem;}






    .main-wrap .topSwiper .swiper-wrapper .swiper-slide .box {width: auto;}


    .main-wrap .topSwiper .swiper-wrapper .swiper-slide {height: 450rem;}
    .main-wrap .topSwiper .swiper-wrapper .swiper-slide .box {width: auto; height: 100%; padding: 40rem 30rem; background: url(../../img/temp/mobile_visual_bg01.png) no-repeat center bottom; background-size: 275rem 231rem;}
    .main-wrap .topSwiper .swiper-wrapper .swiper-slide .box .heading {font-size: 24rem; color: #222;}
    .main-wrap .topSwiper .swiper-wrapper .swiper-slide .box .heading strong {font-weight: 600}
    .main-wrap .topSwiper .swiper-wrapper .swiper-slide .box .btn {margin-top: 30rem; border: 1rem solid #222; width: 120rem; height: 37rem; background: none; }
    .main-wrap .topSwiper .swiper-wrapper .swiper-slide .box .btn span {display: flex; justify-content: space-between; width: 100%; font-size: 14rem; font-weight: 500;}
    .main-wrap .topSwiper .swiper-wrapper .swiper-slide .box .btn span::after {content:''; width: 24rem; height: 24rem; background: url(../../img/common/main_iconBtn.svg) no-repeat; }
    

    .main-wrap .bottomSwiper .swiper-wrapper .swiper-slide {height: 580rem}
    .main-wrap .bottomSwiper .swiper-slide .box {}
    .main-wrap .bottomSwiper .swiper-slide .box {width: auto; background: url(../../img/temp/visual_bg03.png) no-repeat center calc(0% + 20rem) ;  background-size: 282rem auto; justify-content: center; padding: 0}
    .main-wrap .bottomSwiper .swiper-slide .box.bg02 {background: url(../../img/temp/visual_bg04.png) no-repeat  center calc(0% + 20rem); background-size: 228rem auto;}
    .main-wrap .bottomSwiper .swiper-slide .box .text-box {font-size: 30rem; text-align: center; padding-top: 150rem;}
    .main-wrap .bottomSwiper .swiper-slide .box .text-box div {font-size: 16rem; line-height: 24rem; text-align: center; padding: 20rem;}
    .main-wrap .bottomSwiper .swiper-slide .box .text-box div br {display: none;}

    .main-wrap .bottomSwiper .swiper-slide .box.bg02 .text-box {font-size: 30rem; text-align: center;}
    .main-wrap .bottomSwiper .swiper-slide .box.bg02 .text-box div {font-size: 16rem; line-height: 24rem; text-align: center; padding: 20rem;}
    .main-wrap .bottomSwiper .swiper-slide .box.bg02 .text-box div br {display: none;}
    


    .main-wrap .button-box {height: auto;}
    
    .main-wrap .button-box .box  {padding: 50rem 20rem 50rem; }
    .main-wrap .button-box .box .tit {font-size: 28rem}
    .main-wrap .button-box .box .btn-area .btn {width: auto; display: flex; height: 60rem}
    .main-wrap .button-box .box .btn-area .btn span { font-size: 20rem}
    .main-wrap .button-box .box .btn-area .btn + .btn {margin-left: 0; margin-top: 15rem}




    .password-confirm div .text-box {  padding:0 20rem 0; }
    .password-confirm .btn-area {width: 100%;}
    .password-confirm .btn-area button {width: 100%}
    .password-confirm .pdt {padding:0rem;}

    /* .footer {background-color: #F9F9F9; border-top: 1rem solid #D9D9D9} */
    .footer  {width: auto;}
    .footer {padding: 0rem; padding-bottom: env(safe-area-inset-bottom);}
    .footer .company-info {width: auto; padding:30rem 20rem 0; display: block; align-items: center;}
    .footer .company-info a img {width: 120rem; height: 18rem}
    .footer .company-info ul {display: flex; margin-left: 0rem;margin-top: 20rem;}
    .footer .company-info ul li {margin-right: 40rem;}
    .footer .company-info ul li a {font-size: 16rem; font-weight: 500}

    .footer .inner {width: 1260rem; margin: 0 auto; display: flex; align-items: flex-start; justify-content: space-between; align-items: center; background-color: #F9F9F9; padding: 30rem 0 50rem; }
    .footer .inner .txt {font-size: 16rem; color: #222;}
    .footer .inner .txt ul li {display: block; align-items: center; margin-bottom: 6rem; flex-wrap: wrap;}
    .footer .inner .txt ul li p {font-size: 16rem; color: #222; margin-top: 5rem}
    .footer .inner .txt ul li p:first-of-type::before {display: none;}
    .footer .inner .txt ul li p::before {display: none;}

    
    
    .footer .inner {display: block; width: auto; padding: 20rem;}
    .footer .inner .txt {font-size: 14rem; color: #222;}
    .footer .inner .sns-item {display: flex; margin-top:0; margin-bottom: 20rem; }
    .footer .inner .sns-item a {display: block; width: 35rem; height: 35rem; margin-right: 15rem;}
    .footer .inner .sns {margin-top: 30rem;}
    .footer .inner .sns .sns-inner {display: flex; flex-direction: column-reverse;}
    .footer .inner .sns > button:first-of-type {margin-left: 0;}
    .footer .inner .sns > button {margin-left: 10rem; width: 35rem; height: 35rem;}



    .title {margin-top: 50rem; margin-bottom: 20rem; font-weight: 500;}
    .title h3 {font-size: 24rem;}
    
 


    .input-field {width: 100%; padding-top:  50rem}
    .select-field {width: 100%; }
    
    .or + button {margin-top: 0;}
    
    .join-confirm {text-align: center; display: flex; justify-content: center; align-items: center; padding: 50rem 0 50rem}
    

}

/* 중간 크기의 화면(예: 태블릿)에 대한 스타일 */
@media screen and (min-width: 601px) and (max-width: 1024px) {
    /* 여기에 중간 크기의 화면용 스타일을 추가하세요 */
}

/* 큰 화면(예: 데스크톱)에 대한 스타일 */
@media screen and (min-width: 1025px) {
    /* 여기에 큰 화면용 스타일을 추가하세요 */
}



/* iOS 기기에 대한 스타일 */
@media only screen and (max-device-width: 480px) {
    /* 여기에 iOS 기기용 스타일을 추가하세요 */
}

/* 안드로이드 기기에 대한 스타일 */
@media only screen and (max-device-width: 800px) {
    /* 여기에 안드로이드 기기용 스타일을 추가하세요 */
}

/* Retina 디스플레이에 대한 스타일 */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    /* 여기에 Retina 디스플레이용 스타일을 추가하세요 */
}


/* iOS의 Safe Area에 따른 스타일 조절 */
@media (max-width: 768px) {
    
}