@charset "utf-8"; /* */
/* fontsize */
:root { --main-xs-default-size--: 14px; --main-ssm-default-size--: 16px; --main-sm-default-size--: 18px; --main-l-default-size--: 24px; --main-xl-default-size--: 30px; --main-xxl-default-size--: 60px; --main-mainTitle-size--: 32px; --main-subTitle-s-size--: 18px; --main-subTitle-m-size--: 50px; --main-subTitle-l-size--: 80px; --main-sub-r-size--: 24px; --main-sub-r-size02--: 20px; --main-sub-r-size03--: 20px; } 
@media (max-width: 1024px) { 
:root { --main-xs-default-size--: 12px; --main-ssm-default-size--: 15px; --main-sm-default-size--: 16px; --main-l-default-size--: 20px; --main-xl-default-size--: 28px; --main-xxl-default-size--: 36px; --main-mainTitle-size--: 20px; --main-subTitle-s-size--: 16px; --main-subTitle-m-size--: 32px; --main-subTitle-l-size--: 44px; --main-sub-r-size--: 20px; --main-sub-r-size02--: 16px; --main-sub-r-size03--: 18px; } 
 } 

/* common */
#main {
  background: linear-gradient(180deg, #0a0c14 0%, #12141f 50%, #0a0c14 100%);
  background-attachment: fixed;
  position: relative;
}
#main::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 20% 50%, rgba(30, 60, 114, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(42, 82, 152, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}
section[class*="block"] { background: transparent; overflow-x: hidden; } 
section[class*="block"] .titleWrap { display: flex; flex-direction: column; gap: 8px; } 
section[class*="block"] .titleWrap > .sTitle { font-size: var(--main-subTitle-s-size--); color: #3758FF; font-weight: 800; } 
section[class*="block"] .titleWrap > .mTitle { font-size: var(--main-subTitle-m-size--); line-height: 73px; color: #fff; font-weight:700; letter-spacing: -0.02em; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); } 
section[class*="block"] .titleWrap > .lTitle { font-size: var(--main-subTitle-l-size--); line-height: 110px; color: #fff; font-weight:700; letter-spacing: -0.02em; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); } 
.flex-center { align-items: center; } 
.flex-center .mTitle { text-align: center; } 
/* visual */
.visual { position: relative; width: 100%; height: 100vh; background: url("../img/block0051_bg.webp") no-repeat center /cover; } 
.visual::before { content: ""; z-index: 1; position: absolute; width: 100%; height: 100%; background: rgba(12, 10, 18, 0.2); } 
.visual::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 120px; background: linear-gradient(180deg, rgba(12, 10, 18, 0) 0%, #0c0a12 100%); } 
.visual .mainVideo { z-index: -1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } 
.visual .inner { position: relative; z-index: 10; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } 
.visual .descript { display: flex; flex-direction: column; align-items: center; gap: 15px; color: #fff; } 
.visual .descript > b { font-size: var(--main-mainTitle-size--); font-weight: 200; letter-spacing: 0.02em; } 
.visual .descript > p { font-size: var(--main-xxl-default-size--); font-weight:700; text-align: center; letter-spacing: -0.02em; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); } 
.visual .descript > p > em { font-weight: 800; } 
/* block001 */
.block001 { padding: 160px 0; box-sizing: border-box; } 
.block001 .titleWrap { position: relative; z-index: 1; } 
.block001 .content { display: flex; justify-content: flex-end; margin: 120px 0 0 } 
.block001 .content ul { display: flex; gap: 40px; } 
.block001 .content ul li.left { margin: 190px 0 0; } 
.block001 .content ul li.right > p { color: rgba(255, 255, 255, 0.9); font-size: var(--main-ssm-default-size--); line-height: 26px; margin: 20px 0 35px; font-weight: 200; } 
/* block002 */
.block002 { position: relative; } 
.block002::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 200px; background: linear-gradient(0deg, rgba(12, 10, 18, 0) 0%, #0c0a12 100%); } 
.block002::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 220px; background: linear-gradient(180deg, rgba(12, 10, 18, 0) 0%, #0c0a12 100%); } 
.block002 .bg_wrap { background: url("../img/main/block0021_bg.webp") no-repeat center / cover; padding: 90px 0 150px; box-sizing: border-box; } 
.block002 .inner { position: relative; } 
.block002 .inner02 { margin: 50px 0 0; } 
.block002 .BckSw02 { padding:0 0 50px; } 
.block002 .BckSw02 > .BckSw02_wrap > .box > .desc { width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; background: #3758FF; opacity: 0; visibility: hidden; transition: all .3s; } 
.block002 .BckSw02 > .BckSw02_wrap > .box > .desc > span { color: #fff; font-size: var(--main-sm-default-size--); font-weight: 700; text-align: center; } 
.block002 .BckSw02 > .BckSw02_wrap > .box a { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } 
.block002 .swiper-slide { scale: 0.9; transform: translateY(80px); transition: all .3s; } 
.block002 .swiper-slide-active { scale: 1; transform: translateY(0); } 
.block002 .BckSw02 > .BckSw02_wrap > .box.swiper-slide-active > .desc { opacity: 1; visibility: visible; } 
.block002 .swiper-pagination-bullet-active { background: #3758FF !important; } 
.block002 .swiper-pagination-bullet { border-radius: 0; background: rgba(255, 255, 255, 0.20); opacity: 1; } 
.swiper-button-next:after,
.swiper-button-prev:after { content: none; } 
.swiperFunction { z-index: 10; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 560px; width: 100%; position: absolute; display: flex; justify-content: space-between; flex-direction: row-reverse; } 
.swiper_btn { position: relative; right: initial; left: initial; } 
.swiper_btn > img { position: absolute; } 
.swiper_btn > .btnIcon[class*="active"] { opacity: 0; visibility: hidden; transition: all .3s; } 
/* block003/block004 board_title */
.content .board_title { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #fff; padding: 0 0 24px; box-sizing: border-box; } 
.content .board_title > b { font-size: var(--main-mainTitle-size--); font-weight: 700; color: #fff; } 
.content .board_title > a { width: 32px; height: 32px; } 
.content .board_title > a > img { width: 100%; height: 100%; object-fit: cover; display: flex; } 
/* block003 */
.block003 { padding: 90px 0 80px; box-sizing: border-box; } 
.block003 .inner { display: flex; gap: 40px 120px; } 
.block003 .titleWrap { min-width: 500px; max-width: 500px; width: 100%; } 
.block003 .content { width: 100%; } 
.block003 .noticeBoard { width: 100%; } 
.block003 .noticeBoard > table { width: 100%; border-spacing: 0; border-collapse: collapse; } 
.block003 .noticeBoard > table > tbody { display: flex; width: 100%; flex-direction: column; } 
.block003 .noticeBoard > table tr { width: 100%; display: flex; align-items: center; justify-content: space-between; background-color: transparent !important; padding: 25px 20px; box-sizing: border-box; border-bottom: 1px solid rgba(255, 255, 255, 0.4); } 
.block003 .noticeBoard > table td { display: flex; align-items: center; } 
.block003 .noticeBoard > table td.subject { max-width: 90%; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 
.block003 .noticeBoard > table td.subject > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; max-width: 660px; color: #fff !important; font-size: var(--main-sm-default-size--); font-weight: 200; } 
.block003 .noticeBoard > table td.date { max-width: max-content; width: 100%; color: rgba(255, 255, 255, 0.6); } 
/* block004 */
.block004 { padding: 0 0 160px; box-sizing: border-box; } 
.block004 .success { margin: 20px 0 0; } 
.block004 .board_wrap { display: flex; gap: 20px; flex-wrap: wrap; } 
.block004 .board_wrap > div.cont_box { position: relative; max-width: calc((100% - 20px * 3) / 4); width: 100%; height: 310px; background-color: #fff; padding: 30px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; gap: 10px 0; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; } 
.block004 .board_wrap > div.cont_box::before { opacity: 0; visibility: hidden; transition: all 0.3s; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 3px solid transparent; background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); border-radius: 8px; touch-action: none; pointer-events: none; } 
.block004 .board_wrap > div.cont_box .category { width: 50px; height: 25px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); margin: 0 0 12px; border-radius: 4px; } 
.block004 .board_wrap > div.cont_box .subject { font-size: var(--main-sub-r-size03--); font-weight: 700; line-height: 30px; height: 60px; width: 100%; max-width: max-content; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } 
.block004 .board_wrap > div.cont_box .content { margin: 15px 0 0; font-size: var(--main-ssm-default-size--); line-height: 25px; display: inline-block; width: 100%; max-width: max-content; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } 
.block004 .board_wrap > div.cont_box .detail { display: flex; align-items: center; gap: 4px; font-size: var(--main-ssm-default-size--); font-weight: 500; } 
.block004 .board_wrap > div.cont_box .content p { text-align: left !important; } 
.block004 .board_wrap > div.cont_box .content * { text-align: left !important; font-size: 16px !important; line-height: 25px !important; font-weight: 400 !important; margin: 0 !important; background: none; color: #232323 !important; } 
.block004 .board_wrap > div.cont_box .content img { display: none; } 
.block004 .board_wrap > div.cont_box .content p img { display: none; width: 100%; } 
.block004 .board_wrap > div.cont_box .content h2 img { display:none !important; } 
.block004 .board_wrap > div.cont_box .content h2 br:nth-of-type(1):last-of-type,
.block004 .board_wrap > div.cont_box .content br { display:none !important; } 

/* block005 */
.block005 { position: relative; height: 960px; background:#000 url("../img/visual.webp")center center / cover !important; display: flex; justify-content: center; align-items: center; } 
.block005::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 320px; background: linear-gradient(0deg, rgba(12, 10, 18, 0) 0%, #0c0a12 100%); } 
.block005::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 100px; background: linear-gradient(180deg, rgba(12, 10, 18, 0) 0%, #0c0a12 100%); } 
.block005 .bg_wrap { padding: 100px 0 120px; box-sizing: border-box; } 
.block005 .titleWrap { position: relative; } 
.block005 .content { margin: 40px 0 0; } 
.block005 .content ul.list { display: flex; } 
.block005 .content ul.list > li.map { max-width: 1000px; width: 100%; height: 540px; } 
.block005 .content ul.list > li.desc { display: flex; flex-direction: column; gap: 40px; min-width: 440px; padding: 60px 30px; box-sizing: border-box; background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); color: #fff; overflow: hidden; position: relative; box-shadow: 0 12px 36px rgba(30, 60, 114, 0.4); } 
.block005 .content ul.list > li.desc::before { content: ""; position: absolute; right: 0px; bottom: 0px; width: 262px; height: 66px; background: url("../img/icon/block005_mark01.svg") no-repeat center / cover; } 
.block005 .content ul.list > li.desc > em { font-size: var(--main-sub-r-size--); font-weight: 700; } 
.block005 .content ul.list > li.desc > .map_info { display: flex; flex-direction: column; gap: 10px; } 
.block005 .content ul.list > li.desc > .map_info > li { display: flex; gap: 8px; } 
.block005 .content ul.list > li.desc > .map_info > li > span { min-width: max-content; font-size: var(--main-ssm-default-size--); font-weight: 700; } 
.block005 .content ul.list > li.desc > .map_info > li.used { margin: 20px 0 0; } 

@media (hover: hover) {
.swiper_btn:hover > .btnIcon[class*="active"] { opacity: 1; visibility: visible; }
.block004 .board_wrap > div.cont_box:hover { transform: translateY(-5px); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3); }
.block004 .board_wrap > div.cont_box:hover::before { visibility: visible; opacity: 0.15; }
 } 

@media (max-width: 1024px) { /* */
/* common */
section[class*="block"] .titleWrap { display: flex; flex-direction: column; gap: 8px; } 
section[class*="block"] .titleWrap > .mTitle { line-height: 46px; word-break: keep-all; } 
section[class*="block"] .titleWrap > .lTitle { line-height: 64px; word-break: keep-all; } 
/* block001 */
.block001 { padding: 60px 0 50px; } 
.block001 .content { justify-content: flex-start; margin:30px 0 0; } 
.block001 .content ul { width: 100%; } 
.block001 .content ul > li.left { display: none; } 
.block001 .content ul > li.right { width: 100%; } 
.block001 .content ul li.right > p { margin:0 0 25px; } 
/* block002 */
.block002 .bg_wrap { padding: 50px 0 100px; } 
.block002 .inner02 { margin: 30px 0 0; } 
.block002 .BckSw02 { padding: 0 20px 40px; box-sizing: border-box; } 
.block002 .BckSw02 > .BckSw02_wrap > .box > .desc { height: 40px; } 

/* block003 */
.block003 { padding: 40px 0; } 
.block003 .inner { flex-direction: column; } 
.content .board_title { padding: 0 0 16px; } 
.content .board_title > a { width: 24px; height: 24px; } 
.block003 .noticeBoard > table tr { padding: 16px 10px; } 
.block004 .board_wrap > div.cont_box { max-width: calc(50% - 10px); height: auto; padding: 20px; } 
/* block004 */
.block004 { padding: 0 0 80px; } 
/* block005 */
.block005{height:410px}
.block005 .bg_wrap { padding: 40px 0 80px; } 
.block005 .content { margin: 30px 0 0; } 
.block005 .content ul.list { flex-direction: column; } 
.block005 .content ul.list > li.desc { padding: 30px 20px 40px; gap: 20px; min-width: initial; } 
.block005 .content ul.list > li.desc > .map_info > li.used { margin: 10px 0 0; } 
.block005 .content ul.list > li.desc::before { width:178px; height: 45px; } 
 } 

@media (max-width: 768px) { /* */

/* block002 */
.block002 .BckSw02 > .BckSw02_wrap > .box { max-width: initial; } 
.swiperFunction { display: none; } 
/* block005 */
.block005 .content ul.list > li.map { height: 240px; } 
 }