@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 } 

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

/* #wrapper { overflow:hidden; } */

/* header */
#header { position:fixed; z-index:90; left:0; top:0; width:100%; transition:0.2s all ease; border-bottom:1px solid rgba(255,255,255,0.4); height:var(--header-height); } 
#header .contain { position:relative; display:flex; justify-content: space-between; align-items: center; max-width: 100% !important; height: 100%; } 
.sitelogo a { display:block; width:var(--logo-width); height:45px; background-repeat:no-repeat; background-color:transparent; background-position:50% 50%; background-size:contain; border:0; text-indent:-999em; overflow:hidden; background-image:url("../images/common/logo.png") } 
#header .contain .wrap { display:flex; align-items: center; } 
#sub #header { position:sticky; } 

#gnb { text-align: center; flex: 1 1 auto; min-width: 0; width: 1%; } 
#gnb > ul { position:relative; display:flex; justify-content:center; } 
#gnb > ul > li { position:relative; text-align:center; width:212px; } 
#gnb > ul > li > a { display:flex; align-items: center; justify-content: center; position:relative; font-size:var(--font-size-20); font-weight:600; height:var(--header-height); line-height:1.5em; letter-spacing:0em; color:#fff; } 
#gnb > ul > li.active > a { color: var(--color-primary); } 
#gnb .submenu { position:absolute; display:none; left:50%; width:175px; transform:translateX(-50%); top:calc(var(--header-height) - 20px); text-align:center; z-index:21; background:#fff; border-radius: 8px; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); } 
#gnb .submenu ul { position:relative; padding:20px 0; } 
#gnb .submenu ul li { line-height:1em; padding:10px 0; } 
#gnb .submenu ul li:last-child { border-bottom:0; } 
#gnb .submenu ul li a { display:block; position:relative; font-size:var(--body-font-size); font-weight:400; letter-spacing:-0.03em; color:#454545; line-height:1em; transition:0.2s all ease; } 
#gnb .submenu ul li:hover a { text-decoration:underline; font-weight:500; color: var(--color-primary); } 

