@charset "UTF-8";
@import "font.css";

* {margin: 0; padding: 0; /*letter-spacing: -.04em; line-height: 1;*/ -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-print-color-adjust: exact !important; print-color-adjust: exact; page-break-after: avoid; page-break-before: avoid; page-break-inside: avoid; break-inside: avoid-page; break-before: avoid-page; break-after: avoid-page; word-break: keep-all;}
html {width: 100%; height: 100%; font-size: 0.052vw;}
body {position: relative; font-family: "Pretendard", sans-serif; font-weight:normal; font-size: max(16rem, 14px); color: #000; line-height: 150%; height: 100%; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; overflow-x: hidden;}
body, div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, form, fieldset, table, tr, th, td {margin: 0; padding: 0; font-weight: normal;}
ul, ol, li {list-style: none;}
img, fieldset {border: none; vertical-align: top;}
legend, caption {overflow: hidden; position: absolute; border: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px);}
textarea, button {vertical-align: middle;}
option {padding: 10px;}
input[type="radio"], input[type="checkbox"] {border: 0; padding: 0; /* height: auto; */ -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
select {padding: 5rem; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
textarea {padding: 20rem; vertical-align: middle; background: #fff; border: 1px solid #D9D9D9; font-family: "Pretendard", sans-serif; color: #000; letter-spacing: -.04rem; font-size: max(16rem, 12px); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-radius: 0; resize: vertical;}
a {text-decoration: none; color: #141415;}
a:hover, a:focus, a:active {text-decoration: none;}
table {border-collapse: collapse; width: 100%;}
button {background: none; border: none; padding: 0; margin: 0; cursor: pointer; overflow: visible; white-space: nowrap; font-size: max(16rem, 12px); font-family: "Pretendard", sans-serif;}
button:active {outline: none;}
button::-moz-focus-inner {padding: 0; border: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block;}
strong, b {font-family: "Pretendard", sans-serif;}
th {font-family: "Pretendard", sans-serif;}
:root {
  --brandColor:#003087;
  --brandColorGreen:#008233; 
}
input:focus, select:focus, option:focus, button:focus{
	outline: none;
}
input[type="text"]{ font-family: "Pretendard", sans-serif;}
textarea:focus {border-color: #555 ;outline: none;}
textarea::placeholder {color: #555;}
textarea:disabled {border: 1px dashed #555;}

html.scl-lock, body.scl-lock {overflow: hidden;}

.only-mo {display: none;}
.only-ta {display: none;}
.only-pc {display: block;}
.ver-pc {display: block !important;}
.ver-mo {display: none !important;}

.ac {text-align: center !important;}
.al {text-align: left !important;}
.ar {text-align: right !important;}

/*flex*/
.flex {display: flex;}
.flex-end {display: flex; justify-content: flex-end !important;}

@media screen and (max-width: 1024px) {
  html {font-size: 0.13vw;}
  body {font-size: max(14rem, 14px);}
  .only-pc {display: none;}
  .only-ta {display: block;}
  .ver-pc {display: none !important;}
  .ver-mo {display: block !important;}
}
@media screen and (max-width: 600px) {
  html {font-size: 0.256vw;} 
  .only-ta {display: none;}
  .only-mo {display: block !important;}
} 

/* HDHyundai - fonts */ 
.f-hd-dp1{ font-size:64rem; line-height:130%; letter-spacing:-1.28rem; font-family: "HDfont"; }
.f-hd-dp2{ font-size:56rem; line-height:130%; letter-spacing:-1.12rem; font-family: "HDfont"; }
.f-hd-t1{ font-size:44rem; line-height:130%; letter-spacing:-0.88rem; font-family: "HDfont"; }
.f-hd-t2{ font-size:36rem; line-height:140%; letter-spacing:-0.72rem; font-family: "HDfont"; }

/* Pretendard - fonts */ 
.f-dp1{ font-size:96rem; line-height:130%; font-weight:700; letter-spacing:-1.92rem; }
.f-dp2{ font-size:64rem; line-height:130%; font-weight:700; letter-spacing:-1.28rem; }
.f-dp3{ font-size:56rem; line-height:130%; font-weight:700; letter-spacing:-1.12rem; }

.f-t1{ font-size:44rem; line-height:140%; font-weight:700; letter-spacing:-0.88rem; }
.f-t2{ font-size:36rem; line-height:140%; font-weight:700; letter-spacing:-0.72rem; }
.f-t3{ font-size:32rem; line-height:130%; font-weight:700; letter-spacing:-0.64rem; }

.f-h1{ font-size:28rem; line-height:150%; font-weight:700; letter-spacing:-0.56rem; }
.f-h2{ font-size:24rem; line-height:150%; font-weight:700; letter-spacing:-0.48rem; }
.f-h3{ font-size:20rem; line-height:150%; font-weight:500; letter-spacing:-0.4rem; }

.f-b1{ font-size:24rem; line-height:150%; letter-spacing:-0.48rem; }
.f-b2{ font-size:20rem; line-height:160%; letter-spacing:-0.4rem; }
.f-b3{ font-size:18rem; line-height:150%; letter-spacing:-0.36rem; }
.f-b4{ font-size:16rem; line-height:160%; letter-spacing:-0.32rem; }

.f-d1{ font-size:14rem; line-height:160%; letter-spacing:-0.28rem; }
.f-d2{ font-size:12rem; line-height:160%; letter-spacing:-0.24rem; }

.f-m1{ font-size:18rem; line-height:110%; font-weight:700; letter-spacing:-0.36rem; }
.f-m2{ font-size:14rem; line-height:110%; font-weight:500; letter-spacing:-0.28rem; }

.f-btn1{ font-size:16rem; line-height:110%; font-weight:500; letter-spacing:-0.32rem; }

.f-bold{ font-weight:700; }
.f-mid{ font-weight:500; }

 @media screen and (max-width : 1024px){
  /* HDHyundai - fonts */ 
  .f-hd-dp1{ font-size:36rem; letter-spacing:-0.72rem; }
  .f-hd-dp2{ font-size:28rem; line-height:140%; letter-spacing:-0.56rem; }
  .f-hd-t1{ font-size:24rem; line-height:140%; letter-spacing:-0.48rem; }
  .f-hd-t2{ font-size:24rem; line-height:140%; letter-spacing:-0.48rem; }

  /* Pretendard - fonts */ 
  .f-dp1{ font-size:48rem; letter-spacing:-0.96rem; }
  .f-dp2{ font-size:32rem; letter-spacing:-0.64rem; }
  .f-dp3{ font-size:28rem; letter-spacing:-0.56rem; }

  .f-t1{ font-size:24rem; letter-spacing:-0.48rem; }
  .f-t2{ font-size:20rem; letter-spacing:-0.4rem; }
  .f-t3{ font-size:18rem; letter-spacing:-0.36rem; }

  .f-h1{ font-size:24rem; letter-spacing:-0.48rem; }
  .f-h2{ font-size:20rem; letter-spacing:-0.4rem; }
  .f-h3{ font-size:18rem; letter-spacing:-0.36rem; }

  .f-b1{ font-size:20rem; letter-spacing:-0.4rem; }
  .f-b2{ font-size:18rem; letter-spacing:-0.36rem; }
  .f-b3{ font-size:16rem; letter-spacing:-0.32rem; }
  .f-b4{ font-size:15rem; letter-spacing:-0.3rem; }

  .f-d1{ font-size:13rem; letter-spacing:-0.26rem; }
  .f-d2{ font-size:12rem; letter-spacing:-0.24rem; }

  .f-m1{ font-size:16rem; letter-spacing:-0.32rem; }
  .f-m2{ font-size:13rem; letter-spacing:-0.26rem; }

  .f-btn1{ font-size:15rem; letter-spacing:-0.3rem; }
}

/*margin*/
.mt16 {margin-top: 16rem;}
.mt24 {margin-top: 24rem;}

/*padding*/
.pl15 {padding-left: 15rem;}
.pl30 {padding-left: 30rem;}
.pl50 {padding-left: 50rem;}

.pb0{ padding-bottom:0 !important; }

/* header */
html.scl-lock, body.scl-lock {overflow: hidden;}
 
header {position: fixed; left: 0; top: 0; width: 100%; height: 100rem; background-color: #fff; transition: top .4s ease, background-color .4s ease; z-index:1000; }
header.hide {top: -100rem;}
header .logo {position: absolute; top: 50%; left: 130rem; transform: translateY(-50%); z-index: 10; width: 165rem; height: 28rem;}
header .logo a {display: block; height: 100%; background: url("../images/logo.svg") no-repeat center center / 165rem auto;}
/* header .inner-dimd {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); z-index: 1;} */
header nav {position: relative; width: 100%; height: 100%; text-align: center; z-index: 2;}
header nav.show {left: 0;}
header .for-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; /*background: #fff;*/ overflow: hidden; transition: all .4s ease; transition-delay: 0.4s; border-bottom:1px solid #fff; overflow: hidden;}
header .for-bg.hide-bg {transition: none;}
header .gnb-w {display: inline-block; text-align: center;}
header .gnb {display: flex; height: 100rem; }
header .gnb a {display: block; color: #000;}
header .gnb > li {display: inline-block; position: relative; min-width: 110rem; height: 100%;}
header .gnb > li .one-link {position: relative; display: flex; justify-content: center; align-items: center; padding: 0 24rem; height: 100rem; white-space: nowrap; font-size: max(18rem, 14px); font-weight:700; } 
header .gnb > li .two-depth { display: none; position: absolute; top: calc(100% - 1px); padding-bottom: 20rem; width: 100%; height: auto; overflow: hidden; background-color: transparent; border:1px solid #E4E4E4; border-top:0;}  
header .gnb > li .two-depth > li .two-link { display: flex; align-items: center; padding: 14rem 16rem; font-size: max(16rem, 13px); color: #000; font-weight:700; letter-spacing:-0.32rem; transition: color .3s; text-align:left; white-space: nowrap; }
header .gnb > li .two-depth > li .two-link:hover {color: #008233;} 
header .gnb > li .two-depth > li .two-link .arrow{ width:16rem; height:16rem; background:url('../images/icon-link-external.svg') no-repeat center / cover; }

header .utils {display: flex; align-items: center; position: absolute; top: 50%; right: 130rem; transform: translateY(-50%); z-index: 3;} 

header .family-site-btn{ position:relative; }
header .family-site-btn > a{ position:relative; display:inline-block; padding-right:28rem; font-size:max(16rem, 12px); line-height:160%; color:#000; letter-spacing:-0.32rem; font-weight:700; }
header .family-site-btn > a::before{ content:''; position:absolute; right:0; top:50%; width:20rem; height:20rem; background:#1A1A1A url('../images/icon-familysite-plus.svg') no-repeat center / cover; transform: translateY(-50%); border-radius:50%; transition: all 0.4s; transform-origin: center; }

/* Type3 */
header.type3 .for-bg {overflow: visible;}
header.type3 .gnb > li .two-depth {left: 50%; transform: translateX(-50%); padding: 24rem; width:150%; min-width: 176rem; background: #fff; border-radius: 0 0 16rem 16rem; }
header.type3 .gnb > li.on {z-index: 1;}

header .btn-menu-mo { display: none; }

/* white */
header.wht:not(:hover){ background: transparent; }
header.wht:not(:hover) .for-bg{ border:none; }
header.wht:not(:hover) .logo a{ background-image: url('../images/logo-white.svg'); }
header.wht:not(:hover) .gnb > li .one-link{ color:#fff; }
header.wht:not(:hover) .family-site-btn > a{ color:#fff;}
header.wht:not(:hover) .family-site-btn > a::before{ background-color:#fff; background-image:url('../images/icon-familysite-plus-black.svg') }

@media screen and (min-width: 1023px) {
  
  header .con-menu-mo{ display:none !important; }
  header .family-site-btn > a:hover::before{ transform: translateY(-50%) rotate(180deg);}
 
  header:hover .for-bg, header.show .for-bg, header.hide .for-bg{ border-color: #E4E4E4; transition-delay:0s; } 

}

@media screen and (max-width: 1024px) { 
  header {height: 70rem;}
  header.show{ border-bottom:1px solid #E4E4E4;}
  header .logo {left: 20rem; width: 135rem; height: 23rem;}
  header .logo a{ background-size:135rem auto; }
  header .utils {display: none;}

  header .btn-menu-mo {display: block; position:absolute; right: 20rem; top:20rem; width: 30rem; height: 30rem;}
  header .btn-menu-mo::before{ content:''; position:absolute; left:3rem; top:10rem; width:24rem; height:2px; border-radius:2rem; background:#000; transition: all 0.2s ease-in-out;}
  header .btn-menu-mo::after{ content:''; position:absolute; left:3rem; top:17rem; width:24rem; height:2px; border-radius:2rem; background:#000; transition: all 0.2s ease-in-out}
  header .btn-menu-mo.active::before{ top:14rem; transform: rotate(45deg);}
  header .btn-menu-mo.active::after{ top:14rem; transform: rotate(-45deg);}
  header nav { display:none; text-align:left; }

  header .con-menu-mo { position: fixed; top: 70rem; left: 0; padding-top:40rem; width: 100%; height: calc(100% - 70rem); background-color: #fff !important; z-index: 10; overflow-y:auto; box-sizing:border-box; }
  /* header .con-menu-mo .inner{ display:flex; flex-direction: column; justify-content: space-between; height:100%; } */
  header .con-menu-mo .m-gnb{ padding-bottom:64rem; }
  header .con-menu-mo .m-gnb .one-dep{ position:relative; display:block; padding:13rem 35rem 13rem 16rem; font-size:18rem; line-height:150%; color:#000; letter-spacing:-0.36rem; font-weight:700; }
  header .con-menu-mo .m-gnb > li:has(.two-dep) .one-dep::before{ content:''; position:absolute; right:16rem; top:50%; margin-top:-8rem; width:16rem; height:16rem; background:url('../images/icon-m-gnb-arrow.svg') no-repeat center / cover; transition: all 0.4s ease-in-out;}
  header .con-menu-mo .m-gnb > li:has(.two-dep) .one-dep.active::before{ transform: rotate(180deg);}
  header .con-menu-mo .m-gnb .two-dep{ display:none; padding:24rem 16rem; background:#F5F5F5; }
  header .con-menu-mo .m-gnb .two-dep a{ position:relative; display: block; padding:15rem 40rem 15rem 16rem; font-size:16rem; line-height:110%; color:#000; font-weight:700; } 

  header .m-menu-foot{ position:fixed; left:0; bottom:0; padding:20rem 16rem; width:100%; border-top:1px solid #E5E5E5; background:#fff; }
  header .m-menu-foot .family-site-btn > a{ font-size:15rem; color:#1A1A1A; letter-spacing:-0.3rem; } 

  /* white */
  header.wht{ background:transparent}
  header.wht .logo a{ background-image: url('../images/logo-white.svg'); }
  header.wht .btn-menu-mo::before, header.wht .btn-menu-mo::after{ background:#fff; }

  header.wht:has(.btn-menu-mo.active){ background: #fff;}
  header.wht:has(.btn-menu-mo.active) .logo a{ background-image: url('../images/logo.svg'); }
  header.wht:has(.btn-menu-mo.active) .btn-menu-mo::before, header.wht:has(.btn-menu-mo.active) .btn-menu-mo::after{ background:#000; }
}

/* family Site */
.family-site { display:none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); z-index: 123456789;}
.family-site .pop-wrap {position: absolute; top: 0; right: -800rem; width: 700rem; height: 100%; background-color: #fff; transition: right .6s ease;}
.family-site.on .pop-wrap {right: 0;}

.family-site .pop-wrap {display: flex; flex-direction: column;}
.family-site .pop-wrap .pop-head { padding: 50rem; padding-right: 90rem; padding-bottom: 0; margin-bottom: 40rem;}
.family-site .pop-wrap .btn-pop-close {position: absolute; top: 53rem; right: 50rem; width: 30rem; height: 30rem; background: url('../images/icon-family-close.svg') no-repeat center center / 100% auto;}

.family-site .pop-wrap .pop-cont {height: calc(100% - 126rem); padding: 0 40rem 0 50rem;}
.family-site .pop-wrap .pop-cont .scroll-area {height: 100%; padding-bottom: 50rem; padding-right: 10rem; overflow: auto;}
.family-site .pop-wrap .pop-cont .scroll-area::-webkit-scrollbar {width: 3px; background: transparent;}
.family-site .pop-wrap .pop-cont .scroll-area::-webkit-scrollbar-thumb {width: 4px; background: #d9d9d9; border-radius: 2px;}

.family-site .family-menu {display: flex; flex-direction: column; gap: 10rem;}
.family-site .family-menu > li {border: 1px solid #d9d9d9; border-radius: 12rem;}
.family-site .family-menu > li .one-dept {position: relative; display: block; padding: 30rem 80rem 30rem 40rem; font-size: 20rem; line-height: 150%; letter-spacing: -0.4rem; font-weight:700; color:#000; }
.family-site .family-menu > li .one-dept::after {content: ""; position: absolute; right: 40rem; top: 50%; transform: translateY(-50%); width: 18rem; height: 18rem; background: url("../images/icon-sitemap-arrow.svg") no-repeat center center / 100% auto; transition: transform .4s ease;}
.family-site .family-menu > li.on:not(.link) .one-dept::after{transform: translateY(-50%) rotate(180deg);}
.family-site .family-menu > li:first-child .list-wrap {display: block;}
.family-site .family-menu > li .list-wrap {display: none; padding: 40rem 40rem; border-top: 1px solid #d9d9d9;}
.family-site .family-menu > li .list-wrap .two-wrap {display: grid; grid-template-columns: repeat(2, 1fr); gap:20rem 40rem;}
.family-site .family-menu > li .list-wrap .two-wrap > li .two-link {display: flex; justify-content: space-between; padding: 2rem 0; font-size:18rem; line-height: 160%; letter-spacing: -0.36rem; font-weight:700; }
.family-site .family-menu > li .list-wrap .two-wrap > li .two-link:after {content: ""; flex-shrink: 0; display: inline-block; margin: 5rem 0 0 10rem; width: 18rem; height: 18rem; background: url("../images/icon-sitemap-arrow-2.svg") no-repeat center center / 100% auto;}
/* 외부링크 */
.family-site .family-menu > li.link .one-dept::after {width: 18rem; height: 18rem; background-image: url("../images/icon-sitemap-arrow-2.svg");}
.family-site .family-menu > li.link.blue{ background-color: #002554; }
.family-site .family-menu > li.link.blue .one-dept::after {width: 18rem; height: 18rem; background-image: url("../images/icon-sitemap-arrow-2-white.svg");}
.family-site .family-menu > li.link.blue .one-dept {color: #fff;}
@media screen and (max-width: 1024px) {
  .family-site .pop-wrap {right: -100%; width: 100%;}
  .family-site .pop-wrap .pop-head {padding: 20rem; margin-bottom:0; }
  .family-site .pop-wrap .btn-pop-close {top: 20rem; right: 20rem; background-image:url('../images/icon-family-close-mob.svg'); }
  .family-site .pop-wrap .pop-cont {height: calc(100% - 79rem); padding: 0 10rem 0 20rem;}
  .family-site .pop-wrap .pop-cont .scroll-area {padding:10rem 10rem 20rem 0;}

  .family-site .family-menu {gap: 5rem;}
  .family-site .family-menu > li {border-radius: 10rem;}
  .family-site .family-menu > li .one-dept {padding: 20rem 50rem 20rem 20rem; font-size: 18rem;}
  .family-site .family-menu > li .one-dept::after {right: 20rem;}
  .family-site .family-menu > li .list-wrap {padding: 20rem;}
  .family-site .family-menu > li .list-wrap .two-wrap {grid-template-columns: repeat(1, 1fr); gap: 20rem;}
  .family-site .family-menu > li .list-wrap .two-wrap > li .two-link {padding: 1rem 0; font-size:16rem;}
  .family-site .family-menu > li .list-wrap .two-wrap > li .two-link:after { width: 16rem; height: 16rem; }
  /* 외부링크 */ 
  .family-site .family-menu > li.link .one-dept {padding-right: 50rem;}
  .family-site .family-menu > li.link .one-dept::after {width: 16rem; height: 16rem; }
}

/* footer */
footer{ position:relative; background:#fff; border-top:1px solid #E5E5E5; }
footer .gototop{ display:inline-block; position:absolute; right:40rem; top:-104rem; width:64rem; height:64rem; border-radius:50%; border:1px solid #E5E5E5; box-sizing:border-box; z-index: 10; overflow:hidden; }
footer .gototop::before{ content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:#fff url('../images/icon-gototop.svg') no-repeat center / 20rem auto; transition: top 0.4s ease;}
footer .gototop::after{ content:''; position:absolute; left:0; top:100%; width:100%; height:100%; background:#fff url('../images/icon-gototop.svg') no-repeat center / 20rem auto;transition: top 0.4s ease; }
footer .gototop:hover::before{ top:-100%; }
footer .gototop:hover::after{ top:0; }

footer .inner{ display:flex; justify-content: space-between; padding:60rem 80rem; }  
footer .inner .left .policy-bx{ display:inline-flex; gap:24rem; }
footer .inner .left .policy-bx a{ display:block; font-size:max(14rem, 13px); line-height:160%; color:#555; letter-spacing:-0.28rem; }
footer .inner .left .policy-bx strong{ font-weight:700; color:#000; }

footer .inner .left .info-bx{ margin-top:80rem; font-size:max(14rem, 13px); line-height:160%; color:#555; letter-spacing: -0.28rem; }

footer .inner .right .family-site-btn{ display:flex; justify-content: end;} 
footer .inner .right .family-site-btn > a{ position:relative; display:inline-block; padding-right:28rem; font-size:max(16rem, 13px); line-height:160%; color:#000; font-weight:700; letter-spacing:-0.32rem; }
footer .inner .right .family-site-btn > a::before{ content:''; position:absolute; right:0; top:50%; width:20rem; height:20rem; background:#1A1A1A url('../images/icon-familysite-plus.svg') no-repeat center / cover; transform: translateY(-50%); border-radius:50%; transition: all 0.4s; transform-origin: center;}
footer .inner .right .family-site-btn > a:hover::before{ transform: translateY(-50%) rotate(180deg);}

footer .inner .right .sns-list{ display:inline-flex; gap:5rem; margin-top:20rem;  }
footer .inner .right .sns-list li a{ display:block; width:40rem; height:40rem; border:1px solid #002554; border-radius:50%; box-sizing:border-box;}
footer .inner .right .sns-list li.sns-f a{ background:url('../images/icon-sns-facebook.svg') no-repeat center / 7rem auto; }
footer .inner .right .sns-list li.sns-i a{ background:url('../images/icon-sns-instargram.svg') no-repeat center / 14rem auto; }
footer .inner .right .sns-list li.sns-y a{ background:url('../images/icon-sns-youtube.svg') no-repeat center / 15rem auto; }
footer .inner .right .sns-list li.sns-l a{ background:url('../images/icon-sns-linkedin.svg') no-repeat center / 12rem auto; }

@media screen and (max-width: 1024px) { 
  footer .gototop{ right:20rem; top:-60rem; width:40rem; height:40rem; }
  footer .inner{ flex-direction: column; padding:60rem 16rem; }  
  footer .inner .left .policy-bx{ flex-direction: column; gap:16rem; } 
  footer .inner .left .policy-bx a{ font-size:13rem; }

  footer .inner .left .info-bx{ margin-top:60rem; font-size:14rem; }

  footer .inner .right{ margin-top:40rem; }
  footer .inner .right .family-site-btn{ justify-content: flex-start;} 
  footer .inner .right .family-site-btn > a{ padding-right:28rem; }  

  footer .inner .right .sns-list{ gap:4rem; margin-top:20rem;  }
  footer .inner .right .sns-list li a{ width:34rem; height:34rem; }
  footer .inner .right .sns-list li.sns-f a{ background-size: 6rem auto; }
  footer .inner .right .sns-list li.sns-i a{ background-size: 12rem auto; }
  footer .inner .right .sns-list li.sns-y a{ background-size: 13rem auto; }
  footer .inner .right .sns-list li.sns-l a{ background-size: 10rem auto; }
}

/* table */
.table_type {border-top: 1px solid #1A1A1A; overflow-x: auto; margin-top: 32rem;}
.table_type table {min-width: 100%; width: max-content; text-align: center; table-layout: auto; word-break: break-all;}
.table_type table thead th {padding: 18rem 20rem; font-weight: 700; font-size: 16rem; color: #1A1A1A; background: #F1F4F8; border-bottom: 1px solid #E5E5E5; border-right: 1px solid #E5E5E5;}
.table_type table tbody td {padding: 18rem 20rem; font-weight: 400; font-size: 16rem; color: #4D4D4D; background: #fff; border-bottom: 1px solid #E5E5E5; border-right: 1px solid #E5E5E5;}
.table_type table thead th:last-child,
.table_type table tbody td:last-child {border-right: none;}

/* button */ 
.btn-primary{ display:inline-flex; vertical-align: top; justify-content: center; align-items: center; padding:0 32rem; min-width:120rem; min-height:56rem; font-size: max(16rem, 12px); line-height:110%; color:#fff; font-weight:500; letter-spacing: -0.32rem; border-radius:28rem; border:1px solid #003087; background: #003087; box-sizing:border-box; transition: all 0.2s ease-out; }
.btn-primary span{ position:relative; margin-left:4rem; width:20rem; height: 20rem; overflow:hidden; }
.btn-primary span::before, .btn-primary span::after{ content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:url('../images/icon-primary-arrow.svg') no-repeat center / 20rem auto; transition: all 0.2s ease-out;}
.btn-primary span::after{ left:-100%; opacity: 0; }
.btn-primary span.arrow-diagonal::before, .btn-primary span.arrow-diagonal::after{ background-image:url('../images/icon-primary-arrow-upright.svg'); }
.btn-primary span.arrow-diagonal::after{ top:100%; }
.btn-primary.outline{ background:transparent; border-color:#fff; }
.btn-primary.outline.black{ border-color:#000; color:#000; }

.btn-secondary{ position:relative; display: inline-block; padding-right:50rem; font-size: max(20rem, 12px); line-height:160%; color:#fff; font-weight:700; letter-spacing:-0.4rem; }
.btn-secondary span{ position:absolute; right:0; top:50%; display:inline-block; width:28rem; height:28rem; border:2px solid #fff; border-radius:50%; box-sizing:border-box; transform: translateY(-50%); overflow: hidden;} 
.btn-secondary span::before, .btn-secondary span::after{ content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:url('../images/icon-secondary-arrow.svg') no-repeat center / 10rem auto; transition: all 0.2s ease-out; }
.btn-secondary span::after{ left:-100%; }
.btn-secondary span.arrow-diagonal::before, .btn-secondary span.arrow-diagonal::after{ background-image:url('../images/icon-secondary-arrow-upright.svg'); background-size:13rem auto; }
.btn-secondary span.arrow-diagonal::after{ top:100%; }
  
@media screen and (min-width: 1023px) {
  .btn-primary:hover{ background:#008233; border-color:#008233; }
  .btn-primary:hover span::before{ left:100%; opacity: 0; }
  .btn-primary:hover span::after{ left:0; opacity: 1; }
  .btn-primary:hover span.arrow-diagonal::before{ top:-100%; }
  .btn-primary:hover span.arrow-diagonal::after{ top:0; }
  .btn-primary.outline.black:hover{ color:#fff; border-color:#008233; border-color:#008233; }

  .btn-secondary:hover span::before{ left:100%; opacity: 0; }
  .btn-secondary:hover span::after{ left:0;}
  .btn-secondary:hover span.arrow-diagonal::before{ top:-100%; }
  .btn-secondary:hover span.arrow-diagonal::after{ top:0; }
}

@media screen and (max-width: 1024px) {  
  .btn-secondary{ padding-right:32rem; font-size: 18rem; letter-spacing:-0.36rem; }
  .btn-secondary span{ width:24rem; height:24rem; border-width:1px;} 
  .btn-secondary span::before, .btn-secondary span::after{ background-size:8rem auto; }
  .btn-secondary span.arrow-diagonal::before, .btn-secondary span.arrow-diagonal::after{ background-size:9rem auto; }
}

/* popup */
.layer-popup {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; z-index: 1010;}
.layer-popup::before {content: ""; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6);}
.layer-popup .inner {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding-top:70rem; width: calc(100% - 40rem); max-width:720rem; /*height: 500rem;*/ z-index: 10;} 
.layer-popup .inner.max-910{ max-width:910rem; }

.layer-popup .pop-top{ position:absolute; left:0; top:0; display: flex; justify-content: end; align-items: center; gap:30rem; padding:20rem; width:100%; height:70rem; background:#F5F5F5; border-bottom:1px solid #D9D9D9; border-radius:12rem 12rem 0 0; box-sizing:border-box;}
.layer-popup .pop-top .xbt { width:30rem; }
.layer-popup .pop-top .xbt img{ width:100%; }  

.layer-popup .pop-slide{ width:100%; height:430rem; overflow:hidden; border-radius:0 0 12rem 12rem; background:#fff; }
.layer-popup .pop-slide .img-ver {position: relative; width: 100%; height: 100%; background: #fff; overflow-y: auto;}
.layer-popup .pop-slide .img-ver img { width:100%; max-width:100%; height:auto; }
.layer-popup .pop-slide .txt-ver {position: relative; width: 100%; height: 100%; padding: 20rem 20rem 20rem 80rem; background: #fff;}
.layer-popup .pop-slide .txt-ver .txt-inner {position: relative; width: 100%; height: 100%; padding: 60rem 50rem 50rem 0; overflow-y: auto;}
.layer-popup .pop-slide ::-webkit-scrollbar {width: 4px;}
.layer-popup .pop-slide ::-webkit-scrollbar-track {background: 0; border-radius: 3px;}
.layer-popup .pop-slide ::-webkit-scrollbar-thumb {background: #ccc; opacity: .8; border-radius: 3px;}
.layer-popup .pop-slide .txt-ver .tit { font-size:max(32rem,18rem); line-height:150%; font-weight:700; color:#000; }
.layer-popup .pop-slide .txt-ver .txt{ margin-top:20rem; font-size:max(14rem,16px); line-height:160%; color:#1A1A1A ; }
.layer-popup .pop-slide .txt-ver .txt strong{ font-weight:700 ; }
.layer-popup .pop-slide .txt-ver .btn-primary{ margin-top:40rem; }

.layer-popup .pop-cont{ padding: 40rem 40rem; background:#fff; border-radius:0 0 12rem 12rem; }

.layer-popup .controller { display: flex; justify-content: center; align-items: center; margin-top:30rem; }
.layer-popup .controller > a{ width:18rem; height:18rem; }
.layer-popup .controller > a img{ width:100%; }
.layer-popup .controller .num{ margin:0 30rem; font-size:16rem; line-height:1; color:#fff; font-weight:700; letter-spacing:-0.32rem; }
.layer-popup .controller .num .cur{ margin-right:8rem; }
.layer-popup .controller .num .max{ margin-left:8rem; }

@media screen and (max-width : 1024px) {
  .layer-popup .inner {width: calc(100% - 32rem); /*height:500rem;*/}
  
  .layer-popup .pop-top{ gap:24rem; padding:20rem;  height:70rem; border-radius:12rem 12rem 0 0; }
  .layer-popup .pop-top.jc-sb-mo{ justify-content: space-between; }
  .layer-popup .pop-top .form-checkbox{ margin-top:3rem; }

  .layer-popup .pop-slide{ height:430rem; }
  .layer-popup .pop-slide .txt-ver {padding: 20rem 20rem 20rem 40rem;}
  .layer-popup .pop-slide .txt-ver .txt-inner { padding:20rem 20rem 20rem 0; }
  .layer-popup .pop-slide .txt-ver .tit { font-size:max(18rem,16rem); }
  .layer-popup .pop-slide .txt-ver .txt{ margin-top:16rem; font-size:max(13rem,13px); } 
  .layer-popup .pop-slide .txt-ver .btn-primary{ margin-top:32rem; }

  .layer-popup .pop-cont{ padding: 20rem 20rem; }

  .layer-popup .controller { margin-top:24rem; }
  .layer-popup .controller > a{ width:20rem; height:20rem; }
  .layer-popup .controller .num{ margin:0 16rem; font-size:15rem; }
  .layer-popup .controller .num .cur{ margin-right:4rem; }
  .layer-popup .controller .num .max{ margin-left:4rem; }
}

/* form - select */ 
.form-select .form-select-arr { position:relative; }
.form-select .form-select-arr:after {content: ""; display: block; position: absolute; right: 15rem; top: 50%; margin-top: -12rem;  width: 24rem; height: 24rem; background: url("../images/icon-select-arrow.svg") no-repeat center center / 24rem auto; transform: rotate(0); transition: transform .3s ease; z-index: 2; pointer-events: none;}

.form-select .form-select-arr select { position: relative; padding: 0 40rem 0 15rem; width: 100%; height: 56rem; color: #1A1A1A; border: 1px solid #D9D9D9; border-radius: 4px; z-index: 1;  background:#fff; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor: pointer; }
.form-select .form-select-arr select option {width: 100%; color: #1A1A1A;}

.form-select .form-select-arr.disabled { background-color: #F5F5F5; } 
.form-select select:disabled {border: 1px solid #D9D9D9;}

.form-select.active .form-select-arr:after {transform: rotate(180deg);}  

@media screen and (max-width: 1024px) {
  .form-select .form-select-arr:after { right: 15rem; margin-top: -10rem; width: 20rem; height: 20rem; background-size: 20rem auto; }
  .form-select .form-select-arr select { padding: 0 36rem 0 15rem; height: 48rem; } 
}

/* form - radio/check */
.form-checkbox { position: relative; }
.form-checkbox input { position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: .001;}
.form-checkbox input + label { position: relative; display: inline-block; padding-left:26rem; font-size:16rem; line-height:120%; font-weight:500; color: #555; z-index: 1; cursor: pointer;}
.form-checkbox input + label::before{ content:''; position:absolute; left:0; top:1rem; width:18rem; height:18rem; background: url("../images/icon-checkbox.svg") center / 100% 100% no-repeat; }
.form-checkbox input:checked + label::before {background: url("../images/icon-checkbox-on.svg") center / 100% 100% no-repeat;} 

/* form - search */ 
.form-srch .form-input { position: relative; display: flex; padding: 0 16rem; width: 100%; height: 56rem; border: 1px solid #D9D9D9; border-radius: 4rem; }
.form-srch .form-input input {width: calc(100% - 60rem); height: 100%; border: 0; }
.form-srch .form-input input::placeholder {color: #999;}
.form-srch .srch-bt { position: absolute; top: 15rem; right: 15rem; width: 24rem; height: 24rem; background: url("../images/icon-srch.svg") no-repeat center / cover;}

.form-input .input-btn-wrap {position: absolute; display:inline-block; top: 50%; right: 50rem; transform: translateY(-50%);}
.form-input .input-btn-wrap button {display: none; width: 16rem; height: 16rem; background: url('../images/icon-close.svg') no-repeat center center / cover;}

@media screen and (max-width: 1024px) {
  .form-srch .form-input {padding:0 16rem; height: 48rem;}
  .form-srch .form-input input{ width:calc(100% - 47rem)}
  .form-srch .srch-bt {top: 13rem; right: 15rem; width: 20rem; height: 20rem; background-size:20rem auto; }

  .form-input .input-btn-wrap {right: 40rem;}
  .form-input .input-btn-wrap button {width: 16rem; height: 16rem;}
}

/* board - top */
.board-top{ display:flex; justify-content: space-between; align-items: center; margin-bottom:20rem; }
.board-top .leng{ color:#555; }
.board-top .leng .count{ font-weight:700; color:#000; }

.board-top .srch-area{ display:flex; }
.board-top .srch-area .form-select{ width:160rem; margin-right:8rem; }
.board-top .srch-area .form-srch{ width:320rem; }

@media screen and (max-width: 1024px) { 
  .board-top{ flex-direction: column; align-items:initial; }
  .board-top .leng{ margin-bottom:16rem; }

  .board-top .srch-area{ width:100%; }
  .board-top .srch-area .form-select{ width:35%;  }
  .board-top .srch-area .form-srch{ width:65%; }
}

/* board - list */
.board-list-basic .list-head{ display:flex; padding:18rem 40rem; font-weight:700; background:#F2F5F9;}
.board-list-basic .list-head .tit{ width:90%; }
.board-list-basic .list-head .date{ width:10%; text-align:center; }

.board-list-basic .list-body li{ border-bottom:1px solid #E5E5E5;}
.board-list-basic .list-body li a{ display:flex; flex-wrap:wrap; padding:40rem 40rem; }
.board-list-basic .list-body li a .tit{ padding-right:40rem; width:90%; color:#000; font-weight:700; word-break: break-all; box-sizing:border-box; }
.board-list-basic .list-body li a:hover .tit{ text-decoration: underline;}
.board-list-basic .list-body li a .date{ width:10%; color:#555; text-align:center; }

.board-list-none{ display:flex; justify-content: center; align-items: center; height:440rem; border:1px solid #D9D9D9; border-radius:12rem; box-sizing:border-box; }
.board-list-none span{ display: block; padding-top:60rem; background:url('../images/icon-board-list-none.svg') no-repeat center top / 40rem auto; text-align:Center; }

@media screen and (max-width: 1024px) { 
  .board-list-basic .list-head{ display:none; }
  
  .board-list-basic .list-body{ border-top:1px solid #000; } 
  .board-list-basic .list-body li a{ flex-direction:column; padding:23rem 16rem; }
  .board-list-basic .list-body li a .tit{ padding-right:0; width:100%;   }
  .board-list-basic .list-body li a .date{ margin-top:8rem; width:100%; text-align:left; }

  .board-list-none{ height:320rem; }  
}

/* board - paging */
.paging{ display:flex; justify-content: center; margin-top:60rem; gap:6rem; }
.paging .btn-arrow{ width:40rem; height:40rem; }
.paging .btn-arrow.none{ opacity: 0.2; pointer-events: none;}
.paging .btn-arrow.prev{ background:url('../images/icon-page-prev.svg') no-repeat center / 20rem auto; }
.paging .btn-arrow.next{ background:url('../images/icon-page-next.svg') no-repeat center / 20rem auto; }
.paging .page{ padding:0 5rem; min-width:40rem; height:40rem; font-size: max(16rem, 12px); line-height:38rem; color:#555; letter-spacing:-0.32rem; font-weight:500; border-radius:4rem; border:1px solid #D9D9D9; text-align:Center; box-sizing: border-box;}
.paging .page.active{ color:#fff; background:#003087; border-color:#003087; }
.paging .icon-ellipsis{ width:40rem; background:url('../images/icon-page-ellipsis.svg') no-repeat center / 22rem auto; }

@media screen and (max-width: 600px) {
  .paging{ gap:4rem; }
  .paging .btn-arrow{ width:33rem; height:33rem; }
  .paging .page{ padding:0 2rem; min-width:33rem; height:33rem; font-size: max(15rem, 11px); line-height:31rem; }  
  .paging .icon-ellipsis{ width:33rem; background-size:15rem auto; }
}

/* board - view */
.board-view-top { position: fixed; left:50%; top: 100rem; z-index: 999; padding:40rem 0; width: 100vw; border-bottom: 1px solid #E4E4E4; background-color: #fff; transition: top .3s ease; transform: translateX(-50%); }
.board-view-top.active {top: 0;}
.board-view-top .inner{ position:relative; margin:0 auto; width:100%; max-width:1164rem; }
.board-view-top .tit-box{ padding:0 30rem; text-align:center; }
.board-view-top .tit-box .tit{ color:#1A1A1A; word-break: break-all;}
.board-view-top .tit-box .date{ display:block; margin-top:20rem; color:#666; }
.board-view-top .btn-back{ position:absolute; left:-28rem; top:50%; width:40rem; height:40rem; background:url('../images/icon-back.svg') no-repeat center / cover; transform: translateY(-50%); }

.board-view-detail{ padding:60rem 118rem 53rem; word-wrap: break-word; }
.board-view-detail img{ max-width:100%; height:auto; }

.board-view-file{ display:flex; align-items: flex-start; padding:29rem 40rem; margin-bottom:50rem; background:#F5F5F5; }
.board-view-file .tit{ padding-left:32rem; width:127rem; color:#1A1A1A; font-weight:500; box-sizing:border-box; background:url('../images/icon-file.svg') no-repeat left 1rem / 24rem auto;}
.board-view-file .files{ width:calc(100% - 127rem); font-size:0; }
.board-view-file .files a{ position:relative; vertical-align: top; margin-right:10rem; color:#4D4D4D; }
.board-view-file .files a:not(:last-child)::after{ content:','; position:absolute; }
.board-view-file .files a:hover{ text-decoration: underline;}

.board-view-move{ padding-top:50rem; border-top:1px solid #D9D9D9; } 
.board-view-move .page-link{ display:flex; gap:60rem; padding:18rem 40rem;}
.board-view-move .page-link .btn-arrow{ padding-left:32rem; color:#1A1A1A; font-weight:700; }
.board-view-move .page-link .prev{ background:url('../images/icon-pages-prev.svg') no-repeat left center / 16rem auto; }
.board-view-move .page-link .next{ background:url('../images/icon-pages-next.svg') no-repeat left center / 16rem auto; }
.board-view-move .page-link .tit{ width:calc(100% - 186rem); color:#4D4D4D; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} 
.board-view-move .page-link .date{ color:#4D4D4D; }

.board-view-goto{ margin-top:80rem; text-align: center; }

@media screen and (max-width: 1024px) { 
  .board-view-top { top: 70rem; padding:40rem 0; width:calc(100vw - 40rem); }   
  .board-view-top .tit-box{ padding:0 20rem 0 64rem; }
  .board-view-top .tit-box .date{ margin-top:20rem; }
  .board-view-top .btn-back{ left:0; width:40rem; height:40rem; }

  .board-view-detail{ padding:30rem 0 60rem; } 

  .board-view-file{ flex-direction: column; padding:24rem; margin-bottom:40rem; }
  .board-view-file .tit{ margin-bottom:24rem; padding-left:32rem; width:100%; }
  .board-view-file .files{ display: flex; flex-direction: column; gap:10rem; width:100%; }
  .board-view-file .files a{ margin-right:0; }
  .board-view-file .files a:not(:last-child)::after{ display:none;}

  .board-view-move{ padding-top:40rem; } 
  .board-view-move .page-link{ position:relative; flex-direction: column; gap:6rem; padding:16rem 0 16rem 70rem;}
  .board-view-move .page-link .btn-arrow{ position:absolute; top:18rem; left:0; padding-left:24rem;  }
  .board-view-move .page-link .prev{ background-size: 16rem auto; }
  .board-view-move .page-link .next{ background-size: 16rem auto; }  
  .board-view-move .page-link .tit { width: 100%;}

  .board-view-goto{ margin-top:60rem;  }
}

/* sub common */
#subCon{ padding:260rem 0 200rem }
.layout{ margin:0 auto; width:calc(100% - 40rem); max-width:1220rem }
.max-950{ max-width:950rem !important; }
.max-1164{ max-width:1164rem !important; }
.max-1530 { max-width:1530rem !important; }

.page-tit{ margin:0 auto 80rem ; width:calc(100% - 40rem); max-width:1220rem; } 
.page-tit.mb-sm{ margin-bottom:60rem; }
.page-tit h2{ opacity: 0;}

.motion-fadeup{ opacity: 0; }

@media screen and (max-width: 1024px) {  
  #subCon{ padding:140rem 0 120rem } 

  .page-tit{ margin-bottom:48rem; } 
  .page-tit.mb-sm{ margin-bottom:24rem; }
}