@charset "utf-8";





/* ----- COMMON ----- */
.main-tit {font-size: 4.5rem;color:#2e2e2e;line-height:1.395em;letter-spacing: -0.03em;font-weight: 600;text-align:center;}
.main-tit strong { font-weight:500;}
.main-tit.light { font-weight: 200;}
.normal-txt {font-size:1.8rem;color:#777;line-height:1.667em;letter-spacing:-0.009em;font-weight: 400;}





/* ----- VISUAL ----- */
.main-visual {
    overflow:hidden;
    position:relative;
    height:100vh;
}
.main-visual .visual-slider-wrap {
    position:relative;
    height:100%;
}
.main-visual .visual-slider {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}
.main-visual .visual-slider .txtbox {
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    position: relative;
    height:50vh;
    z-index:100;
    text-align:center;
}
.main-visual .visual-slider .txtbox h2 {
    opacity:0;
    visibility:hidden;
    position:relative;
    top:0.625em;
    font-size: 4.8rem;
    color:#fff;
    line-height:1.474em;
    font-weight:300;
    letter-spacing: -0.02em;
}
.main-visual .visual-slider .swiper-slide {
    height:100vh;
}
.main-visual .visual-slider .swiper-slide .bg {
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.main-visual .visual-slider .swiper-slide .bg .img {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
    -ms-transform:scale(1.1);
    -o-transform:scale(1.1);
    transform:scale(1.1);
}
.main-visual .visual-slider .swiper-slide.swiper-slide-active .bg .img {
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
    -webkit-transition:transform 6s;
    -moz-transition:transform 6s;
    -ms-transition:transform 6s;
    -o-transition:transform 6s;
    transition:transform 6s;
}
.main-visual .visual-slider .swiper-slide .bg .vid {
    position:absolute;
    left:0;
    top:0;
    z-index:-1;
    width:100%;
    height:100%;
}
.main-visual .visual-slider .swiper-slide .bg .vid video {
    position:absolute;
    left: 50%;
    top: 50%;
    max-width:none;
    min-width:100vw;
    min-height:100vh;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.main-visual .visual-slider .swiper-slide .bg .vid:after {
    content:"";
    position:absolute;
    left:0;
    top:0;
    z-index:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.3);
}
.main-visual .visual-slider .swiper-slide.swiper-slide-active .txtbox h2 {
    opacity:1;
    visibility:visible;
    top:0;
    -webkit-transition:all 0.8s;
    -moz-transition:all 0.8s;
    -ms-transition:all 0.8s;
    -o-transition:all 0.8s;
    transition:all 0.8s;
}
.main-visual .visual-slider .txtbox h2 strong {
    font-weight: 700;
}
.main-visual .progressbar {
    position:absolute;
    left:50%;
    top:50%;
    z-index:10;
    margin-top:4.5em;
    width:31.5em;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.main-visual .progressbar .swiper-pagination {
    position:relative;
    left:auto;
    bottom:auto;
    height:2em;
    font-size:0;
}
.main-visual .progressbar .swiper-pagination .swiper-pagination-current {
    position:absolute;
    left:0;
    top:50%;
    font-size:2.4rem;
    color:#fff;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.main-visual .progressbar .swiper-pagination .swiper-pagination-total {
    position:absolute;
    right:0;
    top:50%;
    font-size:1.8rem;
    color:rgba(255,255,255,0.8);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.main-visual .progressbar .slide-progress-bar {
    opacity: 0;
    position: absolute;
    left:14%;
    top:50%;
    width:72%;
    height:2px;
    background:rgba(255,255,255,0.5);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.main-visual .progressbar .slide-progress-bar:after {
    content:"";
    position: absolute;
    left:0;
    top:50%;
    width:0;
    height:100%;
    background:#fff;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.main-visual .progressbar.active .slide-progress-bar {
    opacity: 1;
}
.main-visual .progressbar.motion .slide-progress-bar:after {
    width:100%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transition-duration: 5.5s;
    -moz-transition-duration: 5.5s;
    -ms-transition-duration: 5.5s;
    -o-transition-duration: 5.5s;
    transition-duration: 5.5s;
}
.main-visual .visual-slider-wrap .visual-slider .swiper-button-prev {
    left:auto;
    right:3%;
    top:43%;
    margin-top:-30px;
    width:45px;
    height:45px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.7);
    background:url(/images/bu/bu-main-slide-top.png) no-repeat center;
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform:translateY(-50%);
}
.main-visual .visual-slider-wrap .visual-slider .swiper-button-next {
    left:auto;
    right:3%;
    top:43%;
    margin-top:30px;
    width:45px;
    height:45px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.7);
    background:url(/images/bu/bu-main-slide-btm.png) no-repeat center;
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform:translateY(-50%);
}
.main-visual .visual-slider-wrap .visual-slider .swiper-button-prev:hover {
    background-color:#062760;
    border-color:#062760;
}
.main-visual .visual-slider-wrap .visual-slider .swiper-button-next:hover {
    background-color:#062760;
    border-color:#062760;
}
.main-visual .scrolldown {
    position:absolute;
    left:50%;
    bottom:5%;
    z-index:10;
    padding-bottom:6em;
    -webkit-transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    -o-transform:translateX(-50%);
    transform:translateX(-50%);
}
.main-visual .scrolldown p {
    font-size:1.4rem;
    color:#fff;
    letter-spacing:0.036em;
}
.main-visual .scrolldown .ico {
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:6em;
}
.main-visual .scrolldown .ico:after {
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    margin-left:-2.5em;
    width:5em;
    height:2.7em;
    background:url(/images/bu/bu-scroll.png) no-repeat center;
}
.main-visual .scrolldown .ico:before {
    opacity:0.5;
    content:"";
    position:absolute;
    left:50%;
    bottom:1.5em;
    margin-left:-2.5em;
    width:5em;
    height:2.7em;
    background:url(/images/bu/bu-scroll.png) no-repeat center;
}
.main-visual .scrolldown .ico:after {
    -webkit-animation: scrollMotion 1.3s cubic-bezier(0.61, 1, 0.88, 1) infinite;
    -moz-animation: scrollMotion 1.3s cubic-bezier(0.61, 1, 0.88, 1) infinite;
    -ms-animation: scrollMotion 1.3s cubic-bezier(0.61, 1, 0.88, 1) infinite;
    -o-animation: scrollMotion 1.3s cubic-bezier(0.61, 1, 0.88, 1) infinite;
    animation: scrollMotion 1.3s cubic-bezier(0.61, 1, 0.88, 1) infinite;
}
.main-visual .scrolldown .ico:before {
    -webkit-animation: scrollMotion 1.3s cubic-bezier(0.61, 1, 0.88, 1) infinite;
    -moz-animation: scrollMotion 1.3s cubic-bezier(0.61, 1, 0.88, 1) infinite;
    -ms-animation: scrollMotion 1.3s cubic-bezier(0.61, 1, 0.88, 1) infinite;
    -o-animation: scrollMotion 1.3s cubic-bezier(0.61, 1, 0.88, 1) infinite;
    animation: scrollMotion 1.3s cubic-bezier(0.61, 1, 0.88, 1) infinite;
    animation-delay:0.1s;
}

@-webkit-keyframes scrollMotion {
	0% {
	    opacity:0;
        transform: translate3d(0,-15px,0);
    }
	100% {
        transform: translate3d(0,0,0);
    }
}
@-moz-keyframes scrollMotion {
	0% {
	    opacity:0;
        transform: translate3d(0,-15px,0);
    }
	100% {
        transform: translate3d(0,0,0);
    }
}
@-ms-keyframes scrollMotion {
	0% {
	    opacity:0;
        transform: translate3d(0,-15px,0);
    }
	100% {
        transform: translate3d(0,0,0);
    }
}
@-o-keyframes scrollMotion {
	0% {
	    opacity:0;
        transform: translate3d(0,-15px,0);
    }
	100% {
        transform: translate3d(0,0,0);
    }
}
@keyframes scrollMotion {
	0% {
	    opacity:0;
        transform: translate3d(0,-15px,0);
    }
	100% {
        transform: translate3d(0,0,0);
    }
}

.main-visual .visual-wave {
    position: absolute;
    left:0;
    bottom:0;
    z-index:10;
    width:100%;
    height:130px;
}





/* ----- INTRO ----- */
.main-intro {
    overflow: hidden;
    position:relative;
    padding:10em 0 19em;
    background:#f0f0f0;
    background-size:cover;
    text-align:center;
}
.main-intro .normal-txt {
    margin-top:1.389em;
}
.main-intro .intro-wave {
    position: absolute;
    left:0;
    bottom:0;
    z-index:10;
    width: 100%;
    height:130px;
}





/* ----- FREEDOM ----- */
.main-freedom {
    padding:10em 0;
    background:#fff;
}
.main-freedom .tit .main-tit {
    text-align:left;
}
.main-freedom .tit .normal-txt {
    margin-top:1.389em;
}
.main-freedom .tit > div {
    position:relative;
    padding-right:18em;
}
.main-freedom .tit > div .btnwrap {
    position:absolute;
    right:0;
    top:0;
}
.main-freedom .con {
    margin-top:5.5em;
}
.main-freedom .con .imgbox {
    position:relative;
}
.main-freedom .con .imgbox p {
    position:absolute;
    left:5%;
    bottom:7%;
    width:90%;
    font-size:2rem;
    color:#fff;
    line-height:1.6em;
    font-weight:300;
    text-align:left;
}
.main-freedom .con {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}
.main-freedom .con > * {
    width:46%;
}
.main-freedom .con .right {
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    text-align:right;
}
.main-freedom .con .right > strong {
    display:block;
    margin-top:0.764em;
    font-size:7.2rem;
    color:#e6e6e6;
    line-height:1.111em;
    font-weight:300;
    letter-spacing:-0.042em;
    text-align:left;
}





/* ----- DREAM ----- */
.main-dream {
    display:flex;
    flex-wrap:wrap;
    text-align:right;
    background:#f8f8f8;
}
.main-dream .left {
    position:relative;
    width:34%;
}
.main-dream .left .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:url(/images/main/main-img03.jpg) no-repeat center;
    background-size:cover;
}
.main-dream .right {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    max-width:95em;
    padding:18em 0 10em;
    width:66%;
}

.main-dream .right .thumbbox {
    position:relative;
    width:43%;
}
.main-dream .right .thumbbox .dream-thumb-slider {
    overflow:visible;
    position:absolute;
    right:0;
    top:0;
    z-index:10;
    width:53em;
    height:100%;
}
.main-dream .right .thumbbox .dream-thumb-slider .swiper-slide {
    padding:2.5em 4em;
    border-radius:2em;
    cursor:pointer;
}
.main-dream .right .thumbbox .dream-thumb-slider .swiper-slide:after {
    display:none;
    content:"";
    position:absolute;
    right:-2.2em;
    top:3em;
    width:2.2em;
    height:1.8em;
    background:url(/images/bu/bu-dream-slider.png) no-repeat center;
}
.main-dream .right .thumbbox .dream-thumb-slider .swiper-slide:before {
    content:"";
    position:absolute;
    right:0;
    bottom:0;
    width:35.8em;
    height:1px;
    background:#ddd;
}
.main-dream .right .thumbbox .dream-thumb-slider .swiper-slide span {
    position:relative;
    font-size:1.7rem;
    color:#062760;
    font-weight:500;
}
.main-dream .right .thumbbox .dream-thumb-slider .swiper-slide span:after {
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:2px;
    background:#acb1bf;
}
.main-dream .right .thumbbox .dream-thumb-slider .swiper-slide p {
    margin-top:0.750em;
    font-size:2rem;
    color:#1a1a1a;
    line-height:1.4em;
}
.main-dream .right .thumbbox .dream-thumb-slider .swiper-slide.swiper-slide-thumb-active {
    background:#062760;
    -webkit-box-shadow:-5px 5px 10px rgba(32,32,32,0.5);
    box-shadow:-5px 5px 10px rgba(32,32,32,0.5);
}
.main-dream .right .thumbbox .dream-thumb-slider .swiper-slide.swiper-slide-thumb-active:after {
    display:block;
}
.main-dream .right .thumbbox .dream-thumb-slider .swiper-slide.swiper-slide-thumb-active:before {
    display:none;
}
.main-dream .right .thumbbox .dream-thumb-slider .swiper-slide.swiper-slide-thumb-active * {
    color:#fff;
}
.main-dream .right .txtbox {
    width:55%;
    height:52.2em;
}
.main-dream .right .txtbox .dream-slider .swiper-slide strong {
    font-size:4.3rem;
    color:#2e2e2e;
    font-weight:400;
}
.main-dream .right .txtbox .dream-slider .swiper-slide p {
    margin-top:1.111em;
    letter-spacing:-0.033em;
}
.main-dream .right .txtbox .dream-slider .swiper-slide .btnwrap {
    margin-top:6em;
}





/* ----- CULTURE ----- */
.main-culture {
    padding:16em 0;
    background:#fff;
}

.main-culture .con-tit {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-direction: column  !important;
    flex-direction: column !important;
    -ms-flex-align: center !important;
    align-items: center !important;
} 

.main-culture .con-tit h2 {
    text-align: center;
}

.main-culture .con-tit a {
    width: fit-content;
    margin-top: 1rem;
}

.main-culture .con-wrap {
    position: relative;
    margin-top: 7.5rem;
    min-height: 535px;
}

.main-culture .culture-swiper {
    width: 1920px;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.main-culture .culture-swiper .swiper-wrapper {
    transition-timing-function: linear !important;
}

.main-culture .culture-swiper .swiper-wrapper .swiper-slide {
    width: 416px;
}

.main-culture .box-inner {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
}

.main-culture .box-inner .bg {
    width: 100%;
    aspect-ratio : 415 / 540;
}

.main-culture .box-inner .bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}

.main-culture .box-inner:hover .bg img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);  
}

.main-culture .box-inner .txt {
    width: 100%;
    height: 325px;
    position: absolute;    
    left: 0;
    padding: 3.125rem;

    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    
}

.main-culture .box-inner .txt b {
    font-size: 3rem;
    line-height: 1.4;

    display: -webkit-box;
    word-wrap: break-word;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}

.main-culture .box-inner .txt span {
    font-size: 1.8rem;
    font-weight: 300;
    display: block;
    margin-top: auto;
}

body.en .main-culture .box-inner .txt span { 
    font-size: 1.6rem;
}

.main-culture .box-inner .txt .txt-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-direction: column  !important;
    flex-direction: column !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
}

