@charset "utf-8";

/* 00. Reset */
* {margin: 0;padding: 0;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;}
a {color: inherit; text-decoration: inherit;}
address, em, i {font-style: normal;}
button {background: none; border: none;}
img {vertical-align: middle;}
h1,h2,h3,h4,h5,h6 {font-size: inherit}

/* 00. form */
/* btn */
.btnBox {margin-top: 20px}
.btn {background: #fe6f0f; color: #fff; width: 100%; padding: .875rem .875rem; font-size: .9375rem; border-radius: 1.25rem; font-weight: 500; line-height: 150%;border: 1px solid #fe6f0f;cursor: pointer;}
.btn.border {background: #fff; color: #fe6f0f; border-radius: 6.25rem; font-weight: 600; font-size: 1rem;  padding: .75rem 1.5rem;}
.arrowBtn:after {font-family: "Font Awesome 6 Free"; font-weight: 900; content: ""; margin-left: .75rem; color: #8a8a8a9c}
.arrowBtn.flex:before {content: ""; width: 1.8rem; height: 1.5rem; background: url(../images/icon04.svg) no-repeat center; flex-shrink: 0;}
.arrowBtn.flex:after {margin-left: auto;}


/* radioBox */
.radioBox {display: flex; justify-content: space-between}
.radioBox label {cursor: pointer; width: 100%;  text-align: center; border: 1px solid #ebebeb; border-radius: 5px; height: 45px; line-height: 44px; box-sizing: border-box; font-size: .9375rem}
.radioBox label:nth-child(1) {margin-right: 10px}
.radioBox input[type=radio] { cursor: pointer;  width: 0; height: 0; margin: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none}
.radioBox label:has(input[type=radio]:checked) {background-color: #fff7ed; border-color: #fff7ed; color: #fe6f0f}

/* radioBox - plan */
.radioBoxPlan { display: flex; background-color: #e5e7eb; border-radius: 1rem}
.radioBoxPlan label {flex: 1 0 auto; border: 1px solid rgb(229,231,235); background-color: #e5e7eb; font-size: 1.0625rem; line-height: 150%;  padding: .9rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; color: #474747e0; font-weight: 600; cursor: pointer}
.radioBoxPlan input[type=radio] { cursor: pointer;  width: 0; height: 0; margin: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none}
.radioBoxPlan label:has(input[type=radio]:checked) { color: #fe6f0f; border-color: #fe6f0f; background-color: #fff}

/* checkBox */
.checkBox {padding: 2px 4px; display: inline-block;}
.checkBox label {display:inline;margin-right:20px; cursor: pointer}
.checkBox input[type=checkbox] {opacity: 0;position: absolute;z-index: 12;width: 18px;height: 18px;}
.checkBox input[type=checkbox] + span {position: relative;width: 30px; height: 30px; padding-left: 27px; font-weight: 300;     font-weight: 600; font-size: 1rem;}
.checkBox input[type=checkbox] + span:before {content: "\f00c" ;font-family: "Font Awesome 6 Free"; position: absolute;left: -2px; top: 50%; transform: translateY(-50%); width: 23px; height: 23px; line-height: 24px; text-align: center; background: rgba(255, 255, 255, 0.4); border-radius: 50%; font-size: 14px; font-weight: 900; color: #fff}
.checkBox input[type=checkbox]:checked + span:before {background-color: #fff; color: #000} 

/* checkboxSwitch */
.checkboxSwitch { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 2.5625rem; height: 1.5rem; background-image: url("../images/checkboxSwitch.svg"); background-color: #d4d4d4; background-position: left center; background-repeat: no-repeat; border: 3px solid rgb(212,212,212); border-radius: 3.125rem; transition: background-position .15s ease-in-out; margin: 0}
.checkboxSwitch:checked { background-position: right center; background-color: #fe6f0f; border-color: #fe6f0f}

/* inputWrap */
.inputWrap{position:relative;}
.inputBox{width:100%;padding: 0.5rem; padding-right: 2.5rem; box-sizing:border-box}

/* input[type=text] */
input[type=text]::placeholder ,input[type=number]::placeholder ,input[type=tel]::placeholder, textarea::placeholder{ color: #b2b2b2; }
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button,input[type=tel]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield} 
input[type=text],input[type=number] ,input[type=tel] {background: #f5f5f5; width: 100%;  box-sizing: border-box; border: 1px solid #f5f5f5;  outline: none; border-radius: 10px;  height: 52px; line-height: 52px; padding: 0 15px;}
input[type="text"].error, input[type="number"].error {border-color: #f87171 }
.clearBtn{position:absolute;right:8px;top:47%;transform:translateY(-50%);background:none;border:none;font-size:18px;cursor:pointer;display:none;color:#888}
.ui-widget.ui-widget-content{max-height:200px;overflow-y:auto; border-radius: 8px;}
.ui-menu-item{padding:5px 8px;cursor:pointer; font-size: 1rem}
.ui-menu-item:hover{background-color:#f0f0f0}
.errorText {position: absolute; font-weight: 500; font-size: 13px; color: #f87171; padding: 0 0.5rem; display: none}
textarea {resize: none; background: #f5f5f5; width: 100%;  box-sizing: border-box; border: 1px solid #f5f5f5;  outline: none; border-radius: 10px;  height: 110px; line-height: 1.2; padding: 10px 15px;}

/* popup */
.popup {box-sizing: border-box; position: fixed; width: 100%; height: 100vh; left: 0; top: 0; background: rgba(0, 0, 0, 0.55); z-index: 100; display: none; opacity: 0; transition: opacity 0.3s ease;} 
.popup.show {display: block; opacity: 1;} 
.popup .box {width: 90%; max-width: 480px; background: #fff; border-radius: 1.25rem; border: 1px solid #eee; position: absolute; left: 50%; bottom: 50%; transform: translate(-50%, 40%); padding: 25px 20px 18px; box-sizing: border-box; transition: transform 0.3s ease;} 
.popup.show .box {transform: translate(-50%, 50%);} 
.popup.hide .box {transform: translate(-50%, 40%);}
.popup .title {font-size: 1.4rem; font-weight: 700;  line-height: 150%; text-align: center}
.popup .popupCon {padding: 1.5rem 0 0; font-size: 15px; line-height: 1.2;}
.popup .popupCon.b {padding-left:1rem;}
.popup .popupCon li {margin-bottom: 10px}

/* .popup.b */
.popup.b .box {position: absolute; left: 50%; bottom: 0; width: 100%; max-width: 480px; min-height: calc(100% - 5rem); padding: 10px 0 0; border: none; border-radius: 1.25rem 1.25rem 0 0; background: #fff; overflow: hidden; transform: translate(-50%, 100%); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease;}
.popup.b.show .box {transform: translate(-50%, 0); opacity: 1;}
.popup.b.hide .box {transform: translate(-50%, 100%); opacity: 0;}
.popup.b button {display: block; text-align: center; width: 100%; margin-bottom: 5px}
.popup.b .hidden {background: none; height: 100%}
.popup.b .popupCon {padding: 1.5rem 1.2rem .5rem 2rem; max-height: 75vh; overflow-y: auto}
.popup.b .popupCon h3{margin-bottom: 1.54rem; font-size: 1rem}
.popup.b .popupCon li { font-size: .875rem; margin-bottom: 15px;text-align: justify}

/* .popup.c */
.popup.c .popupCon {padding: 1.5rem 1rem .5rem 1.5rem; text-align: justify; box-sizing: border-box}
.popup.c .popupCon ol {margin-left: 12px}
.popup.c .popupCon ul {margin-left: 12px}
.popup.c .popupCon li {margin-bottom: 8px}
.popup.c .popupCon p {margin-bottom: 10px;}
.popup.c .popupCon h3 {margin-bottom: 10px; margin-top: 20px}
.popup.c strong {margin-top: 30px; display: block}
.popup.c .in li {margin-bottom: 2px; color: #585858; font-size: 0.8rem}
.popup.c.modal1 .box {min-height: calc(100% - 28rem);}

/* 플랜 한눈에 보기 */
.modal0 .box {padding:25px 0 18px;}
.modal0 .btnBox {padding:0 20px 0;}
.popup .popupCon.petInfo h3.flex {justify-content: flex-start; font-size: 1.0625rem;}
.popup .popupCon.petInfo {max-height: 62vh; overflow-y: auto;border-top: none; display: grid; gap: 0.5rem; padding:10px 20px 0;}
.popup .popupCon table {width: 100%; border: 1px solid rgb(229, 231, 235); border-radius: .75rem; overflow: hidden; text-align: center;  font-size: .85rem; color: 000; margin-bottom: 1rem;}
.popup .popupCon table th {font-weight: 600; background-color: #f5f5f5;padding: .7rem 0; font-size: .9rem;}
.popup .popupCon table td {height: 3rem;border-top: 1px solid rgb(229, 231, 235);border-right: 1px solid rgb(229, 231, 235);}
.popup .popupCon table td:last-child {border-right: none}
.popup .popupCon table td.gray {color: #474747e0; font-weight: 500; line-height: 1.2rem}
.popup .popupCon .infoText {margin-top: -.8rem}

/* 정보 수정 */
.popup .popupCon form h2 {font-weight: 500; margin: 20px 0 10px}
.popup .popupCon form h2:nth-child(1) {margin-top: 0}
.popup .popupCon form h2 span {display: block;font-size: .85rem; line-height: 160%; font-weight: 400; color: #555;}

/* 추가 할인 정보 */
.modal2 .box {padding:25px 0 18px; max-width: 420px}
.modal2 .popupCon {height: 62vh; overflow-y: auto; padding:10px 20px 0; }
.modal2 .popupCon li {border-top: 1px solid rgb(243, 244, 246); padding: .75rem 0; justify-content: flex-start}
.modal2 .popupCon li:first-child {border-top: none}
.modal2 .popupCon li:before { content: ""; width: 3.75rem; height: 3.75rem; display: block; background-repeat: no-repeat; background-position: center; background-size: 48%; margin-right: 1.3rem; flex-shrink: 0; background-image: url(../images/28.png); background-color: #fff7ef; border-radius: 50%}
.modal2 .popupCon li:nth-child(2):before {background-image: url(../images/16.png); background-size: 50%}
.modal2 .popupCon li:nth-child(3):before {background-image: url(../images/10.png); background-size: 60%}
.modal2 .popupCon li:nth-child(4):before {background-image: url(../images/26.png); background-size: 60%}
.modal2 .popupCon li:nth-child(5):before {background-image: url(../images/11.png); background-size: 58%}
.modal2 .popupCon li:nth-child(6):before {background-image: url(../images/20.png); background-size: 55%}
.modal2 .popupCon li:nth-child(7):before {background-image: url(../images/25.png); background-size: 62%}
.modal2 .popupCon li h2{font-size: 1rem;  margin-bottom: .5rem; color: #1e293b}
.modal2 .popupCon li p {font-weight: 500; font-size: .875rem; line-height: 160%; color: #4b5563;}
.modal2 .btnBox {padding:0 20px 0;}

/* 베이직 */
.basic h2{ font-size: .938rem; font-weight: 400; margin-bottom: 20px}
.basic .gray {background-color: #f5f5f5; border-radius: 1rem; padding: 1rem; margin: 0; font-size: .85rem; font-weight: 500; line-height: 160%; color: #474747e0;}
.basic .gray ul {padding-left: 1rem;}
.basic .gray ul li {margin-bottom: 5px}
.popup.basic .popupCon table {text-align: left}
.popup.basic .popupCon table tr:nth-child(1) td {border-top: none}
.popup.basic .popupCon table td.gray {border-radius: 0; font-weight: 600; font-size: 1rem; color: #000; width: 80px; box-sizing: border-box; padding: 1rem 0; text-align: center}
.popup.basic .popupCon table td {padding: 1rem}

/* loadinglayer */
.loadinglayer {box-sizing: border-box; position: fixed; width: 100%; height: 100vh; left: 0; top: 0; background: rgba(0, 0, 0, 0.55); z-index: 100; display: none}
.loadinglayer img {width: 60%; position: absolute; left: 50%; bottom: 50%; transform: translate(-50%, 50%); max-width: 250px}
.loadinglayer h2 { font-weight:500; width: 100%;position: absolute;left: 50%;bottom: 38%;transform: translateX(-50%);color:#fff;font-size: 1.25rem;text-align: center;}

/* 01. Layout */
body, .wrap, input, button, textarea {font-family: Pretendard,-apple-system,sans-serif; color: #212529; letter-spacing: -.02em; line-height: 1.6em; font-size: 1rem;}
.wrap {position: relative; margin: 0 auto; background: #fff5d2}
.inner {max-width: 480px ; margin: 0 auto; padding: 0 1rem; box-sizing: border-box} 
.flex {display: flex; justify-content: space-between}
header {margin-bottom: 20px;}
.logo {width: 6.5rem; display: block}
.logo svg, .logo img {width: 100%}

/* 02. step1 */
.step1 {min-height: 100vh; background: #fe6f0f; padding: 1.8rem 0; box-sizing: border-box}
.step1 .inner {min-height: 90vh; display: flex; flex-direction: column;}
.step1 section {flex-grow: 1; display: grid; place-items: center;}
.step1 .con {position: relative;}
.step1 .con h1 {font-size: 1.5rem; font-weight: 600; color: #fff; margin-bottom: 20px; line-height: 1.2;}
.step1 .con form {background-color: #fff; border-radius: 1rem; padding: 0.2rem 1.25rem 1.5rem; position: relative;}
.step1 .con:after {content: "";  display: block;width: 8.8rem; height: 7.35rem; background-image: url(../images/10.png); background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; top: -2%; right: 5%; z-index: 10}
.step1 .con h2 {font-weight: 500; margin: 20px 0 10px}
.step1 .con h2 span {display: block;font-size: .85rem; line-height: 160%; font-weight: 400; color: #555;}
.step1 .con .btnBox {margin-top: 30px}
.needToknow {font-weight: 400; margin-top: .8125rem; margin-left: 5px; color: #fff; display: flex; align-items: center;  font-size: .875rem;}
.needToknow:before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "!"; display: flex; width: 0.9rem; height: 0.9rem; line-height: 0.9rem; font-size: .625rem; transform: rotateX(180deg); align-items: center; justify-content: center; border: 1px solid #fff; border-radius: 50%; margin-right: .5rem;}

/* 0.3 step2 */
.step2 {background: #f5f5f5; padding: 1.8rem 0; box-sizing: border-box}
.step2 .con form {display: grid; gap: 1.25rem;}
.step2 .top {display: grid; gap: 1.25rem;}
.step2 .top .title h1 {font-size: 1.35rem; font-weight: 600; color: #000}
.step2 .top .title .arrowBtn {font-size: 0.85rem; color: #818181}
.step2 .top .planBox {border-radius: 1.25rem; overflow: hidden; box-sizing: border-box; color: #fff;  border: 1px solid #ffc01f;}
.step2 .top .planBox .inner {padding: 1.25rem;}
.step2 .top .planBox h2 {font-weight: 500;}
.step2 .top .planBox .checkBox {margin: 5px 0 20px}
.step2 .top .planBox h3 { text-align: right; font-weight: 500; font-size: 1.25rem; justify-content: end;  margin-top: 2rem;}
.step2 .top .planBox h3 strong {font-weight: 600; font-size: 2rem;margin: 0 .06rem 0 .2rem;  }
.step2 .top .planBox > .flex {background: #fff; color: #171719; padding: .875rem 1.25rem .8rem}
.step2 .top .planBox > .flex ul li {position: relative; list-style: none; font-size: .9375rem; line-height: 150%; padding-right: .5rem; margin-right: .5rem; max-width: 7.125rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.step2 .top .planBox > .flex ul li:after {content: "";  width: 1px; height: .75rem; background-color: #a3a3a3; display: block; position: absolute; top: calc(50% - .45rem); right: 0;}
.step2 .top .planBox > .flex ul li:last-child:after {display: none}
.step2 .top .planBox > .flex .arrowBtn {color: #737373; font-size: .9375rem}
/* planBox 컬러 구분 */
.step2 .top .planBox.yellow-plan {background: #ffc01f;color: #552a03;}
.step2 .top .planBox.brown-plan {background: #5a3719; border-color: #5a3719;}
.step2 .top .planBox.black-plan {background: #1c1c1c; border-color: #1c1c1c;}
.step2 .top .planBox.yellow-plan input[type=checkbox]:checked + span:before {background-color: #5a3719; color: #fff}
.step2 .top .planBox.brown-plan input[type=checkbox]:checked + span:before {color: #5a3719}
.step2 .top .planBox.black-plan input[type=checkbox]:checked + span:before {color: #1c1c1c;}
.step2 .bottom {background: #fff;  border-radius: 1.25rem; overflow: hidden; box-sizing: border-box; }
.step2 .bottom .inner { padding: 1.25rem;}
.petInfo {border-top: 1px solid rgb(229, 229, 229);}
.petInfo:first-child {border-top: none}
.petInfo h3 {font-size: 1.2rem; font-weight: 600; gap: .25rem; color: #000}
.petInfo h3:before {content: ""; display: block; width: 1.5rem; height: 1.5rem; background-repeat: no-repeat; background-position: center; background-image: url(../images/icon01.svg);}
.petInfo h3.a {justify-content: flex-start}
.petInfo h3.b:before{ background-image: url(../images/icon02.svg);}
.petInfo h3.c:before{ background-image: url(../images/icon03.svg);}
.petInfo h4 {justify-content: flex-start}
.step2 .needToknow {margin-top: 0}
.step2 .needToknow:before {color: #b2b2b2; border-color: #b2b2b2; width: 0.8rem; height: 0.8rem; line-height: 0.8rem; font-size: .625rem;}
.step2 h3 .needToknow {margin-top: -2px}
.petInfo p {margin-top: .125rem; font-size: .875rem;  font-weight: 500; line-height: 160%; color: #8a8a8ad9;line-height: 1.3; margin-top: 3px}
.petInfo p.flex {margin-right: auto; color: #474747e0; font-size: .9375rem; align-items: center; margin: 7px 0 5px}
.petInfo p.flex span  {color: #171719; align-items: center;}
.petInfo p.flex strong{font-size: 1.25rem; font-weight: 700; margin-right: 1px}
.petInfo ul li {list-style: none; border-top: 1px dashed rgb(234, 236, 240); margin-top: 1rem; padding-top: 1rem;}
.infoText {font-size: .875rem; color: #474747cc;}
.infoText.b {font-size: .78rem; color: #fff; margin-top: 30px; opacity: 0.7;}
/* step3 */
.step3 {box-sizing: border-box; background: #ededed;}
.step3 .inner {min-height: 100vh; display: flex; flex-direction: column; padding: 0;  background: #fff5d2}
.step3 header {background: #fff; margin-bottom: 0; padding:12px 15px;}
.step3 section {flex-grow: 1; display: grid; place-items: center; padding: 0 20px}
.step3 .con {position: relative; width: 100%}
.step3 .con h1 {    font-size: 1.6rem;
    font-weight: 700;
    color: #6a3906; 
    margin-bottom: 20px; line-height: 1.2;}
.step3 .con form {background-color: #fff; border-radius: 1rem; padding: 2.5rem 1.25rem 1.2rem; position: relative;}
.step3 .con:after {content: "";  display: block;width: 7rem; height: 8rem; background-image: url(../images/07.png); background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; top: -13%; right: 5%; z-index: 10}
.step3 .con h2 {font-weight: 600; width: 35%; line-height: 52px}
.step3 .con .flex {margin-bottom: 10px}
.step3 .con h2 span {color: #fe6f0f; font-weight: 600; margin-left: 1px}

.step3 .con .flex.none {display: block;}
.step3 .con h2.b {width: 100%;}
.step3 .con h2.b i {font-weight: 400;}

.step3 .arrowBtn {font-size: 1rem; width: 58.5%; margin-top: 10px; border-radius: 50px;}
.step3 .arrowBtn:nth-child(1){ background: #cccccc; border-color: #ccc; width:40%}
.step3 .arrowBtn:after {color: #fff}
.step3 p {text-decoration: underline; color: #6a6a6acc;  line-height: 32px;font-size: 0.85rem; }
.agree input[type="checkbox"]{display:none;}
.agree span{display:inline-block;padding:0 20px 2px;border-radius:5px; background: #ccc; color: #fff; font-size: 0.85rem; line-height: 32px}
.agree input[type="checkbox"]:checked + span{background: #8f5935}

/* step4 */
.step4 .inner {padding: 0; background: #7a4c2b;  min-height: 100vh}
.step4 header {background: #fff; margin-bottom: 0; padding:12px 15px;}
.step4 .con {position: relative; padding: 10vh 20px; text-align: center; line-height: 1.24; color: #fff}
.step4 .con h1 {font-size: 2.2rem; font-weight: 600}
.step4 .con h2 {font-size: 1.2rem; font-weight: 400; margin: 25px 0}
.step4 .con img {width: 100%; display: block; margin-bottom: 30px}
.step4 .con .arrowBtn {font-size: 1.2rem;width: 88%; border-radius: 15px; line-height: 165%;}
.step4 .con .arrowBtn:after {color: #fff}


/* main */
.main {background: #87512b}
.main  header {margin-bottom: 0}
.main .inner {position: relative; padding: 0; background:  url(../images/main_bg.png) no-repeat center/cover; min-height: 100vh}
.main .inner img {width: 100%}
.main .logo {position: absolute; left: 15px; top: 12px}
.main .btn {position: absolute; left: 50%; transform: translateX(-50%); bottom: 4%; width: 90%; display: block; background: none; border: none; padding: 0;}

/* quiz */
.quiz .inner {padding: 0}
.quiz header {background: #fff; margin-bottom: 0; padding:12px 15px;}
.quiz .con {background: #7a4c2b; padding: 10vh 10px; position: relative}
.quiz .con img {width: 100%}
#falsePop {display: none; position: fixed; width: 100%; height: 100vh; left: 0; top: 0; background: rgba(0, 0, 0, 0.55); z-index: 100; }
#falsePop img {width: 60%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); max-width: 250px}
/* 퀴즈 버튼 */
.quiz input[type="radio"]{display:none;}
.quiz .option{display:block;position:relative; width: 12.5%; position: absolute}
.quiz .option img{display:block;object-fit:cover; cursor: pointer;}
.quiz .mark{position:absolute;top:-5%;left:24%;width:75%;height:70%;background: url(../images/quiz_check2.png) no-repeat center/cover;opacity:0;pointer-events:none;}
.quiz input[type="radio"]:checked + img + .mark{opacity:1;}
.quiz #nextBtn {position: absolute; width: 40%; left: 50%; bottom: 20.5%;  transform: translate(-50%,-50%);cursor: pointer;}
.quiz #nextBtn img {cursor: pointer;}

/* 체크 위치 조정 */
#quiz1 .option.a {right: 13%; top: 53.5%}
#quiz1 .option.b {left: 13%; top: 56.2%}
#quiz2 .option.a {right: 13%; top: 55.5%}
#quiz2 .option.b {left: 13%; top: 52.6%}
#quiz3 .option.a {left: 13%; top: 56.5%}
#quiz3 .option.b {right: 13%; top: 53.5%}
#quiz4 .option.a {left: 13%; top: 53%}
#quiz4 .option.b {right: 13%; top: 56%}

/* introduction */
.introduction .inner {padding: 0}
.introduction header {position: absolute}
.introduction header .logo {position: absolute; left: 15px; top: 12px; z-index: 10;}
.introduction .con {position: relative}
.introduction .con img {width: 100%}
.introduction .con .arrowBtn {font-size: 1.1rem; position: absolute; left: 50%; bottom:7%; transform: translateX(-50%); width: 92%; border-radius: 15px;     padding: .975rem .875rem;}
.introduction .con .arrowBtn:after {color: #fff}
.introduction .con .infoText {color: #fff; position: absolute; left: 50%; bottom: 3.5%; transform: translateX(-50%); width: 100%; text-align: center}


/* 2512 이벤트 .wrap.b */

.wrap.b .main {background: #ffecc6; }
.wrap.b .main header {position: absolute}
.wrap.b .main .inner { background:#ffecc6;padding-top: 0; min-height: auto;}
.wrap.b .main .btn {bottom: 7%}

.wrap.b .introduction .btn2 {width:84%; position: absolute;left: 50%; transform: translateX(-50%); bottom: 2.4%;}
.wrap.b .introduction .btn2 img {cursor: pointer;}
.wrap.b .introduction .card {display: flex; flex-wrap: wrap; width: 78%; position: absolute; left: 50%; transform: translateX(-50%); top:36%; justify-content: space-between}
.wrap.b .introduction .card li {width: 48%; list-style: none; position: relative; margin-top:8%;}
.wrap.b .introduction .card li img {width: 100%; cursor: pointer}
.wrap.b .invitation .btn2{position: absolute; left: 50%; transform: translateX(-50%);    bottom: 3.5%; width: 90%;}

.wrap.b .step3 .con:after {width: 7rem;height: 7.5rem;background-image: url(../images/2602/top.png);top: -9%;right:3%;z-index: 10;}
.wrap.b .step1 .con:after {width: 8.8rem; height: 10.35rem; background-image: url(../images/2512/step1.png);top: -11%; right: 3%; z-index: 1}
.wrap.b .step1 .con form , .wrap.b .step3 .con form{position: relative; z-index: 2;}
/* .popup.card */
.popup.card .box{padding: 0; background: none; border: none; transform: translate(-50%, 50%) perspective(800px) rotateY(180deg);}
.popup.card .box .close {width: 25px; float: right; margin-right: 5%; cursor: pointer}
.popup.card .box .close img {width: 100%}
.popup.card .box .flex {position: absolute; left: 50%; bottom: 10.5%; width: 68%; transform: translateX(-50%)}
.popup.card .box .flex a {display: block; width: 49%; cursor: pointer}
.popup.card .box .flex a img {width: 100%} 
.popup.card.show .box {transform: translate(-50%, 50%) perspective(800px) rotateY(0);} 
.popup.card.hide .box { transform: translate(-50%, 50%) perspective(800px) rotateY(180deg);}


@media screen and (max-width: 375px) {
    .main .btn {bottom: 1%}
    .step4 .con {padding: 5vh 20px;}
    .step4 .con h1 {font-size: 2rem}
    .step4 .con img {width: 80%; margin: 30px auto}
    .step3 .con h1 {    font-size: 1.5rem;}
    .wrap.b .step3 .con:after {width: 5rem;height: 6.5rem;background-image: url(../images/2602/top.png);top: -4%;right:3%;z-index: 10;}
}