@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap");
:root {
   --colorPrimary: #fa8612;
   --grey: #d9d9d9;
   --midGrey: #bfbfbf;
   --darkedGrey: #7f7f7f;
   --fontK: "Noto Sans KR";
}
html,
body {
   background-color: #faf4eb;
   width: 100%;
   margin: 0;
   padding: 0;
   font-family: var(--fontK);
   font-size: 4dvw;
   font-weight: 300;
   box-sizing: border-box;
}

label {
   color: #2f2e3e;
}

button {
   border: 0;
   border-radius: 5px;
   box-sizing: border-box;
}

input[type="text"],
input[type="number"] {
   border: 0;
   border-radius: 1px;
   padding: 2px 0 2px 5px;
   box-sizing: border-box;
}

section,
div {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body > div {
   width: 100%;
}

div > img {
   display: block;
   width: 100%;
}

.areaInfo {
   padding: 15px 0 15px 50px;
}
#area6{padding:0 0 22% 0;}
#area6.step2{padding:0 0 40% 0;}

.inputStep0 {
    display: block;
    align-items: center;
    z-index: 110;
    text-align: center;
    width: 100%;
    position: fixed;
    bottom: 0;
    /* padding: 5px 0; */
    /* background-color: #e6ded3; */
 }

.inputStep1 {
   display: none;
   align-items: center;
   z-index: 110;
   text-align: center;
   width: 100%;
   position: fixed;
   bottom: 0;
   padding: 5px 0;
   background-color: #fdecdc;
}

.inputStep1 .inputArea,
.inputStep2 > div:first-of-type {
   width: 53%;
   border-right: 2px solid white;
}
.inputStep1 .inputArea > div:nth-of-type(1),
.inputStep1 .inputArea > div:nth-of-type(2) {
   text-align: left;
   margin-bottom: 3px;
}
.inputStep1 .inputArea label {
   font-size: 2.6vw;
   font-weight: 500;
   margin-left: 7%;
   margin-right: 3%;
   letter-spacing: 0.2em;
}
.inputStep1 .inputArea input {
   font-size: 12px;
}
.inputStep1 .inputArea span {
   font-size: 2.1vw;
   font-weight: 900;
   font-style: italic;
   background-color: yellow;
}
.inputStep1 .inputArea input {
   width: 30px;
}
.inputStep1 .inputArea input[type="text"] {
   width: 60%;
}
.inputStep1 .inputArea input[type="number"] {
   padding-left: 0;
   text-align: center;
   width: 18.3%;
}

.inputStep1 .btnArea,
.inputStep2 .btnArea {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   width: 47%;
}
.inputStep1 .btnArea img,
.inputStep2 .btnArea img {
   margin-right: 1%;
   display: block;
   width: 95%;
}

.inputStep2 {
   display: none;
   align-items: center;
   z-index: 110;
   text-align: center;
   width: 100%;
   position: fixed;
   bottom: 0;
   /* padding: 5px 0;
   background-color: #e6ded3; */
}

.inputStep2 .timeCheck {
   width: 100%;
   display: flex;
   align-items: center;
   padding-left: 5%;
   padding-top: 2%;
   margin-bottom: 1%;
}
.inputStep2 .timeCheck > div:first-of-type {
   width: 35%;
   display: flex;
   flex-direction: column;
   align-items: center;
   font-size: 2.8vw;
   font-weight: 700;
   color: #2f2e3e;
}

.inputStep2 .timeCheck > div:first-of-type img {
   display: block;
   width: 40%;
   margin-top: 5%;
}

.inputStep2 .timeCheck > div:last-of-type {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.inputStep2 .timeCheck label {
   display: flex;
   align-items: center;
   margin: 1.5% 0;
   font-size: 2.5vw;
   font-weight: 600;
}

.inputStep2 .timeCheck + label {
   display: flex;
   justify-content: center;
   align-items: center;
   font-weight: 400;
}
.inputStep2 .timeCheck + label > span {
   font-size: 2.5vw;
   font-weight: 900;
   font-style: italic;
   background-color: yellow;
}
.inputStep2 input[type="radio"],
.inputStep2 input[type="checkbox"] {
   zoom: 0.9;
   margin: 0 5px;
}

.inputStep3 {
   z-index: 130;
   display: none;
   text-align: center;
   font-size: 3.2vw;
   font-weight: 900;
   width: 100%;
   position: fixed;
   bottom: 0;
   padding: 3%;
   background-color: #e6ded3;
}

.inputStep3 > div {
   padding: 2%;
   border: 1px solid #449391;
}
.inputStep1{display:none;padding:30px 0 5px 0;}
.inputStep1 .inputArea{border-right:0;}
.inputStep1 .inputArea{width:100%;font:0/0 arial;text-align:left;padding:0 0 10px 0;}
.inputStep1 .inputArea > div{position:relative;padding:10px 20px 10px 100px;}
.inputStep1 .btnArea img{width:100%;}
.inputStep1 .inputArea label{position:absolute;top:0;left:0;width:100px;margin:0;text-align:left;height:30px;line-height:50px;padding:0 0 0 20px;font-size:16px;box-sizing: border-box;}
.inputStep1 .inputArea input{height:30px;vertical-align:top;width:100%;}
.inputStep1 .inputArea input[type="text"]{width:100%;}
.inputStep1 .inputArea input[type="number"]{width:32%;margin:0 0 0 2%;}
.inputStep1 .inputArea input[type="number"].ipstep1_ip1{margin:0;}
.inputStep1 .btnArea{width:100%;display:block;}
.inputStep1 .inputStep1_cls{position:absolute;top:0;;right:0;width:40px;height:40px;background:#fdecdc;}
.inputStep1 .inputStep1_cls:before{position: absolute;top: 50%;left: 50%;width: 30px;height: 1px;background-color: #222;content: "";-webkit-transform: translate(-50%, -50%) rotate(45deg);-ms-transform: translate(-50%, -50%) rotate(45deg);transform: translate(-50%, -50%) rotate(45deg);}
.inputStep1 .inputStep1_cls:after{position: absolute;top: 50%;left: 50%;width: 30px;height: 1px;background-color: #222;content: "";-webkit-transform: translate(-50%, -50%) rotate(135deg);-ms-transform: translate(-50%, -50%) rotate(135deg);transform: translate(-50%, -50%) rotate(135deg);}
.inputStep1 .inputArea .inputStep1_label{position:static;text-align:left;line-height:16px;font-size:12px;}
.inputStep1 .inputArea .inputStep1_label span{font-size:12px;background:none;font-style:normal;display:inline-block;letter-spacing:0;color:#ef1313;}
.inputStep1 .inputArea .inputStep1_label input{display:inline-block;width:auto;height:auto;margin:0;}
.eventAlram {
   opacity: 0;
   position: fixed;
   bottom: -80px;
   z-index: 100;
   width: 100%;
   text-align: center;
}
.eventAlram img {
   width: 70%;
}

#area1 {
   width: 100%;
}
#area1 video {
   width: 100%;
}

.movieArea {
   text-align: center;
   background-color: white;
   width: 100%;
   padding:40px 20px;
}
.movieArea > div:first-of-type {
   width: 85%;
   margin: 10px auto 20px;
}

.movieArea > div:last-of-type {
   margin: 0;
   border-radius: 5px;
   /* border: 2px solid black; */
   width: 100%;
}

.movieArea > div:last-of-type video {
   display: block;
   width: 100%;
   border-radius: 3px;
}
.movieArea > div.slim {
   width: 90%;
   height: 96vw;
   overflow: hidden;
   position: relative;
}
.movieArea > div.slim video {
   position: absolute;
   bottom: 0;
   left: 10%;
   width: 80%;
   margin: auto;
}

.swiper ul{width:100%;margin:0;padding:0;}
.swiper li img{width:100%;}
.swiper .swiper-button-prev:after{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -4px;
    border: solid #000;
    border-width: 2px 2px 0 0;
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg);
    content: "";
}
.swiper .swiper-button-next:after{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -12px;
    border: solid #000;
    border-width: 2px 2px 0 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
}
.inputStep2 > div:first-of-type{
    width:100%;border:0;
}

/* .inputStep2{position:relative;} */
.ip_step2_cls{position:absolute;top:0;right:0;width:13%;height:10%;}
.ip_step2_link1{position:absolute;top:68%;left:5%;width:90%;height:14%;}
.ip_step2_link2{position:absolute;top:83%;left:5%;width:90%;height:14%;}