@charset "utf-8";
*{-webkit-tap-highlight-color: transparent;}
:root{
  --main-font : "pretendard", sans-serif;
  --main-1 : #5B9CFF;
  --main-2 : #84AFFF;
  --main-3 : #A9C7FF;
  --main-4 : #CEE2FF;
  --main-5 : #E0EBFF;
  --main-6 : #EFF8FF;
  --grayscale-1 : #101010;
  --grayscale-2 : #252525;
  --grayscale-3 : #454545;
  --grayscale-4 : #5D5F62;
  --grayscale-5 : #83878B;
  --grayscale-6 : #9CA2A8;
  --grayscale-7 : #BAC0C5;
  --grayscale-8 : #D5D9DD;
  --grayscale-9 : #E5EAEF;
  --grayscale-10 : #F0F3F6;
  --white : #fff;
  --mainfont-color: #2079ff;
  --bg-color : #F6FAFD;
  --main-gradi : linear-gradient(90deg,rgba(124, 176, 255, 1) 0%, rgba(87, 154, 255, 1) 100%);
}
/*공통*/

/*헤더
 header 는 공통사항이고, 상황에 맞게 head1, head2, head3 클래스를 사용하세요.
*/
header{
  min-width: 320px; 
  max-width: 720px; 
  height: 95px;
  position: fixed; 
  top: 0; 
  background-color: var(--white);
  width: 100%;
  z-index: 99;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.02);
  border-bottom: 1px solid var(--grayscale-10);
}
header.bg-color{
  background-color: var(--bg-color);
  box-shadow: none;
  border-bottom: 0;
}
.header-my{
  position: absolute;
  top: 0;
}
header h1{
  font-size: 25px;
  font-weight: 600;
}
.head1 ul, .head2 ul{
  display: flex;
  align-items: center;
  padding-top: 50px;
}
.head1 ul img{
  width: 20px;
  height: 20px;
  margin-top: 2px;
  margin-right: 4px;
}
.head3 ul{
  display: flex;
  justify-content: space-between;
  padding-top: 50px;
}

.head3 .head-util{
  display: flex;
  align-items: center;
  gap: 10px;
}
.head3 .head-util .bi{
  font-size: 2.2rem;
  color: var(--grayscale-2);
}
button{
  cursor: pointer;
}

/*여기는 가능하면 손 안댈게요*/
[class^="content-"]{
  width: 100%;
  min-width: 320px;  
  max-width: 720px; 
  background-color: var(--white);
  position: absolute;
  top: 95px;
  padding-bottom: 150px;
} 
[class^="content-"] > .inner{
  width: 100%;
  padding: 20px 5%;
} 
[class^="content-"] .inner h2{
  font-size: 2.2rem !important;
  font-weight: 600 !important;
  color: var(--grayscale-3);
}

/*인풋박스*/
::placeholder{
  color: var(--grayscale-6);
  font-size: 1.6rem;
  font-weight: 400;
}
fieldset{
  margin-bottom: 20px;
  width: 100%;
}
fieldset input[type="text"]{
  width: 100%;
  height: 48px;
  padding: 0 3%;
  font-family: var(--main-font);
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--grayscale-2);
  background-color: rgba(240, 243, 246, 0.7);
  border-radius: 8px;
  margin-bottom: 4px;
  margin-top: 8px;
}
fieldset p{
  font-size: 1.4rem;
  color: var(--grayscale-6);
}
fieldset p .bi{
  font-size: 1.4rem;
  color: var(--grayscale-7);
  margin-right: 4px;
}
/*체크박스*/
input[type="checkbox"]{
  appearance: none;
}
input[type="checkbox"] + label::before{
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(../images/mypage/icon-check-gray.svg) no-repeat center;
  cursor: pointer;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0%;
} 
input[type="checkbox"]:checked + label::before{
  background: url(../images/mypage/icon-check-blue.svg) no-repeat center;
}
input[type="checkbox"] + label{
  position: relative;
  padding: 0 28px;
  cursor: pointer;
  color: var(--grayscale-5);
  font-weight: 600;
  font-size: 1.6rem;
}
input[type="checkbox"]:checked + label{
  color: var(--mainfont-color);
}
/*아이콘이 있는 인풋*/
.field02 .input-icon{
  position: relative;
  display: inline-block;
  width: 100%;
}
.field02 .input-icon input[type="text"]{
  width: 100%;
  height: 48px; 
  padding: 0 3%;
  font-size: 1.8rem;
  padding-right: 40px; /*아이콘 크기에 맞게 조정*/
}
.field02 .input-icon span{
  position: absolute;
  bottom: -16%;
  right: 5%; /*아이콘 위치 조정*/
  transform: translateY(-50%);
  font-size: 2.2rem;
  color: var(--grayscale-2);
  cursor: pointer;
}


/*전송 버튼 있는 인풋*/
.field03 .input-btn{
  display: flex;
  align-items: center;
  gap: 3%;
}
.field03 .input-btn input[type="text"]{
  width: calc(80%); /*버튼 크기에 맞게 조정*/
  height: 48px;
  padding: 0 3%;
  font-size: 1.8rem;
}
.field03 .input-btn .btn-submit{
  width: 17%;
  height: 48px;
  background-color: var(--main-5);
  color: #4C93FF;
  font-size: 1.6rem;
  font-weight: 600;
  border-radius: 8px;
  text-align: center;
  line-height: 48px; /*버튼 높이에 맞게 조정*/
  margin-top: 3px;
}