.main-culture .box-inner .txt .txt-inner::before {
    content: '';
    display: block;
    width: 1.8rem;
    height: 1.8rem;    
    position: absolute;
    right: 0;
    bottom: 0;
}

.main-culture .swiper-slide.odd .box-inner .txt {
    padding-bottom: 7.5rem;
    top: 0;
    background: url(/images/main/main-culture-bg-up.png) no-repeat center top / cover;
    color: #fff;
    -ms-flex-align: start !important;
    align-items: flex-start !important;
}

.main-culture .swiper-slide.even .box-inner .txt {
    color: #1b1b1b;
    padding-top: 7.5rem;
    bottom: 0;
    background: url(/images/main/main-culture-bg-down.png) no-repeat center bottom / cover;
    -ms-flex-align: end !important;
    align-items: flex-end !important;
}

.main-culture .swiper-slide.odd .box-inner .txt .txt-inner::before { 
    background: url(/images/common/ico_view_more_box_01.png) no-repeat center / contain;
}

.main-culture .swiper-slide.even .box-inner .txt .txt-inner::before{
    background: url(/images/common/ico_view_more_box_02.png) no-repeat center / contain;
}


.marquee-area {
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: 20px;
}

.marquee-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 15px;
    animation: scroll-x 50s linear infinite;
}

