@charset "UTF-8";

/* Common */
.main-section {}
.main-section .section-title { font-size: 28px; font-weight: 800; color: #000; letter-spacing: -2.5px; }
.main-section .section-label { display: inline-block; margin-bottom: 5px; font-size: 11px; font-weight: 600; color: #2985CE; }
.main-section .section-inner { width: 1040px; margin: 0 auto; }

/* Visual */
#mainVisual { background: linear-gradient(to right, #fff, #bce2ff, #b2d8f5); }
#mainVisual .container { position: relative; height: 770px; }
#mainVisual .visual-title { position: absolute; top: 50%; left: 50%; transform: translate(-100%, -60%); line-height: 1.1; text-align: right; }
#mainVisual .visual-title p { margin-bottom: 10px; font-size: 48px; font-weight: 700; color: #000; }
#mainVisual .visual-title span { margin-right: 15px; font-size: 36px; font-weight: 500; color: #000; }
#mainVisual .visual-image { position: absolute; top: 50%; left: 50%; width: 640px; height: auto; transform: translate(10%, -55%); }

#mainVisual .visual-info { position: absolute; bottom: 0; left: 0; width: 100%; display: flex; align-items: flex-end; }
#mainVisual .visual-info .info-product { width: 390px; height: 140px; background: #fff; }
#mainVisual .visual-info .info-product a { display: block; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 36px; font-weight: 500; color: #000; }
#mainVisual .visual-info .info-product a img { width: 30px; height: auto; margin-left: 10px; margin-top: 5px; }

#mainVisual .visual-info .info-text { width: calc(100% - 390px); height: 110px; background: rgba(0, 0, 0, .7); padding: 15px; color: #fff; }
#mainVisual .visual-info .info-text strong { display: block; margin-bottom: 5px; font-size: 24px; font-weight: 500; }
#mainVisual .visual-info .info-text p { font-size: 17px; font-weight: 200; }

/* Product */
#mainProduct {}
#mainProduct .section-inner { display: flex; justify-content: space-between; padding: 80px 40px 60px 40px; }
#mainProduct .section-inner .section-wrap { flex: 0 0 420px; }
#mainProduct .section-inner .section-wrap:first-child { padding-top: 30px; }
#mainProduct .section-inner .section-wrap:last-child .image-title { font-weight: 800; }

#mainProduct .section-title { margin-bottom: 15px; padding: 10px 0; }

#mainProduct .product-image .image-content { display: flex; justify-content: space-between; margin-top: 10px; }
#mainProduct .product-image .image-content .image-title { width: calc(100% - 240px); font-size: 24px; font-weight: 700; }
#mainProduct .product-image .image-content .image-text { width: 220px; font-size: 14px; }

/* System */
#mainSystem { position: relative; height: 650px; }
#mainSystem .section-inner { display: flex; justify-content: space-between; padding: 50px 0; }
#mainSystem .section-inner .section-label { color: #fff; }
#mainSystem .section-inner .section-title { color: #fff; }
#mainSystem .section-inner .section-wrap { flex: 0 0 420px; height: 550px; }
#mainSystem .section-inner .section-wrap:first-child { display: flex; flex-direction: column; justify-content: flex-start; padding: 100px 0 120px 0; }


#mainSystem .system-text { margin-top: auto; font-size: 14px; color: #fff; }

#mainSystem .system-item { display: flex; flex-direction: column; align-items: flex-end; }
#mainSystem .system-item .item { width: 412px; height: 177px; background: rgba(255, 255, 255, .15); transition: width .28s ease, height .28s ease, background-color .28s ease; }
#mainSystem .system-item .item a { position: relative; display: block; width: 100%; height: 100%; padding: 30px 20px; transition: padding .28s ease; }
#mainSystem .system-item .item a .item-title { margin-bottom: 15px; font-size: 28px; font-weight: 800; color: #fff; }
#mainSystem .system-item .item a .item-text { width: 320px; font-size: 14px; color: #fff; }


#mainSystem .system-item .item.active { width: 470px; height: 196px; background: rgba(37, 128, 199, .8); }
#mainSystem .system-item .item.active a { padding-left: 35px;  }
#mainSystem .system-item .item.active a:after { position: absolute; top: 50%; right: 30px; display: block; width: 8px; height: 8px; border-width: 2px; border-style: solid; border-color: #fff #fff transparent transparent; content: ""; transform: translateY(-50%) rotate(45deg); }

/* System - Background */
#mainSystem .section-bg { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; }
#mainSystem .section-bg::before { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1440px; height: 100%; content: ""; background-image: url('/assets/images/company.png'); background-position: 80% 100%; background-size: 80%; background-repeat: no-repeat; }
#mainSystem .section-bg::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: rgba(0, 0, 0, .8); }

/* Company */
#mainCompany { position: relative; height: 760px; background: #EAF3FC; overflow: hidden; }
#mainCompany .section-inner { position: relative; height: 760px; padding: 50px 40px; }
#mainCompany .section-inner .section-wrap { position: relative; z-index: 2; }
#mainCompany .section-inner .section-wrap:first-child { padding-top: 40px; }

#mainCompany .company-text { margin-top: 30px; font-size: 17px; }
#mainCompany .company-more { margin-top: 45px; }
#mainCompany .company-more a { font-size: 12px; font-weight: 700; color: #2985CE; }
#mainCompany .company-more img { margin-right: 10px; }

/* - 이미지 */
#mainCompany .section-inner::after { position: absolute; top: 0; bottom: 0; left: 430px; z-index: 1; width: 800px; height: 100%; content: ""; background: #fff; transform: skewX(-25deg); }
#mainCompany .section-inner::before { position: absolute; top: 0; bottom: 0; left: 500px; z-index: 2; width: 600px; content: ""; background-image: url("/assets/images/main_company01.png");  background-repeat: no-repeat; background-position: center; }

/* #mainCompany .section-inner::before { content:""; position:absolute; inset:0; background: linear-gradient(112deg, #EAF3FC 0 43%, transparent 43%); z-index:0; } */
/* #mainCompany .section-inner::after { content:""; position:absolute; top:0; right: 0px; bottom:0; width:30vw; background: linear-gradient(-70deg, #EAF3FC 0 40%, transparent 40%); } */

/* #mainCompany::after { position: absolute; top: 0; bottom: 0; left: 800px; z-index: 1; width: 800px; content: ""; background: #fff; transform: skewX(-25deg); }
#mainCompany::before { position: absolute; top: 0; bottom: 0; left: 950px; z-index: 2; width: 45%; content: ""; background-image: url("/assets/images/main_company01.png");  background-repeat: no-repeat; } */

/* Quick */
#mainQuick {}
#mainQuick .section-inner { padding: 70px 40px; }

#mainQuick .quick-title { display: flex; align-items: center; }
#mainQuick .quick-title p { margin-right: 20px; font-size: 56px; font-weight: 400; color: #2985ce; }
#mainQuick .quick-title span { font-size: 24px; font-weight: 400; color: #000; }

#mainQuick .quick-item {}
#mainQuick .quick-item .item { display: flex; justify-content: flex-start; align-items: center; padding: 50px 0; border-bottom: 2px solid #dadade; }
#mainQuick .quick-item .item:last-child { border-bottom: 0; }

#mainQuick .quick-item .item .item-image {}
#mainQuick .quick-item .item .item-content { margin-left: 60px; }
#mainQuick .quick-item .item .item-content .item-title { margin-bottom: 15px; font-size: 28px; font-weight: 800; }
#mainQuick .quick-item .item .item-content .item-text { font-size: 22px; }
#mainQuick .quick-item .item .item-link { margin-left: auto; }
#mainQuick .quick-item .item .item-link a { display: flex; justify-content: center; align-items: center; width: 240px; height: 80px; background: #2985ce; border-radius: 15px; font-size: 28px; font-weight: 800; color: #fff; }

/* Display */
#mainDisplay {}
#mainDisplay .section-inner { width: 100%; padding: 20px 80px; overflow: hidden; }

#mainDisplay .marquee { display: flex; overflow: hidden; }
#mainDisplay .marquee .marquee-text { font-size: 200px; font-weight: 900; color: #EBEBEB; white-space: nowrap; }