@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px;outline-color:#f37736;}

.only-desktop-tablet {display:block;}
.only-desktop {display:block;}
.only-tablet {display:none;}
.only-mobile {display:none;}

.contain {max-width:1460px; padding-left:30px; padding-right:30px; margin:0 auto;}

#wrapper {position:relative;}

/* header */
#header {height:var(--header-height); padding:0 var(--space-60); display:flex; align-items:center; justify-content:space-between; background:rgba(0, 0, 0, .4); position:fixed; top:0; left:0; width:100%; z-index:100; transition:.3s;}

.sitelogo a {display:block; background:url("/images/common/logo.png") no-repeat 0 center / contain; width:clamp(97px, calc(150 / var(--inner) * 100vw), 150px); height:clamp(42px, calc(41 / var(--inner) * 100vw), 41px); font-size:0; line-height:0;}

.pull-right {display:flex; align-items:center; }

/* #gnb {margin-right:var(--space-20);}
#gnb>ul {display:flex;} 
#gnb>ul>li {position:relative; padding:0 var(--space-30);}
#gnb>ul>li>a { text-align:center; position:relative; display:flex; align-items:center; gap:0 var(--space-20); justify-content:center; height:var(--header-height); color:#fff; font-size:var(--font-size-20); font-weight:600; letter-spacing:-.03em; line-height:1.3em;}
#gnb>ul>li:hover>a {color:var(--color-primary) !important;}
#gnb>ul>li>a:after {transition:.3s; content:''; width: 12px; height: 8px; background: url('/images/common/gnb-arrow.png') no-repeat 50% 50% / contain;}
#gnb>ul>li:hover>a:after {transform:scaleY(-1);}
#gnb .submenu {display:none; position:absolute; left:50%; width:180px; transform:translateX(-50%); background:#fff; border:1px solid #002E63; border-top:0;}
#gnb .submenu>ul>li>a {display:block; padding:var(--space-12) var(--space-18); color:#002E63; font-size:var(--font-size-16); line-height:1.33em; letter-spacing:-.03em; font-weight: 600;}
#gnb .submenu>ul>li>a:hover {color:var(--color-primary);} */

#gnb {margin-right:var(--space-20);}
#gnb>ul {display:flex;} 
#gnb>ul>li {position:relative; padding:0 var(--space-30);}
#gnb>ul>li>a { text-align:center; position:relative; display:flex; align-items:center; gap:0 var(--space-20); justify-content:center; height:var(--header-height); color:#fff; font-size:var(--font-size-20); font-weight:600; letter-spacing:-.03em; line-height:1.3em;}
#gnb>ul>li:hover>a {color:var(--color-primary) !important;}
#gnb>ul>li>a:after {transition:.3s; content:''; width: 12px; height: 8px; background: url('/images/common/gnb-arrow.png') no-repeat 50% 50% / contain;}
#gnb>ul>li:hover>a:after {transform:scaleY(-1);}
#gnb .submenu {display:none; position:absolute; left:50%; width:280px; transform:translateX(-50%); background:#fff; border:1px solid #002E63; border-top:0; min-height:450px; overflow:overlay; -ms-scroll-chaining:none; overscroll-behavior:contain;}
#gnb .submenu>ul>li>a {display:flex; align-items: center; justify-content: space-between; padding:var(--space-12) var(--space-18); color:#002E63; font-size:var(--font-size-16); line-height:1.33em; letter-spacing:-.03em; font-weight:600;}
#gnb .submenu>ul>li.has-depth>a:after {transition:.3s; content:''; width: 6px; height: 10px; background: url('/images/common/gnb-arrow2.png') no-repeat 50% 50% / contain;}
#gnb .submenu>ul>li>a:hover {color:var(--color-primary);}
#gnb .depth {display:none; position:absolute; top:0; left:278px; width:200px; height:100%; background:#fff; border:1px solid #002E63; border-top:0;}
#gnb .depth ul {height:100%; overflow:overlay; -ms-scroll-chaining:none; overscroll-behavior:contain;}
#gnb .depth ul li {position:relative;}
#gnb .depth ul li a{word-break: break-all; display:block; padding:var(--space-12) var(--space-18); color:#002E63; font-size:var(--font-size-16); line-height:1.33em; letter-spacing:-.03em; font-weight: 600;}
#gnb .depth ul li:hover a {color:var(--color-primary);}

