@charset "utf-8";

.slick-slider .slick-track,

.slick-slider .slick-list{

    -webkit-transform: translate3d(0, 0, 0);

    -moz-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    transition-delay: 10ms;

}





.cont_main { background:#fff; width:100%;}

.mv_wrap {width:100%; padding:0 0px; overflow:hidden; }

.m_visual { height:calc(100vh); position:relative;  background:#2d221e; width:100vw;}



.m_visual .swiper {width:100% !important;}

.m_visual .item {height:calc(100vh); width:100%; overflow:hidden; background:url("../images/main/visual01.png") no-repeat center center; background-size:cover; position:relative;  }

.m_visual .item.n2 {background-image:url(../images/main/visual03.png);}

.m_visual .item.n3 {background-image:url(../images/main/visual02.png);}

.m_visual .item.n4 {background-image:url(../images/main/visual04.png);}

.m_visual .item h2 {display:flex; width:100%; height:100%; align-items: center; justify-content: center; text-align:center; flex-direction: column; color:#fff; padding-bottom:0px;}

.m_visual .item h2 strong {display:block; font-size:72px; font-weight:bold;}

.m_visual .item h2 p {font-size:30px; font-weight:normal; margin-top:30px;}



.m_visual .nav {position:absolute; left:0px; bottom:0px; width:180px; display:flex; }

.m_visual .nav div {position:initial; display:block; width:90px; height:90px; background:#745645; color:#fff; line-height:90px; text-align:center; font-size:28px;}

.m_visual .nav div:after {display:none;}

.m_visual .nav div + div {background:#fff; color:#000;}



.cir_wrap {position:relative;}

.cir_scroll { width:139px; height:139px; position:absolute; left:50%; top:-70px; margin:0 0 0 -70px; z-index:20; }

.cir_scroll span {position:relative; display:block; width:139px; height:139px; text-align:center; line-height:140px; font-size:40px; color:#000;filter:invert(1);mix-blend-mode: difference; z-index:2; animation:sub_scroll2 2s ease-out infinite;  }

@keyframes sub_scroll2{

	0%{  line-height:140px;}

    50%{  line-height:160px;}

 	100%{ line-height:140px;}

}   

.cir_scroll:before {content:''; display:block; width:139px; height:139px; position:absolute; left:0; top:0; right:0; bottom:0; background: url(../images/main/cir_scroll.png) no-repeat;animation:sub_scroll 10s linear infinite;  filter:invert(1);mix-blend-mode: difference; z-index:2;}

@keyframes sub_scroll{

	0%{  transform: rotate(0deg);}

 	100%{ transform: rotate(360deg);}

}    

.cir_scroll:after {content:''; display:block; background:#fff; position:absolute; left:0; right:0; bottom:0; height:69px;  z-index:-1;}



.mTit2 {overflow:hidden; margin-bottom:16px;}

.mTit2 em {font-size:20px; font-weight:400; color:#745645; transform: translateY(70px); display:block; transition: 1s ease-in-out;}



.mTit {overflow:hidden;}

.mTit em{ font-size:62px; transform: translateY(70px); display:block; transition: 1s ease-in-out;}

.mTit em span {font-size:62px; color:#745645;}

.mTxt {margin-top:30px; overflow:hidden;}

.mTxt + .mTxt {margin-top:10px;}

.mTxt em { font-size:22px; display:block; transform: translateY(70px);transition: 1s ease-in-out;}

.mTit em.aos-animate , .mTxt em.aos-animate , .mTit2 em.aos-animate {transform: translateY(0px);}





.m1 {  padding:200px 0 290px; background:#fff; position:relative; z-index:10; width:100%; overflow:hidden;}

.m1:before {content:''; display:block; position:absolute; left:0; right:0; top:380px; height:300px; background:#fff; filter:blur(20px); z-index:2;}

.m1 .top {max-width:1580px; margin:0 auto;  z-index:3; position:relative; z-index:2;}

.m1 .slide_wrap {position:relative;width:150%; margin-left:-25%; padding-top:150px; z-index:3;}



.m1 .bg2 { display:block; position:absolute; left:0; right:0; bottom:0; height:400px; background:#7f6354; z-index:-1;}

.m1 .bg { display:block; position:absolute; left:-15%; right:-15%; bottom:0; height:90vw; border-radius: 0 0 50% 50%; background:#fff; transform: translateY(-150px);}



.m1 .swiper {padding-bottom:0px;overflow: visible; }

.m1 .sim {position:absolute; right:120px; top:210px; z-index:1;}

.m1 .sim2 {position:absolute; left:140px; bottom:0px; z-index:1; width:240px;}

.mySwiper .swiper-slide { padding:0 78px;}

.mySwiper .swiper-slide .box { transform: scale(0.75) translateY(52px);transition:1s ease-in-out; }

.mySwiper .swiper-slide-active .box {transform: scale(1) translateY(0px); }

.mySwiper .swiper-slide img {width:100%;  z-index:2; position:relative; border-radius:20px;}

.mySwiper .swiper-slide .box div {padding:60px 40px 40px; background:#faf7f5; border-radius:0 0 20px 20px; margin-top:-20px; opacity:0; transition: 1s ease-in-out; transform: translateY(0px);}

.mySwiper .swiper-slide .box div h3 {font-size:26px; margin-bottom:12px;}

.mySwiper .swiper-slide .box div h3 span {color:#745645; font-size:26px; position:relative;}

.mySwiper .swiper-slide .box div h3 span:after {content:''; display:inline-block; width:12px; height:1px; background:#745645; margin:0 8px 0 2px;}

.mySwiper .swiper-slide .box div p {font-size:19px; color:#444; word-break: keep-all; padding-right:100px; line-height:1.4;}

.mySwiper .swiper-slide-active .box div {opacity:1; transform: translateY(0px); }



.m1 .nav {position:absolute; left:29.9%; right:29.9%; top:280px;}

.m1 .nav .swiper-button-prev {    width:76px; height:76px; border:2px solid #ccc; border-radius:70px;display:block; line-height:69px; text-align:center; font-size:24px; background:none; color:#aaa; transition: 0.5s;}

.m1 .nav .swiper-button-next {   width:76px; height:76px; border:2px solid #ccc; border-radius:70px;display:block; line-height:69px; text-align:center; font-size:24px; background:none; color:#aaa; transition: 0.5s;}

.m1 .nav .swiper-button-prev:after , .m1 .nav .swiper-button-next:after {display:none;}

.m1 .swiper-pagination { bottom:-60px !important;  }

.m1 .swiper-pagination-bullet {transition: 0.5s; border-radius:20px;}

.m1 .swiper-pagination-bullet-active {transition: 0.5s; width:80px; border-radius:20px; background:#745645;}



.m1 .nav .swiper-button-prev:hover , .m1 .nav .swiper-button-next:hover {border-color:#745645; color:#745645;}





.m2 {padding:0px 0 300px; position:relative; overflow:hidden;}

.m2 .sim {position:absolute; left:140px; top:400px; width:250px; z-index:2;}

.m2 .bg {content:''; display:block; width:1400px; height:1400px; border-radius:50%; position:absolute; left:50%; margin-left:-700px; bottom:90px; background:#745645; transform: scale(2);}

.m2:after {content:''; display:block; position:absolute; left:0; right:0; top:0px; height:500px; background:linear-gradient(360deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); }

.m2 .inr { max-width:860px; margin:0 auto; text-align:center; position:relative; z-index:3; position:sticky; top:0; padding-top:100px;}

.m2 .inr h3 {overflow:hidden; font-size:24px; color:#745645;}

.m2 .inr h2 {overflow:hidden; font-size:52px; margin:20px 0 90px; }

.m2 .inr .srch_box {position:relative; overflow:hidden; border-radius:100px; margin:0 auto; width:80%; opacity:0; transition: 1s ease-in-out;}

.m2 .inr .srch_box.aos-animate {width:100%; opacity:1;}

.m2 .inr .srch_box input {width:100%; height:90px; background:#745645; color:#fff; border:0; padding:0 120px 0 40px; font-size:20px; font-weight:bold; margin:0;}

.m2 .inr .srch_box input:focus {outline: none;}

.m2 .inr .srch_box input::placeholder {color:rgba(255,255,255,0.7);}

.m2 .inr .srch_box .btn {position:absolute; right:0; top:0; width:150px; height:90px; border-radius:90px; display:flex; align-items: center; justify-content: center; text-align:center; background:#000; }

.m2 .inr .hash {display:flex; flex-wrap:wrap; justify-content: center; margin:80px 80px 0; }

.m2 .inr .hash a {display:inline-block; padding:0 25px; line-height:46px; border-radius:50px; background:#f6ede9; border:1px solid #f6ede9; color:#745645; margin:0 5px 20px; transition: 0.5s;}

.m2 .inr .hash a:hover {border-color:#745645; background:#fff;}









.m3 {  position:relative; height:200vh; width:100%; }



.m3 .inr { position:sticky; height:100vh; top:0; color:#fff; background:#7f6354; overflow:hidden;}

.m3 .inr:before {content:''; display:block; width:1px; position:absolute; left:50%; top:150px; bottom:200px; background:#fff; opacity:0.1; margin-left:-1px;}

.m3 .inr .bg {content:''; display:block; position:absolute; right:0; bottom:0; width:100%; height:100%;  background:url(../images/main/m3_bg.png) no-repeat right bottom; opacity:0; transform: translateY(200px);  filter: blur(10px);}

.m3 .inr .bg2 {width:50%; position:absolute; left:0; top:0; bottom:0;background: linear-gradient(0deg,rgba(116, 86, 69, 0) 0%,  rgba(116, 86, 69, 1) 100%); opacity:0;}

.m3 .inr .txt {max-width:1580px; margin:0 auto; padding:150px 0; position:relative; z-index:2;}

.m3 .inr .txt h2 {font-size:48px; margin-bottom:40px;}

.m3 .inr .txt p {font-size:20px; line-height:2; margin-bottom:30px; opacity:.8;}

.m3 .inr .txt a {display:flex; margin-top:60px; font-size:20px;  width:210px; color:rgba(255,255,255,0.8); justify-content: space-between; align-items: center;}

.m3 .inr .txt a:after {content:'→'; display:block; width:60px; height:60px; background:#745645; color:#fff; border-radius:60px; text-align:center; line-height:60px;}





.cir01 {position:absolute; width:228px; height:228px; left:50%; margin-left:-114px; bottom:-114px; display:flex; align-items: center; justify-content: center;}

.cir01 img {  filter:invert(1);mix-blend-mode: difference;}

.cir01:before {content:''; display:block; width:228px; height:228px; position:absolute; left:0; top:0; right:0; bottom:0; background: url(../images/main/cir01.png) no-repeat;animation:sub_scroll 10s linear infinite;  filter:invert(1);mix-blend-mode: difference;  z-index:2; opacity:.65;}

@keyframes sub_scroll{

	0%{  transform: rotate(0deg);}

 	100%{ transform: rotate(360deg);}

}  

.cir01:after {content:''; display:block; background:#fff; position:absolute; left:0; right:0; bottom:0; height:114px;  z-index:-1;}





.m4 { padding:220px 0; height:200vh; text-align:center; background:url(../images/main/m4_bg00.png) no-repeat center bottom; background-size:auto 850px;  position:relative; }

.m4 .bg { display:block; position:absolute; left:0; right:0; height:700px; bottom:100px;  overflow:hidden; }

.m4 .bg:before {content:''; display:block; border-radius: 0 0 120% 120%; width:130%; margin-left:-15%; height:660px; background:#fff;}

.m4 .inr { margin:110px 100px 0; position:sticky; top:130px; z-index:2;}

.m4 .inr ul {display:flex; justify-content: space-between; gap:20px;}

.m4 .inr ul li {width:400px;}

.m4 .inr ul li a {display:block; height:670px; border-radius:20px; overflow:hidden; background:#745645; color:#fff; padding:60px 20px; position:relative; transition: 1s ease-in-out; opacity:0;}

.m4 .inr ul li a:before {content:''; display:block; position:absolute; left:0; top:0; right:0; bottom:0; background:#c1b4b3 url(../images/main/m4_bg01.png) no-repeat center bottom; background-size:cover; transition:0.5s ease-in-out;}

.m4 .inr ul li.n2 a:before {background-image:url(../images/main/m4_bg02.png); background-color:#aeaba1;}

.m4 .inr ul li.n3 a:before {background-image:url(../images/main/m4_bg03.png); background-color:#b9b3a5;}

.m4 .inr ul li.n4 a:before {background-image:url(../images/main/m4_bg04.png); background-color:#bdbfc3;}



.m4 .inr ul li a:after {content:'→'; display:block; font-size:20px; line-height:58px; width:60px; height:60px; background:#fff; color:#745645; border-radius:60px; position:absolute; left:44px; bottom:44px; text-align:center; transition: 0.5s ease-in-out;}

.m4 .inr ul li a h3 { font-size:42px; margin-bottom:24px; position:relative; z-index:2;}

.m4 .inr ul li a div { content:''; display:block;  mix-blend-mode: multiply; background:#745645; position:absolute; left:0; top:0; right:0; bottom:0; transition: 0.5s ease-in-out; visibility: hidden; opacity:0;}

.m4 .inr ul li a:hover div { visibility: visible; opacity:0.85;}

.m4 .inr ul li a:hover:before {filter:grayscale(0);}

.m4 .inr ul li a:hover:after {transform: rotateY(180deg); opacity:.75; background:#000; color:#fff;}

.m4 .inr ul li a p {font-size:20px; line-height:1.5; position:relative; z-index:2;}

.m4 .inr ul li.n1 a , .m4 .inr ul li.n3 a { transform: translateY(50px);}

.m4 .inr ul li.n2 a , .m4 .inr ul li.n4 a { transform: translateY(-50px);}

.m4 .inr ul.aos-animate li a {transform: translateY(0px) !important; opacity:1;}





.m5 {padding:50px 0 300px; overflow:hidden;}

.m5 .inr {max-width:1580px; margin:0 auto; position:relative;}

.m5 .inr .swiper {width:2100px; margin-top:100px; overflow:initial !important; }



.m5 .inr .swiper .box {width:610px;}

.m5 .inr .swiper .box.n2 {transform: translateY(0px);}

.m5 .inr .swiper .box img {border-radius:20px;}

.m5 .inr .swiper .box h3 {margin:40px 0 16px; font-size:24px; color:#745645;}

.m5 .inr .swiper .box p {font-size:19px;}

.m5 .inr .more {position:absolute; right:80px; top:0; display:block; width:227px; padding-left:100px; height:127px; text-align:center; line-height:124px; font-size:50px; transition: 1s ease-in-out; opacity:0;}

.m5 .inr .more.aos-animate {width:127px; padding-left:0; opacity:1;} 

.m5 .inr .more:before {content:''; display:block;  background:url(../images/main/m5_cir.png) no-repeat;position:absolute; left:0; top:0; width:127px; height:127px; animation:sub_scroll 10s linear infinite; z-index:2;}

.m5 .inr .nav {position:absolute ;left:-47px; top:160px; width:186px; transform: translateX(100px); z-index:13; }

.m5 .inr .nav > div {width:74px; height:74px; border-radius:74px; background:#000; color:#fff; font-size:22px;}

.m5 .inr .nav > div + div {background:#745645;}

.m5 .inr .nav > div:after {display:none;}

.m5 .swiper-pagination {text-align:left; bottom:-80px !important;}

.m5 .swiper-pagination-bullet {transition: 0.5s; border-radius:20px;}

.m5 .swiper-pagination-bullet-active {transition: 0.5s; width:80px; border-radius:20px; background:#745645;}





.m6 {padding:150px 40px 280px; position:relative; overflow:hidden; }

.m6 .mTit , .m6 .mTxt {text-align:center;}

.m6 .mTxt {margin-bottom:80px;}

.m6 .box { text-align:center;}

.m6 .box p {padding-top:30px; opacity:0; transition: 1s ease-in-out; font-size:20px;}

.m6 .swiper {overflow:initial !important; transform: scale(0.88) translateY(-50px); opacity:0;}

.m6 .mySwiper3 .swiper-slide .box { transform: scale(0.75) translateY(0px);transition:1s ease-in-out; opacity:.5;}

.m6 .mySwiper3 .swiper-slide-active .box {transform: scale(1) translateY(0px); opacity:1; }

.m6 .mySwiper3 .swiper-slide-active .box p {opacity:1;}

.m6 .swiper-pagination {  bottom:-100px !important;}

.m6 .swiper-pagination-bullet {transition: 0.5s; border-radius:20px;}

.m6 .mySwiper3 .swiper-slide .box .img { display:block; height:21.4vw; overflow:hidden; border-radius:20px;}

.m6 .mySwiper3 .swiper-slide .box .img img {width:100%; height:100%; object-fit: cover;}

.m6 .swiper-pagination-bullet-active {transition: 0.5s; width:80px; border-radius:20px; background:#745645;}

.m6 .nav {left:50%; right:initial !important; position:absolute; width:460px; margin-left:-230px; bottom:-87px !important; z-index:12;}

.m6 .nav > div {width:56px; height:56px; padding-bottom:2px;  border-radius:74px; background:none; color:#745645; font-size:20px; border:1px solid rgba(116,86,69,0.3);}



.m6 .nav > div:after {display:none;}







.m7 {padding:150px 0 290px; overflow:hidden; background:#f5f1ed; position:relative;}

.m7 .bg { font-size:156px; color:#fff; line-height:1; position:absolute; left:0%; bottom:-24px; letter-spacing: -0.07em; white-space: nowrap;}

.m7 .inr {max-width:1580px; margin:0 auto; position:relative;}

.m7 .inr .swiper {width:2020px; margin-top:70px; overflow:initial !important; }

.m7 .inr .swiper .after { display:block; width:100%; position:absolute; left:-100%; top:0; bottom:-40px; background:#f5f1ed; z-index:12;}

.m7 .inr .swiper .swiper-slide {transform:scale(0.84) translateX(40px) perspective(1000px) rotateY(-16deg) !important; transition: 1s ease-in-out; }

.m7 .inr .swiper .swiper-slide-active {transform:translateX(0px) scale(1) perspective(1000px) rotateY(0deg) !important;}

.m7 .inr .swiper .swiper-slide-prev {transform:scale(0.84)  perspective(1000px) rotateY(-16deg) translateX(-60px) !important;}

.m7 .inr .swiper .box {width:400px;}

.m7 .inr .swiper .box .img {height:520px; display:block; overflow:hidden; border-radius:20px; transition: 1s ease-in-out; position:relative;}

.m7 .inr .swiper .box .img:before {content:''; display:block; position:absolute; left:0; top:0; bottom:0; width:60%;background:linear-gradient(270deg,rgba(255, 255, 255, 0) 0%,  rgba(255, 255, 255, 1) 100%); opacity:.35; transition: 1s ease-in-out;}

.m7 .inr .swiper .swiper-slide-active .box .img {box-shadow: 30px 30px 30px rgba(116,86,69,0.22);}

.m7 .inr .swiper .swiper-slide-active .box .img:before {left:-100%;}

.m7 .inr .swiper .box img { display:block; width:100%; height:100%; object-fit: cover;}

.m7 .inr .swiper .box h3 {margin:40px 0 16px; font-size:24px; color:#745645;}

.m7 .inr .swiper .box p {font-size:19px;}

.m7 .inr .more {position:absolute; right:80px; top:0; display:block; width:227px; padding-left:100px; height:127px; text-align:center; line-height:124px; font-size:50px; transition: 1s ease-in-out; opacity:0;}

.m7 .inr .more.aos-animate {width:127px; padding-left:0; opacity:1;} 

.m7 .inr .more:before {content:''; display:block;  background:url(../images/main/m5_cir.png) no-repeat;position:absolute; left:0; top:0; width:127px; height:127px; animation:sub_scroll 10s linear infinite; z-index:2;}

.m7 .inr .nav {position:absolute ;left:-47px; top:245px; width:186px; z-index:13; transform: translateX(100px);}

.m7 .inr .nav > div {width:74px; height:74px; border-radius:74px; background:#000; color:#fff; font-size:22px;}

.m7 .inr .nav > div + div {background:#745645;}

.m7 .inr .nav > div:after {display:none;}

.m7 .swiper-pagination {text-align:left; bottom:-80px !important;}

.m7 .swiper-pagination-bullet {transition: 0.5s; border-radius:20px;}

.m7 .swiper-pagination-bullet-active {transition: 0.5s; width:80px; border-radius:20px; background:#745645;}











/* Tablet 1024px ~ 1259px */

@media screen and (max-width:1600px){

    .m1 .top {max-width:initial; margin-left:60px;}

    .m3 .inr .txt {max-width:initial; margin-left:60px;}

    .m3 .inr:before {display:none;}

    .m3 .inr .bg2 {width:100%;}

    .m4 .inr {margin: 80px 50px 0;}

    .m5 .inr {max-width:initial; margin: 0 50px;}

    .m4 .inr ul li a p {word-break: keep-all;}

    .m4 .inr ul li a p br {display:none;}

    

    .m7 .inr {margin:0 50px;}

    

}







/* Tablet 768px ~ 1023px */

@media screen and (max-width:1279px){



	

    .mTit2 {font-size:18px;}

    .mTit em , .mTit em span {font-size:52px;}

    .mTxt {margin-top:20px;}

    .mTxt em {font-size:20px;}

    

    .m1 {padding:120px 0 200px;}

    .m1 .slide_wrap {padding-top:90px;}

    .m1 .swiper {z-index:122;}

    .m1 .sim {right:-50px;}

    .m1 .sim2 {left:-50px; bottom:400px;}

    .m1 .bg {border-radius:0 0 50% 50% !important; transform: none !important; height:50vw !important;}

    .m1 .bg2 {height:40vw;}

    .m1 .nav {top:initial; bottom:-44px; right:initial; left:50%; width:400px; margin-left:-200px;  z-index:122;}

    .m1 .nav div {width:60px !important; height:60px !important; line-height:54px !important;  z-index:122;}

    .mySwiper .swiper-slide {padding:0;}

    .mySwiper .swiper-slide .box {transform: scale(0.86) !important;}

    .mySwiper .swiper-slide-active .box {transform: scale(1) translateY(0px) !important; }



    .mySwiper .swiper-slide .box div {padding:46px 30px 30px;}

    .mySwiper .swiper-slide .box div h3 {font-size:22px;}

    .mySwiper .swiper-slide .box div h3 span {font-size:22px;}

    .mySwiper .swiper-slide .box div p {padding:0; font-size:18px;}

    

    

    .m3 .inr .txt {padding-top:120px;}

    .m3 .inr .txt h2 {font-size:42px; margin-bottom:20px;}

    .m3 .inr .txt p {font-size:18px; line-height:2; margin-bottom:16px;}

    .m3 .inr .txt a {margin-top:30px; width:180px; font-size:18px;}

    .m3 .inr .txt a:after {font-size:16px; width:46px; height:46px; line-height:46px;}

    .m3 .inr .bg {background-size:50% auto;}

    

    .m4 {padding:140px 0;}

    .m4 .inr {margin:60px 30px 0;}

    .m4 .inr ul li a {height:40vw; padding:40px 15px; }

    .m4 .inr ul li a h3 {font-size:24px; margin-bottom:16px;}

    .m4 .inr ul li a p {font-size:17px;}

    .m4 .inr ul li a:before {background-size:100%;}

    .m4 .inr ul li a:after {width:40px; height:40px; left:20px; bottom:20px; line-height:38px; font-size:18px;}

    

    .m5 .inr .swiper {width:160vw; transform: none;}

    .m5 .inr .swiper .box {width:auto; padding-right:25px;}

    .m5 .inr .nav {top:50%; margin-top:-63px;}

    

    

    .cir01 { width:180px; height:180px; margin-left:-90px; bottom:-90px;}

    .cir01:before {width:180px; height:180px; background-size:100%;}

    

    

    .m6 {padding:120px 0 150px;}

    .m6 .swiper {}

    

    .m2 {padding: 0 0 160px;}

    .m2 .sim {left:-50px; width:200px;}

    .m2 .bg {bottom:0;}

    .m2 .inr {max-width:700px;}

    .m2 .inr h3 {font-size:20px;}

    .m2 .inr h2 {font-size:44px; margin-bottom:60px;}

    .m2 .inr .srch_box input {height:70px;}

    .m2 .inr .srch_box .btn {height:70px; width:120px;}

    .m2 .inr .hash {margin:60px 20px 0;}

    

    .m5 {padding:50px 0 200px;}

    

}







@media screen and (max-width:1023px){



    .m_visual , .m_visual .item {height:84vh;}

    .m_visual .item h2 strong {font-size:48px;}

    .m_visual .item h2 p {font-size:26px; margin-top:14px;}

    .m_visual .nav {width:140px;}

    .m_visual .nav div {width:70px; height:70px; line-height:68px; font-size:20px;}

    

    .cir_scroll {width:100px; height:100px; top:-50px; margin-left:-50px;}

    .cir_scroll:before {width:100px; height:100px; background-size:100%;}

    .cir_scroll span {width:100px; height:100px;  margin-top:-20px;}

    .cir_scroll:after {height:50px; }

    

    .mTit2 {margin-bottom:10px;}

    .mTit2 em {font-size:18px;}

    .mTit em , .mTit em span {font-size:38px;}

    .mTxt em {font-size:18px;}

    

    

    .m1 {padding:100px 0 190px;}

    .m1:before {top:250px;}

    .m1 .top {margin-left:0px; text-align:center;}

    .m1 .sim {right:-50px; width:200px;}

    .m1 .sim2 {width:140px; bottom:420px;}

    .m1 .swiper {padding-bottom:20px;}

    .m1 .slide_wrap {width:180%; margin-left:-40%; padding-top:60px;}

    .mySwiper .swiper-slide img {border-radius:10px;}

    .mySwiper .swiper-slide {padding:0 10px;}

    .mySwiper .swiper-slide .box div {background:none; margin:0; padding:30px 0 0;}



    .m4 {height:auto; background-size:auto calc(40vw + 180px); overflow:hidden; padding:120px 0 100px;}

    .m4 .inr {margin:50px 30px 0;}

    .m4 .inr ul li a p {display:none;}

    .m4 .inr ul li a {height:34vw; border-radius:10px;}

    .m4 .bg { transform: none !important; height:40vw; width:130%; left:-15%; bottom:200px !important; border-radius:0 0 100% 100% !important;}

    

    .m5 {padding-bottom:140px;}

    .m5 .inr .more {right:-30px; transform: scale(0.65);}

    .m5 .inr .swiper {margin-top:60px; width:130vw;}

    .m5 .inr .swiper:before {content:''; display:block; width:100px; position:absolute; left:-100px; top:0; bottom:0; background:#fff; z-index:2;}

    .m5 .inr .nav {left:-38px; margin-top:-50px; width:150px;}

    .m5 .inr .nav > div {width:60px; height:60px; line-height:58px; font-size:18px;}

    .m5 .inr .swiper .box h3 {font-size:20px; margin:30px 0 10px;}

    .m5 .inr .swiper .box img {border-radius:10px;}

    .m5 .inr .swiper .box p {font-size:17px;}

    .m5 .swiper-pagination {bottom:-40px !important;}

    

    

    

    .m7 {padding:100px 0 140px;}

    .m7 .inr .more {right:-30px; transform: scale(0.65);}

    .m7 .inr .swiper {margin-top:60px; }

    .m7 .inr .nav {left:-38px; margin-top:-50px; width:150px;}

    .m7 .inr .nav > div {width:60px; height:60px; line-height:58px; font-size:18px;}

    .m7 .inr .swiper {width:1500px;}

    .m7 .inr .swiper .box  {width:320px;}

    .m7 .inr .swiper .box .img  { height:430px; border-radius:12px;}

    .m7 .bg {display:none;}

    .m7 .swiper-pagination {bottom:-50px !important;}

}









/* Mobile ~ 767px */

@media screen and (max-width:767px){



    .cont_main .swiper-pagination-bullet-active {width:40px !important;}

    

    

    .m_visual, .m_visual .item {height:100vw;}

    .m_visual .item h2 {padding-top:26px;}

    .m_visual .item h2 strong {font-size:32px;}

    .m_visual .item h2 p {font-size:19px;}

    .m_visual .nav div {width:50px; height:50px; line-height:48px; font-size:16px;}

    

    .cir_scroll {width:80px; height:80px; top:-40px; margin-left:-40px;}

    .cir_scroll:before {width:80px; height:80px; background-size:100%;}

    .cir_scroll span {width:80px; height:80px;  margin-top:-34px; font-size:30px;}

    .cir_scroll:after {height:40px; }

    

    

    

    .mTit2 {margin-bottom:5px;}

    .mTit2 em {font-size:16px;}

    .mTit em, .mTit em span {font-size:28px; word-break: keep-all;}

    .mTxt {margin-top:14px;}

    .mTxt em {font-size:17px; word-break: keep-all;}

    .mTxt + .mTxt {margin-top:5px;}

    

    .m1 {padding:90px 0 130px;}

    .m1 .bg {height:30vw !important;}

    .m1 .bg2 {height:30vw !important;}

    .m1:before {top:200px;}

    .m1 .sim {width:120px; right:-50px;}

    .m1 .sim2 {width:80px; left:-20px;}

    .m1 .top {margin:0 20px;}

    .m1 .slide_wrap { width:240%; margin-left:-70%; padding-top:40px;}

    .mySwiper .swiper-slide {padding:0 8px;}

    .mySwiper .swiper-slide .box {transform: scale(1) !important;}



    .m1 .swiper {transform: none !important; opacity:1 !important; padding:0;}

    .mySwiper .swiper-slide .box div {padding:20px 0 0;}

    .mySwiper .swiper-slide .box div h3 {font-size:18px;}

    .mySwiper .swiper-slide .box div h3 span {font-size:18px;}

    .mySwiper .swiper-slide .box div p {padding:0; font-size:16px;}

    .m1 .swiper-pagination {bottom:-50px !important;}

    .m1 .nav {width:260px; margin-left:-130px;}

    .m1 .nav div {width:40px !important; height:40px !important; border-width:1px !important; font-size:18px !important; line-height:36px !important;}

    

    .m3 {height:auto; overflow:hidden;}

    .m3 .inr {height:auto;}

    .m3 .inr .txt {padding:90px 30px 120px; margin:0;}

    .m3 .inr .txt h2 {font-size:24px; margin-bottom:20px;}

    .m3 .inr .txt p {font-size:17px; line-height:1.6; margin-bottom:10px; word-break: keep-all;}

    .m3 .inr .txt p br {display:none;}

    .m3 .inr .txt a {font-size:17px; width:160px;}

    .m3 .inr .txt a:after {width:36px; height:36px; line-height:36px; font-size:16px;}

    .m3 .inr .bg {background-size:80%;}

    

    

    .cir01 { width:120px; height:120px; margin-left:-60px; bottom:-60px;}

    .cir01:before {width:120px; height:120px; }

    .cir01 img {width:44px;}

    

    .m4 {padding:100px 0 50px; background-size: auto calc(40vw + 100px);}

    .m4 .mTxt { margin-left:20px; margin-right:20px;}

    

    .m4 .inr {margin:40px 30px 0;}

    .m4 .inr ul {flex-wrap:wrap;  gap:12px; }

    .m4 .inr ul li {width:calc(50% - 6px);}

    .m4 .inr ul li a {height:60vw; padding-top:5.3vw;}

    .m4 .inr ul li a:after {width:30px; height:30px; font-size:14px; line-height:29px; left:16px; bottom:16px;}

    .m4 .inr ul li a h3 {font-size:20px;}

    .m4 .bg {bottom:150px !important;}

    

    

    .m6 {padding:70px 0 70px;}

    .m6 .inr {margin:0 10px;}

    .m6 .mTxt {margin-bottom:40px;}

    .m6 .swiper {width:190%; margin-left:-45%;}

    .m6 .mySwiper3 .swiper-slide .box { transform: scale(0.85) translateY(0px);}

    .m6 .mySwiper3 .swiper-slide-active .box {transform: scale(1) translateY(0px); opacity:1; }

    .m6 .mySwiper3 .swiper-slide .box .img {height:44vw;}

    .m6 .box p {font-size:17px; padding-top:20px; word-break: keep-all;}

    

    

    .m6 .swiper-pagination {bottom:-50px !important;}

    .m6 .nav {width:300px; margin-left:-150px; bottom:-44px !important;}

    .m6 .nav div {width:40px !important; height:40px !important; border-width:1px !important; font-size:18px !important; line-height:36px !important;}

    

    

    .m2 {padding:20px 0 70px;}

    .m2 .sim {width:120px; left:-40px; top:240px;}

    .m2 .bg {width:900px; height:600px; margin-left:-450px; }

    .m2 .inr {padding:40px 20px 0; transform: none !important;}

    .m2 .inr h3 {font-size:16px; font-weight:normal;}

    .m2 .inr h2 {font-size:24px; margin:10px 0 30px;}

    .m2 .inr .srch_box input {height:56px; font-size:16px; font-weight:500; padding-left:24px;}

    .m2 .inr .srch_box .btn {width:76px; height:56px; background-size:30px;}

    .m2 .inr .srch_box .btn img {width:16px;}

    .m2 .inr .hash {margin:30px 0px 0;}

    .m2 .inr .hash a {font-size:14.4px; height:34px; line-height:32px; padding:0 16px; margin:0 4px 8px;}

    

    .m5 {padding-bottom:120px; transform:none !important; }

    .m5 .inr { margin:0 20px;}

    .m5 .inr .mTxt {padding-right:74px;}

    .m5 .inr .swiper {margin-top:30px; width:200vw; opacity:1 !important;}

    .m5 .inr .swiper .box {padding-right:16px;}



    .m5 .inr .more {width:60px; height:60px; transform: scale(1); padding:0; right:0; line-height:59px; font-size:22px; top:15px;}

    .m5 .inr .more:before {width:60px; height:60px; background-size:100%;}

    .m5 .inr .more.aos-animate {width:60px;}

    .m5 .inr .swiper .box img {border-radius:6px;}

    .m5 .inr .swiper .box h3 {margin:18px 0 8px; font-size:18px;}

    .m5 .inr .swiper .box p {font-size:16px;}

    

    .m5 .inr .nav {width:100px; left:-26px; margin-top:-38px;}

    .m5 .inr .nav > div {width:36px !important; height:36px !important; font-size:14px !important; line-height:34px !important;}

    

    

    .m7 {padding:70px 0 120px;}

    .m7 .inr {margin:0 20px;}

    .m7 .inr .more {width:60px; height:60px; transform: scale(1); padding:0; right:0; line-height:59px; font-size:22px; top:15px; display:none;}

    .m7 .inr .more:before {width:60px; height:60px; background-size:100%;}

    .m7 .inr .more.aos-animate {width:60px;}

    .m7 .inr .swiper {margin-top:30px; }

    .m7 .inr .nav {width:100px; left:-26px; margin-top:-88px;}

    .m7 .inr .nav > div {width:36px !important; height:36px !important; font-size:14px !important; line-height:34px !important;}

    .m7 .inr .swiper {width:1200px;}

    .m7 .inr .swiper .box  {width:220px; }

    .m7 .inr .swiper .box .img  { height:300px; border-radius:10px;box-shadow: none !important;}

    .m7 .bg {display:none;}

    .m7 .swiper-pagination {bottom:-50px !important;}

    .m7 .inr .swiper .swiper-slide {transform:none !important; transition: 1s ease-in-out; }

    .m7 .inr .swiper .swiper-slide-active {transform:translateX(0px) scale(1) perspective(1000px) rotateY(0deg) !important;}

    .m7 .inr .swiper .swiper-slide-prev {transform:none !important;}

    

}









@media screen and (max-width:620px){

	

}











@media screen and (max-width:520px){

    .m_visual .item h2 span {font-size:20px;}

    .m_visual .item h2 strong {font-size:32px; margin-top:2px;}

    

    .m2 .box .con .jobzone .nav .count {display:none;}

	

}