.marquee-area.hover .marquee-wrap {
    animation-play-state: paused;
}

.marquee-box {
    cursor: pointer;
}

body.en .main-culture .box-inner .txt {
    padding: 3.125rem 3rem;
}


body.en .main-culture .box-inner .txt b {
    font-size: 2.5rem;
}

@keyframes scroll-x {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX( calc(-100% - 20px) );
    }
}

@media (max-width:1024px){
    .main-culture .con-wrap {
        min-height: 45.5vw;
    }

    .main-culture .culture-swiper .swiper-wrapper .swiper-slide {
        width: 35vw;
    }

    .main-culture .box-inner .txt {
        height: 27vw;
    }

    .main-culture .box-inner .bg img {
        width: 35vw;
    }

    .main-culture .swiper-slide.odd .box-inner .txt {
        padding-bottom: 5.5rem;
    }
    
    .main-culture .swiper-slide.even .box-inner .txt {
        padding-top: 5.5rem;
    }

    /* body.en .main-culture .box-inner .txt {
        padding: 2.5rem;
    } */
    
    body.en .main-culture .swiper-slide.odd .box-inner .txt {
        padding-bottom: 5.5rem;
    }
    
    body.en .main-culture .swiper-slide.even .box-inner .txt {
        padding-top: 5.5rem;
    }
    
    body.en .main-culture .box-inner .txt b {
        font-size: 2.2rem;
    }
}


