<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@font-face {
  font-family: 'pretendard';
  font-weight:700;
  src: url(./font/Pretendard-Bold.otf) format('opentype');
  src: url(./font/Pretendard-Bold.ttf) format('truetype'),
    url(./font/Pretendard-Bold.woff) format('woff'),
    url(./font/Pretendard-Bold.woff2) format('woff2'),
}
@font-face {
  font-family: 'pretendard';
  font-weight:600;
  src: url(./font/Pretendard-SemiBold.otf) format('opentype');
  src: url(./font/Pretendard-SemiBold.ttf) format('truetype'),
    url(./font/Pretendard-SemiBold.woff) format('woff'),
    url(./font/Pretendard-SemiBold.woff2) format('woff2'),
}
@font-face {
  font-family: 'pretendard';
  font-weight:100;
  src: url(./font/Pretendard-Light.otf) format('opentype');
  src: url(./font/Pretendard-Light.ttf) format('truetype'),
    url(./font/Pretendard-Light.woff) format('woff'),
    url(./font/Pretendard-Light.woff2) format('woff2'),
}
@font-face {
  font-family: 'vitro';
  src: url(./font/VITROCOREOTF.otf) format('opentype');
  src: url(./font/VITROCORETTF.ttf) format('truetype');
}
* { font-family: 'pretendard'; transition: filter .3s }
.wrap {  width: 100%; height: 100vh; color:#fff; position: relative; overflow: hidden; min-height: 100vh; }
.background_image { position: absolute; top:-4px; left:-4px; width: calc(100% + 8px); height: calc(100% + 8px); z-index: -1; }
h2, h3 { font-weight: 700; line-height: 1; }
h2 { font-size:66px; }
.sb_link { width:220px; height:50px; font-size:16px;  display: flex; align-items: center; justify-content: center; font-weight: 600; position: relative; gap:48px; border:1px solid #878d91; color:#fff; background: transparent; transition: background-color .3s; }
.sb_link:after { content:'' ; display: block; position: static; width: 78px; height:9px; transform:translateY(-3px); background: url(/resources/user/intro/images/img_wtLink_arrow.png) center no-repeat;  }
.left &gt; a:hover .sb_link,
.right li &gt; a:hover .sb_link { color:#000000; background:#fff; }
.left &gt; a:hover .sb_link:after,
.right li &gt; a:hover .sb_link:after {  background: url(/resources/user/intro/images/img_bkLink_arrow.png) center no-repeat !important }
.cl_org { color:#fea125; }


div.line { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
div.line span:before,
div.line span:after { content: ''; position: absolute; }
div.line span:before { width: 0; height: 2px; background: #fff; }
div.line span:after { width: 2px; height: 0; background: #fff; }

div.line ~ * { position: relative; z-index: 9; }



header { width: 100%; height: 100px; padding-left: 70px; width: 100%; border-bottom:1px solid #4f5455;  }
header .logo { height: 100%; display: flex; align-items: center;}
header h3 { font-family: 'vitro';  font-size:36px; text-shadow:0 2px 54px rgba(0, 0, 0, .4) ; }
header img { transform:translateY(-5px) }
.copy { position: absolute; bottom:62px; left:70px; line-height: 1; font-size:12px; }

/* .vis_txt { position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); display: flex; width: 100%; height: 100%; align-items: center; } */
main { height: calc(100% - 100px) }
.info_txt { display: flex; align-items: flex-end; gap:13px }
.info_txt img:last-child { max-width: calc(100% - 88px); }
.vis_txt { height: 100%; display: flex; }
.vis_txt &gt; li { height: 100%; }

.left { flex:1; }
.left &gt; a { position: relative; display: flex; flex-flow:column wrap; justify-content: center; padding-left: 10vw; padding-bottom: 10vh; height: 100%; color: #fff; }
.left h2 { margin-bottom: 30px; line-height: 1.5; word-break: keep-all; }
.left h2 i { position: relative; animation: txtup 2.5s infinite; }
.left h2 i:nth-of-type(1) { animation-delay: .2s; }
.left h2 i:nth-of-type(2) { animation-delay: .4s; }
.left h2 i:nth-of-type(3) { animation-delay: .6s; }
.left h2 span i:nth-of-type(1) { animation-delay: .8s; }
.left h2 span i:nth-of-type(2) { animation-delay: 1s; }
.left p { font-size: 32px; line-height: 1; margin-bottom: 40px; font-weight: 600; }

.right { margin-left: auto; max-width: 727px; border-left:1px solid #4f5455;  }
.right h3 { width: 100%; font-size:52px; }
.right button { margin-top:40px; }
.right ul { display: flex; flex-flow: column wrap; height: 100%;  }
.right li { flex:1; height: 30%; box-sizing: border-box; }
/* .right li { padding-top:73px; padding-left:66px; padding-bottom: 64px; box-sizing: border-box; flex:1; display: flex; flex-flow:column wrap; justify-content: space-between; } */
.right li &gt; a { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; padding-top:7.5vh; padding-left:3.5vw; padding-bottom: 6.3vh; padding-right:2.3vw; width: 100%; height: 100%; color: #fff; }
.right li ~ li a { border-top:1px solid #4f5455 }
.right li img:first-of-type { filter:drop-shadow( 0 0 5px rgba( 255 , 255 , 255 , .7)); width:5vw; }


div.line span.top-left:before { top: 0; right: 0; transition: width .0s; }
div.line span.top-left:after { top: 0; left: 0; transition: height .0s; }
div.line span.bottom-right:before { bottom: 0; left: 0; transition: width .0s; }
div.line span.bottom-right:after { bottom: 0; right: 0; transition: height .0s; }

.left a:hover span.top-left:before { top: 0; right: 0; width: 100%; transition: width .3s; }
.left a:hover span.top-left:after { top: 0; left: 0; height: 100%; transition: height .3s; }
.left a:hover span.bottom-right:before { bottom: 0; right: 0; width: 100%; transition: width .3s; }
.left a:hover span.bottom-right:after { bottom: 0; right: 0; height: 100%; transition: height .3s; }

.right &gt; ul &gt; li.bOn span.top-left:before { top: 0; right: 0; width: 100%; transition: width .3s; }
.right &gt; ul &gt; li.bOn span.top-left:after { top: 0; left: 0; height: 100%; transition: height .3s; }
.right &gt; ul &gt; li.bOn span.bottom-right:before { bottom: 0; right: 0; width: 100%; transition: width .3s; }
.right &gt; ul &gt; li.bOn span.bottom-right:after { bottom: 0; right: 0; height: 100%; transition: height .3s; }


/* .bOn { filter:blur(3px); } */
/*
.wrap.bOn .background_image { filter:blur(3px); }
.wrap.bOn .left { filter:blur(3px); }
.right &gt; ul &gt; li.bOn { filter:blur(3px); }
*/


@media (max-width:1200px), (max-height: 840px) {
  header { height:80px }
  header h3 { font-size:30px; }
  .wrap { width: auto; height: auto; background:url(/resources/user/intro/images/img_intro_visual.jpg) 33% 50%/cover no-repeat; min-height: 100vh; }
  h2 { font-size:45px }
  .vis_txt { flex-flow:wrap; }
  .vis_txt &gt; li { flex:1 100%; }
  .left &gt; a { max-width:none; padding-top:6vw; padding-bottom:6vw }
  .left p { font-size:28px }
  .right { max-width: none; border-top:1px solid #4f5455; border-left: 0;}
  .right li &gt; a { flex-direction: column; padding-left: 10vw; padding-top:5vw; padding-bottom:5vw  }
  .info_txt  { margin-top: 60px }

  .wrap.bOn .background_image { filter:none }
  .wrap.bOn .left { filter:none }
  .right &gt; ul &gt; li.bOn { filter:none }

  .background_image { display: none; }
  .copy { position: static; padding-bottom:20px ; padding-left:20px; margin-top:50px; }

}

@media (max-width:1024px) {
  .right li img:first-of-type { width:50px }
}

@media (max-width:768px) {
  header { padding: 0 5vw;  }
  header img { width:60px }
  header h3 { font-size:24px }
  .wrap { background:url(/resources/user/intro/images/img_intro_visual_m.jpg) left 50%/cover no-repeat;  }
  .left &gt; a { max-width:none; padding:15vw 5vw;}
  .vis_txt &gt; li { min-height: calc((100vh - 112px) / 3); }
  .right li &gt; a { padding:10vw 5vw;  min-height: calc((100vh - 112px) / 3); }

  .left h2 { font-size:38px }
  .right h3 { font-size:40px }
  .right .flex_cont { margin-top:10vw }
  .info_txt  { margin-top: 0px }
}

@media (max-width:425px) {
  .left p { font-size:24px }
}





@-webkit-keyframes txtup {
    0% { top: 0; }
    20% { top: -1.5rem; }
    40% { top: 0; }
    100% { top: 0; }
}
@keyframes txtup {
    0% { top: 0; }
    20% { top: -1.5rem; }
    40% { top: 0; }
    100% { top: 0; }
}


.right li &gt; a { padding:2.5vh 2.0vw 2.5vh 2.3vw }
.hb_list img { height:90px; width: auto; object-fit: contain; }
.hb_list .flex_cont { display: flex; flex-flow: wrap; }
.hb_list .info_txt { width: 100%; }
.right li img:first-of-type { width:3.5vw }
.info_txt p { font-size:32px; font-weight: 600; }

@media (max-width:1200px) {
  .right li img:first-of-type { width:5vw }
}
@media (max-width:1024px) {
  .right li img:first-of-type { width:50px }
  .hb_list img { height:76px; }
  .hb_list .info_txt { margin-top:30px }
}

@media (max-width:768px) {
  .right li &gt; a { padding: 10vw 5vw; }
  .hb_list .flex_cont { margin-top:0; }
  .hb_list .info_txt { margin-top:0; }
  .hb_list img { height:70px; }
  .info_txt p {  word-break: keep-all; font-size:28px;}
/*   .info_txt p br { display: none; } */
}

@media (max-width:550px) {
  .info_txt p {  font-size:25px;}
}

@media (max-width:425px) {
  .info_txt p {  font-size:18px;}
}

@media (max-width:375px) {
  .info_txt p {  font-size:16px;}
}</pre></body></html>