@charset "utf-8";

/* =========== 공통 =============== */
body, html{
  overflow-x: hidden;
}

header .inner, footer .inner {
  width: 1216px;
  margin: 0 auto;
}
.container_wrap {
  padding-top: 76px;
}

.btn {
  width: 245px;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--pink);
  line-height: 1.56;
  letter-spacing: 0.48px;
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  text-transform: uppercase;
}

.banner{
  height: 325px;
  position: relative;
}

.banner .text_wrap{
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.banner img{
  height: 100%;
  object-fit: cover;
}

.banner .title{
  font-size: 55px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
}

.banner .text{
  color: #fff;
  margin-top: 20px;
  font-size: 15px;
}

.banner::before{
  content: '';
  position: absolute; top: 0; left: 0; z-index: 1;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.49);
}

/* =========== HEADER =============== */
header {
  position: fixed;
  width: 100%;
  top: 0;
  background: #FFFFFF;
  z-index: 5;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.09);
}
header .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 60px;
}

header .ham_btn{
  display: none;
}

header .logo {
  width: 30%;
}

header .logo a{
  width: 73px;
  height: 23px;
  display: block;
}

header .nav_con{
  width: 60%;
}

header .nav {
  display: flex;
}

header .nav .nav_list h2 a {
  display: block;
  padding: 28px 36px;
  height: 76px;
  font-weight: 600;
  font-size: 17px;
  position: relative;
  cursor: default;
}

header .nav .nav_list h2 a::after{
  content: "";
  position: absolute;
  background: var(--pink);
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0px;
  height: 4px;
  transition: .3s;
}

header .nav .nav_list_con{
  display: none;
  position: absolute;
  left: 0;
  width: 100%;
  border-top: 1px solid #E4E4E4;
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.05);
}

header .nav .nav_list_wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 26px 0;
  background: #FFFFFF;
}
header .nav .sub_menu {
  padding: 0 35px;
}

header .nav .sub_menu h3 a{
  display: block;
  font-weight: 700;
  font-size: 18px;
}

header .nav .sub_list{
  margin-top: 10px;
}

header .nav .sub_list li a {
  display: block;
  line-height: 1.7;
  font-weight: 500;
  font-size: 16px;
  color: #535353;
}

header .link_btn{
  display: none;
}

header .language.mb{
  display: none;
}

header .language{
  position: relative;
}

header .language button{
  font-weight: 600;
  font-size: 17px;
  color: #2e2e2e;
  position: relative;
  padding: 10px;
}

header .language>button::after{
  content: '';
  position: absolute;
  top: 50%;
  right: -7px;
  transform: translateY(-50%);
  border-top: 6px solid #2E2E2E;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  transition: .3s;
}

header .language button.on::after{
  transform: translateY(-50%) rotate(180deg);
}

header .language button img{
  margin-left: 7px;
  width: 20px;
  height: 20px;
}

header .language .another_language{
  position: absolute;
  left: -16px;
  top: 48px;
  display: none;
}

header .language .another_language button{
  min-width: 110px;
  padding: 18px 16px;
  background-color: #fff;
}

header .ham_btn_close{
  display: none;
}