@media (max-width:991px){
    .main-culture .con-wrap {
        min-height: 325px;
    }

    .main-culture .culture-swiper .swiper-wrapper .swiper-slide {
        width: 250px;
    }

    .main-culture .box-inner .txt {
        height: 205px;
        padding: 2.5rem;
    }

    .main-culture .swiper-slide.odd .box-inner .txt {
        padding-bottom: 5.5rem;
    }
    
    .main-culture .swiper-slide.even .box-inner .txt {
        padding-top: 5.5rem;
    }

    .main-culture .box-inner .txt b {
        font-size: 2rem;
    }
    
    .main-culture .box-inner .txt span {
        font-size: 1.4rem;
    }

    .main-culture .box-inner .bg img {
        width: 250px;
    }

    /* body.en .main-culture .box-inner .txt {
        padding: 2rem;
    } */
    
    body.en .main-culture .swiper-slide.odd .box-inner .txt {
        padding-bottom: 4rem;
    }
    
    body.en .main-culture .swiper-slide.even .box-inner .txt {
        padding-top: 4rem;
    }
    
    body.en .main-culture .box-inner .txt b {
        font-size: 1.6rem;
    }
}


.main-friendly-society {
    padding: 18rem 0 9rem 0;
    position: relative;
    color: #fff;    
}

.main-friendly-society .friendly-society-wave {
    position: absolute;
    left:0;
    top:0;
    z-index:10;
    width: 100%;
    height:130px;
    transform: rotate(180deg);
}

.main-friendly-society .friendly-society-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
}

.main-friendly-society .friendly-society-video li {
    display: none;
}

.main-friendly-society .friendly-society-video li.on {
    display: block;
}

.main-friendly-society .friendly-society-video li,
.main-friendly-society .friendly-society-video li .inner-box {
    width: 100%;
    height: 100%;
}

