@font-face {
  font-family: 'Pretendard-Regular';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
:root {
  --apart_color: #09193e;
  --pr_color: #294A9E;
}

body {scroll-behavior: smooth;}
#mob_title {display: none;}
.gate {width: 100%; height: 100vh; background: url('/resources/img/gate/gate_bg.jpg') no-repeat center; background-size: cover; animation: grow 10s linear;}

@keyframes grow {
  /* 0%   { transform: scale(1); }
  100% { transform: scale(1.2);} */
}

.gate .wrap {display: flex; flex-direction: row; width: 100%; height: 100%; align-items: center; justify-content: center;}
.gate .wrap .cont_wrap {width: 35vw; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 215px;}
/* .gate .wrap .cont_wrap:first-child {border-right: 1px solid #85a0bc;} */
.gate .wrap .cont_wrap > div {text-align: center; display: flex; flex-direction: column; align-items: center;}
.gate .wrap .cont_wrap > div > img {filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1);}
.gate .wrap .cont_wrap .tit_box {font-size: 24px; font-family: 'Pretendard-Regular'; color: #000d43; text-align: center; margin: 0 auto; line-height: 28px; border-radius: 5px; margin-top: 15px; font-weight: 600; background: #fff;}
.gate .wrap .cont_wrap #apart .tit_box {padding: 5px 25px;}
.gate .wrap .cont_wrap #pr .tit_box {padding: 5px 10px;}
.vertical_bar {width: 1px; height: 200px; background: #fff; display: inline-block; margin: 0 auto; margin-top: 35px; margin-bottom: 70px;}
.gate .wrap .cont_wrap a {width: 257px; height: 67px; position: relative;}
.btn_link {width: 257px; height: 67px; border: 1px solid #fff; transition: ease 0.2s; box-sizing: border-box; position: absolute; left: 0; top: 0;}
.gate .wrap .cont_wrap .last_btn_link .btn_link {border: none;}
.btn_link p {color: #fff; font-size: 20px; font-weight: 300; line-height: 66px; text-align: center; font-family: 'Noto Sans KR', sans-serif; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;}
/* .gate .wrap .cont_wrap .btn_link:hover {border: none; background: var(--pr_color); border: 1px solid var(--pr_color);} */
.link_box {display: flex; justify-content:space-around; align-items: center; gap: 10px;}

.gate .wrap .cont_wrap a .btn_link::before {opacity: 0; content: ""; display: block; width: 100%; height: 100%; transition: all 0.2s; background:  linear-gradient(90deg, rgba(132,88,181,1) 3%, rgba(4,52,158,1) 20%, rgba(15,223,255,1) 64%, rgba(12,231,203,1) 100%);;}
.gate .wrap .cont_wrap .last_btn_link .btn_link::before {opacity: 1; content: ""; display: block; width: 100%; height: 100%; transition: all 0.2s; background:  linear-gradient(90deg, rgba(132,88,181,1) 3%, rgba(4,52,158,1) 20%, rgba(15,223,255,1) 64%, rgba(12,231,203,1) 100%);;}

.gate .wrap .cont_wrap a:hover .btn_link {border: none;}
.gate .wrap .cont_wrap a:hover .btn_link::before {opacity: 1;}


#gate_footer {width: 100%; height: auto; background: #09193e;}


@media screen and (max-width: 640px) {
  #mob_title {display: block; margin: 0 auto; width: 85vw; padding: 12vw 0;}
  .gate {background: url('/resources/img/gate/m_gate_bg.jpg') no-repeat center; background-size: cover; height: 100vh;}
  .gate #gate_8 {width: 100%; margin-top: 10vh;}
  .gate .wrap {flex-direction: row; padding: 0 4vw; height: auto; padding-bottom: 20vw; gap: 10%;}
  .gate .wrap .cont_wrap {height: auto; padding-top: 0;}
  .gate .wrap .cont_wrap:first-child {border-right: none;}
  .vertical_bar {height: 60px; margin: 25px 0;}
  .gate .wrap .cont_wrap > div {width: 100%; padding-top:0;}
  .gate .wrap .cont_wrap > div > img {width: 35vw;}
  .gate .wrap .cont_wrap .tit_box {font-size: 3.5vw; line-height: 6vw; margin-bottom: 25vw; margin-top: 13px; border-radius: 3px; margin-bottom: 0; }
  .gate .wrap .cont_wrap .tit_box {padding: 0px 10px !important;}

  .link_box {flex-direction: column;}
  #apart {padding-top:0; margin-top:0;}

  .gate .wrap .cont_wrap a {width: 35vw; padding: 6vw; height: 0;}
  .gate .wrap .cont_wrap .btn_link {width: 35vw; height: initial; padding: 6vw 5vw; }
  .gate .wrap .cont_wrap .last_btn_link .btn_link {width: 35vw; height:13vw; padding:0; }
  .gate .wrap .cont_wrap .btn_link p {font-size: 4vw; font-weight: 700;}

}