/* bootstrap icons */
@import url(https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css);
:root {
  /* font-family */
  --font-size: 16px;
  --kr-font: 'Noto Sans KR', sans-serif;

  /* color */
  --main_Bu: #0067ac;
  --main_LBu: #e2f4f8;
  --main_Gr: #82c34f;
  --main_bk: #35352d;
  --sub_bk: #63635a;
  --sub_Lbk: #939398;
  --sub_gr: #f0f0f0;
}

/* header */
header{
  height: 70px; display: flex;
  align-items: center;
}
.logo{margin-left: 2rem;}
.logo img{width: 260px;}
.main_menu ul{display: flex;}
.main_menu ul li{
  font-size: 18px; margin-left: 73px;
  color: var(--main_Bu); position: relative;
}
.menu_nav{margin-left: auto; font-weight: 400; }
.menu_nav:hover{font-weight: bold;}
.main_menu ul li::before{
  content: '';
  position: absolute;
  width: 0; height: 5px;
  background-color: var(--main_Bu);
  left: 50%; top: 200%;
  transform: translateX(-50%); transition: .3s;
}
.main_menu ul li:hover::before{width: 100%;}
header:hover{box-shadow: 0 2px 5px var(--sub_Lbk);}
.main_icons{display: flex; margin-left: auto;}
.main_icons div{margin-right: 20px;}
.number{
  border: 2px solid var(--main_Bu);
  padding: 7px 10px; border-radius: 50px;
  display: flex; justify-content: center;
  align-items: center;
}
.number p{color: var(--main_Bu); font-size: 0.9rem; font-weight: 400;}
.lang_icon{
  border: 2px solid var(--main_Bu);
  padding: 7px 10px; border-radius: 50px;
  display: flex; align-items: center;
  justify-content: center;
}
.lang a{text-decoration: none;}
.lang a i {
  font-size: 20px;
  color: var(--main_Bu);
  display: flex; align-items: center;
}
.fa-caret-down{font-size: 13px;} 
.fa-solid {padding: 0 5px;}
.lang_list {
  width: 60px; padding: 15px;
  position: fixed; text-align: center;
  right: 80px; top: 53px;
  display: none; border-radius: 30%;
  border: 2px solid var(--main_Bu);
  background-color: #fff;
}
.lang_list.active {display: block;}
.lang_list a{
  display: block; margin-bottom: 10px;
  text-decoration: none;
}
.lang_list a:hover{color: var(--main_Bu); font-weight: bold;}
.ham a{  
  border: 2px solid var(--main_Bu);
  padding: 7px 10px; border-radius: 50px;
  text-decoration: none;
  display: flex; align-items: center;}
.ham a i{ font-size: 20px;
  color: var(--main_Bu);}

  /* sub_wrap */
.sub_after1{
  position: absolute;
  top: 30px; left: 49%;
  width: 2px; height: 430px;
  background-color: var(--sub_gr);
}
.sub_after2{
  position: absolute;
  top: 30px; left: 74%;
  width: 2px; height: 430px;
  background-color: var(--sub_gr);
}
.sub_menu{
  display: none;
  position: absolute; z-index: 100;
  left: 0; top: 80;
  width: 100%;
  background-color: #fff;
}
.submenu_content{
  width: 100%;
  margin: auto; display: flex;
}
.submenu_content > div{
  display: grid;
  grid-template-columns: auto auto auto;
}
.submenu_content > div > img{width: 450px; height: 500px;}
.submenu_content > div > h3{margin-top: 1.2rem;}
.submenu_content > div > ul > li{cursor: pointer;}
.Residency, .Support, .Business, .Disclosure, .About{
  width: 100%;
  display: flex; justify-content: space-around;
  margin-top: 30px;
}
.submenu_content  h3{
  border: 1px solid var(--sub_Lbk);
  border-radius: 5px;
  width: 260px; height: 50px;
  font-size: 18px;
  font-weight: bold; text-align: left;
  line-height: 50px; color: var(--sub_bk);
  padding: 0 0 0 20px; background-color: #ffffff;
  margin-bottom: 15px; transition: 0.4s;
}
.submenu_content  h3:hover{
  border: 1px solid var(--main_Bu);
  color: var(--main_Bu);
  background-color: var(--sub_gr);
  cursor: pointer;
}
.submenu_content a{
  text-decoration: none;
  transition: 0.4s;
}
.submenu_content a::before{
    content: '';
    display: inline-block;
    width: 5px; height: 5px;
    background-color: var(--sub_Lbk); 
    border-radius: 50%; 
    margin-right: 10px; margin-bottom: 3px;
  }
.submenu_content a:hover{
  color: var(--main_Bu);
  font-weight: bold;
}
.submenu_content a:hover::before{
  background-color: var(--main_Bu);
}
.submenu_content li{
  font-size: 16px;
  margin-bottom: 13px;
  margin-left: 15px;
}
.submenu_content i{margin-left: 160px;}

/* accordion */
.accordion{display: none;}