#header .btn { display:flex; align-items: center; margin-right:var(--space-80); } 
.language { position:relative; width:32px; height:32px; margin-right:var(--space-20); } 
.language .slct { display:block; width:100%; height:100%; background: url(/images/common/language.png) no-repeat center/contain; } 
.language ul { position:absolute; top:40px; left:50%; transform: translateX(-50%); padding: 5px 20px; display:none; background:#fff; border: 1px solid #ddd; } 
.language ul li a { display:block; font-size:var(--font-size-12); letter-spacing:0em; text-align:center; color: #686868; } 
.language ul li a:hover { color: var(--color-primary); text-decoration: underline; } 
.language.active ul { display:block; } 
.language.active .slct:after { transform:rotate(180deg); margin-top: -4px; } 
#header .btn-inquiry { padding:0 var(--space-25); text-align:center; color: #fff; border-radius: 50vh; border: 1px solid rgba(255,255,255,0.4); font-weight:500; font-size: var(--font-size-15); line-height:2em; letter-spacing: 0; } 

#header.header-hover { background:#fff; } 
#header.header-hover .sitelogo a { background-image:url("/images/common/logo-on.png"); } 
#header.header-hover #gnb > ul > li > a { color:#242424; } 
#header.header-hover #gnb > ul > li.active > a { color:var(--color-primary); } 
#header.header-hover .btn-all-menu span { background-color: #fa0001; } 
#header.header-hover .btn-all-menu span:before,
#header.header-hover .btn-all-menu span:after { background:#242424; } 
#header.header-hover .btn-m-menu span { background-color: #fa0001; } 
#header.header-hover .btn-m-menu span:before,
#header.header-hover .btn-m-menu span:after { background:#242424; } 
#header.header-hover .language .slct { background-image: url(/images/common/language-on.png); } 
#header.header-hover .btn-inquiry { color: #686868; border-color: #ddd; } 

.header-fixed #header { background:#fff; } 
.header-fixed #header .sitelogo a { background-image:url("/images/common/logo-on.png"); } 
.header-fixed #header #gnb > ul > li > a { color:#242424; } 
.header-fixed #header #gnb > ul > li.active > a { color:var(--color-primary); } 
.header-fixed #header .btn-all-menu span { background-color: #fa0001; } 
.header-fixed #header .btn-all-menu span:before,
.header-fixed #header .btn-all-menu span:after { background:#242424; } 
.header-fixed #header .btn-m-menu span { background-color: #fa0001; } 
.header-fixed #header .btn-m-menu span:before,
.header-fixed #header .btn-m-menu span:after { background:#242424; } 
.header-fixed #header .language .slct { background-image: url(/images/common/language-on.png); } 
.header-fixed #header .btn-inquiry { color: #686868; border-color: #ddd; } 

/* for mobile */
.only-mobile { display:none; } 
.btn-m-menu { display:none; position:absolute; top:50%; margin-top:-16px; right:30px; width:28px; height:22px; text-align:center; text-indent:-9999em; z-index:92; transition: all 0.5s ease-in-out; } 
.btn-m-menu span { position:absolute; right:0; top:13px; height:2px; width:18px; background:#fff; } 
.btn-m-menu span:before,
.btn-m-menu span:after { content:" "; position:absolute; right:0; width:28px; height:2px; background:#fff; transition-duration:0.3s, 0.3s; transition-delay:0.3s, 0s; } 
.btn-m-menu span:before { top:-10px; transition-property:top, transform; } 
.btn-m-menu span:after { bottom:-10px; transition-property:bottom, transform; } 

.mobile-navigation { position:fixed; top:0; right:0; padding:20px 0; width:300px; height:100%; overflow:auto; transition:.3s ease-in-out; -ms-transform:translateX(100%); transform:translateX(100%); background:#ffffff; z-index:101; } 
.mobile-navigation .home { padding-bottom:20px; padding-left:15px; } 
.mobile-navigation .home a { display:block; } 
.mobile-navigation .home img { height:23px; } 
.mobile-navigation .nav-menu>ul>li { border-bottom:1px solid #ddd; } 
.mobile-navigation .nav-menu>ul>li>a { position:relative; padding:14px 15px; display:block; color:#242424; font-size:1.3em; font-weight:500; line-height:1.3em; } 
.mobile-navigation .nav-menu>ul>li.active>a { background:var(--color-primary); color:#fff; } 
.mobile-navigation .nav-menu>ul>li>a:after { content:""; position:absolute; top:50%; right:15px; transform:translateY(-75%) rotate(45deg); width:10px; height:10px; border-right:2px solid #2c2c2c; border-bottom:2px solid #2c2c2c; } 
.mobile-navigation .nav-menu>ul>li.active>a:after { transform: translateY(-35%) rotate(-135deg); border-color: #fff; } 
.mobile-navigation .nav-menu .submenu { display:none; position:static; transform: translateX(0); margin:-1px 0 0 0; width:100%; padding:10px 0; background:#fff; padding-bottom:10px; } 
.mobile-navigation .nav-menu .submenu>ul { display:block; width:100%; } 
.mobile-navigation .nav-menu .submenu>ul>li { text-align:left; padding:0; } 
.mobile-navigation .nav-menu .submenu>ul>li>a { display:block; position:relative; padding:5px 0 5px 25px; color:#242424; font-size:16px; font-weight:400; line-height:1.3em; } 
.mobile-navigation .nav-menu .submenu>ul>li>a:after { content:""; position:absolute; top:14px; left:15px; width:4px; height:4px; border-radius:100%; background:#333; transition:.2s ease-in-out; } 
.mobile-navigation .nav-menu .submenu>ul>li>a:hover { text-decoration:underline; } 

.mobile-navigation .close { position:absolute; top:20px; right:18px; width:24px; height:24px; text-indent:-9999em; overflow:hidden; } 
.mobile-navigation .close:before,
.mobile-navigation .close:after { content:" "; position:absolute; top:12px; left:0; width:100%; height:2px; background:#242424; } 
.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:.76; z-index:98; } 

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

/* 전체메뉴 */
.only-all-menu { display:none; } 
.btn-all-menu { display:block; width:28px; height:26px; text-align:center; transition: all 0.5s ease-in-out; text-indent:-9999em; position:relative; } 
.btn-all-menu span { position:absolute; right:0; top:50%; margin-top:-1px; display:block; height:2px; width:17px; background:#fff; } 
.btn-all-menu span:before,
.btn-all-menu span:after { content:" "; position:absolute; right:0; width:28px; height:2px; background:#fff; transition-duration:0.3s, 0.3s; transition-delay:0.3s, 0s; } 
.btn-all-menu span:before { top:-11px; transition-property:top, transform; } 
.btn-all-menu span:after { bottom:-11px; transition-property:bottom, transform; } 

.all-navigation { position:fixed; left:0; top:0; transform:translateY(-100%); width:100%; overflow:auto; transition:.3s ease-in-out; background:#1c4889; z-index:100; } 
.all-navigation .contain { display:flex; align-items:center; justify-content:center; padding-left:79px; padding-right:30px; } 
.all-navigation .all-nav-menu { width:100%; } 
.all-navigation .all-nav-menu>ul { display:flex; padding-left: calc( var(--container-space) + var(--logo-width) ); } 
.all-navigation .all-nav-menu>ul>li { position:relative; transition:0.2s all ease; width:212px; } 
.all-navigation .all-nav-menu>ul>li>a { display:none; } 
.all-navigation .all-nav-menu .submenu { display:block !important; height:100%; position:relative; text-align:center; bottom:auto; transform:translateX(0); left:auto; top:auto; transition:0.2s all ease; } 
.all-navigation .all-nav-menu .submenu>ul { position:relative; display:block; padding:15px 0; } 
.all-navigation .all-nav-menu .submenu>ul>li { line-height:1.2em; transition:0.2s all ease; padding:10px 0; } 
.all-navigation .all-nav-menu .submenu>ul>li>a { display:block; font-size:16px; font-weight:400; color:#fff; line-height:1.2em; transition:0.2s all ease; } 
.all-navigation .all-nav-menu .submenu>ul>li>a:hover { font-weight:600; text-decoration:underline; } 

html.menu-all-opened #header { background:#fff; } 
html.menu-all-opened #header .sitelogo a { background-image:url("../images/common/logo-on.png"); } 
html.menu-all-opened #header #gnb > ul > li > a { color:#242424; } 
html.menu-all-opened #gnb .submenu { display:none !important; } 
html.menu-all-opened { overflow:hidden; } 
html.menu-all-opened .btn-all-menu span { background-color: #fa0001; } 
html.menu-all-opened .btn-all-menu span:before,
html.menu-all-opened .btn-all-menu span:after { background:#242424; } 
html.menu-all-opened .all-navigation { transform:translateY(0); margin-top:var(--header-height); } 
html.menu-all-opened .all-navigation .only-all-menu { display:block; } 
html.menu-all-opened #header .language .slct { background-image: url(/images/common/language-on.png); } 
html.menu-all-opened #header .btn-inquiry { color: #686868; border-color: #ddd; } 

/* main */
[data-aos=fade-up] { transform: translate3d(0,100px,0); } 

.btn-more { display:block; width:fit-content; margin:var(--space-60) auto 0; color: #fff; border: 1px solid rgba(255,255,255,0.6); line-height:clamp(35px, calc( 45 / var(--inner) * 100vw ), 45px ); padding:0 var(--space-30); text-align:center; background-color: transparent; transition: .3s; } 
.btn-more:hover { border-color: var(--color-primary) !important; background-color: var(--color-primary); } 
.btn-more.type2 { padding:0 var(--space-25); border-color: #454545; color: #454545; line-height:clamp(30px, calc( 38 / var(--inner) * 100vw ), 38px ); border-radius: 50vh; margin:0; } 
.btn-more.type2:hover { color: #fff; } 

.main-visual { position:relative; height:100vh; overflow:hidden; } 
.main-visual .slick-slide { position:relative; height:100vh; overflow:hidden; } 
.main-visual .slick-slide::after { content:""; position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background-color: rgba(0,0,0,.2); } 
.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; top:50%; transform:translateY(-50%); width:100%; z-index:40; color: #fff; } 
.main-visual .caption p { text-align: center; filter: drop-shadow(3px 0px 5px rgba(0,0,0,0.4)); } 
.main-visual .caption .t1 { font-weight: 800; font-size: clamp(30px, calc( 70 / var(--inner) * 100vw ), 70px ); line-height: 1.4em; } 
.main-visual .caption .t2 { font-weight:600; font-size: clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px ); line-height: 1.4em; } 
.main-visual .caption .t3 { padding-top:var(--space-20); font-weight:500; font-size: clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px ); line-height:1em; } 
.main-visual .slick-arrow { position:absolute; left:50%; bottom:var(--space-50); transform: translateX(-50%); width:33px; height:17px; margin-bottom: 10px; overflow:hidden; text-indent:-9999em; line-height:0; font-size:0; z-index:50; transition: .3s; border: 0; background:url("../images/main/slide-next.png") no-repeat center/contain; } 
.main-visual .slick-prev { margin-left:-160px; transform: rotate(-180deg); } 
.main-visual .slick-next { margin-left: 125px; } 
.main-visual .slick-dots { position: absolute; bottom: var(--space-50); left: 50%; text-align: center; line-height: 0; z-index: 50; transform: translateX(-50%); } 
.main-visual .slick-dots li { display:inline-block; } 
.main-visual .slick-dots li button { position:relative; display:block; width:33px; height:33px; background:transparent; border:1px solid transparent; border-radius:100%; overflow:hidden; text-indent:-9999em; transition:.2s; } 
.main-visual .slick-dots li button:before { content:""; position:absolute; top:50%; left:50%; margin:-5px 0 0 -5px; width:10px; height:10px; background:#fff; border-radius:100%; } 
.main-visual .slick-dots .slick-active button { border:1px solid rgba(255,255,255,0.6); } 
.main-visual .scroll { position:absolute; bottom:0; left:var(--space-40); width:11px; height:219px; background:url("../images/main/scroll.png") no-repeat center/contain; animation:1.5s scrollUpDown linear infinite; z-index:50; } 
@keyframes scrollUpDown { 0%,100% { transform:translateY(0); } 
50% { transform:translateY(10px); } 
 }

 /* section */
.sec-banner { padding-top:var(--space-150); text-align:center; } 
.sec-banner p { font-weight:500; font-size: var(--font-size-32); color: var(--color-dark); line-height:1.5em; } 

.section { padding:var(--space-150) 0; } 
.section .head { padding-bottom: var(--space-60); text-align: center; } 
.section .head .eng { display: block; margin-bottom: var(--space-30); line-height: 1em; color: #9d9d9d; } 
.section .head .sec-tit { padding-bottom:var(--space-30); font-size: var(--font-size-50); line-height: 1em; color: var(--color-dark); } 
.section .head p { font-weight:500; font-size: var(--font-size-20); line-height:1.5em; color: var(--color-dark); } 

/* sec1 */
.sec1 { position:relative; } 
.sec1::before { content: ""; position: absolute; bottom: -3px; left: 0; z-index: -10; width: 1003px; height: 149px; background: url(/images/main/han.png) no-repeat top right/contain; } 
.optiful-list ul { display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-30); justify-content: center; }
.optiful-list.col1 ul {width: fit-content;margin: 0 auto; display: block;}
.optiful-list.col1 ul li { width: 314px;}
.optiful-list ul li a { display: flex; flex-direction: column; justify-content: center;    width: fit-content; min-height: 420px; padding: 0 var(--space-20); border-radius: var(--border-radius-16); box-shadow: var(--box-shadow); background-color: #f3f6f9; } 
.optiful-list .txt-wrap { padding-bottom:var(--space-30); text-align:center; } 
.optiful-list .tit { padding-bottom:10px; font-weight:600; font-size: var(--font-size-24); line-height:inherit; color: var(--color-dark); line-height: initial; } 
.optiful-list .desc { line-height:1.5em; } 
.optiful-list .img-wrap { position:relative; } 
.optiful-list .img-wrap .img { position:relative; } 
.optiful-list .img-wrap .img:after { content:""; position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background-color: rgba(0, 0, 0, 0.6); border-radius: var(--border-radius-16); } 
.optiful-list .img-wrap .img img { border-radius: var(--border-radius-16); filter: grayscale(100%) } 
.optiful-list .img-wrap i { position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); display:block; transition: .3s; text-align:center; } 
.optiful-list ul li a:hover { background-color: var(--color-primary); } 
.optiful-list ul li a:hover p { color: #fff !important; } 
.optiful-list ul li a:hover .img-wrap i { display:none; } 
.optiful-list ul li a:hover .img-wrap .img img { filter: grayscale(0%) } 
.optiful-list ul li a:hover .img:after { background-color: transparent; } 

/* .sec2 */
.sec2 .tab-menu ul { display: flex; justify-content: end; margin-bottom: var(--space-50); } 
.sec2 .tab-menu ul li { width: auto; text-align: center; border-bottom: 1px solid #ddd; padding-left: var(--space-40); } 
.sec2 .tab-menu ul li:first-child { padding-left:0; } 
.sec2 .tab-menu ul li a { position: relative; font-size: clamp(14px, calc( 22 / var(--inner) * 100vw ), 22px ); font-weight: 700; display: flex; justify-content: center; align-items: center; padding-bottom: 15px; color: #a4a4a4; } 
.sec2 .tab-menu ul li>a:after { content: ""; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 100%; height: 3px; background: var(--color-primary); transition: .2s; opacity: 0; } 
.sec2 .tab-menu ul li.active>a:after { width: 100%; opacity: 1; } 
.sec2 .tab-menu ul li.active a { color: var(--color-primary); } 

.sec2 .tab-contents .flex-wrap > div { width:50%; } 
.sec2 .tab-contents .flex-wrap .txt { position:relative; } 
.sec2 .tab-contents .flex-wrap .img img { border-radius: var(--border-radius-32); } 
.sec2 .tab-contents .btn-more.type2 { position: absolute; left:0; bottom:0; } 

.sec2 .tit { position:relative; padding-bottom:70px; color: var(--color-primary); } 
.sec2 .tit::after { content: ""; position: absolute; left: -82%; bottom: 35px; display: block; width: 182%; height: 1px; border-bottom: 1px dashed #ddd; } 
.sec2 .tit strong { display:block; font-weight:600; padding-bottom:var(--space-20); } 
.sec2 .tit h3 { font-size: var(--font-size-42); line-height:1em; } 
.sec2 .dot-list { padding-right: var(--space-30); } 
.sec2 .dot-list p { padding-bottom:var(--space-20); font-weight:600; font-size: var(--font-size-24); line-height:1.333em; color: var(--color-dark); } 
.sec2 #tab3 .dot-list p { padding-bottom:10px; } 

.dot-list > li { position:relative; padding-left:var(--space-20); margin-bottom:5px; } 
.dot-list > li:last-child { margin-bottom:0; } 
.dot-list > li:before { content:"•"; position:absolute; top:-2px; left:0; font-weight:800; color:var(--color-primary); } 
.dot-list.wht > li:before { color: #fff !important; } 
.dot-list.lh2em li { line-height:2.1875em; } 

/* sec3 */
.sec3 { position:relative; } 
/* .sec3::after { content: ""; position: absolute; top:0; right:0; width:35%; height:100%; background: url(/images/main/bg-solution.jpg) no-repeat top right/contain; z-index:-1; } */
.sec3::after { display:none; } 

.optiful-list.type2 ul { grid-template-columns: repeat(3, 1fr); } 
.optiful-list.type2 a { position:relative; padding:var(--space-40); min-height: 430px; } 
.optiful-list.type2 .txt-wrap { position:relative; text-align: left; padding-right: var(--space-80); } 
.optiful-list.type2 .tit { font-size: var(--font-size-32); } 
.btn-arrow { display:flex; justify-content: center; align-items: center; position:absolute; right: 0; top: 16px; width: clamp(28px, calc( 48 / var(--inner) * 100vw ), 48px );; height: clamp(28px, calc( 48 / var(--inner) * 100vw ), 48px );; border-radius: 100%; font-size: var(--font-size-20); color: #686868; font-weight:800; border: 1px solid #454545; } 
.optiful-list.type2 a:hover .btn-arrow { border-color: #fff; background-color: #fff; color: var(--color-primary); } 

/* sec4 */
.sec4 .service-list ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-80); } 
.sec4 .service-list a { display:flex; flex-direction: column; justify-content: center; align-items: center; width:406px; height:446px; background: url(/images/main/polygon.png) no-repeat center/contain; background-size: 70%; } 
.sec4 .service-list .ico { margin-bottom:var(--space-20); } 
.sec4 .service-list .tit { font-weight:600; font-size: var(--font-size-28); color: #686868; line-height:1.428em; } 
.sec4 .service-list .desc { position:relative; padding-bottom:var( --space-50); font-size: var(--font-size-18); color: #fff; line-height:1.444em; display:none; transition: .3s; text-align:center; } 
.sec4 .service-list .desc::after { content: ""; position: absolute; bottom:0; left:50%; transform: translateX(-50%); width:28px; height:16px; background: url(/images/main/arrow-btm.png) no-repeat center/contain; display:none; transition: .3s; } 
.sec4 .service-list a:hover { background-image: url(/images/main/polygon-on.png); background-size: 100%; } 
.sec4 .service-list a:hover .tit { padding-bottom:10px; font-size: var(--font-size-32); color: #fff; } 
.sec4 .service-list a:hover .desc { display:block; } 
.sec4 .service-list a:hover .desc::after { display:block; } 

/* sec5 */
.partner-slide { background:#fff; white-space:nowrap; overflow:hidden; } 
.partner-slide.left { margin-bottom:var(--space-30); } 
.partner-slide ul { display:flex; _gap:0 var(--space-30); } 
.partner-slide ul li { flex-shrink:0; padding:0 var(--space-15); } 

/* .sec6 */
.sec6 .head .eng { color: rgba(255,255,255,0.4); } 
.sec6 .contain { max-width: 100%; } 
.sec6 .sec-tit br { display:none; } 

.btn-inquiry2 { display:block; width:fit-content; margin:0 auto; color: var(--color-primary); line-height:clamp(34px, calc( 50 / var(--inner) * 100vw ), 50px ); padding:0 var(--space-30); text-align:center; background-color: #fff; color: var(--color-primary); transition: .3s; border-radius: 8px; font-weight:600; } 
.btn-inquiry2:hover { background-color: var(--color-third) !important; border-color: var(--color-third) !important; color: #fff !important; } 

/* sub page */
.contain { max-width:1600px; margin:0 auto; padding-left:var(--container-space); padding-right:var(--container-space); } 
#contArea { max-width:1600px; padding-left:var(--container-space); padding-right:var(--container-space); margin:0 auto; } 
#contArea.wide { max-width:100% !important; padding-left:0; padding-right:0; } 

#sub #contArea,
#sub .contain { max-width: 1400px; } 

.sub-title h1 { margin-top:var(--header-height); margin-bottom:var(--space-50); font-weight:600; font-size: var(--font-size-40); color: var(--color-dark); line-height:1.25em; text-align:center; } 
.sub-title p { padding-top:var(--space-50); font-size: var(--font-size-18); line-height:1.444em; } 

.real-cont { padding:var(--header-height) 0; } 

.sub-visual { position:relative; height:600px; z-index:10; overflow:hidden; margin-top:calc(var(--header-height)+ var(--lnb-height)); } 
/* .sub-visual { position:absolute; height:600px; z-index:10; z-index: 90; left: 0; top: calc(var(--header-height)+ var(--lnb-height)); } */
.sub-visual .background { position:absolute; top:0; left:0; width:100%; height:100%; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; transform:scale(1.09); -ms-transform:scale(1.09); /* IE 9 */
 -moz-transform:scale(1.09); /* Firefox */
 -webkit-transform:scale(1.09); /* Safari and Chrome */
 -o-transform:scale(1.09); /* Opera */
transition: all 2s ease-out 0s; transition-delay: 0.1s; z-index:0; } 
.sub-visual.load .background { transform:scale(1); -ms-transform:scale(1); /* IE 9 */
 -moz-transform:scale(1); /* Firefox */
 -webkit-transform:scale(1); /* Safari and Chrome */
 -o-transform:scale(1); /* Opera */ } 
 .sub-visual .tt-wrap { width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; color: #fff; padding-left: calc(var(--container-space) + var(--logo-width) + var(--space-70)); } 
#sub .sub-visual .contain { max-width: 100%; padding:0; } 

.sub-visual .tt-wrap .tit { padding-bottom:var(--space-30); font-size: var(--font-size-56); line-height: 1.2em; font-weight: 700; } 
.sub-visual.type2 .contain { height:100%; } 
.sub-visual.type2 .flex-wrap { align-items: center; height:100%; } 
.sub-visual.type2 .flex-wrap .tt-wrap { position:relative; left:auto; top:auto; transform: none; width:50%; max-width: 100%; margin: 0; color: #000; } 
.sub-visual.type2 .flex-wrap .img { width:50%; } 
.sub-visual .t1 { padding-bottom:var(--space-20); font-weight:600; font-size: var(--font-size-24); line-height:2em; color: #1c4889; } 
.sub-visual .t2 { padding-bottom:var(--space-30); font-weight:700; font-size: var(--font-size-40); color: var(--color-dark); line-height:1.25em; } 

.lnb-wrap { flex: 1 1 auto; width: 1%; min-width: 0; } 
.lnb ul { display:flex; width: fit-content; } 
.lnb ul li { flex:1; text-align:center; width: max-content; width: auto; } 
.lnb ul li a { display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; width: max-content; height:var(--lnb-height); padding: 0 10px; margin-right: var(--space-30); font-size:var(--font-size-18); line-height:1.6666em; letter-spacing:-.03em; } 
.lnb ul li>a:after { content:""; position:absolute; bottom:-1px; left:50%; transform: translateX(-50%); width: 100%; height: 3px; background:var(--color-secondary); transition:.2s; opacity:0; } 
.lnb ul li.active>a:after { width:100%; opacity:1; } 
.lnb ul li.active a { color:var(--color-secondary); } 

/* .lnb-wrap2 { position:relative; border-top:1px solid #ddd; } */
.lnb-wrap2 { position:sticky; z-index: 90; left: 0; top: var(--header-height); background-color: #fff; width: 100%; border-top:1px solid #ddd; z-index:50; } 
.lnb-wrap2 .lnb { padding-left: calc(var(--container-space) + var(--logo-width) + var(--space-70)); } 

/* .path-wrap { position:relative; border-top:1px solid #ddd; z-index:50; } */
.path-wrap { position:sticky; z-index: 90; left: 0; top: var(--header-height); background-color: #fff; width: 100%; border-top:1px solid #ddd; z-index:50; } 
.path-wrap::after { content: " "; position: absolute; bottom:0; width:100%; height:1px; background-color: #ddd; } 
.path-wrap .wrap { padding-left: calc(var(--container-space) + var(--logo-width) + var(--space-70) ); } 
.path-wrap .inner { display:flex; } 
.path-wrap .part > a { position: relative; display:block; width:auto; height:var(--lnb-height); padding-right:var(--space-30); margin-right:var(--space-20); font-weight:600; font-size: var(--font-size-18); line-height:var(--lnb-height); letter-spacing: 0; color: var(--color-dark); } 
.path-wrap .part > a:after { content: ""; position: absolute; top:50%; right:0; transform: translateY(-50%); width: 1px; height: 15px; background-color: #ddd; } 
.path-wrap .part ul { display:none; position:absolute; left:-1px; right:-1px; background:#fff; border:1px solid #ddd; z-index:50; width:fit-content; } 
.path-wrap .part ul li { color:#505050; line-height:1.3em; } 
.path-wrap .part ul li:last-child { border-bottom:0; } 
.path-wrap .part ul li a { display:block; padding: 10px 40px 10px var(--container-space); } 
.path-wrap .part ul li a:hover,
.path-wrap .part ul li.active a { color:var(--color-primary); text-decoration: underline; } 

/* quick */
.quick { position: fixed; bottom:40px; right: 15px; z-index: 80; } 
.quick a { display: flex; justify-content: center; align-items: center; width: var(--width-70); height: var(--width-70); border-radius: 100%; box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.3); background-color: var(--color-primary); } 
.quick ul { display: flex; flex-direction: column; align-items: end; } 
.quick ul li { margin-bottom: 10px; } 
.quick ul li:last-child { margin-bottom: 0; } 
.quick ul li a i { width: 32px; height: 29px; background-position: center; background-repeat: no-repeat; background-size: contain; } 
.quick ul li a i.quick01 { background-image: url(../images/common/i-chat.png); } 
.quick ul li a i.quick02 { background-image: url(../images/common/i-tel.png); } 
.quick ul li a p { display: none; color: var(--color-primary); font-size: var(--font-size-18); font-weight: 700; line-height: 1.6666em; text-transform: uppercase; } 
 .quick ul li:last-child a { background-color: #fff; } 
.quick ul li:last-child a p { display:block; color: var(--color-primary) !important; } 
.quick ul li a:hover { justify-content: space-between; width: 220px; padding: 0 var(--space-20); border-radius: 50vh; background: #fff; } 
.quick ul li:last-child a:hover { width:var(--width-70); padding:0; justify-content: center; } 
.quick ul li a:hover i.quick01 { background-image: url(../images/common/i-chat-on.png); } 
.quick ul li a:hover i.quick02 { background-image: url(../images/common/i-tel-on.png); } 
.quick ul li a:hover p { display: block; color: var(--color-dark); font-weight:700; } 

.quick.en ul li a { text-align:center; } 
.quick.en ul li a p { font-size: var(--font-size-17); line-height:1.06em; } 

/* footer */
#footer { background-color: #fff; padding:var(--space-45) 0; border-top:1px solid #ddd; } 
#footer .contain { max-width:100% !important; display:flex; justify-content:space-between; } 
#footer .foot-logo { margin-bottom: var(--space-30); } 
#footer .foot-info { max-width: 810px; } 
#footer .foot-info address { font-style:normal; display:flex; flex-wrap:wrap; } 
#footer .foot-info address p { display: inline-block; padding-right: var(--space-40); line-height: 1.875em; } 
#footer .foot-info address p:last-child { padding-right:0; } 
#footer .copy { color: #686868; line-height:1.875em; } 
#footer .copy a { color: #c3c3c3; } 
#footer .copy a:hover { text-decoration:underline } 
#footer .foot-legal { padding-top:var(--space-40); } 
#footer .foot-menu { display:flex; } 
#footer .foot-menu li { padding-right:var(--space-30); font-weight:500; font-size: var(--font-size-14); line-height:2.142em; color: #627e93; } 
#footer .foot-link > ul { display:flex; justify-content:flex-end; } 
#footer .foot-link > ul > li { padding-left:clamp(20px, calc( 70 / var(--inner) * 100vw ), 70px );; text-align:right; } 
#footer .foot-link > ul > li:first-child { padding-left:0; } 
#footer .foot-link > ul > li > a { display:block; margin-bottom:var(--space-30); font-weight:500; font-size: var(--font-size-18); color: var(--color-dark); } 
#footer .foot-link .submenu ul li a { display:block; color: #686868 !important; line-height:1.875em; } 
#footer .foot-link .submenu ul li a:hover { text-decoration: underline; } 

.family-cite { background-color:#08244d; width:100%; height:var(--space-80); text-align:center; display:flex; justify-content: center; align-items: center; color: #fff; font-weight:500; font-size: var(--font-size-18); line-height:1.666em; } 
.family-cite i { display:block; margin-left:var(--space-20); padding-top: 4px; } 



#footer.en .foot-link > ul > li { padding-left: clamp(16px, calc(30 / var(--inner)* 100vw), 30px); }