/* =========== FOOTER ============ */
footer {
  background: #FAFBFB;
}
footer .inner {
  padding: 0 42px;
}
/* FOOTER TOP */
footer .footer_top {
  display: flex;
  align-items: center;
  height: 85px;
  border-bottom: 1px solid #E4E4E4;
}
footer .footer_top ul li {
  display: inline-block;
  margin-right: 50px;
}
footer .footer_top ul a {
  font-size: 18px;
  font-weight: 700;
}
footer .footer_top ul li:nth-child(1) a {
  color: var(--pink);
}
/* FOOTER BOTTOM */
footer .footer_bottom .inner {
  padding-top: 33.5px;
  padding-bottom: 48px;
}
footer .bottom_wrap {
  display: flex;
  justify-content: space-between;
}
footer .address{
  font-size: 18px;
  margin-bottom: 45px;
}
footer .address address {
  margin-bottom: 10px;
  font-weight: 500;
  color: #ACACAC;
}
footer .address .company_number {
  font-weight: 500;
  color: #ACACAC;
} 
footer .address .company_number span {
  height: 100%;
  font-weight: 500;
  color: #ACACAC;
}
footer .address .company_number span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 15px;
  margin: 0 18px;
  vertical-align: middle;
  background: #ACACAC;
}
footer .copyright {
  font-weight: 500;
  color: #ACACAC;
}
footer .site_wrap{
  font-size: 18px;
}
footer .site_wrap .family_site {
  width: 280px;
  padding: 14.5px 25px;
  margin-bottom: 13px;
  border: 1px solid #ACACAC;
  font-weight: 500;
  color: #ACACAC;
  background: url('../img/icon/arrow_down.svg') no-repeat center right 25px/13px 7px;
}
footer .site_wrap .sns ul {
  display: flex; align-items: center; justify-content: flex-end;
}
footer .site_wrap .sns li {
  display: inline-block;
  margin-left: 26px;
}
footer .site_wrap .sns li:first-child {
  margin-left: 0;
}
footer .site_wrap .sns a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: #F0F0F0;
  border-radius: 50%;
  border: 1px solid #ACACAC;
}

footer .site_wrap .sns a img{
  width: 20px;
}

/* =========== LINK =============== */
body, html{overflow-y: auto;}
.hidden{overflow-y: hidden;}

/* ani */
@-webkit-keyframes linkAni{
	0% {top: 110px; opacity: 0;}
  100% {top: 0; opacity: 1;}
}
@keyframes linkAni{
	0% {top: 110px; opacity: 0;}
  100% {top: 0; opacity: 1;}
}

.link_pop.on .list:nth-child(1){animation: linkAni 1.0s ease-out 0.5s 1 forwards;}
.link_pop.on .list:nth-child(2){animation: linkAni 1.0s ease-out 0.6s 1 forwards;}
.link_pop.on .list:nth-child(3){animation: linkAni 0.7s ease-out 0.7s 1 forwards;}
.link_pop.on .list:nth-child(4){animation: linkAni 0.8s ease-out 0.8s 1 forwards;}
.link_pop.on .list:nth-child(5){animation: linkAni 0.9s ease-out 0.9s 1 forwards;}
.link_pop.on .list:nth-child(6){animation: linkAni 1.0s ease-out 1.0s 1 forwards;}
.link_pop.on .list:nth-child(7){animation: linkAni 1.1s ease-out 1.1s 1 forwards;}
.link_pop.on .list:nth-child(8){animation: linkAni 1.2s ease-out 1.2s 1 forwards;}

.link_pop{}
.link_pop .link_btn:hover{
  background: #000;
  border: 1px solid #000;
  transition: all .5s;
}
.link_pop .link_btn:hover::after{
  filter: invert(99%) sepia(3%) saturate(156%) hue-rotate(187deg) brightness(118%);
  transition: all .5s;
}
.link_pop .link_btn{
  position: fixed;
  right: 0; bottom: calc(100%/4 - 60px);
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px;
  background: #fff;
  border: 1px solid #707070;
  cursor: pointer;
  z-index: 99;
}
.link_pop .link_btn::after{
  content: '';
  display: block;
  width: 11px; height: 20px;
  background: url('../img/icon/link_arrow_bk.svg') no-repeat center/contain;
  filter: invert(26%) sepia(28%) saturate(17%) hue-rotate(127deg) brightness(92%) contrast(84%);
}
.link_pop .link_btn.on{
  position: absolute;
  left: -60px; right: auto;
}
.link_pop .pop_bg{
  position: fixed;
  top: 0; left: 0; z-index: -1;
  width: 100%; height: 100vh;
  background: rgba(0,0,0,0);
  transition: all .5s;
}
.link_pop .pop_bg.on{
  display: block;
  background: rgba(0, 0, 0, 0.7);
  z-index: 90;
}
.link_pop .pop_area{
  position: fixed;
  top: 0; right: -100%; z-index: 90;
  width: 800px; height: 100vh;
  background: #000;
  transition: all .5s;
}
.link_pop .pop_area.on{
  right: 0;
}