/* banner */
.banner{
  width: 100%;
  height: 300px;
  background: url(../images/sub_banner.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin-bottom: 50px;
}
/* main */
.title_inner{
  width: 1200px;
  margin: auto;
}
.title_box{}
.title_inner{}
.titles{
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.title{}
.title h2{
  font-size: 32px;
  font-weight: bold;
  color: var(--main_Bu);
}
.title_btn{
}
.title_btn i{
  margin-right: 10px;
  padding: 8px;
  border-radius: 50%;
  background-color: var(--sub_gr);
  color: var(--main_bk);
}
.title_menu{
  color: var(--sub_Lbk);
  margin-bottom: 50px;
}
.title_menu a{
  margin-right: 10px;
  text-decoration: none;
}
.title_menu a i{
  margin-right: 10px;
}
.button_box{}
.button_head{
  display: flex;
  width: 100%;
  height: 50px;
  margin-bottom: 40px;
}
.hongbo{
  width: 400px;
  border-top: 1px solid var(--main_Bu);
  border-left: 1px solid var(--main_Bu);
  text-align: center;
}
.hongbo a{
  display: block;
  width: 400px;
  text-decoration: none;
  color: var(--main_Bu);
  margin-top: 12px;
  font-weight: bold;
}
.hongbo i{}
.hongbo2{
  width: 100%;
  background-color: var(--main_Bu);
}
.hongbo3{
  
  display: flex;
  justify-content: space-between;
}
.page{
  color: var(--main_bk);
}
.page p{}
.page p span{
  color: var(--main_Bu);
  font-weight: bold;
}
.btn{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
}
.btn select{
  padding: 5px 10px;
  border-color: var(--sub_gr);
  color: var(--sub_Lbk);
  border-radius: 5px;
}
.hongbo3 input{
  padding: 6px 10px;
  border: none
  color: var(--sub_Lbk);
  border: 1px solid var(--sub_gr);
    border-radius: 5px;
}
.input_bitton, .select_butoon{
  padding: 5px 20px;
  border: none;
  color: #fff;
  border: 1px solid var(--sub_gr);
  background-color: var(--main_Bu);
  border-radius: 5px;
  cursor: pointer;
}

/* pagination */
.table_inner{
  width: 1200px;
  margin: auto;
  margin-bottom: 60px;
}
.pagination{
  color: var(--main_Bu);
  display: flex;
  margin-bottom: 1rem;
  padding: 1rem;
  justify-content: center;
  align-items: center;
}
.col1{width: 5%;}
.col2{width: 45%;}
.col3{width: 10%;}
.col4{width: 30%;}
.col5{width: 10%;}
#numbers{
  display: flex;
  margin: 0 2rem;
}
#numbers li{
  list-style: none;
}
#numbers li a{
  color: var(--sub_Lbk);

  text-decoration: none;
  opacity: .7; padding: 0.5rem;
}
#numbers li a:hover{
  opacity: 1;
}
#numbers li a.active{
  color: var(--main_Bu);
  font-weight: bold;
}

#my-table{
  width: 100%; margin: auto;
  border-top: 1px solid var(--main_bk);
}
table {
  border-collapse: collapse; 
}
th{
  border-bottom: 3px solid var(--sub_Lbk);
}
td{
  border-bottom: 1px solid var(--sub_gr);}
td, th{
  text-align: center;
  padding: 1.3rem;
  cursor: pointer;
}
td:hover, th:hover{
  color: var(--main_Bu);
}
th{
  background-color: var(--main_LBu);
  color: var(--main_bk);
  font-weight: bold;
}
.pagination i{cursor: pointer;}

/* 만족도조사 */
.Feedback{
  width: 1200px; margin: auto;
}
.feedback_inner{
  width: 100%;
  height: 200px;
  padding: 30px;
  background-color: var(--sub_gr);
}
.feedback_inner h2{
  font-weight: bold;
  margin-bottom: 30px;
  font-size: 1.2rem;
}
.feedback_inner h2 i{
  margin-right: 10px;
  font-size: 1.2rem;
}
.feedback_inner label{
  margin-right: 20px;
  font-size: 1.2rem;
}
.feedback_inner input[type='text']{
  margin-top: 30px;
  border: none;
  width: 700px; height: 30px;
  font-size: 1.2rem;
  padding: 5px;
}
.feedback_inner button{
  margin-left: 20px;
  padding: 10px 20px;
  background-color: var(--main_Bu);
  color: #fff;
  border: none;
  cursor: pointer;
}
.feedback_p{
  display: flex;
}
.feedback_inner p{margin-right: 30px;}
.feedback_inner p span{
  font-weight: bold;
}
/* footer */
.footer{
  width: 100%; height: 330px;
  border: 1px solid #000;
  background-color: var(--main_Bu);
  margin-top: 200px;
}
.footer_inner{
  width: 1200px; margin: auto;
}
.footer_link{margin-top: 40px;}
.footer_link a{
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  margin-right: 20px;
}
.site{
  margin-top: 60px;
  text-align: right;
}
#site_select{
  width: 170px; height: 30px;
  border-radius: 5px;
}
.footer_main{
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
}
.footer_logo img{width: 240px;}
.footer_result{
  line-height: 20px;
  color: #fff;
  font-size: 15px;
}
.footer_result p i{color: #fff;}
.footer_number h3{
  font-size: 30px;
  font-weight: 600;
  color: var(--main_Gr);
  margin-bottom: 10px;
}
.footer_number p{
  font-size: 13px;
  color: #fff;
  line-height: 15 px;
}
#back {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100vh;
  background: rgba(0, 0, 0, 0.336);
  display: none; z-index: 1000;
}