@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
:root{--b_blue : #2F63AF;--hu_white : #fff;--hu_line : #dfdfdf;--hu_black : #000;--hu_gray : #999;--basic_font:clamp(16px, 1.5vw, 26px);}
* { padding: 0;    margin: 0;    box-sizing: border-box;    text-decoration: none;    border: none;    word-break: keep-all;    transition: 0.3s;}

/********************** reset **********************/
html {scroll-behavior: smooth;}
body {width:100%; height:100%; -webkit-font-smoothing:antialiased; overflow-x: hidden;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, button, address, em, img, small, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, hr {margin:0; padding:0}
body {padding:0; background:var(--hu_white);  font-family: Pretendard; font-weight: 300; font-size:var(--basic_font); color:#000;line-height:160%;letter-spacing:-0.5px}
h1, h2, h3, h4, h5, h6 {font-weight:normal; line-height: 120%;}
ol, ul, li {list-style:none; line-height:120%;}
table {width:100%; border-collapse:collapse; border-spacing:0; line-height:120%;}
form, iframe {display:block;border:0}
fieldset {display:inline-block;border:0;}
img, button {border:0 none; vertical-align:middle}
hr {height:0; display:none}
i, em, address {font-style:normal}
label, button {cursor:pointer}
caption, legend {width:0; height:0; margin:0; padding:0; text-indent:-9999em; overflow:hidden; font-size:0;}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {display:block}
input, textarea, select {margin:0; padding:0; font-family: Pretendard; font-size:var(--basic_font); font-weight: 400; vertical-align:middle; line-height:120%; background: none;}
textarea {padding:20px;border: 1px solid #ccc; resize:none; overflow-y:auto;}
button {overflow:visible; margin:0; padding:0; border:0 none; background:none; font-size:0; font-family: Pretendard; font-weight: 300; vertical-align:top; cursor:pointer;}
button::-moz-focus-inner {border:0; padding:0;}
a {text-decoration:none; word-break:break-all;}
a:link, a:visited, a:hover, a:active, a:focus {text-decoration:none;}

*:focus{outline:none}

.fl {float:left !important;}
.fr {float:right !important;}
.vat {vertical-align:top !important;}
.vam {vertical-align:middle !important;}
.tal {text-align:left !important;}
.tar {text-align:right !important;}
.tac {text-align:center !important;}

.mb10 {margin-bottom:10px !important}
.mb20 {margin-bottom:20px !important}
.mb30 {margin-bottom:30px !important}
.mb40 {margin-bottom:40px !important}
.mb50 {margin-bottom:50px !important}
.mb60 {margin-bottom:60px !important}
.mt10 {margin-top:10px !important}
.mt20 {margin-top:20px !important}
.mt30 {margin-top:30px !important}
.mt40 {margin-top:40px !important}
.mt50 {margin-top:50px !important}
.mt60 {margin-top:60px !important}

/********************** form control **********************/
section {position:relative;  overflow-x: hidden; display: block; }
.sec_wrap {background: #fff; position:relative; }
.topsec {height:100vh; overflow: hidden; position: relative; width: 100%; background: #2F63AF;} 
.topsec video {position: absolute; z-index: 0; top:0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.topsec video[poster]{ width: 100%; height: 100%; object-fit: cover;}
.m_logo {width:clamp(300px, 60vw, 700px);}
.top-con{display: flex; max-width: 1560px; position: relative; flex-direction: column; align-items: baseline; justify-content: center; margin: 0 auto; padding: 0 80px;}
.topsec .top-con {height: 100%;}
.topsec dl {display: flex; width:clamp(300px, 60vw, 700px); height: 100%; position: relative; flex-direction: column; align-items: baseline; justify-content: center; gap:40px;}
.topsec dl dt {margin-bottom: 40px;}
.topsec dl dd {font-size: clamp(20px, 5vw, 70px); line-height: 140%; font-weight: 100; color: #fff; opacity: 0.7 !important;}

.sildersec { overflow: visible; padding: 10vw 0;}
.tit {display: flex; position: relative; flex-direction: column; gap:10px; margin-bottom: 5vw; width: 100%; }
.tit .wide {display: flex; position: relative; justify-content: space-between; gap:40px; margin-bottom: 5vw; width: 100%; }
.tit span{content: "++"; font-size: clamp(20px, 5vw, 50px); line-height: 120%; font-weight: 500; display: block; color: #2F63AF;}
.tit span::first-letter {color: #93BDFA;}
.tit h1 {font-size: clamp(30px, 7vw, 76px); line-height: 120%; font-weight: 700;}

.slidecon {width: 100%; display: flex; position: relative; gap:40px; margin-bottom: 5vw; flex-direction: column; align-items: flex-start; justify-content: baseline;}
.slidecon .outer { display: block; width:100%;}
.slidecon svg {width: clamp(200px, 35vw, 400px); height: auto;}
.slidecon .outer .s02 {transform: rotate(180deg) !important;}

.carousel-wrapper {overflow:visible; width:100%; margin-bottom: 60px;}
.carousel { display: flex; width: max-content; animation: scroll-left 30s linear infinite; }
.carousel.reverse { animation: scroll-right 50s linear infinite; }
.carousel .carousel-item { flex: 0 0 auto;  text-align: center; width: 70vw; }
.carousel a {flex: 0 0 auto;  text-align: center; width: 30vw;}
.carousel img { width: 100%;}


.insta_tit {height: auto; overflow: visible; }
.intxt dt {font-size: clamp(40px, 20vw, 400px); font-weight: 600; color: var(--hu_line); z-index: -1; opacity: 0.9; display: block; line-height: 90%;text-align: right;}
.intxt dd {font-size: clamp(16px, 2vw, 30px); font-weight: 300; text-align: right;}


.instasec {padding: 20vw 0; margin: -30vw 0 -10vw; overflow: hidden; }
.instasec .carousel-wrapper { display: block !important; margin: 0; }
.instasec .carousel-item {width: 45vw; padding: 0; margin: 0;}
.instasec .toco .carousel-item {width: 25vw;}
.instasec .reverse .carousel-item {width: 50vw; }
.instasec .toco.reverse .carousel-item {width: 30vw; }

.instasec .carousel {animation: scroll-left 200s linear infinite;}
.instasec .carousel.min {filter: blur(5px); animation-duration: 80s;}
.instasec .carousel.reverse { animation: scroll-right 300s linear infinite; }

.instasec .carousel img {max-width: auto; max-height: none; width:100%;}
.min01, .min02 {position: absolute; top: 20vw; z-index: 0; opacity: 0.3;}
.min02 {top:auto; bottom: 20vw;}
.bigcon, .bigcon-reverse {transform: rotate(-15deg); width: 140%; margin-left: -20%;}
.bigcon-reverse {transform: rotate(15deg);}

.footersec {height: 80vh; overflow: visible;}
.footersec .top-con {height: 100%;}
.footersec .tit .wide{flex-direction: column; gap:40px; margin-top: 40px;}
.footersec .add {display: flex; flex-direction: column; align-items:flex-start;  width: 100%; height: 100%; font-size: clamp(14px, 1.5vw, 20px); }
.footersec .add dl {margin-bottom: 20px;}
.footersec .add dt {font-weight: 500; color: var(--b_blue); }
.footersec .add p {font-size: clamp(12px, 1.2vw, 16px); color: var(--hu_gray);}
.footersec .add span {font-size: clamp(14px, 1.5vw, 20px); font-weight: 500; margin-bottom: 10px;}
.footersec a {color: var(--b_blue);  font-weight: 600; display: block; font-size: clamp(30px, 5vw, 60px);}
.footersec a:hover {text-decoration: underline;}

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes scroll-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}


@media (max-width: 700px) {
  .topsec dl dd {font-size: clamp(20px, 8vw, 70px);}
  .top-con {padding: 0 40px;}
  .sildersec {padding: 10vh 0;}
  .m_logo {width:70vw;}
   

  .carousel a {flex: 0 0 auto;  text-align: center; width: 70vw;}
  .carousel-wrapper {margin-bottom: 00px;}
    .tit .wide {flex-direction: column; gap:40px; margin-bottom: 40px;}
    .intxt dt {font-size: clamp(40px, 20vw, 400px); font-weight: 600; color: var(--b_blue); z-index: -1; opacity: 0.9; display: block; line-height: 90%;text-align: right;}
    .intxt dd {font-size: clamp(16px, 2vw, 30px); font-weight: 300; text-align: right;}

.instasec {margin-top: 0;}
  .instasec .carousel {
    display: flex;
    overflow-x: auto;
  }

  .instasec .carousel-item {
    width: 120vw !important;
    flex-shrink: 0;
  }

  .instasec .toco .carousel-item {
    width: 60vw !important;
  }
  .min01{top:0;} 
  .min02{bottom:0;} 
  .intxt { top:-20vw; right:-40vw;}
}