/***main css ***/
body {
  font-family: 'Nanum Barun Gothic', sans-serif;
}



.mainpage{height:1000px; width:100%; background:url(/images/mainbg.jpg)no-repeat center/cover;position: relative}
.main_text{position:absolute; top:240px; left:50%; transform: translateX(-50%)}

.btn{position: absolute; left: 50%; transform: translateX(-50%); top: 820px;}
.google_btn{margin-right:50px}




.part1{height:850px; background-color:#95b4ea; position: relative}
.part1_text{position:absolute; top:154px; left:50%; transform: translateX(-50%)}
.part2{position:relative; background-color: white;}
.part2_text{padding:102px 90px; text-align: center}



.sub_page2{height:1800px; background:url(/images/sub_page2bg.jpg)no-repeat center / cover}
.sub_page2_text{text-align: center; padding-top:130px}


.sub_page3{height:920px; background-color:#718ecf;}
.sub_page3_text{padding-top:80px; text-align: center}
.service_area_intro{
  display:flex;
  justify-content:space-between;
  align-items:stretch;
  gap:36px;
  width:1120px;
  margin:0 auto;
  padding:40px;
  border-radius:20px;
  background:rgba(255,255,255,0.95);
  box-sizing:border-box;
}
.service_area_copy{
  width:44%;
  text-align:left;
  color:#22355f;
}
.service_area_copy h3{
  margin:0 0 18px;
  font-size:42px;
  line-height:1.2;
  color:#1c2f57;
}
.service_area_region{
  margin:0 0 20px;
  font-size:44px;
  font-weight:700;
  color:#2456b7;
  line-height:1.25;
}
.service_area_copy p{
  margin:0;
  font-size:18px;
  line-height:1.8;
}
.service_area_map{
  width:56%;
}
.service_area_map iframe{
  width:100%;
  height:420px;
  border:0;
  border-radius:14px;
  box-shadow:0 12px 28px rgba(16,35,73,0.18);
}

@media screen and (max-width: 1280px){
  .sub_page3{height:auto; padding:70px 0;}
  .sub_page3_text{padding-top:0;}
  .service_area_intro{
    width:92%;
    padding:28px;
    gap:24px;
  }
  .service_area_copy h3{font-size:34px;}
  .service_area_region{font-size:34px;}
}

@media screen and (max-width: 900px){
  .service_area_intro{
    flex-direction:column;
  }
  .service_area_copy,
  .service_area_map{
    width:100%;
  }
  .service_area_map iframe{
    height:320px;
  }
  .tab{
    width:95%;
  }
  .tab button{
    width:33.33%;
    font-size:14px;
    padding:12px 8px;
  }
  .cloth_text{
    width:95%;
    border-radius:0 0 14px 14px;
  }
  .cloth_text_in{
    padding:12px 12px;
  }
  .cloth_text_in > div{
    font-size:14px;
  }
  .aa,.bb{
    width:38%;
  }
  .aa_mo,.bb_mo{
    width:12%;
    font-size:13px;
  }
}


.cloth_text{
  background-color:#fff;
  width:1280px;
  margin:0 auto;
  border:1px solid #d9e2f5;
  border-top:0;
  border-radius:0 0 18px 18px;
  box-shadow:0 14px 30px rgba(40,67,120,0.1);
  overflow:hidden;
}
.cloth_text_in{
  width:100%;
  margin:0;
  padding:16px 22px;
  border-bottom:1px solid #edf1fa;
  box-sizing:border-box;
  display:grid;
  grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1fr) 140px;
  column-gap:12px;
  align-items:stretch;
}
.cloth_text_in:last-child{border-bottom:0;}
.cloth_text_in > div{
  color:#24375f;
  line-height:1.45;
  font-size:17px;
  padding:12px 10px;
  box-sizing:border-box;
  border-radius:10px;
  min-height:56px;
  display:flex;
  align-items:center;
}
.aa{
  width:auto;
  font-weight:600;
  background:#f8fbff;
}
.aa_mo{
  width:auto;
  justify-content:flex-end;
  color:#1d4eb0;
  font-weight:700;
  background:#eef4ff;
  border:1px solid #dbe8ff;
  box-sizing:border-box;
}
.bb{
  width:auto;
  padding-left:12px;
  margin-left:4px;
  border-left:2px solid #dbe6fb;
  font-weight:600;
  background:#f8fbff;
  box-sizing:border-box;
}
.bb_mo{
  width:auto;
  justify-content:flex-end;
  color:#1d4eb0;
  font-weight:700;
  background:#eef4ff;
  border:1px solid #dbe8ff;
  box-sizing:border-box;
}
.bb:empty,
.bb_mo:empty{
  display:none;
}
.cloth_text_in:has(.bb:empty):has(.bb_mo:empty){
  grid-template-columns:minmax(0, 1fr) 140px;
}

.sub_page4_title{text-align: center; font-size: 3.5em; padding-top: 2em; color:#1d2f52;}
.sub_page4_title > p{margin: 0; line-height: 1.4em; font-size: 0.4em; padding:2.2em 0 2.6em; color:#5470a7;}


.sub_page5_title{font-size:60px; text-align: center; color:black; margin-top:100px; line-height: 95px}
.sub_page5_title > p{font-size:20px; margin-top:33px; line-height: 30px; margin-bottom:64px}
.sub_page5_text{width:1280px; margin:0 auto; position: relative}




/*bnbg*/

.bnbg img{width:100%; height: auto;margin-top: 200px}




/* Style the tab */
.tab {
    overflow: hidden;
    display:grid;
    grid-template-columns:repeat(13, minmax(0, 1fr));
    gap:0;
}

/* Style the buttons inside the tab */
.tab button {
    background-color:#f1f5ff;
    border: 1px solid #d3def6;
    outline: none;
    cursor: pointer;
    padding: 14px 8px;
    transition: 0.3s;
    font-size: 15px;
	font-family: 'Nanum Barun Gothic', sans-serif;
    color:#3a5588;
    font-weight:600;
    width:100%;
    margin:0;
}
.tab{
    display:grid;
    grid-template-columns:repeat(13, minmax(0, 1fr));
    width:80em;
    margin:0 auto;
    border-radius:18px 18px 0 0;
    overflow:hidden;
    box-shadow:0 10px 24px rgba(40,67,120,0.08);
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #8ba5dd; color: white;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #718ecf; color: white;
}

.sub_page4_text{
  padding-bottom:80px;
}

/*자주묻는 질문*/
.sub_page5_text{width:1280px; margin:0 auto;}
.tab2{width:100%; line-height:50px; background-color: #7babfe; }

/* Style the buttons inside the tab */
.tab2 button.category {
    background-color:#7babfe;    
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    color:white;
    float:left;
    margin-left: 2px;
	font-family: 'Nanum Barun Gothic', sans-serif;
    
}

/* Change background color of buttons on hover */
.tab2 button:hover {
    background-color: #fff;
    color:#7babfe;   
    margin-left: 2px;
    margin-top: 1px;    
    font-weight: bold;
}

/* Create an active/current tablink class */
.tab2 button.active2 { background-color: #fff;
    color:#7babfe;
    margin-top:1px;    

}
.tab2 button:first-child .active2{margin-left:1px}


/* Style the tab content */
.tabcontent2 {
    padding: 6px 12px;
    border: 1px solid #ccc;
    border: 2px solid #7babfe;
    border-top: none;
	font-family: 'Nanum Barun Gothic', sans-serif;
}

.active{background-color:aqua}


/*아코디언*/
.accordion:nth-child(1){margin-top:10px}
.accordion {
    background-color: white;
    color: #000;
    cursor: pointer;
    padding: 15px 0 0 5px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    text-align: center;
	line-height: 1em;
	font-family: 'Nanum Barun Gothic', sans-serif;
    
    
}
.accordion > span{float:right; color:#4d76b6; font-weight: bold;}
.accordion:after{content: ""; display: block; clear: both}

.active2, .accordion:hover {
    font-weight: bold
}

.active{font-weight:bold;}

.panel {
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden;
    text-align: center;
    color:#5577c4;
    margin-top:20px;
	line-height:1.5em;
	font-weight:normal;
        
}
.panel > p{line-height:1.5em}

/* 가격표 가독성 보완 (기존 미디어쿼리 우선순위 문제 대응) */
@media screen and (max-width: 900px){
  .cloth_text_in{
    padding:12px 10px;
    grid-template-columns: minmax(0, 1fr) 86px minmax(0, 1fr) 86px;
    column-gap:8px;
  }
  .cloth_text_in > div{
    font-size:14px;
    min-height:48px;
    padding:8px 6px;
  }
  .bb{
    margin-left:0;
    padding-left:8px;
  }
  .aa_mo,.bb_mo{
    font-size:13px;
  }
  .cloth_text_in:has(.bb:empty):has(.bb_mo:empty){
    grid-template-columns:minmax(0, 1fr) 86px;
  }
}