.link_pop .link_box{
  display: flex; flex-wrap: wrap;
}
.link_pop .list{
  position: relative;
  width: 400px;
  height: calc(100vh/4);
  vertical-align: top;
  opacity: 0;
  transition: all .5s;
  overflow: hidden;
}
.link_pop .list a{
  width: 100%; height: 100%;
}
.link_pop .list a:hover::before{
  background: rgba(0, 0, 0, 0);
  transition: all .5s;
}
.link_pop .list a:hover .text_box::after{
  margin-right: 16px;
  transition: all .5s;
}

.link_pop .list a::before{
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.45);
}
.link_pop .text_box{
  position: absolute; left: 0; bottom: 20px;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 0 20px;
}
.link_pop .text{
  font-size: 22px; color: #fff; font-weight: bold;
}
.link_pop .text_box::after{
  content: '';
  display: block;
  width: 8px; height: 16px;
  background: url('../img/icon/link_arrow.svg') no-repeat center/contain;
}
.link_pop .img_box{
  width: 100%; height: 100%;
}
.link_pop .img_box img{
  width: 100%; height: 100%;
  object-fit: cover;
}

.link_pop .mb_top{display: none;}

/* -------------------site map------------------ */
.site_map_pop{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  display: none;
}

.site_map_pop .site_map_bg{
  width: 100%;
  height: 100%;
  display: block;
  background: rgba(0, 0, 0, 0.4);
}

.site_map_pop .site_map_area{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 960px;
  height: 596px;
  background-color: #fff;
  padding: 25px 21px;
}

.site_map_pop .close_btn{
  position: absolute;
  top: 21px;
  right: 21px;
  width: 15px;
  height: 15px;
}

.site_map_title{
  font-size: 20px;
  font-weight: bold;
  padding: 0px 9px 20px;
  border-bottom: 1px solid #2E2E2E;
}

.site_map_con{
  display: flex;
  flex-wrap: wrap;
  width: 810px;
  margin: 0 auto;
  padding-top: 40px;
}

.site_map_con:last-child{
  padding-top: 50px;
}

.site_map_list{
  width: 162px;
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 0.34px;
}

.site_map_list .sub_list_wrap{
  margin-top: 10px;
}

.site_map_list .sub_list_wrap:not(:first-child){
  margin-top: 25px;
  position: relative;
}

.site_map_list .sub_list_wrap:not(:first-child)::after{
  content: "";
  position: absolute;
  top: -13px;
  left: 0;
  width: 26px;
  height: 1px;
  background-color: #E4E4E4;
}

.site_map_list .sub_list{
  font-size: 15px;
  letter-spacing: 0.3px;
  font-weight: 500;
}

.site_map_list .sub_list:not(:last-child){
  margin-bottom: 5px;
}



