@charset "utf-8";
@import url('https://fonts.cdnfonts.com/css/foxlite-script');

/* common */
header.bg {background: rgba(0,0,0,0.6);}

.full-nav {position: fixed; bottom: 40px; left: 100px; z-index: 5; display: flex; align-items: center; opacity: 1; transition: all 1s;}
.full-nav p {margin-right: 15px;}
.full-nav a {display: flex; align-items: center; color: #fff; font-weight: 500; letter-spacing: -0.3px;}
.full-nav #fp-nav {right: auto; position: relative; top: auto; margin-top: 0 !important;}
.full-nav #fp-nav ul { display: flex;  align-items: center;}
.full-nav #fp-nav ul li {display: flex; align-items: center;}

/*.full-nav #fp-nav ul li:not(:last-child){ margin-right: 15px; }*/
.full-nav #fp-nav ul li a span {width: 5px;height: 5px;background: rgba(255,255,255,0.5);border-radius: 50%;margin-right: 15px;}
.full-nav #fp-nav ul li a div {align-items: center; order: 0; color: #FFF; display: none;}
.full-nav #fp-nav ul li a div:after {content: '';display: block;width: 20px;height: 1px;background: #fff;margin: 0 15px;}

body.fp-viewing-5 .full-nav,.full-nav #fp-nav ul li:first-child a span, .full-nav #fp-nav ul li:nth-child(5) a div:after, .full-nav #fp-nav ul li:last-child {display: none;}

.full-nav #fp-nav ul li a.active div {display: flex;}
.full-nav.blue p a svg path {stroke: var(--mainC);}
.full-nav.blue #fp-nav ul li a span {background: #ccc;}
.full-nav.blue #fp-nav ul li a.active span {background: var(--mainC);}
.full-nav.blue #fp-nav ul li a div {color: var(--mainC);}
.full-nav.blue #fp-nav ul li a div:after {background: var(--mainC);}
.full-nav.up {opacity: 0; transform: translateY(120%); transition: transform 1s;}
.fp-auto-height.fp-section,.fp-auto-height .fp-slide,.fp-auto-height .fp-tableCell{height: auto !important;}
.fp-responsive .fp-auto-height-responsive.fp-section,
.fp-responsive .fp-auto-height-responsive .fp-slide,
.fp-responsive .fp-auto-height-responsive .fp-tableCell {height: auto !important;}

@media screen and (max-width:1600px){
	.full-nav { left: 20px; }
}
@media screen and (max-width:1200px){
    .full-nav {display: none !important;}
}

/* main */
main .visual {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

main .visual .slide-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

main .visual .slide-box .swiper-slide {
    position: relative;
}

main .visual .slide-box .swiper-slide:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
}

main .visual .slide-box .swiper-slide img {
    position: relative;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    z-index: -1;
}

main .visual .inner-box {
    width: 100%;
    height: 100%;
    padding: 200px 100px 130px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    position: relative;
    pointer-events: none;
    z-index: 5;
}

main .visual .inner-box * {
    pointer-events: auto;
}

main .visual .inner-box .txt-wrap {
    position: relative;
}

main .visual .inner-box .txt-box {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

main .visual .inner-box .txt-box > * {
    overflow: hidden;
}

main .visual .inner-box .txt-box .title {
    color: #fff;
    font-family: 'Foxlite Script', sans-serif;
    font-weight: 300;
    letter-spacing: -1.76px;
    word-break: keep-all;
}

main .visual .inner-box .txt-box .txt {
    color: #fff;
    font-weight: 300;
    letter-spacing: -0.48px;
    word-break: keep-all;
}

main .visual .inner-box .txt-box .txt2 {
    color: #fff;
    font-weight: 600;
    letter-spacing: -0.48px;
    margin-bottom: 6rem;
    word-break: keep-all;
}

main .visual .inner-box .txt-box p span {
    display: block;
    transform: translateY(110%);
    transition: all 1s;
}

main .visual .inner-box .txt-box .txt span {
    transition: all 0.7s 0.6s;
}

main .visual .inner-box .txt-box .txt2 span {
    transition: all 0.8s 0.7s;
}

main .visual .inner-box .slide-dots {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    z-index: 1;
    display: flex;
    align-items: center;
}

main .visual .inner-box .slide-dots span {
    display: block;
    margin: 0 10px 0 0 !important;
    background: #fff;
    opacity: 1;
    width: 8px;
    height: 8px;
    border-radius: 50px;
    transition: all 0.7s;
}

main .visual .inner-box .slide-dots span.swiper-pagination-bullet-active {
    width: 75px;
}

main .visual .inner-box .txt-box.active {
    position: relative;
    opacity: 1;
}

main .visual .inner-box .txt-box.active p span {
    transform: translateY(0%);
}

main .visual .scroll-move {position: absolute; right: 100px; bottom: 100px; z-index: 5;}
main .visual .scroll-move figure {transform-origin: center; animation: rotateC 5s linear infinite;}

@keyframes rotateC {
    0% {
        transform: rotate(0)
    }
    100% {
        transform: rotate(360deg)
    }
}

.scroll-move span{display:block; width: 26px; height: 46px; position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; }
.scroll-move span:after{ content:''; display:block; width: calc(100% - 4px); height: calc(100% - 4px) ; aspect-ratio: 1; position: absolute; top: 0; left: 0; padding: 2px; border-radius: 50px; background:linear-gradient(to top, rgba(255,255,255,0.3), rgba(255,255,255,1)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box,  linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; background-size: 400% 400%; animation:scroll 2s infinite;}
.scroll-move span:before{ content:''; display:block; width: 6px; height: 6px; border-radius:50%; background: #fff; position: absolute; transform:translateX(-50%); left: 50%; top: 10px; animation:scrollDot 2s infinite;}

@keyframes scroll {
	0%{ background-position: 100% 0%;}
	100%{ background-position: 100% -40%;}
}

@keyframes scrollDot {
	0%{ width: 6px; height: 6px; top: 10px; background: #fff;}
	100%{ width: 2px; height: 2px; top: 38px; background: rgba(255,255,255,0.3);}
}

@keyframes scrollDot2 {
	0%{ width: 6px; height: 6px; top: 10px; background: #ccc;}
	100%{ width: 2px; height: 2px; top: 38px; background: rgba(204,204,204,0.3);}
}


@media screen and (max-width:1600px){
	main .visual .inner-box{ padding: 150px 20px 200px;}
	main .visual .scroll-move{ right: 20px; bottom: 30px;}
}

@media screen and (max-width:960px){
    main .visual .inner-box .txt-box { padding-top: 30px;}
    main .visual .inner-box .txt-box .title { margin-bottom: 20px; font-size: 15rem;}
    main .visual .inner-box .txt-box .txt {font-size: 3rem;}
    main .visual .inner-box .txt-box .txt2 {font-size: 4rem;}
    main .visual .scroll-move { bottom: 13%; right: 0; transform: scale(0.7); }    
}

@media screen and (max-width:680px){
	main .visual .inner-box .txt-box .title { font-size: 13rem;}
    main .visual .scroll-move { bottom: 10%; right: 0; transform: scale(0.7); }    
}

@media screen and (max-width:480px){
	main .visual .inner-box .txt-box .title { font-size: 10rem;}
    main .visual .inner-box .txt-box .txt { font-size: 2.5rem;}
    main .visual .inner-box .txt-box .txt2 { font-size: 3rem;}
}


.btn_more a, .btn_more button { position:relative; width:243px; height:60px; display:flex; align-items:center; overflow:hidden; transition:all 0.5s; outline:none; border:none; background:none }
.btn_more.w290 a, .btn_more.w290 button { width:290px; }
.btn_more.w310 a, .btn_more.w310 button { width:310px; }
.btn_more strong { width:calc(100% - 60px); height:100%; color:#444; font-size:1.6rem; font-weight:700; line-height:1.3; text-transform:capitalize; display:flex; justify-content:center; align-items:center; border-radius:60px; background:#ededed; transition:all 0.5s; }
.btn_more span { position:absolute; right:0; display:flex; justify-content:center; align-items:center; width:60px; height:100%; background:#122a88; border-radius:60px; transition:all 0.5s; }
.btn_more a:hover span, .btn_more button:hover span { margin-right:calc(100% - 60px); transform:rotate(45deg);}
.btn_more a:hover strong, .btn_more button:hover strong { margin-left:60px; }

@media screen and (max-width:1024px){
	.btn_more a, .btn_more button { width:220px; height:50px; }
	.btn_more.w290 a, .btn_more.w290 button { width:260px; }
	.btn_more.w310 a, .btn_more.w310 button { width:280px; }
	.btn_more strong { width:calc(100% - 50px); }
	.btn_more span { width:50px; }
	.btn_more a:hover span,
	.btn_more button:hover span { margin-right:calc(100% - 50px); }
	.btn_more a:hover strong,
	.btn_more button:hover strong { margin-left:50px; }
}
@media screen and (max-width:640px){
	.btn_more a, .btn_more button { width:200px; height:40px; }
	.btn_more.w290 a, .btn_more.w290 button { width:230px; }
	.btn_more.w310 a, .btn_more.w310 button { width:260px; }
	.btn_more strong { width:calc(100% - 40px);}
	.btn_more span { width:40px; }
	.btn_more a:hover span, .btn_more button:hover span { margin-right:calc(100% - 40px); }
	.btn_more a:hover strong, .btn_more button:hover strong { margin-left:40px; }
}


/* section_about us */
main .about .ctn-wrap {position: relative; z-index: 2; padding: 200px 100px 200px;}
main .about .txt_area {display: flex; flex-direction: column; width: 100%; gap: 5rem;overflow:hidden;}
main .about .txt_area .left {width: 100%;}
main .about .txt_area .right {width: 55%; margin: auto 0 0 auto;}
main .about .title {color: #122a88; font-family: 'Foxlite Script', sans-serif; font-weight: 300; letter-spacing: -1.76px; word-break: keep-all;}
main .about .txt {color: #001111; word-break: keep-all;}
main .about .txt span {color: #122a88; font-weight: 600; line-height: 1.6;}
main .about .btn_more { margin-top:100px; }

@media screen and (max-width:1600px){
    main .about .ctn-wrap {padding: 150px 20px 150px;}
}
@media screen and (max-width:1200px){
    main .about .ctn-wrap {padding: 100px 20px 100px;}
}
@media screen and (max-width:960px){
    main .about .ctn-wrap {padding: 80px 20px 80px;}
    main .about .title {font-size: 15rem;}
    main .about .txt_area .right {width: 100%;}
    main .about .btn_more { margin-top:80px; }
}
@media screen and (max-width:680px){
    main .about .title {font-size: 13rem;}
    main .about .btn_more { margin-top:60px; }
}
@media screen and (max-width:480px){
    main .about .title {font-size: 10rem;}
}



/* section_product */
main .product .ctn-wrap {position: relative; z-index: 2; padding: 150px 100px 150px;}
.top_txt { display:flex; justify-content:space-between;}
.top_txt h3 { overflow:hidden; width:50%; }
.top_txt h3 span { display:block; color:#001111; font-size:6rem; font-weight:800; line-height:1.3; }
.top_txt .txt.txt-right { color:#333; font-size:2rem; font-weight:300; line-height:1.8; padding-bottom:53px; }
@media screen and (max-width:1600px){
    main .product .ctn-wrap {padding: 150px 20px 150px;}
}
@media screen and (max-width:1440px){    
    .top_txt h3 {width:40%; }
	.top_txt .txt.txt-right { width:60%; padding-bottom:40px; line-height:1.6; }
}
@media screen and (max-width:1200px){
    main .product .ctn-wrap {padding: 100px 20px 100px;}
	.top_txt .txt.txt-right { font-size:17px; padding-bottom:34px; line-height:1.4; }
}
@media screen and (max-width:1024px){
	.top_txt { justify-content:flex-start; flex-wrap:wrap; }
	.top_txt h3 { width:100%; }
	.top_txt .txt.txt-right { text-align:left; padding-bottom:0; margin-top:20px; width:100%; }
	.top_txt .txt.txt-right br { display:none }
}
@media screen and (max-width:960px){
    main .product .ctn-wrap {padding: 80px 20px 80px;}
}
@media screen and (max-width:640px){
	.top_txt .txt.txt-right { margin-top:10px; }
}
@media screen and (max-width:480px){
    .top_txt h3 span {font-size:4rem;}
}

/* animation */
.title-box h3 span { opacity:0; }
.title-box.subOn h3 span { animation:ani_2 0.8s 0.01s; animation-fill-mode:both; }
.title-box .txt.txt-right { opacity:0; }
.title-box.subOn .txt.txt-right { animation:ani_1 1.0s 0.2s; animation-fill-mode:both; }

.product {overflow:hidden; }
.product .productCont { position:relative; }
.product .listbox ul { position:relative; z-index:2; display:flex; justify-content:center; gap:30px; height:500px; width:100%; }
.product .listbox li { width:calc((100% - 30px) / 3); transition:all 0.5s ease-in-out; }
.product .listbox li .box a { position:relative; width:100%; height:500px; border-radius:20px; overflow:hidden; display:flex; align-items:flex-end; transition:all 0.5s; } 
.product .listbox li .txtbox { position:absolute; top:80px; left:60px; right: 60px; z-index:3; opacity:0; transition:all 0.3s; }
.product .listbox li .txtbox .stxt { color:#001111; font-size:1.8rem; line-height:1.3; width: 450px; margin-top: 3rem }
.product .listbox li .txtbox .tit { display:flex; align-items:center;  }
.product .listbox li .txtbox .tit h4 { color:#222; font-size:4.8rem; font-weight:700; line-height:1.3; }
.product .listbox li .txtbox .tit span { margin-left:20px; display:flex; justify-content:center; align-items:center; width:60px; height:60px; background:#122a88; border-radius:60px; transition:all 0.5s; }
.product .listbox li .imgbox { position:relative; width:100%; height:100%; transition:all 0.5s; display:flex; align-items:center; justify-content:center;  }
.product .listbox li a:before { content:""; display:block; position:absolute; bottom:0; left:0; width:100%; height:100%; background:#f7f7f7; transition:all 0.5s ease-in-out; border-radius:20px; }
.product .listbox li .imgbox img { transform:scale(1); transition:all 0.5s ease-in-out;}
.product .listbox li.on { width:56%; }
.product .listbox li.off { width:calc((44% - 10px) / 2); margin-top:0; }
.product .listbox li.on .txtbox { opacity:1; transition:all 0.6s 0.5s ease-in-out; }
.product .listbox li.on a:before { background:#fff; height:72%; }
.product .listbox li.on .imgbox { justify-content:right;}
.product .listbox li.on .imgbox img {width: 50%;}
.product .listbox li.off .imgbox img { /*transform:scale(0.7);*/ }
.product .bg-txt { position:absolute; left:0; top:50%; transform:translateY(-50%); margin-top:60px; display:flex }
.product .bg-txt svg { color:#fff; font-weight:700; display:inline-block; width:auto; margin-right:2%; }
.product .bg-txt svg text { fill:none; stroke:#000; stroke-width:0.28; font-size:60px; font-weight:700; line-height:1.3; opacity:0.1; }
.product .productCont.subOn .bg-txt svg { animation:txt_marquee 100s 0.5s infinite linear; }

.product .listbox li { position:absolute; }
.product .listbox li:nth-child(1) { left:50%; transform:translateX(-50%) rotate(-10deg); z-index:3 } 
.product .listbox li:nth-child(2) { position:relative; z-index:2 }
.product .listbox li:nth-child(3) { right:50%; transform:translateX(50%) rotate(10deg); z-index:1 }
.product .listbox ul.active li { position:relative; }
.product .listbox ul.active li:nth-child(1),
.product .listbox ul.active li:nth-child(2),
.product .listbox ul.active li:nth-child(3) { left:0; right:0; transform:translateX(0) rotate(0deg); }

@media screen and (max-width:1440px){
	.product .productCont { margin-top:50px; }
	.product .listbox li .txtbox .stxt { font-size:17px; }
	.product .listbox li .txtbox .tit h4 { font-size:50px; }
	.product .listbox li .box a { border-radius:10px; }
}
@media screen and (max-width:1200px){
	.product .productCont { margin-top:40px; }
	.product .listbox ul { height:640px;}
	.product .listbox li .box a { height:550px; }
	.product .listbox li .imgbox img { width:400px; }
}
@media screen and (max-width:1024px){
	.product .productCont { margin-top:30px; }
	.product .listbox li .txtbox { top:20px; left:30px; }
	.product .listbox li .txtbox .stxt { font-size:16px; }
	.product .listbox li .txtbox .tit h4 { font-size:40px; }
	.product .listbox li .txtbox .tit span { margin-left:14px; width:50px; height:50px; }
	.product .listbox li .box a { border-radius:10px; }
	.product .listbox li a:before { border-radius:10px; }
}
@media screen and (max-width:960px){
	.product .listbox ul { height:500px;}
	.product .listbox li .box a { height:500px; }
	.product .listbox li .imgbox img { width:360px; transform:scale(0.7); }
	.product .listbox li .txtbox { left:0; right: 0;}
	.product .listbox li .txtbox .stxt { margin-top: 1rem; width: auto; }
	.product .listbox li .txtbox .tit h4 { font-size:2.5rem; }
	.product .listbox li .txtbox .tit span { margin-left:10px; width:36px; height:36px; }
	.product .listbox li { width:calc((100% - 20px) / 3) !important; margin-top:0 !important; }
	.product .listbox ul.active li .imgbox { height:62%; }
	.product .listbox ul.active li .txtbox { opacity:1; transition:all 0.6s 0.5s ease-in-out; }
	.product .listbox ul.active li a:before { height:62%; }
}
@media screen and (max-width:760px){
	.product .listbox ul { flex-direction:column; height:auto; padding-bottom:20px; }
	.product .listbox li { width:60% !important; margin:0 auto; }
	.product .listbox ul.active li { width:100% !important; }
	.product .listbox li .box a { height:400px; }
	.product .listbox li .imgbox img {transform:scale(0.7); }
	.product .listbox ul.active li .imgbox { height:70%; }
	.product .listbox ul.active li a:before { height:70%; }
}
@media screen and (max-width:640px){
	.product .listbox ul.active li .imgbox { height:65%; }
	.product .listbox ul.active li a:before { height:65%; }
}

/* animation */
.product .listbox.subOn li:nth-child(1) { animation:p_ani1 1.0s 0.3s; animation-fill-mode:both; } 
.product .listbox.subOn li:nth-child(3) { animation:p_ani2 1.0s 0.3s; animation-fill-mode:both; } 



#esg{
	--width: 440px;
	--height: 215px;
}
#esg{ height: 200vh; opacity: 1 !important;}
#esg > div{ height: 100%; }
#esg .w1920{ max-width: 1920px; width: 100%; margin: 0 auto; }
#esg .management.aos-animate {overflow-y: scroll;}
#esg .w1760{ max-width: 1800px; width: 100%; padding: 0 20px; margin: 0 auto; }
#esg .title-box h3{font-size: 8.4rem; font-weight: 800; color: #111; }
#esg .sticky{ height: 100vh; display: flex; flex-direction: column; justify-content: center; position: sticky; top: 0; left: 0;}
#esg .sticky .bg{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; position: absolute; top: 0; left: 0; }
#esg .sticky .bg::after{ content: ""; width: 440px; height: 215px; background: url("../../images/management_bg.jpg") no-repeat center center / cover; border-radius: 99px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: width 1s 0.2s, height 1s 0.2s, border-radius 1s 0.2s; }
.title-box h3{font-size: 8.4rem; font-weight: 600; color: #111; }
#esg .content{ text-align: center; position: relative; z-index: 10; padding: 20px; transform: translateY(var(--aosP)); opacity: 0; transition: transform var(--aosT) 0.9s, opacity var(--aosT) 0.9s; }
#esg .content h3{ font-size: 8.4rem; font-weight: 800; color: #FFF; }
#esg .content p{ font-size: 20px; font-weight: 500; color: #FFF; line-height: 1.8; margin: 80px 0; }
#esg .content ul{ display: flex; justify-content: center; margin: -5px; }
#esg .content ul li{ margin: 5px; }
#esg .content ul li a{ width: 380px;  justify-content: space-between; }

#esg .scroll-content.aos-animate .sticky .bg::after{ width: calc(100% - 20px); height: calc(100% - 20px); border-radius: 40px; }
#esg .scroll-content.aos-animate .content{ transform: translateY(0); opacity: 1; }

@media screen and (max-width: 1700px){
    #esg .title-box h3{font-size: 7.5rem;}
	#esg .content h3{ font-size: 7.5rem; }
	#esg .content p{ font-size: 19px; margin: 60px 0; }
}

@media screen and (max-width: 1280px){
    #esg .title-box h3{font-size: 7rem;}
	#esg .content h3{ font-size: 7rem; }
	#esg .content p{ margin: 60px 0 80px; }
}
@media screen and (max-width: 1200px){
    #esg{ height: auto;}
}

@media screen and (max-width: 900px){
    #esg .title-box h3{font-size: 6.5rem;}
	#esg .content h3{ font-size: 6.5rem; }
	#esg .content p{ margin-top: 20px; }
}

@media screen and (max-width: 800px){
	#esg .content ul{ flex-direction: column; }
	#esg .content ul li a{ width: 100%; justify-content: space-between; }
}

@media screen and (max-width: 650px){
	#esg .content h3{ font-size: 6.5rem; }
}

/* viewmore */
.viewmore{ min-height: 60px; display: inline-flex; justify-content: center; align-items: center; background: #EEE; border-radius: 30px; font-size: 2rem; font-weight: 500; padding: 5px 30px; position: relative; clip-path: inset(0 0 0 0 round 30px); -webkit-clip-path: inset(0 0 0 0 round 30px); }
.viewmore::before{ content: ""; width: calc(100% + 6px); height: calc(100% + 6px); background: #000; clip-path: inset(0 100% 0 0 round 30px); -webkit-clip-path: inset(0 100% 0 0 round 30px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: clip-path 0.4s; }
.viewmore > *{ position: relative; z-index: 10; }
.viewmore span{ color: #CCC; line-height: 1; transition: color 0.4s; }
.viewmore i{ width: 45px; height: 45px; background: #FFF; border-radius: 50%; display: inline-flex; flex-direction: column; justify-content: center; margin-left: 15px; position: relative; overflow: hidden; transition: background 0.4s; }
.viewmore i::before,
.viewmore i::after{ content: ""; width: 100%; height: 13px; background: url("../../images/icon_viewmore.svg") no-repeat center center / contain; transition: transform 0.4s; }
.viewmore i::before{ transform: translateX(0); }
.viewmore i::after{ filter: invert(1); -webkit-filter: invert(1); position: absolute; top: 50%; left: 0; transform: translate(-100%, -50%); }

.viewmore.white{ background: transparent; border: 1px solid #fff; }
.viewmore.white::before{ background: #122a88; }
.viewmore.white span{ color: #FFF; -webkit-text-stroke: 0.012em transparent; -webkit-text-stroke: 0.012em transparent; transition: color 0.4s, -webkit-text-stroke-color 0.4s; }
.viewmore.white i{ background: rgba(255, 255, 255, 0.2); }
.viewmore.white i::before,
.viewmore.white i::after{ filter: brightness(5); -webkit-filter: brightness(5); }

@media screen and (hover: hover) and (hover: hover){
    .viewmore.white:hover {border: 1px solid #122a88; }
	.viewmore:hover span{ color: #FFF; }
	.viewmore:hover::before{ clip-path: inset(0 0 0 0 round 30px); -webkit-clip-path: inset(0 0 0 0 round 30px); }
	.viewmore:hover i::before{ transform: translateX(100%); }
	.viewmore:hover i::after{ transform: translate(0, -50%); }

	.viewmore.white:hover span{ color: #fff; -webkit-text-stroke-color: #fff; -webkit-text-stroke-color: #fff; }
	.viewmore.white:hover i{ background: #111; }
}

@media screen and (max-width: 1700px){
	/* viewmore */
	.viewmore{ min-height: 65px; padding-inline: 25px; }
	.viewmore i{ width: 40px; height: 40px; }
}

@media screen and (max-width: 1280px){
	/* viewmore */
	.viewmore{ padding-inline: 20px; }
	.viewmore i{ width: 35px; height: 35px; }
	.viewmore i::before,
	.viewmore i::after{ height: 10px; }
}


/* section_contact */
main .contact .ctn-wrap {position: relative; z-index: 2; padding: 170px 100px 170px; width: 100%; height: 100%}
main .contact .ctn-wrap::before {content: ""; background-image: url("../../images/contact_bg.jpg"); position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%); transition: all 3s 0.1s linear; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center;}
main .contact h2 {color: #111; font-size: 6rem; font-weight: 800; overflow: hidden;}
main .contact .title {display: flex; flex-direction: column; row-gap: 10px; text-align: center;}
main .contact .title p {color: #111; font-size: 2rem; line-height: 1.7;}
main .contact .column {display: flex; justify-content: space-between; width: 100%; height: 100%; flex-direction: column;}
main .contact .item-box {display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 30px;}
main .contact .item {position: relative; transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); border-radius: 20px; overflow: hidden;}
main .contact .item::before {content: ""; display: block; opacity: 0; transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); width: 100%; height: 100%;	position: absolute;	top: 50%;left: 50%;	transform: translate(-50%, -50%);}
main .contact .item::before * {transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);}
main .contact .item:first-child::before {background: url("../../images/contact_img1.jpg") center no-repeat; background-size: cover;}
main .contact .item:nth-child(2)::before {background: url("../../images/contact_img2.jpg") center no-repeat; background-size: cover;}
main .contact .item:last-child::before {background: url("../../images/contact_img3.jpg") center no-repeat; background-size: cover;}
main .contact .item:first-child {background: url("../../images/contact_img1.jpg") center no-repeat; background-size: cover;}
main .contact .item:nth-child(2) {background: url("../../images/contact_img2.jpg") center no-repeat; background-size: cover;}
main .contact .item:last-child {background: url("../../images/contact_img3.jpg") center no-repeat; background-size: cover;}
main .contact .item a {position: relative; width: 100%; height: 100%; min-height: 350px; display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between;}
main .contact .item dl {position: absolute; left: 60px; top: 60px;}
main .contact .item dl dt {display: block;color: #fff;font-size: 3.6rem;font-weight: 800;}
main .contact .item span {position: absolute; right: 30px; bottom: 30px; margin-left:20px; display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:#122a88; border-radius:50px; transition:all 0.5s;}
main .contact .item:hover {background: transparent; transform: translateY(-40px);}
main .contact .item:hover::before {	opacity: 1;}
main .contact .item:hover dl * {color: #fff;}

@media (max-width: 1600px) {
    main .contact .ctn-wrap {padding: 150px 20px 150px;}
}

@media (max-width: 1200px) {
    main .contact .ctn-wrap {padding: 100px 20px 100px;}
}

@media screen and (max-width:1100px){
    main .contact .title {padding-bottom: 3rem;}
    main .contact .item dl {left: 30px; top: 30px;}
    main .contact .item dl dt {font-size: 2.6rem;}
}

@media screen and (max-width:960px){
    main .contact .ctn-wrap {padding: 80px 20px 80px;}
}

@media (max-width: 768px) {
    main .contact .item-box {grid-template-columns: repeat(1, 1fr); row-gap: 10px; column-gap: 0;}
    main .contact .item a {min-height: 200px;}
    main .contact .item dl {left: 30px; top: 30px;}
    main .contact .item dl dt {font-size: 2.5rem;}
    main .contact .item:hover {background: transparent; transform: translateY(0px);}
}

@media (max-width: 480px) {
    main .contact h2 {font-size: 4rem;}
}