#gnb>ul>li:hover>a {color:var(--color-primary) !important;}
#gnb>ul>li:hover .submenu {display:block; overflow:visible;}
#gnb .submenu>ul>li:hover .depth {display:block;}

#header .search {position:relative;}
#header .search .input {width: 200px; padding-left:var(--space-20); font-size:var(--font-size-14); border-radius:4px; height: 42px; padding-right:35px; background:rgba(255,255,255,.2); border:0;}
#header .search .input::placeholder {color:#fff;}
#header .search button {position:absolute; right:var(--space-20); top:50%; margin-top:-7px; width:14px; height:14px; border:0; font-size:0; background-color:transparent;}
#header .search button svg {fill:#fff;} 

.language {position:relative; display:inline-block; margin-left:var(--space-50);}
.language .toggle-button {background:transparent; height: 20px; padding:0 var(--space-8); z-index:100; display:flex; align-items:center; color:#fff; font-size:var(--font-size-14); font-weight:600; border:0;}
.language .toggle-button .ico {margin-right:var(--space-5); width:16px; height:16px;} 
.language .toggle-button .txt {font-size:var(--font-size-14);}
.language .toggle-button svg {display:block; width:100%; height:auto;}
.language .toggle-button .chevron {margin-left:var(--space-10); width:12px; margin-top:-.1em;}
.language .toggle-button .chevron path {fill:#fff;}
.language .toggle-layer {z-index:90; display:none; position:absolute; left:0; top:calc(100% + var(--space-10)); width:100%; text-align:center;}
.language .toggle-layer ul {display:grid; gap:var(--space-5) 0;}
.language .toggle-layer a {font-weight:600; line-height:26px; display:block; text-align:center; background:#505050; font-size:var(--font-size-12); color: #fff;}
.language .toggle-layer a:hover {background:#002E63;}
.language.active .toggle-button {color: #002E63;}
.language.active .toggle-button .ico path {stroke:#002E63;}
.language.active .toggle-button .chevron {transform:scaleY(-1);}
.language.active .toggle-button .chevron path {fill:#002E63;}

/* allmenu */
.btn-all-menu {margin-left:var(--space-20); display:block; position:relative; width:29px; height:29px;}
.btn-all-menu span {position:absolute; left:0; right:0; top:50%; height:3px; margin-top:-1p ; background:#fff; border-radius:4px;}
.btn-all-menu span:before,
.btn-all-menu span:after {content:" "; position:absolute; left:0; right:0; height:3px; background:#fff; border-radius:4px;}
.btn-all-menu span:before {top:-12px;}
.btn-all-menu span:after {bottom:-12px;}

.allmenu {opacity:0; visibility:hidden; position:fixed; left:0; top:0; width:100vw; height:100vh; z-index:-1111; background:url('/images/common/menu-bg.jpg') no-repeat 50% 50% / cover; transition:all 0.5s 0.3s ease-in-out;}
.allmenu .logo {position:absolute; left:var(--space-60); top:var(--space-20);}
.allmenu .logo img {height:clamp(34px, calc(42 / var(--inner) * 100vw), 42px);}
.allmenu .nav {opacity:0; height:100%;}
.allmenu .nav > ul {display:flex; flex-direction:column; justify-content:center; padding:var(--header-height) var(--space-60) 0 var(--space-60); width:100%; height:100%;}
.allmenu .nav > ul > li {position:relative; position:relative; width:100%; display:flex; align-items:center;}
.allmenu .nav > ul > li:not(:last-child) {margin-bottom:var(--space-40);}
.allmenu .nav > ul > li:first-child {margin-top:0;}
.allmenu .nav > ul > li > a {color:rgba(255,255,255,0.3); font-size:var(--font-size-56); font-weight:700; transition:all 0.3s ease-in-out; width:20.8%; line-height:1.2em;}
.allmenu .nav > ul > li > a:hover {color:var(--color-primary);}
.allmenu .nav .submenu {z-index:20; position:absolute; left:20.83%; right:0; top:1em; bottom:0; flex:1; display:none;}
.allmenu .nav .submenu > ul {display:flex; flex-wrap:wrap; gap:var(--space-30) var(--space-120);}
.allmenu .nav .submenu > ul > li {position:relative; position:relative; opacity:1; animation:submenu 0.5s 0.3s; animation-fill-mode:both;}
.allmenu .nav .submenu > ul > li > a {color:#fff; font-size:var(--font-size-20); font-weight:700; white-space:nowrap; transition:all 0.3s ease-in-out;}
.allmenu .nav .depth {margin-top:var(--space-30); width:100%;}
.allmenu .nav .depth ul li {margin-bottom:var(--space-20); color:rgba(255,255,255,.4); font-weight:400; line-height:1.5em; letter-spacing:-.03em;}
.allmenu .nav .depth ul li a:hover {color:#fff; text-decoration:underline;}
.allmenu .close {position:absolute; right:var(--space-60); top:var(--space-30); width:29px; height:29px; text-indent:-9999em; overflow:hidden; background:url('/images/common/all-close.png') no-repeat 50% 50% / contain; border:0; font-size:0;}

.allmenu.on {opacity:1; visibility:visible; z-index:10000;}
.allmenu.on .nav {opacity:1; animation:navBox 1s .2s both;}
.allmenu.off {animation:allClose .5s .1s both;}
.allmenu .nav > ul > li.hover .submenu {display:block;}
.allmenu .nav > ul > li.hover .submenu > ul > li {animation:submenu 0.5s 0.3s; animation-fill-mode:both;}

@keyframes submenu {
	0% {opacity:0; transform:translateX(30px);}
	100% {opacity:1; transform:translateY(0);}
}

@keyframes navBox {
	0% {opacity:0; transform:translateX(30px);}
	100% {opacity:1; transform:translateX(0);}
}

@keyframes allClose {
	0% {opacity:1;}
	100% {opacity:0;}
}

/* for mobile */
.btn-m-menu {margin-left:var(--space-20); display:none; position:relative; width:29px; height:29px;}
.btn-m-menu span {position:absolute; left:0; right:0; top:50%; height:3px; margin-top:-1p ; background:#fff; border-radius:4px;}
.btn-m-menu span:before,
.btn-m-menu span:after {content:" "; position:absolute; left:0; right:0; height:3px; background:#fff; border-radius:4px;}
.btn-m-menu span:before {top:-12px;}
.btn-m-menu span:after {bottom:-12px;}

.mobile-navigation {display:none; position:fixed; top:0; right:0; width:300px; height:100%; overflow:auto; transition:.2s linear; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:102;}
.mobile-navigation .home {background: #121212; display:flex; align-items:center; height:80px; padding:0 20px; color:#242424; font-size:19px; font-weight:700; line-height:1.5em;}
.mobile-navigation .home img {height:48px;}
.mobile-navigation .search {position:relative;}
.mobile-navigation .search .input {width: 200px; padding-left:var(--space-20); font-size:var(--font-size-14); border-radius:4px; height: 42px; padding-right:35px; background:rgba(255,255,255,.2); border:0;}
.mobile-navigation .search .input::placeholder {color:#121212;}
.mobile-navigation .search button {position:absolute; right:var(--space-20); top:50%; margin-top:-7px; width:14px; height:14px; border:0; font-size:0; background-color:transparent;}
.mobile-navigation .search button svg {fill:#121212;} 
.mobile-navigation .nav-menu>ul {border-top:1px solid #ddd;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #ddd;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; padding:10px 48px 10px 20px; display:block; color:#242424; font-size:19px; font-weight:700; line-height:1.5em;}
.mobile-navigation .nav-menu>ul>li>a:after {content:""; position:absolute; top:50%; right:20px; transform:translateY(-75%) rotate(45deg); width:11px; height:11px; border-right:2px solid #505050; border-bottom:2px solid #505050;}
.mobile-navigation .nav-menu>ul>li.active>a {color:#fff; background:var(--color-primary);}
.mobile-navigation .nav-menu>ul>li.active>a:after {transform:translateY(-35%) rotate(-135deg); border-color:#fff;}
.mobile-navigation .nav-menu .submenu {display:none; background:#f8f8f8; color:#454545; font-size:16px; font-weight:400; line-height:1.5em;}
.mobile-navigation .nav-menu .submenu ul li {border-top:1px solid #e5e5e5;}
.mobile-navigation .nav-menu .submenu ul li a {display:block; padding:12px 20px;}
.mobile-navigation .nav-menu .submenu ul li a:hover {color:var(--color-primary);}
.mobile-navigation .close {position:absolute; top:25px; right:15px; width:26px; height:26px; text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:12px; left:0; width:100%; height:3px; background:#fff; border-radius:3px;}
.mobile-navigation .close:before {transform:rotate(45deg);}
.mobile-navigation .close:after {transform:rotate(-45deg);}
.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6; z-index:101;}

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);}
html.menu-opened .mobile-overlay {display:block;}

/* main */
.main-visual {position:relative; height:100vh; background:#000; overflow:hidden; color:#fff;}
.main-visual .slick-slide {position:relative; height:100vh; overflow:hidden;}
.main-visual .item {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden;}
.main-visual .item .video-js,
.main-visual .item video {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.main-visual .item iframe {position:absolute; top:50%; left:50%; width:100vw; height:100vh; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
.main-visual .item img {position:absolute; top:50%; left:0; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.main-visual .caption {position:absolute; position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; z-index:2; z-index:10}
.main-visual .caption .ani {overflow: hidden; display: block;}
.main-visual .caption .ani span {display: block; opacity: 0;}
.main-visual .caption .tit {margin-bottom:var(--space-60); font-size:var(--font-size-50); font-weight:700; letter-spacing:-.03em; line-height:1.33em; color:#fff;}
.main-visual .caption .txt {margin-bottom:var(--space-20); font-size:var(--font-size-18); font-weight:600; letter-spacing:-.03em; line-height:1.33em; color:#fff;}
.main-visual .caption .btns {display: flex; gap:0 var(--space-10);}
.main-visual .caption .btns .btn {background:rgba(255, 255, 255, .8); border:1px solid #D0D0D0; color: #042953;font-size:var(--font-size-14); font-weight: 400; width: clamp(120px, calc(167 / var(--inner) * 100vw), 167px); height:clamp(40px, calc(48 / var(--inner) * 100vw), 48px); display: flex; align-items: center; justify-content: center; text-align:center;}
.main-visual .caption .btns .btn:hover {color: #fff; border:0; background: var(--color-primary);}
.main-visual .slick-dots {line-height: 0; position: absolute; bottom:var(--space-50); width:100%; text-align:center;}
.main-visual .slick-dots li {display: inline-block; margin:0 var(--space-7);}
.main-visual .slick-dots li button {border:0; font-size: 0; background-color: #505050; width:clamp(8px, calc(10 / var(--inner) * 100vw), 10px); height:clamp(8px, calc(10 / var(--inner) * 100vw), 10px);}
.main-visual .slick-dots li.slick-active button {background-color: #002E63;}

.main-visual .active .ani span {animation: textAni 1s ease forwards;}
.main-visual .active .ani1 span {animation-delay: 0.2s;}
.main-visual .active .ani2 span {animation-delay: 0.4s;}
.main-visual .active .ani3 span {animation-delay: 0.6s;}

@keyframes textAni {
	0%{opacity: 0; transform:translateY(100%);}
	100%{opacity: 1; transform:translateY(0);}
}

@media (min-aspect-ratio:16/9) {
	.main-visual .item iframe {height:56.25vw;}
}
@media (max-aspect-ratio:16/9) {
	.main-visual .item iframe {width:177.78vh;}
}

.fp-viewing-6 #fp-nav {display: none;}

#fp-nav.active ul li a.active:after {background: #002E63;}
#fp-nav.active ul li a span {border-color:#002E63;}
#fp-nav.active ul li a.active span {background: #002E63;} 

.m-more {transition:.3s; border:1px solid #121212; font-family:var(--font-paperlogy); font-size:var(--font-size-14); font-weight:600; letter-spacing:-.03em; line-height:1.33em; display:inline-flex; align-items:center; gap:0 var(--space-30); padding:0 var(--space-20); height:clamp(40px, calc(48 / var(--inner) * 100vw), 48px);; background:#fff; color:#121212;}
.m-more:after {content:''; width:6px; height:11px; background:url('/images/main/m-more.png') no-repeat 50% 50% / contain;}
.m-more:hover {border-color:var(--color-primary); background:var(--color-primary); color:#fff;}
.m-more:hover:after {background-image:url('/images/main/m-more-on.png');}

.section-inner {padding:calc(var(--header-height) + 10px) 0 20px;}

.m-heading {text-align:center; margin-bottom:var(--space-90);}

.m-cate {margin-bottom:var(--space-15); font-size:var(--font-size-18); font-weight:600; letter-spacing:-.03em; line-height: 1.6em; color:var(--color-primary);}

.m-txt {margin-bottom:var(--space-5); font-size:var(--font-size-20); font-weight:600; letter-spacing:-.03em; line-height: 1.6em; color:#002E63;}

.m-tit {font-size:var(--font-size-56); font-weight:700; letter-spacing:-.03em; line-height:1.4em; color:#002E63;}

.main-about .section-inner {display:flex; align-items:center; padding: 0;}
.main-about .content {padding:60px 0 60px 30px; width:50%; display:flex; align-items:flex-end; justify-content:flex-end;}
.main-about .content .inner {margin-right:var(--space-150);}
.main-about .content h2 {font-size:var(--font-size-88); font-weight:700; letter-spacing:-.03em; line-height:1.14em;}
.main-about .content h2 .c1 {color:#002E63;}
.main-about .content h2 .c2 {color:#3697D4;}
.main-about .content .m-txt {margin:var(--space-40) 0 var(--space-90);}
/* .main-about .m-more {border-color:var(--color-primary); background:var(--color-primary); color:#fff;}
.main-about .m-more:after {background-image:url('/images/main/m-more-on.png');} */
.main-about .image {width: 50%; height: 100vh; flex:1; aspect-ratio:960/980; overflow:hidden;}
.main-about .image img {width:100%; height:100%; object-fit:cover;}

.main-quality {background: #EDF5F9;}
.main-quality .section-inner {display: flex; align-items: center; gap:0 var(--space-180); padding: 0;}
.main-quality .image {width: 36%; height: 100vh; aspect-ratio: 700/980;}
.main-quality .image img {width: 100%; height: 100%; object-fit: cover;}
.main-quality .content {flex:1; padding-right: 30px;}
.main-quality .content .m-tit {margin-bottom:var(--space-30);}
.main-quality .content .m-txt {margin-bottom:var(--space-60);}
.main-quality .content .items {max-width:780px; display: grid; grid-template-columns: repeat(3, 1fr); gap:0 var(--space-12);} 
.main-quality .content .item {background-repeat:  no-repeat; background-size: cover; background-position: 50% 50%; color: #fff; height: 330px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align:center;}
.main-quality .content .txt-1 {margin-top:var(--space-10); font-weight: 400; letter-spacing:-.03em; line-height: 1.4em;}
.main-quality .content .txt-2 {font-size:var(--font-size-20); font-weight: 600; letter-spacing:-.03em; line-height: 1.4em;}

.main-technology .m-tit {color:#002E63;}
.main-technology .items {height: 443px; color:#fff; display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-10);}
.main-technology .items .item {padding:var(--space-55) var(--space-40); position:relative; height:443px; display:flex; align-items:flex-start; flex-direction:column; transition:height 0.3s cubic-bezier(0.4,0,0.2,1), top 0.3s cubic-bezier(0.4,0,0.2,1); top:0;}
.main-technology .items .item >  *:not(.bg, .m-more) {position:relative; z-index:1;}
.main-technology .items .bg {filter:grayscale(100%); position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden;}
.main-technology .items .bg img {width:100%; height:100%; object-fit:cover;}
.main-technology .items h3 {padding-bottom:var(--space-20); margin-bottom:var(--space-30); border-bottom:1px solid rgba(255,255,255,.5); font-size:var(--font-size-32); font-weight:700; letter-spacing:-.03em; line-height:1.4em;}
.main-technology .items .list ul li {padding-left:15px; margin-bottom:var(--space-15); position:relative; font-size:var(--font-size-18); font-weight:600; letter-spacing:-.03em; line-height:1.4em;}
.main-technology .items .list ul li:last-child {margin-bottom:0;}
.main-technology .items .list ul li:before {content:''; position:absolute; left:0; top:.55em; width:5px; height:5px; background:#fff; border-radius:100%;}
.main-technology .items .m-more {opacity:0; position:absolute; left:var(--space-40); bottom:var(--space-40);}
.main-technology .items .item:hover {height:523px; top:calc((443px - 523px) / 2);}
.main-technology .items .item:hover .bg {filter:grayscale(0%);}
.main-technology .items .item:hover .m-more {opacity:1;}

.main-news .section-inner {padding: 0; background:#F9F9F9; overflow:hidden; display:flex; align-items: center; gap:0 var(--space-80);}
.main-news .title {height: 100vh; padding-right:var(--space-60); padding-top:12.5%; display:flex; justify-content:flex-end; width:50%; background:url('/images/main/news-title.jpg') no-repeat center center / cover;}
.main-news .title .m-heading {margin-bottom: 0; text-align:left; color:#fff;}
.main-news .title .m-heading .m-cate {color:#fff;}
.main-news .title .m-heading .m-tit {line-height: 1.2em; color:#fff; font-family: var(--font-paperlogy);}
.main-news .news {padding-left: 13.2%; flex:1 1 auto; min-width:0; width:1%;}
.main-news .news .list ul li {padding-bottom:var(--space-40); margin-bottom:var(--space-40); border-bottom:1px solid #ddd; display:flex; align-items:center; gap:0 var(--space-40);}
.main-news .news .list ul li:last-child {padding-bottom:0; margin-bottom:0; border-bottom:0;}
.main-news .news .list ul li.none {padding:40px 0; text-align:center; color:#999;}
.main-news .news .list .thumb {width:32.4%; overflow:hidden;}
.main-news .news .list .thumb a {display:block; position:relative; padding-bottom:70%; overflow:hidden;}
.main-news .news .list .thumb img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.main-news .news .list .info {flex:1 1 auto; min-width:0; width:1%;}
.main-news .news .list .info .cate {margin-bottom:var(--space-10); font-size:var(--font-size-14); font-weight:700; letter-spacing:-.03em; line-height:1.4em;}
.main-news .news .list .info .cate.c1 {color:var(--color-primary);}
.main-news .news .list .info .cate.c2 {color:var(--color-secondary);}
.main-news .news .list .info .tit {font-size:var(--font-size-20); font-weight:700; line-height:1.4em; max-height:1.4em; overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:nowrap;}
.main-news .news .list .info .txt {margin-top:var(--space-15); color:#505050; font-size:var(--font-size-14); line-height:1.5em; max-height:3em; overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.main-news .news .list .info .date {font-size:var(--font-size-12); font-weight:400; letter-spacing:-.03em; line-height:1.4em; color:#878787; margin-top:var(--space-30);}
.main-news .news .more-wrap {text-align:center; margin-top:var(--space-60);}

.main-product {overflow:hidden; background:#F0F7FA;}
.main-product .m-cate {color: var(--color-primary);}
.main-product .slider {position:relative;}
.main-product .slider .items {margin:0 calc(var(--space-20) * -1);}
.main-product .slider .item {padding: 0 var(--space-20);}
.main-product .slider .item a {display: block;}
.main-product .slider .img {margin-bottom:var(--space-25); aspect-ratio:440/330; overflow:hidden;}
.main-product .slider .img img {width:100%; height:100%; object-fit:cover;}
.main-product .slider .tit {margin-bottom:var(--space-8); font-size:var(--font-size-24); font-weight:700; letter-spacing:-.03em; line-height:1.4em;}
.main-product .slider .txt {font-weight:600; font-weight:700; letter-spacing:-.03em; line-height:1.4em; color:#505050;}
.main-product .slider .slick-arrow {position:absolute; top:35%; background-color:transparent; display:block; border:0; font-size:0; background-size:contain; background-repeat:no-repeat; background-position:50% 50%; width:22px; height:40px;}
.main-product .slider .slick-prev {left:-60px; background-image:url('/images/main/product-prev.png');}
.main-product .slider .slick-next {right:-60px; background-image:url('/images/main/product-next.png');}

/* sub */
.sub-visual {position:relative; height:clamp(200px, calc(350 / var(--inner) * 100vw), 350px); text-align:center; color:#fff; background:#333;}
.sub-visual .bg {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; transition:2s; background-repeat:no-repeat; background-position:50% 0; background-size:cover;}
.sub-visual .title {font-size:var(--font-size-72); font-weight:700; letter-spacing:-.03em; line-height:1.4em; position:absolute; top:50%; left:0; width:100%; padding:0 20px; transform:translateY(-50%);}
.sub-visual .bg1 {background-image:url("/images/common/sv1.jpg");}
.sub-visual .bg2 {background-image:url("/images/common/sv2.jpg");}
.sub-visual .bg3 {background-image:url("/images/common/sv3.jpg");}
.sub-visual .bg4 {background-image:url("/images/common/sv4.jpg");}
.sub-visual .bg5 {background-image:url("/images/common/sv5.jpg");}
.sub-visual .bg6 {background-image:url("/images/common/sv6.jpg");}

.path-wrap {position:absolute; left:0; width:100%; bottom:var(--space-20);}
.path-wrap .wrap {display:inline-block; margin:0 auto; background:rgba(0, 0, 0, .7); border-radius:40px;}
.path-wrap .inner {display:flex;}
.path-wrap .home a {display:block; width:64px; height:64px; background:url("/images/common/home.png") 50% 50% no-repeat; background-size:24px; text-indent:-999em; overflow:hidden;}
.path-wrap .part {position:relative; min-width:280px; z-index:50;}
.path-wrap .part:before {position:absolute; content:''; left:0; top:50%; transform:translateY(-50%); width:1px; height:12px; background:rgba(255, 255, 255, .3);}
.path-wrap .part > a {display:flex; align-items:center; position:relative; height:64px; font-size:var(--font-size-16); font-weight:600; line-height:1.3em; padding:0 60px 0 var(--space-20); color:#fff;}
.path-wrap .part > a:after {content:""; position:absolute; top:50%; right:var(--space-20); margin-top:-3px; width:12px; height:7px; background:url("/images/common/path-down.png") 50% 50% no-repeat;}
.path-wrap .part ul {box-shadow:0 10px 10px 0 rgba(0, 0, 0, .2); display:none; position:absolute; left:var(--space-20); right:var(--space-20); top:calc(100% + var(--space-10)); background:#fff; z-index:50; padding:var(--space-30); text-align:left;}
.path-wrap .part ul li {color:#878787; line-height:1.3em; margin-bottom:var(--space-20);}
.path-wrap .part ul li:last-child {margin-bottom:0;}
.path-wrap .part ul li a {display:block;}
.path-wrap .part ul li a:hover,
.path-wrap .part ul li.active a {color:#121212; text-decoration:underline;}

#contArea {max-width:1460px; padding-left:30px; padding-right:30px; margin:0 auto;}
#contArea.wide {max-width:100%; padding-left:0; padding-right:0;}
#contArea.wide .sub-title {padding-left:10px; padding-right:10px;}

.contain {width:100%; max-width:1460px; padding-left:30px; padding-right:30px; margin:0 auto;}

.sub-title {padding:94px 0 50px; text-align:center;}

.real-cont {min-height:300px; padding:var(--space-120) 0 var(--space-180);}

/* quick */
.quick {width: 68px; position: fixed; right:var(--space-30); bottom:120px; z-index:100;}
.quick .links {padding:var(--space-20) 0; display: grid; gap:var(--space-10); text-align:center; background: #fff; border-radius:100px; border:1px solid #002E63;}
.quick .links a {margin:0 auto; display: block; width: 48px; height: 48px; background-size: contain; background-repeat: no-repeat; background-position: center center;}
.quick .links a.link1 {background-image:url('/images/common/quick-link1.png');}
.quick .links a.link2 {background-image:url('/images/common/quick-link2.png');}
.quick .links a.link3 {background-image:url('/images/common/quick-link3.png');}
.quick .links a.link1:hover {background-image:url('/images/common/quick-link1-on.png');}
.quick .links a.link2:hover {background-image:url('/images/common/quick-link2-on.png');}
.quick .links a.link3:hover {background-image:url('/images/common/quick-link3-on.png');}

.scroll-top {margin-top:var(--space-30); display: block; width: 68px; aspect-ratio:1/1; background: url('/images/common/top.png') no-repeat center center / contain; text-indent:-999em; overflow:hidden; font-size: 0;}

/* footer */
.footer-menu {background:#DBDBDB; padding:var(--space-60) 0;}
.footer-menu .contain > ul {width:100%; display:grid; grid-template-columns:repeat(6, 1fr); gap:var(--space-100);}
.footer-menu .contain > ul > li > a {padding-bottom:var(--space-10); display: block; border-bottom:2px solid var(--color-primary); color: var(--color-primary); font-size:var(--font-size-16); font-weight:700; letter-spacing:-.03em; line-height:1.4em;}
.footer-menu .submenu {margin-top:var(--space-20);}
.footer-menu .submenu ul {display:grid; gap:var(--space-15) 0;}
.footer-menu .submenu ul li {font-size:var(--font-size-12); font-weight:400; letter-spacing:-.03em; line-height:1.4em; color:#878787;}
.footer-menu .submenu ul li:hover {text-decoration: underline; color: #121212;}

.footer-wrap {background:url('/images/common/foot-bg.jpg') no-repeat center center / cover; padding:var(--space-90) 0 var(--space-100); color:#fff; font-size:var(--font-size-14);}
.footer-wrap .contain {display:flex; position:relative;}
.footer-wrap .tel-area {width:350px;}
.footer-wrap .tel-area p {font-size:var(--font-size-24); font-weight:600; letter-spacing:-.03em; line-height:1.4em; line-height:1.5em;}
.footer-wrap .tel-area a {display:inline-block; margin-top:var(--space-25); font-size:var(--font-size-32); font-weight:700; letter-spacing:-.03em; line-height:1.4em; color:var(--color-primary);}
.footer-wrap .info-area .links {margin-bottom:var(--space-30);}
.footer-wrap .info-area .links ul {font-size:var(--font-size-16); display:flex; gap:0 var(--space-40);}
.footer-wrap .info-area address {max-width:560px; font-style:normal; display:flex; flex-wrap:wrap; gap:3px 0;}
.footer-wrap .info-area address p strong {display:inline-block; margin-right:var(--space-15); line-height:1.4em;}
.footer-wrap .info-area address .bar {margin:.5em var(--space-20) 0; display:inline-block; width:1px; height:14px; background:rgba(255,255,255,.5);}
.footer-wrap .info-area .copy {margin-top:var(--space-30); color:rgba(255,255,255,.5);}
.footer-wrap .etc-area {position:absolute; right:30px; top:0; height:100%; display:flex; flex-direction:column; align-items:flex-end;}
.footer-wrap .etc-area .links {margin-bottom:var(--space-65); display:flex; gap:0 var(--space-10);}
.footer-wrap .etc-area .links a {font-size:var(--font-size-14); font-weight:700; border:1px solid rgba(255, 255, 255, .5); background:rgba(255, 255, 255, .1);width:145px; height:clamp(40px, calc(50 / var(--inner) * 100vw), 50px); display:flex; align-items:center; justify-content:center; text-align:center;}
.footer-wrap .etc-area .sns {display:flex; gap:0 var(--space-15);}
.footer-wrap .etc-area .sns img {height:clamp(32px, calc(48 / var(--inner) * 100vw), 48px);}