@media (max-width: 1350px){

  /* =========== 공통 =============== */
  .container_wrap {
    padding-top: calc(100vw * (76 / 1350));
  }

  header .inner, footer .inner {
    width: 100%;
    /* padding: 0 calc(100vw * (25 / 1350)); */
  }

  .btn {
    width: calc(100vw * (245 / 1350));
    height: calc(100vw * (55 / 1350));
    letter-spacing: 0.48px;
    font-size: calc(100vw * (16 / 1350));
  }

  .banner{
    height: calc(100vw * (325 / 1350));
  }

  .banner .title{
      font-size: calc(100vw * (55 / 1350));
  }

  .banner .text{
      font-size: calc(100vw * (15 / 1350));
      margin-top: calc(100vw * (20 / 1350));
  }

  /* =========== HEADER =============== */

  header .inner {
    padding: 0 calc(100vw * (25 / 1350));
  }

  header .logo a{
    width: calc(100vw * (73 / 1350));
    height: calc(100vw * (23 / 1350));
  }

  header .nav .nav_list h2 a {
    padding: calc(100vw * (28 / 1350)) calc(100vw * (36 / 1350));
    height: calc(100vw * (76 / 1350));
    font-size: calc(100vw * (17 / 1350));
  }

  header .nav .nav_list h2 a::after{
    height: 3px;
  }

  header .nav .nav_list_wrap {
    padding: calc(100vw * (26 / 1350)) 0;
  }
  header .nav .sub_menu {
    padding: 0 calc(100vw * (35 / 1350));
  }

  header .nav .sub_menu h3 a{
    font-size: calc(100vw * (18 / 1350));
  }

  header .nav .sub_list{
    margin-top: calc(100vw * (10 / 1350));
  }

  header .nav .sub_list li a {
    font-size: calc(100vw * (16 / 1350));
  }

  header .language button{
    font-size: calc(100vw * (17 / 1350));
    padding: calc(100vw * (10 / 1350));
  }

  header .language>button::after{
    right: calc(100vw * (-7 / 1350));
  }

  header .language button img{
    margin-left: calc(100vw * (7 / 1350));
    width: calc(100vw * (20 / 1350));
    height: calc(100vw * (20 / 1350));
  }

  header .language .another_language{
    left: calc(100vw * (-16 / 1350));
    top: calc(100vw * (48 / 1350));
  }

  header .language .another_language button{
    min-width: calc(100vw * (110 / 1350));
    padding: calc(100vw * (18 / 1350)) calc(100vw * (16 / 1350));
  }

  /* =========== FOOTER ============ */
  footer .inner {
    padding: 0 calc(100vw * (42 / 1350));
  }
  /* FOOTER TOP */
  footer .footer_top {
    height: calc(100vw * (85 / 1350));
  }
  footer .footer_top ul li {
    margin-right: calc(100vw * (50 / 1350));
  }
  footer .footer_top ul li a{
    font-size: calc(100vw * (18 / 1350));
  }
  /* FOOTER BOTTOM */
  footer .footer_bottom .inner {
    padding-top: calc(100vw * (33 / 1350));
    padding-bottom: calc(100vw * (48 / 1350));
  }

  footer .address{
    font-size: calc(100vw * (18 / 1350));
    margin-bottom: calc(100vw * (45 / 1350));
  }
  footer .address address {
    margin-bottom: calc(100vw * (10 / 1350));
  }

  footer .address .company_number span::before {
    height: calc(100vw * (15 / 1350));
    margin: 0 calc(100vw * (18 / 1350));
  }

  footer .site_wrap{
    font-size: calc(100vw * (18 / 1350));
  }

  footer .site_wrap .family_site {
    width: calc(100vw * (280 / 1350));
    padding: calc(100vw * (14 / 1350)) calc(100vw * (25 / 1350));
    margin-bottom: calc(100vw * (13 / 1350));
    background: url('../img/icon/arrow_down.svg') no-repeat center right calc(100vw * (25 / 1350))/calc(100vw * (13 / 1350)) calc(100vw * (7 / 1350));
  }
  footer .site_wrap .sns li {
    margin-left: calc(100vw * (26 / 1350));
  }
  footer .site_wrap .sns a {
    width: calc(100vw * (40 / 1350));
    height: calc(100vw * (40 / 1350));
  }

  footer .site_wrap .sns a img{
    width: calc(100vw * (20 / 1350));
  }

  
  /* =========== LINK =============== */
  .link_pop .link_btn{
    bottom: calc(100%/4 - calc(100vw * (60 / 1350)));
    width: calc(100vw * (60 / 1350)); height: calc(100vw * (60 / 1350));
  }
  .link_pop .link_btn::after{
    width: calc(100vw * (11 / 1350)); height: calc(100vw * (20 / 1350));
  }
  .link_pop .link_btn.on{
    left: calc(100vw * (-60 / 1350));
  }
  .link_pop .pop_area{
    width: calc(100vw * (800 / 1350));
  }

  .link_pop .list{
    width: calc(100vw * (400 / 1350));
  }

  .link_pop .text_box{
    bottom: calc(100vw * (20 / 1350));
    padding: 0 calc(100vw * (20 / 1350));
  }
  .link_pop .text{
    font-size: calc(100vw * (22 / 1350));
  }
  .link_pop .text_box::after{
    width: calc(100vw * (8 / 1350)); height: calc(100vw * (16 / 1350));
  }

  /* -------------------site map------------------ */

.site_map_pop .site_map_area{
  width: calc(100vw * (960 / 1350));
  height: calc(100vw * (596 / 1350));
  padding: calc(100vw * (25 / 1350)) calc(100vw * (21 / 1350));
}

.site_map_pop .close_btn{
  top: calc(100vw * (21 / 1350));
  right: calc(100vw * (21 / 1350));
  width: calc(100vw * (15 / 1350));
  height: calc(100vw * (15 / 1350));
}

.site_map_title{
  font-size: calc(100vw * (20 / 1350));
  padding: 0px calc(100vw * (9 / 1350)) calc(100vw * (20 / 1350));
}

.site_map_con{
  width: calc(100vw * (810 / 1350));
  padding-top: calc(100vw * (40 / 1350));
}

.site_map_con:last-child{
  padding-top: calc(100vw * (50 / 1350));
}

.site_map_list{
  width: calc(100vw * (162 / 1350));
  font-size: calc(100vw * (17 / 1350));
}

.site_map_list .sub_list_wrap{
  margin-top: calc(100vw * (10 / 1350));
}

.site_map_list .sub_list_wrap:not(:first-child){
  margin-top: calc(100vw * (25 / 1350));
}

.site_map_list .sub_list_wrap:not(:first-child)::after{
  top: calc(100vw * (-13 / 1350));
  width: calc(100vw * (26 / 1350));
}

.site_map_list .sub_list{
  font-size: calc(100vw * (15 / 1350));
}

.site_map_list .sub_list:not(:last-child){
  margin-bottom: calc(100vw * (5 / 1350));
}

}