/*버튼 제일 큰거*/
[class^="btn-big-"]{
  width: 100%;
  height: 48px;
  font-size: 1.8rem;
  font-weight: 600;
  border-radius: 12px;
  text-align: center;
  line-height: 48px; /*버튼 높이에 맞게 조정*/
  margin-bottom: 12px;
}
.btn-big-01{
  background-color: var(--main-1);
  color: var(--white);
}

.btn-big-02{
  background-color: var(--main-5);
  color: #4C93FF;
}

.btn-midbox{
  display: flex;
  justify-content: space-between;
  gap: 8px;
} 
.btn-midbox > button{
  width: calc(50% - 12px); /*두 개 버튼의 간격을 고려하여 계산*/
  height: 48px;
  font-size: 1.8rem;
  font-weight: 600;
  border-radius: 12px;
  text-align: center;
  line-height: 48px; /*버튼 높이에 맞게 조정*/
}
.btn-midbox .btn-mid-01{
  background-color: var(--main-5);
  color: #4C93FF;
}
.btn-midbox .btn-mid-02{
  background-color: var(--main-1);
  color: var(--white);
}



/*모달*/
.modal-wrap {
  display: none; /* 기본 숨김 */
  justify-content: center; /* flex 정렬용 */
  position: fixed; /* 화면 전체 덮기 용이 */
  top: 0; 
  left: 0; 
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* 반투명 배경 */
  z-index: 9999; 
}
.center-modal{
  align-items: center;
}
.bottom-modal{
  align-items: flex-end;
}
.modal-wrap .modal-box{
  width: 100%;
  min-width: 320px; 
  max-width: 720px; 
  height: 400px;
  border-radius: 20px 20px 0 0;
  background-color: var(--white);
  position: relative;
}
.modal-wrap .modal-box .modal-inner{
  padding: 5%;
  text-align: center;
}
.center-modal .modal-box{
  width: 320px;
  border-radius: 20px;
  padding-top: 40px;
  height: auto;
}
.center-modal .modal-box h5{
  margin: 20px 0 40px;
  font-size: 1.8rem;
}


.modal-wrap .modal-box ul li{
  font-size: 1.8rem;
  padding: 4px;
  cursor: pointer;
}
.modal-wrap .modal-box ul li.active{
  background-color: rgba(91, 156, 255, 0.12) ;
  border-radius: 4px;
}
.modal-wrap .modal-box .btn-close{
  position: absolute;
  top: 24px;
  right: 24px;
  background-color: transparent;
  cursor: pointer;
}
/*도로록*/
/*도로록*/
.box{
	height: 300px;
  position: relative;
  display: flex;
}
.box::before{
  content: "";
  display: block;
  width: 100%;
  height: 20%;
  background-color: rgba(91, 156, 255, 0.12) ;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.box .sel{
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.box .sel01, .box .sel02, .box .sel03{
  width: calc(100% / 3);
  overflow: hidden;
}


.swiper-container{
  width: 100%;
  height: 100%;
  position:relative;
}



.swiper-slide{
  font-size: 1.6rem;
  color: var(--grayscale-5);
  transition: all 0.5s;
/*  display: flex;
  justify-content: center;
  align-items: center;*/
}

.swiper-slide.swiper-slide-active{
  color: #333;
  font-weight: 600;
  font-size: 2rem;
}
.box .swiper-slide{
  line-height: 60px;
}

/*footer*/
.gnb{
  position: fixed; 
  bottom: 0; 
  left: 50%; 
  transform: translateX(-50%); 
  min-width: 320px; 
  max-width: 720px; 
  width: 100%; height: 93px; 
  background: url(../images/footer/gnb_ct.png) no-repeat center top;
}
.gnb::before, .gnb::after{
  content: ""; 
  display: block; 
  width: 20px; 
  height: 93px; 
  position: absolute; 
  top: 0;
}
.gnb::before{
  left: 0; 
  background: url(../images/footer/gnb_lt.png) no-repeat;
}
.gnb::after{
  right: 0; 
  background: url(../images/footer/gnb_rt.png) no-repeat;
}
.gnb-list{
  display: flex; 
  gap: 88px; 
  padding:0 20px; 
  align-items: end; 
  height: 93px;
}
.gnb-list > div{
  width: calc((100% - 88px) / 2); 
  height: 93px; 
  background:url(../images/footer/gnb_bg.png) repeat-x center bottom; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding-top: 20px;
}
.gnb-list li{
  text-align: center;
  color: #8E95A1;
  font-size: 1.4rem;
}
.gnb-list .bi{
  font-size: 2.4rem;
}
.gnb-list ul:hover li{
  color: var(--main-1);
}
.gnb-list ul:hover .bi{
  color: var(--main-1);
}
.gnb-home{
  width: 55px; 
  height: 55px; 
  background: linear-gradient(90deg,rgba(124, 176, 255, 1) 0%, rgba(87, 154, 255, 1) 100%); 
  border-radius: 50%; 
  position: absolute; 
  z-index: 2; 
  top: 0; 
  left: 50%; 
  transform: translateX(-50%); 
  text-align: center;
  box-shadow:  0px 3px 12px rgba(91, 156, 255, 0.27);
}
.gnb-home a{
  display: block;
  padding-top: 6px;
}
.gnb-home .bi{
  font-size: 2.6rem;
  color: #fff;
}