@charset "UTF-8";

#wrap>#ft{display: none}
#ct{padding-top: 0}
body:not(.is-scroll):not(.nav-open) #hd:not(.open){background: none;box-shadow: none;color: #fff}
body:not(.is-scroll):not(.nav-open) #hd:not(.open) .hd-logo>a{background-image: url(../img/logo_wh.png)}
body:not(.is-scroll):not(.nav-open) #hd:not(.open) .util{color: #fff}
.is-wheel .main-section{height: 100vh}
.main-section{display: flex;align-items: center;position: relative;font-size: 1.056rem}
.main-section:before{content: '';min-height: 100vh}
.main-visual>.btn{position: absolute;right: 30px;bottom: 7.222rem;z-index: 10}
.visual-swiper{width: 100%}
.visual-swiper .container{margin: 0}
.visual-swiper [class*=swiper-button], .business-swiper [class*=swiper-button]{background: rgba(0,0,0,.3) url(../img/swiper.svg) no-repeat 50% 50%/.889rem auto;width: 4.444rem;height: 4.444rem;margin-top: -2.222rem;box-shadow: 20px 20px 40px rgba(0,0,0,.4);text-indent: 0;color: #fff}
.visual-swiper .swiper-button-prev{left: 0;transform: scaleX(-1)}
.visual-swiper .swiper-button-next{right: 0}
.visual-swiper .swiper-slide{min-height: 100vh;text-align: center;display: flex;align-items: center;justify-content: center}
.visual-swiper .swiper-slide:before{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,.25)}
.visual-swiper .swiper-slide{background: url(../img/main/visual1.jpg) no-repeat 70% 100%/cover}
.visual-swiper .loc{display: inline-block;vertical-align: top;width: 12.778rem;line-height: 2.444rem;background: rgba(0,0,0,.25);border-radius: 2rem;font-size: 1.111rem;color: rgba(255,255,255,.8);margin-top: 2em}
.visual-swiper .h3{line-height: 1.3}
.visual-swiper img{width: auto;max-width: 100%;max-height: 5.556rem;margin-bottom: 1rem}
.visual-swiper .visual-txt{position: relative;padding: 5.556rem 30px 11.112rem;text-shadow: 0px 0px 5px rgba(0,0,0,.1);color: #fff}
.news-swiper{position: absolute;height: 5.556rem;display: flex;align-items: center;width: 100%;max-width: 1200px;left: 50%;transform: translateX(-50%);bottom: 0;background: #fff;z-index: 50}
.news-swiper .h6{position: relative;white-space: nowrap;font-weight: 700;padding: 0 1rem 0 5%;margin-right: 1rem}
.news-swiper .h6:after{content: '';position: absolute;top: 50%;height: .833rem;border-left: 1px solid #ccc;right: 0;margin-top: -.4165rem}
.news-swiper .swiper-container{flex: 1;height: 100%}
.news-swiper .text-truncate{display: block;line-height: 5.556rem;font-size: 1.111rem;margin-right: 6.8%}
.news-swiper [class*=swiper-button]{height: 50%;width: 6.8%;left: auto;right: 0;margin: 0;background: url(../img/updown.svg) no-repeat 50% 50%/.778rem auto;min-width: 32px}
.news-swiper [class*=swiper-button]{border-radius: 0;box-shadow: none}
.news-swiper .swiper-button-prev{top: 0}
.news-swiper .swiper-button-next{transform: scaleY(-1)}
#businessBg{position: absolute;top: 0;left: 0;right: 0;bottom: 0;transition: background .3s ease-out}
.main-business .swiper-slide{display: flex;align-items: center;justify-content: center}
.main-business .swiper-slide:before{content: '';min-height: 100vh}
.business-swiper{overflow: visible;color: #fff}
.business-wrap{display: flex;align-items: center;position: relative;width: 100%;height: 59.76vh;max-height: 560px}
.btn-bottom{min-width: 10rem;margin-top: 4.444rem}
.business-bg{position: absolute;top: 50%;right: 13.333%;width: 560px;height: 100%;box-shadow: 20px 20px 40px rgba(0,0,0,.33);background-repeat: no-repeat;background-size: cover;background-position: 50% 50%;transition: background .3s ease-out;transform: translateY(-50%);}
.business-txt .h1{line-height: 1;display: flex;align-items: flex-start;font-weight: 500}
.business-txt .h1>small{font-size: .5em;opacity: .3;font-weight: 500;margin: .2em 0 0 .5em}
.business-txt .display-2{margin: 1.667rem 0}
.business-swiper [class*=swiper-button]{background-color: #222222;border-radius: 0;line-height: 1.5}
.swiper-slide:not(.swiper-slide-active) .business-txt, .swiper-slide:not(.swiper-slide-active) .business-bg>*{opacity: 0}
.side-text{position: absolute;writing-mode: tb-rl;letter-spacing: 0;top: 0;right: 100%;text-transform: uppercase;transform: scale(-1);font-size: .889rem;margin-right: 1em;font-weight: 500}
.line-text{position: absolute;color: transparent;-webkit-text-stroke-width: 1px;-webkit-text-stroke-color: #fff;font-size: 3.333rem;font-weight: 700;position: absolute;bottom: 0;right: 0;transform: translate(.5em, 50%);white-space: nowrap}
.container-sm{max-width: 1000px}
.portfolio-header{display: flex;align-items: center;padding: 100px 0 2rem}
.portfolio-wrap{padding-bottom: 2.778rem}
.portfolio-image{text-align: right;padding: 40px 0}
.portfolio-image img{width: 100%;max-width: 500px}
.portfolio-txt{background: #fff;max-width: 500px;height: 100%;box-shadow: 0px 1.667rem 2.222rem rgba(0,0,0,.15);display: flex;flex-direction: column;justify-content: center;padding: 16% 10%}
.portfolio-txt .h3{margin: .2em 0 1.2em}
.dsc dd{padding-bottom: 1em;font-size: .95em}
.main-portfolio .bg{background: #eee;width: 36.45vw;top: 0;bottom: 0;right: 0;position: absolute;}
.portfolio-swiper .swiper-slide-prev .portfolio-wrap{flex-direction: row-reverse}
.portfolio-swiper .swiper-slide{height: auto}
.pr-link>.col-6, .pr-video-link{display: flex;flex-direction: column;justify-content: flex-end}
.pr-video-link{background: url() no-repeat 50% 50%/auto 15%, url(../img/video.jpg) no-repeat 50% 50%/cover;color: #fff !important;padding: 6.25% 8.33%;min-height: 100%;height: 100%}
.main-pr .more-link{align-self: flex-start;margin-top: 2.222rem}
.main-pr .display-3, .main-pr .h1{margin: 1.333rem 0;line-height: 1.1}
.pr-link .h5{font-weight: 700;letter-spacing: .02em;margin-bottom: auto}
.pr-link>.col-6{justify-content: flex-start;padding: 5.2085%;height: 50%;min-height: 50%}
.link-notice, .link-brochure{display: flex;align-items: center;background: #171717 url(../img/link.png) no-repeat center right 10.4166%/1.5em auto;color: #fff !important;margin: 0 !important;padding: 0 10.4166%;height: 50%;min-height: 50%}
.link-notice{background-color: #2d2d2d}
.link-vision{background: url(../img/vision.jpg) no-repeat 50% 100%/cover;color: #fff !important}
.link-award{background: #515151;color: #fff !important}
.portfolio-swiper .swiper-button-next, .portfolio-swiper .swiper-button-prev{margin-top: -2.776rem}
.portfolio-swiper .swiper-button-next{right: auto;left: 100%}
.portfolio-swiper .swiper-button-prev{left: auto;right: 100%}
.nav-main-tabs .nav-item:not(:first-child){margin-left: 2rem}
.nav-main-tabs .nav-link{padding: 0 0 .167rem;border: 0;border-bottom: 2px solid transparent;font-size: 1.167rem;}
.nav-main-tabs .nav-link.active{border-color: #222222;color: #222222;font-weight: 700}

@media all and (-ms-high-contrast:none){
	.line-text{color: rgba(255,255,255,0);text-shadow: -1px -1px 0px rgba(255,255,255,.1), 1px 1px 0px rgba(255,255,255,.1), -1px 1px 0px rgba(255,255,255,.1), 1px -1px 0px rgba(255,255,255,.1)}
}

@media (min-width: 992px){
	.swiper-slide-active .business-bg{background: rgba(255,255,255,.1) !important}
	.dsc{font-size: 1.111rem}
	.portfolio-wrap .col-lg-6:last-child{padding-right: 2.222rem}
	.main-pr [class*=col-lg]{height: 100vh}
	.portfolio-swiper>.swiper-pagination-bullets{bottom: 0}
	.portfolio-swiper .swiper-slide:not(.swiper-slide-active) .portfolio-image{text-align: center}
	.portfolio-swiper .swiper-slide:not(.swiper-slide-active) .portfolio-image img{max-width: 420px}
	.portfolio-swiper .swiper-slide:not(.swiper-slide-active) .portfolio-wrap{height: 100%;align-items: center}
	.pr-link>.col-6{padding-right: 0}
}

@media (min-width: 1200px){
	.is-wheel{overflow: hidden}
    #lnb{position: fixed;top: 50%;right: 30px;z-index: 100;transform: translateY(-50%)}
    #lnb .nav-link{position: relative;display: block;width: 12px;height: 12px;margin: 20px 0;padding: 0;border-radius: 100%;border: 2px solid #fff;background: none;font-size: 20px;outline: 0}
    #lnb .nav-link.active{background: #fff}
    #lnb span{position: absolute;top: 50%;right: 100%;margin-right: 11px;white-space: nowrap;line-height: 1;transform: translateY(-50%);opacity: 0;transition: opacity .4s;font-weight: 500;color: #fff}
    #lnb .active span{opacity: 1}
	[data-theme="primary"] #lnb .nav-link{border-color: #222222}
	[data-theme="primary"] #lnb .nav-link.active{background: #222222}
	[data-theme="primary"] #lnb span{color: #222222}
	[data-target="#ft"]{width: 0;height: 0;visibility: hidden;margin: 0}

    .main-visual:after{content: '';position: absolute;left: 0;right: 0;bottom: 0;height: 5.556rem;background: #fff;z-index: 5}
    .business-swiper .swiper-button-prev{right: 100%;left: auto;margin-right: calc((100vw - 1360px)/4);transform: scaleX(-1)}
    .business-swiper .swiper-button-next{left: 100%;right: auto;margin-left: calc((100vw - 1360px)/4)}

	.portfolio-swiper{overflow: visible}
}

@media (min-width: 1440px){
    .visual-swiper{width: 100%;position: static;z-index: auto}
    .visual-swiper [class*=swiper-button]{height: 5.556rem;background: #222222;top: auto;bottom: 0;width: calc((100% - 1200px)/4);z-index: 10;right: auto;left: 0;display: flex;align-items: center;color: #fff;font-size: 12px;font-weight: 700;letter-spacing: -.01em;justify-content: center;box-shadow: none;border-radius: 0}
    .visual-swiper .swiper-button-prev{transform: none}
    .visual-swiper .swiper-button-next{transform: translateX(100%)}
	.visual-swiper .swiper-button-prev:before, .visual-swiper .swiper-button-next:after{content: '';display: block;width: 8px;height: 14px;background: url(../img/swiper_sm.svg) no-repeat 0 0/100% auto;margin-left:  15%}
	.visual-swiper .swiper-button-prev:before{transform: scaleX(-1);margin: 0 15% 0 0}
    .business-swiper .swiper-button-next{height: 460px;margin: -230px 0 0 -90px;width: 180px;background-position: right 20px bottom 40px;padding: 20px}
    .business-swiper .swiper-button-next:before{content: "0"attr(data-index);font-size: 1.556rem;font-weight: 500;letter-spacing: 0}
    .business-swiper .swiper-button-next .display-2{position: absolute;font-size: 22px;left: 20px;bottom: 25px;line-height: 26px}
    .business-swiper .swiper-button-next .display-2:after{content: attr(data-en);display: block;font-size: 12px;letter-spacing: 0}
	.visual-swiper .swiper-pagination{display: none}
	.main-pr [class*=col-lg]{flex-basis: 50% !important;max-width: 50% !important}
}

@media (min-width: 1600px){
    .business-swiper .swiper-button-prev{margin-right: 120px}
    .swiper-slide-next .business-bg{right: auto;left: 100px}
    .business-swiper .swiper-button-next{margin-left: 0}
	.visual-swiper [class*=swiper-button]{font-size: 16px}
	.visual-swiper .swiper-button-prev:before{margin-right: 27.77%}
	.visual-swiper .swiper-button-next:after{margin-left: 27.77%}
}

@media (max-width: 1599.98px){
    .business-bg{right: 8.333vw}
    .business-txt{margin-left: 8.333vw}
}

@media (max-width: 1439.98px){
    .business-swiper .swiper-button-next>*, .visual-swiper [class*=swiper-button]{display: none}
    .swiper-slide-prev .business-bg{right: 0}
    .swiper-slide-next .business-bg{left: 0;right: auto}
	.visual-swiper .swiper-pagination{bottom: calc(10vh + 5.556rem)}
}

@media (max-width: 1199.98px){
    .news-swiper{max-width: none;left: 0;transform: none}
    .business-bg{width: 56.45vw;height: 56.45vw;max-width: 560px;max-height: 560px}
    .main-section [class*=swiper-button]{display: none}
	.news-swiper [class*=swiper-button]{display: block}
    .side-text{right: auto;left: 100%;transform: none;margin-left: 1em}
    .main-business .swiper-slide{padding: 9vh 0 15vh}
	.main-business .swiper-slide:before{min-height: 76vh}
    .business-wrap{min-height: 46.66vw}
	.pr-link .h1+p{font-size: .889rem}
	.link-notice, .link-brochure{background-size: 2.143rem auto}
    .portfolio-header{padding-top: 2.778rem}
}

@media (max-width: 991.98px){
    .visual-swiper .swiper-slide{min-height: 100vh;min-height: calc(var(--vh, 1vh) * 100)}
	.main-section{font-size: 1rem}
    .main-section:before, .main-business .swiper-slide:before, .business-txt .h1{display: none}
    .news-swiper{height: 3.5rem}
    .news-swiper .text-truncate{line-height: 3.5rem;font-size: 1rem}
    .news-swiper [class*=swiper-button]{width: 2.286rem}
    .news-swiper .text-truncate{margin-right: 2.286rem}
    .news-swiper .h6{padding-left: 2.286rem}
    .btn-bottom{margin-top: 2.143rem}
	.main-visual>.btn{right: 15px;bottom: calc(3.5rem + 15px)}
	.visual-swiper img{max-height: 50px}
	.business-wrap{flex-direction: column-reverse;max-height: none;min-height: 0;height: auto}
	.business-bg{position: relative;top: auto;right: auto;width: 69.5vw;height: 69.5vw;transform: none}
	.side-text{display: none}
	.line-text{font-size: 3.25rem;transform: translate(.25em, 50%)}
	.business-txt{margin: 0;text-align: center}
	.business-txt .display-2{margin: 3.5rem 0 .8rem}
	.portfolio-swiper .swiper-slide{padding-bottom: 15vh}
	.portfolio-header{padding-top: 9vh}
	.portfolio-wrap{padding: 2.222rem 1.111rem 0}
	.main-portfolio .container-sm{padding: 0 1.111rem}
	.portfolio-image, .portfolio-txt{margin: 0 auto}
	.portfolio-image{text-align: center;padding: 0 0 56.25% 0;position: relative}
	.portfolio-image>img{position: absolute;top: 0;left: 0;height: 100%;object-fit: cover}
	.portfolio-txt{padding: 2rem 1.389rem;box-shadow: 0px .8rem 1.111rem rgba(0,0,0,.15)}
	.portfolio-txt .dsc{padding-bottom: 1.25rem}
	.main-portfolio .more-link{padding-right: 2.57rem;font-size: 0;line-height: 0;height: 1rem;background-size: auto 85%}
	.pr-video-link{padding-left: 5.2085%}
    .nav-main-tabs .nav-item:not(:first-child){margin-left: 1.25rem}
}

@media (max-width: 575.98px){
    .visual-swiper img{max-width: 95%}
    .news-swiper .h6{padding-left: .5rem;font-size: 1rem;padding-right: .5rem;margin-right: .5rem}
    .line-text{font-size: 1.857rem}
	.main-business .container{padding: 0}
	.pr-link .h1+p{display: none}
	.pr-link, .pr-link>.col-6{height: auto !important}
	.pr-link>.col-6{min-height: 33.33vw}
	.main-pr .h1{margin: .5em 0 0;font-size: 1.3rem}
	.pr-link .h5{margin-bottom: 0}
	.pr-link>.col-6{justify-content: center}
}