@media(max-width: 1024px) {

  /* =========== 공통 =============== */
  .container_wrap {
    padding-top: calc(100vw * (56 / 428));
  }

  header .inner, footer .inner {
    width: 100%;
    /* padding: 0 calc(100vw * (25 / 428)); */
  }

  .btn {
    width: calc(100vw * (195 / 428));
    height: calc(100vw * (44 / 428));
    letter-spacing: 0;
    font-size: calc(100vw * (12 / 428));
  }

  .banner{
    height: calc(100vw * (193 / 428 ));
  }
  
  .banner .title{
      font-size: calc(100vw * (28 / 428));
  }
  
  .banner .text{
      font-size: calc(100vw * (14 / 428));
      margin-top: calc(100vw * (11 / 428));
  }

  /* =========== HEADER =============== */

  header{ 
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.09);
  }

  header .inner {
    padding: 0 calc(100vw * (25 / 428));
    height: calc(100vw * (56 / 428));
  }

  header .ham_btn{
    display: block;
  }

  header .ham_btn a{
    display: block;
    width: calc(100vw * (24 / 428));
    height: calc(100vw * (20 / 428));
    padding: calc(100vw * (3 / 428)) calc(100vw * (4 / 428));
    position: relative;
  }

  header .logo{
    width: auto;
  }

  header .logo a{
    width: calc(100vw * (91 / 428));
    height: calc(100vw * (28 / 428));
  }

  header .link_btn a{
    width: calc(100vw * (24 / 428));
    height: calc(100vw * (20 / 428));
  }

  header .nav_con{
    position: absolute;
    top: 0;
    left: calc(100vw * (-365 / 428));
    display: block;
    width: calc(100vw * (365 / 428));
    height: 100vh;
    padding: calc(100vw * (19 / 428)) calc(100vw * (32 / 428));
    background-color: #fff;
    z-index: 99;
    transition: .3s;
  }

  header .nav_con.on{
    display: block;
    left: 0;
  }

  header .nav{
    width: 100%;
    flex-direction: column;
    margin-top: calc(100vw * (20 / 428));
  }

  header .nav .nav_list h2 a {
    padding: calc(100vw * (20 / 428)) 0;
    width: 100%;
    height: auto;
    transition: .3s;
    font-size: calc(100vw * (17 / 428));
  }

  header .nav .nav_list h2.on a{
    color: #D50E62;
  }

  header .nav .nav_list h2 a::after{
    display: none;
  }

  header .nav .nav_list h2 a::before,
  header .nav .nav_list:first-child h3 a::after
  {
    content: '';
    position: absolute;
    top: 50%;
    left: auto;
    transform: translateY(-50%);
    right: calc(100vw * (17 / 428));
    transition: .3s;
    background: url('../img/icon/icon_after.svg') no-repeat center / contain;
    width: calc(100vw * (6 / 428));
    height: calc(100vw * (7 / 428));
    filter: invert(0%) sepia(4%) saturate(4843%) hue-rotate(331deg) brightness(73%) contrast(64%);
  }

  header .nav .nav_list h2.on a::before
  {
    transform: translateY(-50%) rotate(180deg);
    filter: invert(16%) sepia(94%) saturate(4838%) hue-rotate(326deg) brightness(85%) contrast(96%);
  }

  header .nav .nav_list_con{
    position: static;
    border-top: none;
    box-shadow: none;
  }

  header .nav .nav_list_wrap {
    flex-direction: column;
    padding-left: calc(100vw * (15 / 428));
  }

  header .nav .sub_menu {
    padding: 0;
  }

  header .nav .sub_menu h3 a{
    font-size: calc(100vw * (15 / 428));
    font-weight: 600;
    padding: calc(100vw * (10 / 428)) 0;
    display: block;
    position: relative;
  }

  header .nav .sub_menu h3.on a::after{
    transform: translateY(-50%) rotate(180deg);
  }

  header .nav .sub_menu:first-of-type h3 a{
    padding-top: 0;
  }

  header .nav .sub_list{
    display: none;
    padding-left: calc(100vw * (15 / 428));
    margin-bottom: calc(100vw * (15 / 428));
  }

  header .nav .sub_list li a {
    font-size: calc(100vw * (15 / 428));
    line-height: initial;
    padding: calc(100vw * (5 / 428));
    font-weight: normal;
  }

  header .link_btn{
    display: block;
  }

  header .language.pc{
    display: none;
  }

  header .language.mb{
    display: block;
  }

  header .language button{
    font-size: calc(100vw * (16 / 428));
    padding: 0;
  }

  header .language>button::after{
    display: none;
  }

  header .language .kor_btn{
    margin-right: calc(100vw * (20 / 428));
  }

  header .language button img{
    margin-left: calc(100vw * (5 / 428));
    width: calc(100vw * (20 / 428));
    height: calc(100vw * (20 / 428));
  }

  header .ham_btn_close{
    display: block;
    position: absolute;
    top: calc(100vw * (22 / 428));
    right: calc(100vw * (40 / 428)); 
    width: calc(100vw * (18 / 428));
    height: calc(100vw * (12 / 428));
  }


  /* =========== FOOTER ============ */
  footer .inner {
    padding: 0 calc(100vw * (37 / 428));
  }
  /* FOOTER TOP */
  footer .footer_top {
    height: calc(100vw * (85 / 428));
  }
  footer .footer_top ul{
    display: flex; align-items: center; justify-content: space-between;
  }
  footer .footer_top ul li {
    margin-right: 0;
  }
  footer .footer_top ul li a{
    font-size: calc(100vw * (18 / 428));
  }
  /* FOOTER BOTTOM */
  footer .footer_bottom .inner {
    padding-top: calc(100vw * (33 / 428));
    padding-bottom: calc(100vw * (20 / 428));
  }
  footer .bottom_wrap{
    flex-direction: column;
    align-items: center;
  }
  footer .address{
    width: 100%;
    font-size: calc(100vw * (14 / 428));
    margin-bottom: calc(100vw * (20 / 428));
  }
  footer .address address {
    margin-bottom: calc(100vw * (14 / 428));
  }
  footer .address .company_number span{
    display: block;
    margin-top: calc(100vw * (14 / 428));
  }

  footer .address .company_number span::before {
    display: none;
  }

  footer .site_wrap{
    width: 100%;
    font-size: calc(100vw * (15 / 428));
  }
  footer .copyright{
    text-align: center;
    margin-top: calc(100vw * (29 / 428));
  }

  footer .site_wrap .family_site {
    width: 100%;
    padding: calc(100vw * (14 / 428)) calc(100vw * (25 / 428));
    margin-bottom: calc(100vw * (20 / 428));
    background: url('../img/icon/arrow_down.svg') no-repeat center right calc(100vw * (25 / 428))/calc(100vw * (13 / 428)) calc(100vw * (7 / 428));
  }
  footer .site_wrap .sns ul{justify-content: center;}
  footer .site_wrap .sns li {
    margin-left: calc(100vw * (30 / 428));
  }
  footer .site_wrap .sns a {
    width: calc(100vw * (40 / 428));
    height: calc(100vw * (40 / 428));
  }

  footer .site_wrap .sns a img{
    width: calc(100vw * (20 / 428));
  }

  /* =========== LINK =============== */
  .link_pop .link_btn{
    display: none;
  }
  .link_pop .pop_area{
    width: 100%;
  }

  .link_pop .link_box{
    height: calc(100vh * (870 / 926));
  }

  .link_pop .list{
    width: calc(100vw/2); height: calc(100%/4);
  }

  .link_pop .text_box{
    bottom: calc(100vw * (20 / 428));
    padding: 0 calc(100vw * (20 / 428));
  }
  .link_pop .text{
    font-size: calc(100vw * (22 / 428));
  }
  .link_pop .text_box::after{
    width: calc(100vw * (8 / 428)); height: calc(100vw * (16 / 428));
  }

  .link_pop .mb_top{
    display: flex; align-items: center; justify-content: flex-end;
    width: 100%; height: calc(100vh * (56 / 926));
    padding: 0 calc(100vw * (25 / 428));
  }
  .link_pop .mb_top .close_btn{
    width: calc(100vw * (16 / 428)); height: calc(100vw * (16 / 428));
    background: url('../img/icon/icon_close.svg') no-repeat center/contain;
  }

    /* -------------------site map------------------ */