.main-friendly-society .friendly-society-video video {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

.main-friendly-society .friendly-society-video-back {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
} 

.main-friendly-society .maxinner {
    position: relative;
    z-index: 10;
}

.main-friendly-society .con-tit .main-tit {
    color: #fff;
    line-height: 1;
}

.main-friendly-society .con-wrap {
    margin-top: 15rem;
}

.main-friendly-society .friendly-society-box {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: calc(100% + 2.5rem);
    margin-left: -2.5rem;
    margin-top: -2.5rem;
}

.main-friendly-society .friendly-society-box .col-inner {
    width: calc(50% - 2.5rem);
    margin-left: 2.5rem;
    margin-top: 2.5rem;
    padding: 5rem 4rem;
    border: 1px solid #ffffff;
    border-radius: 3rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.main-friendly-society .friendly-society-box .col-inner.on,
.main-friendly-society .friendly-society-box .col-inner:hover {
    border: 1px solid rgba(23, 90, 145, 0.7);
    background: rgba(23, 90, 145, 0.7);
    box-shadow: 5px 5px 12px 4px rgba(0, 0, 0, 0.1);
}

.main-friendly-society .friendly-society-box .inner-box {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    padding-right: 8.5rem;
}

.main-friendly-society .friendly-society-box .inner-box b {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.main-friendly-society .friendly-society-box .inner-box p {
    margin-top: 3rem;
    font-size: 1.8rem;
    font-weight: 300;
    color: #fff;
}

.main-friendly-society .friendly-society-box .inner-box .circle-box {
    display: block;
    width: 8.2rem;
    height: 8.2rem;
    position: absolute;
    right: -1rem;
    bottom: -2rem;
}

.main-friendly-society .friendly-society-box .inner-box .circle-box .circle-arrow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    display: inline-block;
    line-height: 8.2rem;
    color: #fff;
    font-size: 3.5rem;
    font-weight: 800;
    font-family: 'Pretendard'
}

.main-friendly-society .friendly-society-box .inner-box .circle-box .circle-bg {
    display: block;
    width: 100%;
    height: 100%;
    background: url(/images/main/main-friendly-society-circle-bg.png) no-repeat center / contain;
    animation: spin 20s linear infinite;
}

.main-friendly-society .friendly-society-box .inner-box:hover .circle-box .circle-bg {
    /*animation-play-state: paused;*/
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@media (max-width:1280px) { 
    .main-friendly-society .friendly-society-box .inner-box p br {
        display: none;
    }
}

@media (max-width:991px) { 
    .main-friendly-society .friendly-society-box .col-inner {
        padding: 3rem;
    }

    .main-friendly-society .friendly-society-box .inner-box .circle-box {
        right: -1rem;
        bottom: -1rem;
    }
}


@media (max-width:767px) { 
    .main-friendly-society {
        padding: 15rem 0 4.5rem 0;
    }

    .main-friendly-society .con-wrap {
        margin-top: 7.5rem;
    }

    .main-friendly-society .friendly-society-box .col-inner {
        width: calc(100% - 2.5rem);
    }

    .main-friendly-society .friendly-society-box .inner-box b {
        font-size: 2.5rem;
    }
    
    .main-friendly-society .friendly-society-box .inner-box p {
        margin-top: 2rem;
    }

    .main-friendly-society .friendly-society-box .inner-box p br {
        display: block;
    }
}

@media (max-width:575px) { 
    .main-friendly-society .con-wrap {
        margin-top: 4rem;
    }

    .main-friendly-society .friendly-society-box .inner-box p br {
        display: none;
    }
}


/****************/
.main-culture.culture-02 .maxinner{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between; 
}

.main-culture .maxinner .left {
    max-width:620px;
    width:49%;
}
.main-culture .maxinner .left ul {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    margin-top:-6.55%;
}
.main-culture .maxinner .left ul li {
    overflow:hidden;
    position:relative;
    padding-bottom:46.615%;
    margin-top:6.55%;
    width:46.615%;
    height:0;
}
.main-culture .maxinner .left ul li:after {
    opacity:0;
    visibility:hidden;
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.3);
    -webkit-transition:all 0.3s;
    -moz-transition:all 0.3s;
    -ms-transition:all 0.3s;
    -o-transition:all 0.3s;
    transition:all 0.3s;
}
.main-culture .maxinner .left ul li img {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}
.main-culture .maxinner .left ul li:first-child:after {
    display:none !important;
}
.main-culture .maxinner .left ul li a {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index: 2;
    cursor: pointer;
}
.main-culture .maxinner .left ul li:first-child a .con {
    position:absolute;
    left:15%;
    top:15%;
    width:70%;
}
.main-culture .maxinner .left ul li:first-child a .con strong {
    display:block;
    margin-bottom:0.789em;
    font-size:3.8rem;
    color:#fff;
    line-height:1.132em;
    font-weight:500;
}

@media all and (min-width:1025px){
    .main-culture .maxinner .left ul li:first-child a:hover .btn-viewmore {
        letter-spacing:0.167em;
    }
    .main-culture .maxinner .left ul li:first-child a:hover .btn-viewmore:after {
        width:6.867em;
    }
}
.main-culture .maxinner .left ul li .txtbox {
    opacity:0;
    visibility:hidden;
    position:absolute;
    left:-30%;
    bottom:8%;
    z-index:10;
    width:84%;
    -webkit-transition:all 0.3s;
    -moz-transition:all 0.3s;
    -ms-transition:all 0.3s;
    -o-transition:all 0.3s;
    transition:all 0.3s;
}
.main-culture .maxinner .left ul li .txtbox strong {
    font-size:2rem;
    color:#fff;
    font-weight:300;
    line-height:1.400em;
}

.main-culture .maxinner .right {
    position:relative;
    padding-bottom:48.36%;
    max-width:61.9em;
    width:49%;
    height:0;
    overflow: hidden;
}
.main-culture .maxinner .right img {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}

.main-culture .maxinner .right .vid {
    position:absolute;
    left:0;
    top:0;
    z-index:-1;
    width:100%;
    height:100%;
}
.main-culture .maxinner .right .vid video {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.main-culture .maxinner .right .txtbox {
    position:absolute;
    left:8%;
    bottom:10%;
    z-index:10;
    width:84%;
}
.main-culture .maxinner .right .txtbox strong {
    font-size:4rem;
    color:#fff;
    line-height:1.300em;
    font-weight:300;
    letter-spacing:-0.013em;
}
.main-culture .maxinner .right .txtbox p {
    margin-top:0.556em;
    font-size:1.8rem;
    line-height:1.556em;
    color:rgba(255,255,255,0.61);
    font-weight:300;
}

.main-culture .maxinner .left ul li:hover:after {
    opacity:1;
    visibility:visible;
}
.main-culture .maxinner .left ul li:hover .txtbox {
    opacity:1;
    visibility:visible;
    left:8%;
}





/* ----- PLATE ----- */
.main-plate {
    position:relative;
    height:890px;
}
.main-plate .txtbox h2 {
    margin-bottom:0.267em;
    font-size:4rem;
    color:#fff;
    line-height:1.5em;
    font-weight: 400;
    text-transform:uppercase;
}
.main-plate:after {
    opacity:1;
    visibility:visible;
    content:"";
    position:absolute;
    left:0;
    top:0;
    z-index:100;
    width:100%;
    height:100%;
}
.main-plate .btnwrap{margin-top:3rem;}

.main-plate .left {
    overflow:hidden;
    position:absolute;
    left:0;
    top:0;
    width:50%;
    height:100%;
    text-align:left;
}
.main-plate .left .con-wid {
    position:absolute;
    left:0;
    top:0;
    width:50%;
    height:100%;
    background:url(/images/main/main-plate-bg-left.jpg) no-repeat center;
    background-size:cover;
}
.main-plate .left p.normal-txt {
    color:rgba(255,255,255,0.8);
}
.main-plate .left .btnwrap a {color:rgba(255,255,255,0.8);}
.main-plate .left .btnwrap a.btn-viewmore:after{background-color:rgba(255,255,255,0.8);}
.main-plate .left .imgbox {
    position:absolute;
    left:0;
    top:50%;
    margin-top:5em;
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform:translateY(-50%);
}
.main-plate .right {
    overflow:hidden;
    position:absolute;
    right:0;
    top:0;
    width:50%;
    height:100%;
    text-align:right;
}
.main-plate .right .con-wid {
    position:absolute;
    right:0;
    top:0;
    width:50%;
    height:100%;
    background:url(/images/main/main-plate-bg-right.jpg) no-repeat center;
    background-size:cover;
}
.main-plate .right .txtbox h2 {
    color:#1a1a1a;
}
.main-plate .right p.normal-txt {
    color:rgba(26,26,26,0.8);
}
.main-plate .right .imgbox {
    position:absolute;
    right:0;
    top:50%;
    margin-top:5em;
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform:translateY(-50%);
}
.main-plate .con {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:absolute;
    left:50%;
    top:50%;
    width:128em;
    height:61em;
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}

.main-plate.motion .left .imgbox {
    left:50%;
    -webkit-transform:scale(1) translate(-50%,-50%);
    -moz-transform:scale(1) translate(-50%,-50%);
    -ms-transform:scale(1) translate(-50%,-50%);
    -o-transform:scale(1) translate(-50%,-50%);
    transform:scale(1) translate(-50%,-50%);
    -webkit-transition:all 0.8s cubic-bezier(.89,.04,.3,1);
    -moz-transition:all 0.8s cubic-bezier(.89,.04,.3,1);
    -ms-transition:all 0.8s cubic-bezier(.89,.04,.3,1);
    -o-transition:all 0.8s cubic-bezier(.89,.04,.3,1);
    transition:all 0.8s cubic-bezier(.89,.04,.3,1);
    -webkit-transition-delay:0.6s;
    -moz-transition-delay:0.6s;
    -ms-transition-delay:0.6s;
    -o-transition-delay:0.6s;
    transition-delay:0.6s;
}
.main-plate.motion .right .imgbox {
    right:50%;
    -webkit-transform:scale(1) translate(50%,-50%);
    -moz-transform:scale(1) translate(50%,-50%);
    -ms-transform:scale(1) translate(50%,-50%);
    -o-transform:scale(1) translate(50%,-50%);
    transform:scale(1) translate(50%,-50%);
    -webkit-transition:all 0.8s cubic-bezier(.89,.04,.3,1);
    -moz-transition:all 0.8s cubic-bezier(.89,.04,.3,1);
    -ms-transition:all 0.8s cubic-bezier(.89,.04,.3,1);
    -o-transition:all 0.8s cubic-bezier(.89,.04,.3,1);
    transition:all 0.8s cubic-bezier(.89,.04,.3,1);
    -webkit-transition-delay:0.6s;
    -moz-transition-delay:0.6s;
    -ms-transition-delay:0.6s;
    -o-transition-delay:0.6s;
    transition-delay:0.6s;
}
.main-plate.motion:after {
    opacity:0;
    visibility:hidden;
    -webkit-transition-delay:1s;
    -moz-transition-delay:1s;
    -ms-transition-delay:1s;
    -o-transition-delay:1s;
    transition-delay:1s;
}





/* ----- RESPONSIVE ----- */
@media all and (max-width:1600px){
    .visual .con .visual-slider .swiper-slide .txtbox h2 { font-size:3.5rem;}

    .main-plate .con {
        left:5%;
        top:50%;
        width:90%;
        height:610px;
        -webkit-transform:translateY(-50%);
        -moz-transform:translateY(-50%);
        -ms-transform:translateY(-50%);
        -o-transform:translateY(-50%);
        transform:translateY(-50%);
    }
     .main-dream .right {
        padding-left:5%;
        padding-right:5%;
    }
}
@media all and (max-width:1440px){
    .main-dream .left {
        width:25%;
    }
    .main-dream .right {
        max-width:1280px;
        width:75%;
    }
    .main-dream .right .txtbox .dream-slider .swiper-slide strong  {
        font-size:3.6rem;
    }
    .main-culture .maxinner .right .txtbox strong {
        font-size:3.2rem;
    }
    .main-culture .maxinner .right .txtbox p br.pc-br {
        display:none;
    }
    .main-culture .maxinner .left ul li:first-child a .con strong {
        font-size:3rem;
    }
    .main-plate .txtbox h2 {
        font-size:3.5rem;
    }
    .main-freedom .tit .normal-txt .pc-br {
        display:none;
    }
}
@media all and (max-width:1280px){
    .main-tit {
        font-size:3.7rem;
    }
    .main-visual .visual-slider .txtbox h2 {
        font-size:3.7rem;
    }
    .main-freedom .con .right > strong {
        font-size:4.5rem;
    }

    .main-dream {
        background:none;
    }
    .main-dream .left {
        width:100%;
        height:250px;
    }
    .main-dream .left .bg {
        background-position: center 80%;
    }
    .main-dream .right {
        padding:10em 3% 10em;
        width:100%;
        background:#f8f8f8;
    }
    .main-dream .right .thumbbox .dream-thumb-slider {
        width:100%;
    }
    .main-dream .right .thumbbox .dream-thumb-slider .swiper-slide {
        padding:2em;
    }
    .main-dream .right .thumbbox .dream-thumb-slider .swiper-slide p br.pc-br {
        display:none;
    }

    .main-plate {
        height:auto;
    }
    .main-plate .con {
        position:static;
        width:auto;
        transform:none;
        height:auto;
    }
    .main-plate .con .logobox {
        margin-top:3em;
        width:50%;
    }
    .main-plate .con .txtbox {
        width:50%;
    }
    .main-plate .left {
        position:relative;
        padding:7em 5%;
        width:100% !important;
        background:url(/images/main/main-plate-bg-left.jpg) no-repeat center;
        background-size:cover;
    }
    .main-plate .left .con {
        align-items:flex-start;
    }
    .main-plate .left .con-wid {
        position:static;
        width:100% !important;
        background:none;
    }
    .main-plate .left .imgbox {
        left:auto;
        right:0;
        margin-top:0;
        width:50%;
        text-align:right;
        -webkit-transform:translateY(-50%) !important;
        -moz-transform:translateY(-50%) !important;
        -ms-transform:translateY(-50%) !important;
        -o-transform:translateY(-50%) !important;
        transform:translateY(-50%) !important;
    }
    .main-plate .left .imgbox img {
        max-width:55em;
        width:100%;
    }
    .main-plate .right {
        position:relative;
        padding:7em 5%;
        width:100% !important;
        background:url(/images/main/main-plate-bg-right.jpg) no-repeat center;
        background-size:cover;
    }
    .main-plate .right .con {
        align-items:flex-end;
    }
    .main-plate .right .con-wid {
        position:static;
        width:100% !important;
        background:none;
    }
    .main-plate .right .imgbox {
        left:0;
        right:auto;
        margin-top:0;
        width:50%;
        text-align:left;
        -webkit-transform:translateY(-50%) !important;
        -moz-transform:translateY(-50%) !important;
        -ms-transform:translateY(-50%) !important;
        -o-transform:translateY(-50%) !important;
        transform:translateY(-50%) !important;
    }
    .main-plate .right .imgbox img {
        max-width:55em;
        width:100%;
    }
}

@media all and (max-width:1024px){
    .main-intro {
        padding:12em 0 19em;
    }
    .main-intro p .pc-br {
        display:none;
    }
    .main-culture {
        padding:10em 0;
    }
    .main-culture .maxinner .left {
        max-width:none;
        width:100%;
    }
    .main-culture .maxinner .left ul li:hover .txtbox {
        left:5.5%;
    }
    .main-culture .maxinner .left ul li .txtbox strong {
        font-size:1.7rem;
    }
    .main-culture .maxinner .left ul li:first-child a .con strong {
        font-size:3.2rem;
    }
    .main-culture .maxinner .right {
        max-width:none;
        margin-top:7%;
        padding-bottom:80%;
        width:100%;
    }
    .main-culture .maxinner .right .txtbox {
        left:3%;
        width:94%;
    }
    .main-culture .maxinner .right .txtbox strong {
        font-size:2.5rem;
    }
    .main-culture .maxinner .left ul li:after {
        opacity:1;
        visibility:visible;
    }
    .main-culture .maxinner .left ul li .txtbox {
        opacity:1;
        visibility:visible;
        left:5%;
    }
    .main-culture .maxinner .left ul li:hover .txtbox {
        left:5%;
    }
    .main-dream .right .thumbbox .dream-thumb-slider .swiper-slide p {
        font-size:1.8rem;
    }
    .main-dream .right .thumbbox .dream-thumb-slider .swiper-slide:before {
        width:100%;
    }
}
@media all and (max-width:767px){
    .main-tit {
        font-size:3rem;
    }
    .normal-txt {
        font-size:1.7rem;
    }
    .main-visual .visual-slider .txtbox {
        padding-left:5%;
        padding-right:5%;
    }
    .main-visual .visual-slider .txtbox h2 {
        font-size:3rem;
    }
    .main-visual .visual-slider .swiper-button-prev {
        display:none;
    }
    .main-visual .visual-slider .swiper-button-next {
        display:none;
    }
    .main-visual .progressbar {
        width:200px;
    }
    .main-visual .progressbar .swiper-pagination .swiper-pagination-current {
        font-size:1.9rem;
    }
    .main-visual .progressbar .swiper-pagination .swiper-pagination-total {
        font-size:1.4rem;
    }


    .main-freedom {
        padding:7em 3%;
    }
    .main-freedom .con > * {
        width:100%;
    }
    .main-freedom .con img {
        width:100%;
    }
    .main-freedom .con .right {
        margin-top:1.5em;
    }
    .main-freedom .tit > div {
        padding-right:0;
    }
    .main-freedom .tit > div .btnwrap {
        position:static;
        margin-top:2em;
    }
    .main-freedom .con .imgbox p {
        left:5%;
        bottom:5%;
        width:90%;
    }
    .main-freedom .con .right > strong {
        font-size:3.5rem;
    }

    .main-dream .left {
        height:200px;
    }
    .main-dream .right {
        padding:7em 5%;
        text-align:left;
    }
    .main-dream .right .thumbbox {
        width:100%;
    }
    .main-dream .right .thumbbox .dream-thumb-slider {
        position:static;
    }
    .main-dream .right .thumbbox .dream-thumb-slider .swiper-slide {
        padding:3em 5%;
    }
    .main-dream .right .thumbbox .dream-thumb-slider .swiper-slide:before {
        display:none;
    }
    .main-dream .right .thumbbox .dream-thumb-slider .swiper-slide:after {
        right:5%;
        left:auto;
        top:auto;
        bottom:-17px;
    }
    .main-dream .right .thumbbox .dream-thumb-slider .swiper-slide p {
        font-size:1.8rem;
    }
    .main-dream .right .txtbox .dream-slider .swiper-slide .btnwrap {
        margin-top:4em;
    }
    .main-dream .right .txtbox {
        margin-top:50px;
        width:100%;
        height:auto;
        text-align:left;
    }
    .main-dream .right .txtbox .dream-slider .swiper-slide strong {
        font-size:3rem;
    }

    .main-culture {
        padding:10em 0;
    }
    .main-culture .maxinner .left ul li:first-child a .con {
        left:10%;
        top:10%;
        width:80%;
    }
    .main-culture .maxinner .left {
        max-width:none;
        width:100%;
    }
    .main-culture .maxinner .left ul li:hover .txtbox {
        left:5.5%;
    }
    .main-culture .maxinner .left ul li .txtbox strong {
        font-size:1.7rem;
    }
    .main-culture .maxinner .left ul li:first-child a .con strong {
        font-size:3.2rem;
    }
    .main-culture .maxinner .right {
        max-width:none;
        margin-top:7%;
        padding-bottom:80%;
        width:100%;
    }
    .main-culture .maxinner .right .txtbox {
        left:3%; width:94%;
    }
    .main-culture .maxinner .right .txtbox strong {
        font-size:2.4rem;
    }
    .main-culture .maxinner .right .txtbox p {
        font-size:1.6rem;
    }

    .main-plate .con .txtbox {
        width:100%; text-align:center;
    }
    .main-plate .con .logobox {
        width:100%; text-align:center;
    }
    .main-plate .con .logobox img {
        max-width:80px;
    }
    .main-plate .txtbox h2 {
        font-size:2.5rem;
    }
    .main-plate .left {
        padding:3em 3%;
    }
    .main-plate .left .con {
        padding-top:55%;
    }
    .main-plate .left .imgbox {
        text-align:center;
    }
    .main-plate .left .imgbox img {
        margin:0 auto;
        max-width:35em;
    }
    .main-plate .left .con .imgbox {
        position:absolute;
        left:50%;
        top:3em;
        -webkit-transform:translateX(-50%) !important;
        -moz-transform:translateX(-50%) !important;
        -ms-transform:translateX(-50%) !important;
        -o-transform:translateX(-50%) !important;
        transform:translateX(-50%) !important;
    }
    .main-plate .right .imgbox {
        text-align:center;
    }
    .main-plate .right .imgbox img {
        margin:0 auto;
        max-width:35em;
    }
    .main-plate .right .con {
        padding-top:55%;

    }
    .main-plate .right .con .imgbox {
        position:absolute;
        right:50%;
        top:7em;
        -webkit-transform:translateX(50%) !important;
        -moz-transform:translateX(50%) !important;
        -ms-transform:translateX(50%) !important;
        -o-transform:translateX(50%) !important;
        transform:translateX(50%) !important;
        text-align:center;
    }

}
@media all and (max-width:480px){
    .main-tit {
        font-size:2.7rem;
    }
    .main-visual .visual-slider .txtbox h2 {
        font-size:2.7rem;
    }
    .main-freedom .con .imgbox p {
        font-size:1.7rem;
    }
    .main-dream .right .txtbox .dream-slider .swiper-slide strong {
        font-size:2.7rem;
    }
    .main-culture .maxinner .left ul li:first-child a .con strong {
        font-size:2.7rem;
    }
}






/* ----- ENG ----- */
.en .main-visual .visual-slider .txtbox h2 {
    font-size:3.6rem;
}
.en .main-freedom .con .imgbox p {
    font-size:1.8rem;
    line-height:1.4;
}

@media all and (max-width:1440px){
    .en .main-visual .visual-slider .txtbox {
        margin:0 auto;
        max-width: 1000px;
    }
}
@media all and (max-width:1280px){
    .en .main-visual .visual-slider .txtbox {
        max-width: 850px;
    }
    .en .main-visual .visual-slider .txtbox h2 {
        font-size:3rem;
    }
}
@media all and (max-width:767px){
    .en .main-visual .visual-slider .txtbox {
        max-width: 600px;
    }
    .en .main-visual .visual-slider .txtbox h2 {
        font-size:2.5rem;
    }
}
/* ----- ENG END ----- */