@charset "utf-8";
/* ********************************************************************
 * name : JBieN
 * filename : main.css
 * description : ¸ÞÀÎ ÄÜÅÙÃ÷ css 
 * date : 2023-08-18
********************************************************************* */

/* === ¸ÞÀκñÁÖ¾ó¼½¼Ç === */
.mVis{background-color: var(--background-color);height: 100vh;border-bottom: 1px solid #3e3c3c;display: flex;flex-wrap: nowrap;position: relative;}
.mVis .txtBox{width: 50%;display: flex;align-items: center;font-size: 90px;justify-content: center;}
.mVis .txtBox .txt{color:var(--white-color);margin-left: -0.5em;}
.mVis .txtBox .txt p{line-height: 1.1;}
.mVis .txtBox .txt p:nth-child(2){margin-left: 3.3em;}
.moD2{display:none;}
.mVis .txtBox .txt span{font-size: 16px;display: block;padding-left: 32px;position: relative;padding-top: 17px;z-index: 1;letter-spacing: 0.025em;}
.mVis .txtBox .txt span i{color:var(--background-color);font-weight: 500;}
.mVis .txtBox .txt span:after{content: '';position: absolute;width: 33px;height: 33px;background: var(--mint-color);border-radius: 50%;left: 14px;top: 7px;z-index: -1;}
.mVis .listBox{width: 50%;position: relative;}
.mVis .listBox .txtGradient{position: absolute;font-size: 72px;-webkit-text-fill-color: transparent;background-image: radial-gradient(circle at 100% 0,#ff5dcc 39%,#c6e5df 50%,#fbe377 54%,#fd4e85 62%);
	-webkit-background-clip: text;display: flex;align-items: center;justify-content: center;flex-direction: column;width: 100%;height: 100%;margin-top: -0.8em;z-index:1;animation: shine 2s linear both;opacity: 0;}
.mVis .listBox .txtGradient span{transform: translateX(-50%);left: 50%;width: 100%;height: 250px;backdrop-filter: blur(10px);position: absolute;animation: blur 5s linear both;}
.mVis .listBox .txtGradient h1{font-size: 0.9vw;}
.mVis .listBox .listLine{width: 100%;height: 100%;display: flex;position: absolute;top: 0;}
.mVis .listBox .listLine i{position: relative;display: flex;width: 33.333%;align-items: flex-start;}
.mVis .listBox .listLine i:after{content: '';position: absolute;top:0;width:1px;height:100%;background:#3e3c3c;animation: gnb-line 2s cubic-bezier(0.2, 0, 0.2, 1) both;}
.mVis .listBox .listLine i:nth-child(2):after{top: unset;bottom: 0;}
.mVis .listBox ul{display: flex;flex-wrap: nowrap;width: 100%;height: 100%;position: relative;z-index: 10;flex-direction: row;}
.mVis .listBox ul li{display: flex;width: 100%;height: 100%;position: relative;overflow: hidden;}
.mVis .listBox ul li a{z-index: 30;display: block;}

.mVis .listBox ul li h2{font-size: 60px;color: #505050;position: absolute;z-index: 10;bottom: 1em;left: 50%;transform: translate(-50%, 0);transition: 0.2s ease-in-out;overflow: visible;padding: 200px 0 0;width: 100%;
    text-align: center;}
.mVis .listBox ul li a:hover h2,
.mVis .listBox ul li a:focus h2{color:var(--white-color);text-shadow: 0 0 10px #ff401a, 0 0 50px #ff9b1a;}
.mVis .listBox .l1 a:hover h2,
.mVis .listBox .l1 a:focus h2{text-shadow: 0 0 10px #673AB7, 0 0 50px #9C27B0;}
.mVis .listBox .l2 a:hover h2,
.mVis .listBox .l2 a:focus h2{text-shadow: 0 0 10px #319b8d, 0 0 50px #7cffee;}

.mVis .listBox ul li .list_item img{position: relative;display: block;height: 100vh;-o-object-fit: cover;object-fit: cover;opacity: 0;transition: opacity 1.5s, transform 5s;transition: all 10 ease-in-out;transform: translate3d(-100px, 0, 0);}
.mVis .listBox ul li.on .list_item img{opacity: 1;transform: translate3d(-50px, 0, 0);}
.mVis .listBox ul li.l2 .list_item img{transform: translate3d(-200px, 0, 0);}
.mVis .listBox ul li.l2.on .list_item img{opacity: 1;transform: translate3d(-250px, 0, 0);}
.mVis .listBox ul li .list_item video{position: relative;display: block;height: 100vh;opacity: 0;transition: opacity 1.5s, transform 5s;transition: all 10 ease-in-out;top: 0;}
.mVis .listBox ul li.on .list_item{background: #000;}
.mVis .listBox ul li.on .list_item video{opacity: 1;height: 60%;left: -350px;top: 20%;}

.mVis .listBox ul li .list_item h2{font-size: 60px;color: #505050;position: absolute;z-index: 10;bottom: 1em;left: 50%;transform: translate(-50%, 0);transition: 0.2s ease-in-out;overflow: visible;}
.mVis .listBox ul li.on .list_item h2{color:var(--white-color);text-shadow: 0 0 10px #319b8d, 0 0 50px #7cffee;}
.mVis .listBox ul li .list_item figcaption{opacity: 0;transition: opacity 0.35s, transform 0.35s;display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;position: absolute;top: 0;z-index: 10;flex-direction: column;}
.mVis .listBox ul li.on .list_item figcaption{opacity: 1;} 
.mVis .listBox ul li .list_item figcaption h3{margin: 10px 0;font-size: 18px;font-weight: 600;color:var(--white-color);}
.mVis .listBox ul li.l0 .list_item figcaption h3,
.mVis .listBox ul li.l2 .list_item figcaption h3{color:var(--white-color);}

.scrollDown{position: absolute;bottom: 3em;left: 3%;text-align: center;z-index: 9;transition: right ease-out 1s 0.4s, opacity 0.5s 0.4s;}
.scrollDown p{animation: scrollDown 2s ease-in-out infinite;position: absolute;bottom: 0;left: 10px;z-index: 1;}
.scrollDown span{display: inline-block;width: 33px;height: 33px;background: var(--mint-color);border-radius: 50%;position: absolute;top: -155px;}


/* === ¾î¹Ù¿ô === */
.mAbout{background-color: var(--background-color);text-align: center;height: 100%;position: relative;}
.mAbout small{font-size:18px;color:#d4d4d4;padding: 7em 0 3em;display: block;line-height: 1.7;}
.mAbout small strong{font-size:20px;color:#e7cfb1;display:block;font-weight: 500;margin-bottom: 20px;}
.mAbout small strong a{color:#e7cfb1;}
.mAbout small strong em{font-size:13px;}
.mAbout .txtBox{border-top: 1px solid #3e3c3c;padding: 6em 0;}
.mAbout .txtBox div{position: relative;color:var(--white-color);font-size:58px;font-weight: 700;margin-bottom: 1.5em;}
.mAbout .txtBox div span{color:#5a5a5a}
.mAbout .txtBox .txtBtn a{display: block;font-size: 18px;font-weight: 600;width: 145px;height: 145px;line-height: 145px;border-radius: 50%;position: relative;vertical-align: middle;background: var(--white-color);color: var(--black-color);
	margin: 0 auto; border: 0 solid;box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);outline: 1px solid;outline-color: rgba(255, 255, 255, 0);outline-offset: 0px;text-shadow: none; 
    -webkit-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);outline-color: rgba(255, 255, 255, 0.5);outline-offset: 0px;}
.mAbout .txtBox .txtBtn a:hover,
.mAbout .txtBox .txtBtn a:focus{border: 1px solid;box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 45px rgba(255, 255, 255, 0.2);
    outline-offset: 15px;outline-color: rgba(255, 255, 255, 0);text-shadow: 1px 1px 2px #427388;background: transparent;color: var(--white-color);}


/* === ¹è³Ê¸®½ºÆ® === */
.mbanCon{background-color: var(--background-color);width:100%;height: 100vh;position: relative;padding-bottom: 10em;}
.pattern{height: 6rem;background-image: repeating-linear-gradient(135deg, currentColor, currentColor 0.25px, transparent 0, transparent 50%);background-size: 15px 15px;}
.mbanList{background: #fff;height: 545px;margin: 10em 3% 0;width: calc(100% - 6%);border-radius: 15px;}
.mbanList .swiper-wrapper{}
.mbanList .swiper-slide{}
.mbanList .swiper-slide .txtCon{margin: 4em 6em;}
.mbanList .swiper-slide .txtCon .title{font-size:40px;text-transform: uppercase;color: var(--black-color);border-bottom:1px solid #e2e2e2;letter-spacing: -0.05em;font-weight: 900;padding-bottom: 20px;}
.mbanList .swiper-slide .txtCon .tBox{letter-spacing: -0.05em;margin: 23em 0 0;}
.mbanList .swiper-slide .txtCon .tBox .figure{position: absolute;bottom: -55px;}
.mbanList .swiper-slide .txtCon .tBox .figure .counter{font-size:200px; color:#af9fff;letter-spacing: -0.08em;}
.mbanList .swiper-slide .txtCon .tBox .figure span{font-size: 40px;font-weight: 900;color: #af9fff;position: absolute;top: 1.65em;margin-left: 25px;}
.mbanList .swiper-slide .txtCon .tBox .figure .col1{color:#ff9776;}
.mbanList .swiper-slide .txtCon .tBox .txt{position: absolute;bottom: 0;right: 0;}
.mbanList .swiper-slide .txtCon .tBox .txt h3{font-size:22px;color:#242424;font-weight: 900;margin-bottom: 10px}
.mbanList .swiper-slide .txtCon .tBox .txt p{font-size:17px;color:#686868;line-height: 1.7;}

.mbanList .control{width: 300px;height: 58px;position: absolute;right: 6em;top: 60px;}
.mbanList .control .swiper-pagination{display: flex;flex-direction: row;align-items: center;}
.mbanList .control .swiper-pagination .swiper-pagination-bullet{width: 140px;font-size: 16px;background: #cdcdcd;height: 40px;border-radius: 0;color: #fff;line-height: 40px;opacity: 1;transition: all 1s ease;}
.mbanList .control .swiper-pagination .swiper-pagination-bullet:hover,
.mbanList .control .swiper-pagination .swiper-pagination-bullet:focus{background: #379d90;}
.mbanList .control .swiper-pagination .swiper-pagination-bullet-active{background: var(--background-color);}

.waveBox{position: absolute;width: 100%;bottom: -35px;}
.waves{position: relative;width: 100%;height: 15vh;margin-bottom: -7px;min-height: 100px;max-height: 150px;}
.parallax > use:nth-child(1) {animation-delay: -2s;animation-duration: 5s;}
.parallax > use {animation: move-forever 3s cubic-bezier(.55,.5,.45,.5) infinite;fill: #1c1c1c;}


/* === Æ÷Æ®Æú¸®¿À === */
#mWork { position: relative; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column;background: #1c1c1c; overflow: hidden;}
.mWork h2{position: absolute;top: 7em;color: #afafaf;font-weight: 400;border-top: 1px solid #595959;border-bottom: 1px solid #595959;padding: 7px 0;}
.mWork .title{letter-spacing: -0.02em;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 100%;}
.mWork .title p.on{font-size: 215px;font-weight: 700;text-align: center;text-transform: uppercase;background: linear-gradient(90deg, rgb(47 44 40 / 38%), #b7ab98, rgb(47 44 40 / 38%));;letter-spacing: 5px;
	-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;background-repeat: no-repeat;background-size: 80%;animation: txtAni 10s linear forwards;position: relative;}
.pinWrap {position: relative;width:950px;height: 480px;margin:0 auto;}
.pinWrap li {width: 100%;height: 100%;position: absolute;top: 0;left: 0;opacity: 1;border-radius: 15px;overflow: hidden;}
.pinBox img{border-radius: 15px;object-fit: cover;}
.pinWrap li .link{background: var(--black-color);width: 100%;height: 100%;text-align: center;color: var(--white-color);display: block;position: relative;}
.pinWrap li .link .plusIcon{display: flex;justify-content: center;align-items: center;position: absolute;width: 80px;height: 80px;transition: all 0.7s cubic-bezier(0.25, 0.47, 0.12, 0.99);
	transform: rotate(0deg);-webkit-transform: rotate(0deg);align-content: center;top: calc(50% - 45px);right: calc(50% - 45px);}
.pinWrap li .link .plusIcon::after {content: "";position: absolute;background: var(--white-color);width: 80px;height: 1px;}
.pinWrap li .link .plusIcon::before {content: "";position: absolute;background: var(--white-color);width: 1px;height: 80px;}
.pinWrap li .link:hover span,
.pinWrap li .link:focus span{transform: rotate(180deg);-webkit-transform: rotate(180deg);}
.pinWrap li .link p{position: absolute;bottom: 40px;left: 50%;margin-left: -75px;font-size: 20px;font-weight: 500;letter-spacing: 0.05em;-webkit-transition: 0.5s ease-in-out;-moz-transition: 0.5s ease-in-out;-ms-transition: 0.5s ease-in-out;-o-transition: 0.5s ease-in-out;transition: 0.5s ease-in-out;
    -webkit-text-shadow: 0 0 50px transparent;-moz-text-shadow: 0 0 50px transparent;-ms-text-shadow: 0 0 50px transparent;-o-text-shadow: 0 0 50px transparent;text-shadow: 0 0 50px transparent;color: var(--white-color);overflow: visible;}
.pinWrap li .link:hover p,
.pinWrap li .link:focus p{-webkit-text-shadow: 0 0 0px black;-moz-text-shadow: 0 0 0px black;-ms-text-shadow: 0 0 0px black;-o-text-shadow: 0 0 0px black;text-shadow: 0 0 0px var(--mint-color);color: var(--mint-color);}
.pinWrap li .jblink{background: #761db9;}
.pinWrap li .jblink p{margin-left: -107px;font-size: 19px;}
.pinWrap li .jblink:hover p{color: #fff;}

.scroll-down-animation {position: absolute;bottom: 6em;left: 50%;transform: translate(-50%,-0%);}
.scroll-down-animation .box{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.scroll-down-animation .box span{display: block;width: 20px;height: 20px;border-bottom: 2px solid white;border-right: 2px solid white;transform: rotate(45deg);margin: -10px;animation: scroll-down 2s infinite;}
.scroll-down-animation .box span:nth-child(2){animation-delay: -0.2s;}
.scroll-down-animation .box span:nth-child(3){animation-delay: -0.4s;}


/* === °í°´¹®ÀÇ === */
.mContact{background: var(--background-color);width:100%;height: 100vh;position: relative;}
.mContact .bgWrap{position: relative;width: 100%;height: 100%;overflow: hidden;}
.mContact .bgWrap .bgTxt{}
.mContact .bgWrap .bgTxt p{font-size: 550px;position: absolute;font-weight: 900;}
.mContact .bgWrap .bgTxt .bt1{color: #ff764a;top: -0.5em;left: -0.07em;animation: bgtxt2 3s infinite alternate;font-size: 600px;}
.mContact .bgWrap .bgTxt .bt2{color: #ffb84e;bottom: -0.5em;left: 0.4em;animation: bgtxt3 3s infinite alternate;font-size: 700px;}
.mContact .bgWrap .bgTxt .bt3{color: #77c6da;left: 60%;top: -0.35em;animation: bgtxt4 3s infinite alternate;}
.mContact .bgWrap .bgTxt .bt4{color: #47b171;left: 54%;bottom: -0.3em;animation: bgtxt1 3s infinite alternate;font-size: 500px;}
.mContact .bgWrap .bgTxt .bt5{color: #bb27d1;right: -0.4em;top: 1%;animation: bgtxt2 3s infinite alternate;font-size: 750px;}
.mContact .bgWrap .bgBlur{width: calc(100% - 6%);height: 70vh;background: rgb(0 0 0 / 16%);position: absolute;top: 0;left: 50%;transform: translate(-50%, 15vh);z-index: 1;backdrop-filter: blur(100px);border-radius: 15px;}
.mContact .conBox{position: absolute;z-index: 10;width: 100%;color: var(--white-color);top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;}
.mContact .conBox h2{font-size: 150px;line-height: 1;text-transform: uppercase;}
.mContact .conBox p{margin-top:2em}
.mContact .conBox a{display: block;font-size: 18px;font-weight: 600;width: 145px;height: 145px;line-height: 145px;border-radius: 50%;position: relative;
    vertical-align: middle;margin: 4.5em auto 0;outline: 1px solid;-webkit-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);border: 1px solid;box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 45px rgba(255, 255, 255, 0.2);
    outline-offset: 0;outline-color: rgba(255, 255, 255, 0);text-shadow: 1px 1px 2px #427388;background: transparent;color: var(--white-color);}
.mContact .conBox a:hover,
.mContact .conBox a:focus{background: var(--white-color);color: var(--black-color);text-shadow: none;border: 1px solid #fff;outline-offset: 15px;outline-color: rgb(255 255 255 / 45%);}

/*
===============================================
¹ÝÀÀÇü css
===============================================
*/

@media all and (min-width:1921px){
	.mVis .txtBox {font-size: 110px;}
	.mVis .txtBox .txt span {font-size: 19.8px;padding-left: 28px;}
	.mVis .listBox .txtGradient{font-size: 85px;margin-top: -0.5em;}
	.mVis .listBox ul li .list_item figcaption h3 {margin: 15px 0;font-size: 22px;}
	.mVis .listBox ul li h2 {font-size: 70px;}

	.mAbout small{font-size: 22px;padding: 9em 0 5em;}
	.mAbout small strong{font-size: 22px;}
	.mAbout small strong em {font-size: 17px;}
	.mAbout .txtBox {padding: 10em 0;}
	.mAbout .txtBox div {font-size: 85px;}
	.mAbout .txtBox .txtBtn a {font-size: 22px;width: 180px;height: 180px;line-height: 180px;}

	.mbanCon {height: 80vh;}
	.mbanList {height: 610px;}
	.mbanList .swiper-slide .txtCon {margin: 5em 6em;}
	.mbanList .swiper-slide .txtCon .title {font-size: 50px;}
	.mbanList .swiper-slide .txtCon .tBox {margin-top: 25em;}
	.mbanList .swiper-slide .txtCon .tBox .figure .counter {font-size: 220px;}
	.mbanList .swiper-slide .txtCon .tBox .txt h3 {font-size: 25px;margin-bottom: 20px;}
	.mbanList .swiper-slide .txtCon .tBox .txt p {font-size: 20px;}

	.mWork h2 {font-size: 18px;}
	.mWork .title p.on {font-size: 235px;}
	.pinWrap {width: 1300px;height: 680px;}
	.pinBox a,
	.pinBox a img {width: 100%;height:100%;}
	.pinWrap li .link p {bottom: 50px;margin-left: -94.5px;font-size: 24px;}
	.scroll-down-animation {font-size: 18px;}
	.pinWrap li .jblink p{margin-left:-164px;}

	.mContact .conBox h2 {font-size: 180px;}
	.mContact .conBox p {font-size: 20px;}
	.mContact .conBox a{font-size: 22px;width: 180px;height: 180px;line-height: 180px;margin: 6em auto 0;}
}

@media all and (max-width:1919px){
	.mVis .listBox ul li.on .list_item video {left: -280px;}
}

@media all and (max-width:1720px){
	.mWork .title{line-height: 1;}
	.mVis .listBox ul li.l2.on .list_item img {transform: translate3d(-50px, 0, 0);}
	.mbanCon {height: 100%;}
}

@media (max-width:1600px) and (max-height:768px){
	.mContact .bgWrap{margin-top:-1px;}
	.mContact .bgWrap .bgBlur {height: 80vh;transform: translate(-50%, 10vh);}
	.mVis .listBox ul li.l2.on .list_item img,
	.mVis .listBox ul li.l2.on .list_item img,
	.mVis .listBox ul li.l2 .list_item img,
	.mVis .listBox ul li .list_item img{transform: translate3d(0, 0, 0);transition: opacity 1.5s;}
	.mVis .listBox ul li.on .list_item video {left: -180px;}
	.mVis .listBox ul li .list_item video{transition: opacity 1.5s}
}

@media all and (max-width:1600px){
	.mVis .listBox .txtGradient h1 {font-size: 1.2vw;}
	.mVis .txtBox {width: 40%;font-size: 75px;}
	.mVis .txtBox .txt p:nth-child(2) {margin-left:0.8em;}
	.mVis .txtBox .txt span {font-size: 14px;}
	.mVis .listBox{width:60%;}
	
	.mContact .bgWrap .bgTxt .bt2{font-size:500px;}
}

@media all and (max-width:1280px){
	.mVis .listBox .txtGradient h1 {font-size: 17px;}
	.mVis .txtBox .txt {margin-left: 0;}
	.mVis .txtBox .txt p:nth-child(2) {margin-left: 2.3em;}
	.mVis .listBox ul li h2 {font-size: 50px;bottom: 1.5em;}
	.mVis{flex-direction: column;}
	.mVis .txtBox{display:none;}
	.mVis .listBox .listLine i:nth-child(1):after {display:none;}
	.mVis .listBox {width: 100%;height: 100%;}
	.mVis .listBox ul li h2 {font-size: 70px;bottom: 1em;}
	.mVis .listBox ul li.on .list_item video {left: 0;height: 100%;width: 100%;top: 0;transition: inherit;transition: opacity 1.5s;}
	.mVis .listBox ul li .list_item img,
	.mVis .listBox ul li .list_item img,
	.mVis .listBox ul li.l2 .list_item img,
	.mVis .listBox ul li.l2.on .list_item img{transform:translate3d(0px, 0, 0) !important;width: 100%;height: 100%;transition: opacity 1.5s;}
	.scrollDown {bottom: 12em;}

	.mbanList .swiper-slide .txtCon {margin: 4em 3em;height: 100%;}
	.mbanList .control {right: 3em;}

	.mContact .conBox h2 {font-size: 100px;}
	.mContact .bgWrap .bgTxt .bt1{font-size: 400px;}
	.mContact .bgWrap .bgTxt .bt2{font-size: 400px;left: 0.4em;}
	.mContact .bgWrap .bgTxt .bt3{font-size: 350px;}
	.mContact .bgWrap .bgTxt .bt4{font-size: 300px;}
	.mContact .bgWrap .bgTxt .bt5{font-size: 450px;top: 37%;}
}

@media all and (max-width:1100px){
	.mbanCon{height: 100%;padding-bottom: 15em;}
	.mbanList {height: 480px;margin: 10em 3% 0;}
	.mbanList .swiper-slide .txtCon .tBox .figure .counter {font-size: 160px;}
	.mbanList .swiper-slide .txtCon .tBox .figure {bottom: 0;}
	.mbanList .swiper-slide .txtCon .tBox .figure .counter {font-size: 170px;}
	.mbanList .swiper-slide .txtCon .tBox .txt {bottom: 3.5em;}

	.mWork .title p.on{font-size: 150px;}
	.pinWrap {width: calc(100% - 6%);}

}

@media all and (max-width:980px){	
	.mbanList {height: 100%;margin: 6em 5% 0;}
	.mbanList .swiper-slide .txtCon .tBox {margin: 0;}
	.mbanList .swiper-slide .txtCon .tBox .figure {position: initial;}
	.mbanList .swiper-slide .txtCon .tBox .txt {position: inherit;bottom: 0;}

	.pinWrap {width: calc(100% - 10%);height: 400px;}
	.pinBox img {width: 100%;height: 100%;;}

	.mContact {height: 65vh;}
	.mContact .bgWrap .bgBlur {width:100%;height: 100%;top: -1px;left: 0;transform: translate(0, 0);border-radius: 0;}

	.mContact .bgWrap .bgTxt .bt1{font-size: 250px;}
	.mContact .bgWrap .bgTxt .bt2{font-size: 200px;}
	.mContact .bgWrap .bgTxt .bt3{font-size: 200px;}
	.mContact .bgWrap .bgTxt .bt4{font-size: 150px;}
	.mContact .bgWrap .bgTxt .bt5{font-size: 250px;}
}

@media all and (max-width:920px){	
	.mVis .listBox ul li h2 {font-size: 53px;bottom: 1.5em;}
	.pinBox img{width:100%;height:100%;}
}

@media all and (max-width:800px){	
	.mVis .listBox ul li h2 {font-size: 53px;bottom: 1.5em;}
	.mbanList .swiper-slide .txtCon .title {padding-bottom: 90px;}
	.mbanList .control {right: inherit;left: 6%;top: 130px;width: calc(100% - 6%);}
}

@media all and (max-width:768px){
	.mVis,
	.mVis .listBox ul{height: 80vh;}
	.mVis .listBox ul li h2 {font-size: 48px;bottom: 1em;}
	.scrollDown {bottom: 10em;}

	.mAbout small {padding: 7em 5% 3em;font-size: 16px;}
	.mAbout small br{display:none;}
	.mAbout .txtBox div {font-size: 43px;}
	.pattern {height: 4rem;background-image: repeating-linear-gradient(225deg, currentColor, currentColor 0.5px, transparent 0, transparent 50%);}

	.mAbout .txtBox .txtBtn a {border: 1px solid;box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 45px rgba(255, 255, 255, 0.2);outline-color: rgba(255, 255, 255, 0);text-shadow: 1px 1px 2px #427388;background: transparent;color: var(--white-color);}
	.mAbout .txtBox .txtBtn a:hover, .mAbout .txtBox .txtBtn a:focus {background: var(--white-color);color: var(--black-color);text-shadow: none;border: 1px solid #fff;outline-offset: 15px;outline-color: rgb(255 255 255 / 45%);}

	.mbanList .swiper-slide .txtCon .tBox .figure .counter {font-size: 140px;}
	.mbanList .swiper-slide .txtCon .tBox .figure span {font-size: 32px;}
	.mbanList .swiper-slide .txtCon .title{font-size: 32px;text-transform: uppercase;padding-bottom: 70px;}
	.mbanList .control {top: 107px;}

	.pinWrap {height: 300px;}

	.mContact .conBox h2 {font-size: 75px;}
	.mContact {height: 55vh;}
	.mContact .conBox a {margin: 2.5em auto 0;}
}

@media all and (max-width:640px){
	.mbanList .control {left: 8%}
	.mWork .title {line-height: 1.5;}
	.mWork .title p.on {font-size: 120px;}

	.mContact .conBox p {width: 62%;margin: 2em auto 0;}

	.mContact .bgWrap .bgTxt .bt1{font-size: 150px;}
	.mContact .bgWrap .bgTxt .bt2{font-size: 120px;}
	.mContact .bgWrap .bgTxt .bt5{font-size: 200px;}
}

@media all and (max-width:600px){
	.mVis {height: 100%;}
	.mVis .txtBox{display: flex;width: 100%;font-size: 50px;height: 500px;margin: 60px 0 -50px;}
	.moD1,
	.scrollDown{display:none !important;}
	.moD2{display:block;}
	.mVis .txtBox .txt p:nth-child(4){margin-left: 2.3em;}
	.mVis .txtBox .txt span {width: 268px;text-align: center;line-height: 1.5;margin: 0 auto;padding-top: 35px;padding-left: 18px;font-size: 16px;}
	.mVis .txtBox .txt span:after {top: 26px;left: 0;}

	.mVis .listBox .listLine{display:none !important;}
	.mVis .listBox ul {flex-direction: column;height: 100%;}
	.mVis .listBox ul li {height: 300px;}
	.mVis .listBox ul li a{pointer-events:none;cursor:default;}
	.mVis .listBox ul li h2{font-size: 35px;padding: 0;width: 50%;left: 5%;bottom: 1.5em;transform: translate(0%, 50%);color: var(--white-color);text-shadow: 0 0 10px #ff401a, 0 0 50px #ff9b1a;text-align: left;}
	.mVis .listBox .l1 h2{text-shadow: 0 0 20px #d2b9ff, 0 0 50px #da00ff;}
	.mVis .listBox .l2 h2{text-shadow: 0 0 10px #319b8d, 0 0 50px #7cffee;}

	.mVis .listBox ul li.on .list_item {width: 100%;}
	.mVis .listBox ul li.on .list_item img,
	.mVis .listBox ul li.l2.on .list_item img{transform: translate3d(0, 0, 0);width: 100%;opacity: 1;}
	.mVis .listBox ul li .list_item img{opacity: 1;width: 100%;}
	.mVis .listBox ul li .list_item video{opacity: 1;width: 100%;height: 100%;}
	.mVis .listBox ul li.l1{background: #030203;}
	.mVis .listBox ul li figure {width: 100%;height: 100%;}
	.mVis .listBox ul li .list_item figcaption {width: 100%;right: 5%;align-items: flex-end;justify-content: center;opacity: 0.8;}
	.mVis .listBox ul li .list_item figcaption h3 {font-size: 17px;opacity: 0.7;}

	.mAbout .txtBox div {font-size: 33px;}

	.mbanList {width: calc(100% - 10%);}
	.pinWrap {height: 270px;}
	.pinWrap li .jblink h5 {margin-left: -130px;}

	.mbanList .control .swiper-pagination .swiper-pagination-bullet{width: 115px;}
}

@media all and (max-width:550px){	
	.mAbout .txtBox div {font-size: 28px;}
	.mContact .conBox h2 {font-size: 55px;}
}

@media all and (max-width:500px){
	.mVis .txtBox{font-size: 50px;margin: 70px 0 -30px;}
	
	.mVis .listBox ul li {height: 210px;}
	.mVis .listBox ul li .list_item figcaption h3 {font-size: 15px;margin: 7px 0;}

	.mAbout small {font-size: 15px;}

	.mbanCon {padding-bottom: 10em;}
	.mbanList .swiper-slide .txtCon {margin: 3em 2em;}
	.mbanList .control {top: 6em;left: 5%;}
	.mbanList .swiper-slide .txtCon .tBox {margin: 1em 0 0;}
	.mbanList .swiper-slide .txtCon .tBox .figure .counter {font-size: 100px;}
	.mbanList .swiper-slide .txtCon .tBox .txt p br{display:none;}
	.mbanList .swiper-slide .txtCon .tBox .txt h3 {font-size: 20px;}
	
	.pinWrap {height: 210px;}
	.mWork .title {line-height: 1.8;}
	.pinWrap li .link .plusIcon {top: calc(50% - 60px);}
	.pinWrap li .link .plusIcon::before {height: 60px;}
	.pinWrap li .link .plusIcon::after {width: 60px;}

	.mContact .conBox p {width: 82%;}
	.mContact {height: 60vh;}
}

@media all and (max-width:400px){
	.mVis .txtBox {font-size: 40px;}
	.mAbout small {font-size: 14px;}
	.mAbout .txtBox div {font-size: 25px;}
	.mbanList .swiper-slide .txtCon .tBox .txt h3 {font-size: 18px;}
	.mbanList .swiper-slide .txtCon .tBox .txt p {font-size: 15px;}
	.pinWrap {height: 200px;}
	.pinWrap li .link p {bottom: 35px;margin-left: -60px;font-size: 16px;}
	.mContact .conBox h2 {font-size: 45px;}
}