.site_map_pop .site_map_area{
  width: calc(100vw * (378 / 428));
  height: 80%;
  padding: calc(100vw * (20 / 428));
  overflow: hidden;
}

.site_map_pop .close_btn{
  top: calc(100vw * (24 / 428));
  right: calc(100vw * (20 / 428));
  width: calc(100vw * (15 / 428));
  height: calc(100vw * (15 / 428));
}

.site_map_title{
  font-size: calc(100vw * (20 / 428));
  padding: 0px 0 calc(100vw * (20 / 428));
}

.site_map{
  padding: calc(100vw * (30 / 428));
  height: 90%;
  overflow-y: auto;
}

.site_map_con{
  width: calc(100vw * (288 / 428));
  height: auto;
  padding-top: 0;
  justify-content: space-between;
}

.site_map_con:last-child{
  padding-top: calc(100vw * (30 / 428));
}

.site_map_list{
  width: calc((100% - calc(100vw * (50 / 428))) / 2);
  font-size: calc(100vw * (17 / 428));
  margin-bottom: calc(100vw * (40 / 428));
}

.site_map_list.wide{
  width: 100%;
}

.site_map_list .sub_list_wrap{
  margin-top: calc(100vw * (10 / 428));
}

.site_map_list .sub_list_wrap:not(:first-child){
  margin-top: calc(100vw * (25 / 428));
}

.site_map_list .sub_list_wrap:not(:first-child)::after{
  top: calc(100vw * (-13 / 428));
  width: calc(100vw * (26 / 428));
}

.site_map_list .sub_list{
  font-size: calc(100vw * (15 / 428));
}

.site_map_list .sub_list:not(:last-child){
  margin-bottom: calc(100vw * (5 / 428));
}


}

@media(hover:hover){
  
  header .nav .nav_list:hover h2 a::after {
    width: 85px;
  }

  @media(max-width: 1350px){

    header .nav .nav_list:hover h2 a::after {
      width: calc(100vw * (85 / 1350));
    }

  }

  @media(max-width: 1024px){

    header .nav .nav_list:hover h2 a::after {
      width: auto;
      display: block;
    }

  }

}