@charset "utf-8"; 

/* main
------------------------------------------------------ */
.wrap{position:relative; }


.fz96 {font-size:96px;line-height:1.2;}
.sec1 {overflow:hidden;padding-top:100px;width:100%;color:#fff;aspect-ratio:1920/1080;background : #181818;position: relative;min-height: 100vh;}
.sec1 .s1bg {width:100%;aspect-ratio:1920/1080;background : url(../img/sec1.png) no-repeat center /cover;position: absolute;top: 50%;left: 0;transform: translateY(-50%);}
.sec1 .wrap {padding:65px 0;height:100%;display: grid;align-content: space-between;}
.sec1 .scroll {color:#444444;position:absolute;bottom: 0;left: 50%;writing-mode: vertical-lr;transform: translateX(-50%) rotate(180deg);display: flex;padding-top: 85px;align-items: center;}
.sec1 .scroll:before {content:'';position:absolute;top:0;left: 50%;transform: translateX(-50%);width:1px;height: 70px;background: var(--ptColor1);}
.sec1 .scroll span {position:relative;bottom:0;animation: scr 0.7s ease-in-out alternate infinite;}
@keyframes scr {  to {bottom: -10px;}  }
.sec1 .tit {word-break: keep-all; position:absolute;line-height:1.2;top:65px;opacity:1; font-size:45rem; transition: all .2s;filter: brightness(100); z-index:10;}
.sec1 .txt {word-break: keep-all; text-align: left;position: absolute;bottom: 65px;right: 0; font-size:17rem; z-index:10;}

@keyframes zoom {
0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
    20% {
        opacity: 0.9;
    }
    95% {
        opacity: 0.9;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0;
    }
}

@media screen and (max-width: 1640px){
	.sec1 {padding:100px 20px 0;}
}
@media screen and (max-width: 1400px){
	.line-wrap {top:5%;}
}
@media screen and (max-width: 1200px){
	.line-wrap {top:15%;}
}
@media screen and (max-width: 1023px){
	.line-wrap {top:calc(100% - 65vw);}
	.sec1 .tit { font-size:28rem;}
	.sec1 .txt {font-size:15rem;margin-bottom:70rem;}
}
@media screen and (max-width: 768px){
	.line-wrap {top:calc(100% - 65vw);}
	.sec1 .txt {margin-bottom:70rem;}
}
@media screen and (max-width: 640px){
	.sec1 .scroll {padding-top:30px;}
	.sec1 .scroll:before {height:30px;}
}
@media screen and (max-width: 480px){
.sec1 .tit {top:0;}
}



.circle {
  position: absolute;
  top: 50%;
  left: 3%;
  border-radius: 50%;
  overflow: hidden;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: center center;
  opacity: 0.3;
}

.circle:nth-child(0) {
  width: 0px;
  height: 0px;
  z-index: 100;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 0s linear infinite;
          animation: rotatingReverse 0s linear infinite;
}

.circle:nth-child(1) {
  width: 20px;
  height: 1px;
  z-index: 99;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 1s linear infinite;
          animation: rotating 1s linear infinite;
}

.circle:nth-child(2) {
  width: 40px;
  height: 2px;
  z-index: 98;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 2s linear infinite;
          animation: rotatingReverse 2s linear infinite;
}

.circle:nth-child(3) {
  width: 60px;
  height: 3px;
  z-index: 97;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 3s linear infinite;
          animation: rotating 3s linear infinite;
}

.circle:nth-child(4) {
  width: 80px;
  height: 4px;
  z-index: 96;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 4s linear infinite;
          animation: rotatingReverse 4s linear infinite;
}

.circle:nth-child(5) {
  width: 100px;
  height: 5px;
  z-index: 95;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 5s linear infinite;
          animation: rotating 5s linear infinite;
}

.circle:nth-child(6) {
  width: 120px;
  height: 6px;
  z-index: 94;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 6s linear infinite;
          animation: rotatingReverse 6s linear infinite;
}

.circle:nth-child(7) {
  width: 140px;
  height: 7px;
  z-index: 93;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 7s linear infinite;
          animation: rotating 7s linear infinite;
}

.circle:nth-child(8) {
  width: 160px;
  height: 8px;
  z-index: 92;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 8s linear infinite;
          animation: rotatingReverse 8s linear infinite;
}

.circle:nth-child(9) {
  width: 180px;
  height: 9px;
  z-index: 91;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 9s linear infinite;
          animation: rotating 9s linear infinite;
}

.circle:nth-child(10) {
  width: 200px;
  height: 10px;
  z-index: 90;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 10s linear infinite;
          animation: rotatingReverse 10s linear infinite;
}

.circle:nth-child(11) {
  width: 220px;
  height: 11px;
  z-index: 89;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 11s linear infinite;
          animation: rotating 11s linear infinite;
}

.circle:nth-child(12) {
  width: 240px;
  height: 12px;
  z-index: 88;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 12s linear infinite;
          animation: rotatingReverse 12s linear infinite;
}

.circle:nth-child(13) {
  width: 260px;
  height: 13px;
  z-index: 87;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 13s linear infinite;
          animation: rotating 13s linear infinite;
}

.circle:nth-child(14) {
  width: 280px;
  height: 14px;
  z-index: 86;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 14s linear infinite;
          animation: rotatingReverse 14s linear infinite;
}

.circle:nth-child(15) {
  width: 300px;
  height: 15px;
  z-index: 85;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 15s linear infinite;
          animation: rotating 15s linear infinite;
}

.circle:nth-child(16) {
  width: 320px;
  height: 16px;
  z-index: 84;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 16s linear infinite;
          animation: rotatingReverse 16s linear infinite;
}

.circle:nth-child(17) {
  width: 340px;
  height: 17px;
  z-index: 83;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 17s linear infinite;
          animation: rotating 17s linear infinite;
}

.circle:nth-child(18) {
  width: 360px;
  height: 18px;
  z-index: 82;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 18s linear infinite;
          animation: rotatingReverse 18s linear infinite;
}

.circle:nth-child(19) {
  width: 380px;
  height: 19px;
  z-index: 81;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 19s linear infinite;
          animation: rotating 19s linear infinite;
}

.circle:nth-child(20) {
  width: 400px;
  height: 20px;
  z-index: 80;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 20s linear infinite;
          animation: rotatingReverse 20s linear infinite;
}

.circle:nth-child(21) {
  width: 420px;
  height: 21px;
  z-index: 79;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 21s linear infinite;
          animation: rotating 21s linear infinite;
}

.circle:nth-child(22) {
  width: 440px;
  height: 22px;
  z-index: 78;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 22s linear infinite;
          animation: rotatingReverse 22s linear infinite;
}

.circle:nth-child(23) {
  width: 460px;
  height: 23px;
  z-index: 77;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 23s linear infinite;
          animation: rotating 23s linear infinite;
}

.circle:nth-child(24) {
  width: 480px;
  height: 24px;
  z-index: 76;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 24s linear infinite;
          animation: rotatingReverse 24s linear infinite;
}

.circle:nth-child(25) {
  width: 500px;
  height: 25px;
  z-index: 75;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 25s linear infinite;
          animation: rotating 25s linear infinite;
}

.circle:nth-child(26) {
  width: 520px;
  height: 26px;
  z-index: 74;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 26s linear infinite;
          animation: rotatingReverse 26s linear infinite;
}

.circle:nth-child(27) {
  width: 540px;
  height: 27px;
  z-index: 73;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 27s linear infinite;
          animation: rotating 27s linear infinite;
}

.circle:nth-child(28) {
  width: 560px;
  height: 28px;
  z-index: 72;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 28s linear infinite;
          animation: rotatingReverse 28s linear infinite;
}

.circle:nth-child(29) {
  width: 580px;
  height: 29px;
  z-index: 71;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 29s linear infinite;
          animation: rotating 29s linear infinite;
}

.circle:nth-child(30) {
  width: 600px;
  height: 30px;
  z-index: 70;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 30s linear infinite;
          animation: rotatingReverse 30s linear infinite;
}

.circle:nth-child(31) {
  width: 620px;
  height: 31px;
  z-index: 69;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 31s linear infinite;
          animation: rotating 31s linear infinite;
}

.circle:nth-child(32) {
  width: 640px;
  height: 32px;
  z-index: 68;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 32s linear infinite;
          animation: rotatingReverse 32s linear infinite;
}

.circle:nth-child(33) {
  width: 660px;
  height: 33px;
  z-index: 67;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 33s linear infinite;
          animation: rotating 33s linear infinite;
}

.circle:nth-child(34) {
  width: 680px;
  height: 34px;
  z-index: 66;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 34s linear infinite;
          animation: rotatingReverse 34s linear infinite;
}

.circle:nth-child(35) {
  width: 700px;
  height: 35px;
  z-index: 65;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 35s linear infinite;
          animation: rotating 35s linear infinite;
}

.circle:nth-child(36) {
  width: 720px;
  height: 36px;
  z-index: 64;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 36s linear infinite;
          animation: rotatingReverse 36s linear infinite;
}

.circle:nth-child(37) {
  width: 740px;
  height: 37px;
  z-index: 63;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 37s linear infinite;
          animation: rotating 37s linear infinite;
}

.circle:nth-child(38) {
  width: 760px;
  height: 38px;
  z-index: 62;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 38s linear infinite;
          animation: rotatingReverse 38s linear infinite;
}

.circle:nth-child(39) {
  width: 780px;
  height: 39px;
  z-index: 61;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 39s linear infinite;
          animation: rotating 39s linear infinite;
}

.circle:nth-child(40) {
  width: 800px;
  height: 40px;
  z-index: 60;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 40s linear infinite;
          animation: rotatingReverse 40s linear infinite;
}

.circle:nth-child(41) {
  width: 820px;
  height: 41px;
  z-index: 59;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 41s linear infinite;
          animation: rotating 41s linear infinite;
}

.circle:nth-child(42) {
  width: 840px;
  height: 42px;
  z-index: 58;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 42s linear infinite;
          animation: rotatingReverse 42s linear infinite;
}

.circle:nth-child(43) {
  width: 860px;
  height: 43px;
  z-index: 57;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 43s linear infinite;
          animation: rotating 43s linear infinite;
}

.circle:nth-child(44) {
  width: 880px;
  height: 44px;
  z-index: 56;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 44s linear infinite;
          animation: rotatingReverse 44s linear infinite;
}

.circle:nth-child(45) {
  width: 900px;
  height: 45px;
  z-index: 55;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 45s linear infinite;
          animation: rotating 45s linear infinite;
}

.circle:nth-child(46) {
  width: 920px;
  height: 46px;
  z-index: 54;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 46s linear infinite;
          animation: rotatingReverse 46s linear infinite;
}

.circle:nth-child(47) {
  width: 940px;
  height: 47px;
  z-index: 53;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 47s linear infinite;
          animation: rotating 47s linear infinite;
}

.circle:nth-child(48) {
  width: 960px;
  height: 48px;
  z-index: 52;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 48s linear infinite;
          animation: rotatingReverse 48s linear infinite;
}

.circle:nth-child(49) {
  width: 980px;
  height: 49px;
  z-index: 51;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 49s linear infinite;
          animation: rotating 49s linear infinite;
}

.circle:nth-child(50) {
  width: 1000px;
  height: 50px;
  z-index: 50;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 50s linear infinite;
          animation: rotatingReverse 50s linear infinite;
}

.circle:nth-child(51) {
  width: 1020px;
  height: 51px;
  z-index: 49;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 51s linear infinite;
          animation: rotating 51s linear infinite;
}

.circle:nth-child(52) {
  width: 1040px;
  height: 52px;
  z-index: 48;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 52s linear infinite;
          animation: rotatingReverse 52s linear infinite;
}

.circle:nth-child(53) {
  width: 1060px;
  height: 53px;
  z-index: 47;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 53s linear infinite;
          animation: rotating 53s linear infinite;
}

.circle:nth-child(54) {
  width: 1080px;
  height: 54px;
  z-index: 46;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 54s linear infinite;
          animation: rotatingReverse 54s linear infinite;
}

.circle:nth-child(55) {
  width: 1100px;
  height: 55px;
  z-index: 45;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 55s linear infinite;
          animation: rotating 55s linear infinite;
}

.circle:nth-child(56) {
  width: 1120px;
  height: 56px;
  z-index: 44;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 56s linear infinite;
          animation: rotatingReverse 56s linear infinite;
}

.circle:nth-child(57) {
  width: 1140px;
  height: 57px;
  z-index: 43;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 57s linear infinite;
          animation: rotating 57s linear infinite;
}

.circle:nth-child(58) {
  width: 1160px;
  height: 58px;
  z-index: 42;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 58s linear infinite;
          animation: rotatingReverse 58s linear infinite;
}

.circle:nth-child(59) {
  width: 1180px;
  height: 59px;
  z-index: 41;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 59s linear infinite;
          animation: rotating 59s linear infinite;
}

.circle:nth-child(60) {
  width: 1200px;
  height: 60px;
  z-index: 40;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 60s linear infinite;
          animation: rotatingReverse 60s linear infinite;
}

.circle:nth-child(61) {
  width: 1220px;
  height: 61px;
  z-index: 39;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 61s linear infinite;
          animation: rotating 61s linear infinite;
}

.circle:nth-child(62) {
  width: 1240px;
  height: 62px;
  z-index: 38;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 62s linear infinite;
          animation: rotatingReverse 62s linear infinite;
}

.circle:nth-child(63) {
  width: 1260px;
  height: 63px;
  z-index: 37;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 63s linear infinite;
          animation: rotating 63s linear infinite;
}

.circle:nth-child(64) {
  width: 1280px;
  height: 64px;
  z-index: 36;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 64s linear infinite;
          animation: rotatingReverse 64s linear infinite;
}

.circle:nth-child(65) {
  width: 1300px;
  height: 65px;
  z-index: 35;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 65s linear infinite;
          animation: rotating 65s linear infinite;
}

.circle:nth-child(66) {
  width: 1320px;
  height: 66px;
  z-index: 34;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 66s linear infinite;
          animation: rotatingReverse 66s linear infinite;
}

.circle:nth-child(67) {
  width: 1340px;
  height: 67px;
  z-index: 33;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 67s linear infinite;
          animation: rotating 67s linear infinite;
}

.circle:nth-child(68) {
  width: 1360px;
  height: 68px;
  z-index: 32;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 68s linear infinite;
          animation: rotatingReverse 68s linear infinite;
}

.circle:nth-child(69) {
  width: 1380px;
  height: 69px;
  z-index: 31;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 69s linear infinite;
          animation: rotating 69s linear infinite;
}

.circle:nth-child(70) {
  width: 1400px;
  height: 70px;
  z-index: 30;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 70s linear infinite;
          animation: rotatingReverse 70s linear infinite;
}

.circle:nth-child(71) {
  width: 1420px;
  height: 71px;
  z-index: 29;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 71s linear infinite;
          animation: rotating 71s linear infinite;
}

.circle:nth-child(72) {
  width: 1440px;
  height: 72px;
  z-index: 28;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 72s linear infinite;
          animation: rotatingReverse 72s linear infinite;
}

.circle:nth-child(73) {
  width: 1460px;
  height: 73px;
  z-index: 27;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 73s linear infinite;
          animation: rotating 73s linear infinite;
}

.circle:nth-child(74) {
  width: 1480px;
  height: 74px;
  z-index: 26;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 74s linear infinite;
          animation: rotatingReverse 74s linear infinite;
}

.circle:nth-child(75) {
  width: 1500px;
  height: 75px;
  z-index: 25;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 75s linear infinite;
          animation: rotating 75s linear infinite;
}

.circle:nth-child(76) {
  width: 1520px;
  height: 76px;
  z-index: 24;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 76s linear infinite;
          animation: rotatingReverse 76s linear infinite;
}

.circle:nth-child(77) {
  width: 1540px;
  height: 77px;
  z-index: 23;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 77s linear infinite;
          animation: rotating 77s linear infinite;
}

.circle:nth-child(78) {
  width: 1560px;
  height: 78px;
  z-index: 22;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 78s linear infinite;
          animation: rotatingReverse 78s linear infinite;
}

.circle:nth-child(79) {
  width: 1580px;
  height: 79px;
  z-index: 21;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 79s linear infinite;
          animation: rotating 79s linear infinite;
}

.circle:nth-child(80) {
  width: 1600px;
  height: 80px;
  z-index: 20;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 80s linear infinite;
          animation: rotatingReverse 80s linear infinite;
}

.circle:nth-child(81) {
  width: 1620px;
  height: 81px;
  z-index: 19;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 81s linear infinite;
          animation: rotating 81s linear infinite;
}

.circle:nth-child(82) {
  width: 1640px;
  height: 82px;
  z-index: 18;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 82s linear infinite;
          animation: rotatingReverse 82s linear infinite;
}

.circle:nth-child(83) {
  width: 1660px;
  height: 83px;
  z-index: 17;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 83s linear infinite;
          animation: rotating 83s linear infinite;
}

.circle:nth-child(84) {
  width: 1680px;
  height: 84px;
  z-index: 16;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 84s linear infinite;
          animation: rotatingReverse 84s linear infinite;
}

.circle:nth-child(85) {
  width: 1700px;
  height: 85px;
  z-index: 15;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 85s linear infinite;
          animation: rotating 85s linear infinite;
}

.circle:nth-child(86) {
  width: 1720px;
  height: 86px;
  z-index: 14;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 86s linear infinite;
          animation: rotatingReverse 86s linear infinite;
}

.circle:nth-child(87) {
  width: 1740px;
  height: 87px;
  z-index: 13;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 87s linear infinite;
          animation: rotating 87s linear infinite;
}

.circle:nth-child(88) {
  width: 1760px;
  height: 88px;
  z-index: 12;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 88s linear infinite;
          animation: rotatingReverse 88s linear infinite;
}

.circle:nth-child(89) {
  width: 1780px;
  height: 89px;
  z-index: 11;
  border: 1px solid #e74c3c;
  -webkit-animation: rotating 89s linear infinite;
          animation: rotating 89s linear infinite;
}

.circle:nth-child(90) {
  width: 1800px;
  height: 90px;
  z-index: 10;
  border: 1px solid #c0392b;
  -webkit-animation: rotatingReverse 90s linear infinite;
          animation: rotatingReverse 90s linear infinite;
}


@-webkit-keyframes rotating {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes rotating {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
@-webkit-keyframes rotatingReverse {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% {
    transform: rotate(-360deg) scale(1);
  }
}
@keyframes rotatingReverse {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% {
    transform: rotate(-360deg) scale(1);
  }
}

/* main visual */
#main_visual{}
#main_visual .bx-wrapper{height:100%; margin-bottom:0; background:transparent; border:0; box-shadow:none;}
#main_visual .bx-viewport{height:100% !important;}
#main_visual .slider{height:100%;}
#main_visual .roll{}
#main_visual .roll_txt {position:absolute; text-align:center; top:50%; left:50%; transform:translateX(-50%);}
#main_visual .roll_img{z-index:-1; position:absolute; left:0; top:0; width:100%;height:100%; background-size:cover; animation: imagescale 6s infinite; -webkit-animation: imagescale 6s infinite; -moz-animation: imagescale 6s infinite; -o-webkit-animation: imagescale 6s infinite;}
#main_visual .roll01{background-image:url(../img/main/visual01.jpg);}
#main_visual .roll02{background-image:url(../img/main/visual02.jpg);}
#main_visual .roll03{background-image:url(../img/main/visual03.jpg);}
#main_visual .roll04{background-image:url(../img/main/visual04.jpg);}
#main_visual .roll{height:100%;}
#main_visual h2{ font-weight:600; font-size:50rem; color: #fff; overflow: hidden;  line-height: 1.2em; animation:down 1.5s .5s forwards; opacity:0}
#main_visual p{font-family: 'neurimboGothicRegular'; text-transform: uppercase; line-height:2.4; margin:290rem 0 10rem 0; font-size:20rem; letter-spacing:2rem; text-transform:uppercase;}
#main_visual .btn_more{margin-top:50rem}
#main_visual .roll_txt2{display:inline-block; margin-right:80rem; text-align:left;}
#main_visual .bx-controls{ z-index:100; width:100%; text-align:center;}
#main_visual .bx-controls-direction{}
#main_visual .bx-pager{display:inline-block; vertical-align:middle;}
#main_visual .bx-pager > div{display:inline-block;}
#main_visual .bx-pager a{display:inline-block; width:12rem; height:12rem; margin:0 5rem; border:2px solid #fff; font-size:0; text-indent:-9000px; border-radius:50%;}
#main_visual .bx-pager a.active{background:#fff;}
#main_visual .bx-controls-auto{display:inline-block; vertical-align:middle;}
#main_visual .bx-controls-auto > div{display:inline-block;}
#main_visual .bx-controls-auto a{display:inline-block; width:20px; height:20px; margin:0 5px; background-position:center; font-size:0; color:#fff; text-indent:-9000px; background-repeat:no-repeat;}
#main_visual .bx-controls-auto a.bx-start{background-image:url(../img/btn_play.png);}
#main_visual .bx-controls-auto a.bx-stop{background-image:url(../img/btn_pause.png);}
#main_visual .bx-controls-auto a.active{display:none;}

/* 이전다음버튼일때 */
#main_visual .bx-default-pager{display:none; position: absolute; left:0; width: 100%;bottom:30rem;z-index: 60;}
#main_visual .bx-controls-direction{position: absolute; left:0; width: 100%;top:48%;z-index: 60;}
#main_visual .bx-controls-direction a.bx-prev:After{transform:rotate(180deg); -webkit-transform:rotate(180deg);}
#main_visual .bx-controls-direction a:hover{}
#main_visual .bx-controls-direction a{display:block; position:absolute; overflow:hidden; width:28rem; height:46rem; text-indent:-9999px; transition:all 0.2s ease-out 0s;}
#main_visual .bx-controls-direction a:after{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../img/layout/icon_btn_arrow.svg) no-repeat 50% 50%;}
#main_visual .bx-controls-direction a.bx-next{right:100rem;}
#main_visual .bx-controls-direction a.bx-prev{left:100rem;}

@keyframes imagescale {
  0% {
    transform: scale(1.1)  rotate(.001deg);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
  }

  100% {
    transform: scale(1)  rotate(.001deg);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
  }
}

@media (max-width:1700px){

	#main_visual .bx-controls-direction a.bx-prev{left:20rem;}
	#main_visual .bx-controls-direction a.bx-next{right:20rem;}
}

@media (max-width:1480px){
	#main_visual{height:1000rem;}
	#main_visual .roll_img{    background-position: 50%;}
}

@media (max-width:1023px) {
	#main_visual{margin-top:80rem; height:700rem;}
	#main_visual h2{font-size:40rem}


}


@media (max-width:860px){
	
	#main_visual .bx-default-pager{display:block;}
	#main_visual .bx-controls-direction{display:none;}



}

@media (max-width:540px) {
	#main_visual{margin-top:80rem; height:600rem}
	#main_visual .roll{padding-top:0}
	#main_visual p{margin:60rem 0 0; font-size:12rem}
	#main_visual h2{font-size:20rem}
	#main_visual .btn_more{margin-top:25rem}

	


}
.mTit {position: relative; padding:40rem 0 0 84px; font-size:45rem; line-height:0.8; font-weight:600; color:#000; letter-spacing:-.5px; }
.mTit:after { content:''; position: absolute; left:55px; top:0px; transform:rotate(-45deg); width:1px; height:30px; background:#000; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); }

.mTit_w {position: relative; padding:40rem 0 0 84px; font-size:45rem; line-height:0.8; font-weight:600; color:#fff; letter-spacing:-.5px; }
.mTit_w:after { content:''; position: absolute; left:55px; top:0px; transform:rotate(-45deg); width:1px; height:30px; background:#fff; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); }

@media (max-width:768px){
	.mTit { font-size:28rem;}
	.mTit_w { font-size:28rem;}
}

.technology-box { position:relative; width:100%; overflow:hidden; background-attachment:fixed; }
.technology-box .motion-box { position:relative; overflow:hidden; }
.technology-box .motion-box .cont { position:relative; height:100vh; transition:all 0.5s ease }
.technology-box .motion-box .cont.off { position:fixed !important; top:0 !important; transform:translate(0px, 0px) !important;}
.technology-box .motion-box .txtM { position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:3; width:100%; text-align:center; color:#fff; font-size:84rem; font-weight:400; line-height:1.3; }
.technology-box .motion-box .txtM * { }
.technology-box .motion-box .txtM .stxt strong { font-weight:600; display:block; }
.technology-box .motion-box .txtM .stxt { position:relative; overflow:hidden;  }
.technology-box .motion-box .txtM span { display:block; }
.technology-box .motion-box .listbox { position:absolute; left:0; top:0; width:100%; height:100%; }
.technology-box .motion-box .listbox .title-box { margin-top:10vh; display:flex; justify-content:space-between; align-items:flex-end; }
.technology-box .motion-box .listbox .title-box h3 span { color:#fff }
.technology-box .motion-box .listbox .list { position:relative; margin-top:40rem; padding-bottom:62rem; }
.technology-box .motion-box .listbox .list .swiper-slide { width:416rem; height:70vh; }
.technology-box .motion-box .listbox .list .swiper-slide .box { position:relative; height:100%; }
.technology-box .motion-box .listbox .list .swiper-slide .box > div { transition:all 0.8s 0.1s; position:absolute; left:0; top:0; padding:0 40rem; width:100%; height:100%; text-align:center; overflow:hidden; display:flex; flex-direction:column; justify-content:center; align-items:center; border-radius:10rem; }
.technology-box .motion-box .listbox .list .swiper-slide .box .before { opacity:1; transform:rotateY(0); }
.technology-box .motion-box .listbox .list .swiper-slide .box .before .txtbox { margin-top:40rem; }
.technology-box .motion-box .listbox .list .swiper-slide .box .before .txtbox .tit { color:#fff; font-size:40rem; font-weight:600; line-height:1.3; }
.technology-box .motion-box .listbox .list .swiper-slide .box .before .txtbox .btn { margin-top:20rem; color:#fff; font-size:15rem; font-weight:600; line-height:1.3; border:0; opacity:0.24; }
.technology-box .motion-box .listbox .list .swiper-slide .box .after { opacity:0; transform:rotateY(180deg); background:#b42d34; }
.technology-box .motion-box .listbox .list .swiper-slide .box .after dt { color:#fff; font-size:42rem; font-weight:500; line-height:1.3; }
.technology-box .motion-box .listbox .list .swiper-slide .box .after dd {word-break: keep-all; letter-spacing:-.5px;  margin-top:80rem; color:rgba(255,255,255, 0.8); font-size:18rem; font-weight:300; line-height:1.6; }
.technology-box .motion-box .listbox .list .swiper-slide .box .after .btn { margin-top:80rem; color:#fff; font-size:15rem; font-weight:600; line-height:1.3; border:0;}
.technology-box .motion-box .listbox .list .swiper-slide .box .after .btn a { color:#fff; }
.technology-box .motion-box .listbox .list .swiper-pagination { position:absolute; left:50%; top:unset; bottom:0; transform:translate(-50%, 0); max-width:400rem; width:100%; height:2rem; background:#222; }
.technology-box .motion-box .listbox .list .swiper-pagination-progressbar-fill { background:#be3238; }
.technology-box .motion-box .listbox .list .swiper-pn { display:block; position:absolute; top:50%; transform:translateY(-50%); width:20rem; height:40rem; background:url(../img/main/swiper-pn-p.svg) no-repeat center / cover; }
.technology-box .motion-box .listbox .list .swiper-button-prev { left:48rem; }
.technology-box .motion-box .listbox .list .swiper-button-next { left:unset; right:4.8rem; transform:translateY(-50%) rotate(calc(180deg + 0.05deg)); }
.technology-box .motion-box .listbox .list .drag-box { position:absolute; left:50%; top:unset; bottom:10.0rem; transform:translate(-50%, 0); z-index:7; width:150rem; height:45rem; gap:0 30rem; display:flex; justify-content:center; align-items:center; border-radius:40rem; background: rgba(0, 0, 0, 0.10); backdrop-filter: blur(10px); } 
.technology-box .motion-box .listbox .list .drag-box span { color:rgba(255,255,255, 0.9); font-size:17rem; font-weight:500; line-height:1.3;}

.business01 {background:url(../img/main/business_img01.jpg) no-repeat center / cover; border-radius:10rem;}
.business02 {background:url(../img/main/business_img02.jpg) no-repeat center / cover; border-radius:10rem;}
.business03 {background:url(../img/main/business_img03.jpg) no-repeat center / cover; border-radius:10rem;}
.business04 {background:url(../img/main/business_img04.jpg) no-repeat center / cover; border-radius:10rem;}
.business05 {background:url(../img/main/business_img05.jpg) no-repeat center / cover; border-radius:10rem;}
.business06 {background:url(../img/main/business_img06.jpg) no-repeat center / cover; border-radius:10rem;}
.business07 {background:url(../img/main/business_img07.jpg) no-repeat center / cover; border-radius:10rem;}
.business08 {background:url(../img/main/business_img08.jpg) no-repeat center / cover; border-radius:10rem;}

@media screen and (max-width:1440px){
	.technology-box .motion-box .txtM { font-size:70rem; }
	.technology-box .motion-box .listbox .list { margin-top:3.5rem; padding-bottom:55rem; }
	.technology-box .motion-box .listbox .list .swiper-slide { width:400rem; height:62vh; }
	.technology-box .motion-box .listbox .list .swiper-slide .box > div { padding:0 35rem; }
	.technology-box .motion-box .listbox .list .swiper-slide .box .before .txtbox { margin-top:35rem; }
	.technology-box .motion-box .listbox .list .swiper-slide .box .before .txtbox .tit { font-size:24rem; }
	.technology-box .motion-box .listbox .list .swiper-slide .box .before .txtbox .btn { margin-top:20rem; font-size:17rem; }
	.technology-box .motion-box .listbox .list .swiper-slide .box .after dt { font-size:38rem; }
	.technology-box .motion-box .listbox .list .swiper-slide .box .after dd {  margin-top:60rem; font-size:18rem; }
	.technology-box .motion-box .listbox .list .swiper-slide .box .after .btn { margin-top:60rem; font-size:16rem; }
	.technology-box .motion-box .listbox .list .swiper-button-prev { left:28rem; }
	.technology-box .motion-box .listbox .list .swiper-button-next { right:28rem; }
	.technology-box .motion-box .listbox .list .drag-box span { font-size:16rem; }
}
@media screen and (max-width:1280px){
	.technology-box .motion-box .txtM { font-size:5.5rem; }
}
@media screen and (max-width:1024px){
	.technology-box .motion-box .cont { margin:80rem 0; height:100%; }
	.technology-box .motion-box .txtM { margin-top:30rem; font-size:40rem; position:relative; top:0; transform:translateY(0); }
	.technology-box .motion-box .listbox { position:relative; }
	.technology-box .motion-box .listbox .title-box { margin-top:80rem; }
	.technology-box .motion-box .listbox .list { margin-top:30rem; padding-bottom:50rem; }
	.technology-box .motion-box .listbox .list .swiper-slide { width:350rem; height:55vh; }
	.technology-box .motion-box .listbox .list .swiper-slide .box > div { padding:0 20rem; }
	.technology-box .motion-box .listbox .list .swiper-slide .box .before .imgbox img { width:120px; }
	.technology-box .motion-box .listbox .list .swiper-slide .box .before .txtbox { margin-top:20rem; }
	.technology-box .motion-box .listbox .list .swiper-slide .box .before .txtbox .tit { font-size:22rem; }
	.technology-box .motion-box .listbox .list .swiper-slide .box .before .txtbox .btn { margin-top:15rem; font-size:16rem; }
	.technology-box .motion-box .listbox .list .swiper-slide .box .after dt { font-size:26rem; }
	.technology-box .motion-box .listbox .list .swiper-slide .box .after dd {  margin-top:40rem; font-size:17rem; }
	.technology-box .motion-box .listbox .list .swiper-slide .box .after .btn { margin-top:40rem; font-size:15rem; }
	.technology-box .motion-box .listbox .list .drag-box { bottom:60rem; width:130rem; height:40rem; gap:0 25rem; } 
	.technology-box .motion-box .listbox .list .drag-box span { font-size:16rem; }
	.technology-box .motion-box .listbox .list .swiper-pn { width:15rem; background-size:15rem auto; }
}
@media screen and (max-width:640px){
	.technology-box .motion-box .txtM { font-size:30rem; }
	.technology-box .motion-box .listbox .list { margin-top:30rem; padding-bottom:40rem; }
	.technology-box .motion-box .listbox .list .swiper-slide { height:50vh; }
	.technology-box .motion-box .listbox .list .swiper-slide .box .before .imgbox img { width:100px; }
	.technology-box .motion-box .listbox .list .swiper-pagination {height:1rem; }
	.technology-box .motion-box .listbox .list .drag-box { width:115rem; gap:0 15rem; } 
	.technology-box .motion-box .listbox .list .swiper-pn { width:12rem; background-size:12rem auto; }
}

/* animation */
.technology-box .motion-box .stxt strong em { opacity:0; display:inline-block; }
.technology-box.on .motion-box .stxt strong em { animation:ani_1 0.8s 0.5s; animation-fill-mode:both; }
.technology-box.on .motion-box .stxt strong em:nth-child(2) { animation:ani_2 0.8s 0.5s; animation-fill-mode:both; }
.technology-box .motion-box .bg { position:absolute; left:50%; top:50%; transform:translate(calc(-50% - 0.5px), -50%) scale(1); width:3000px; height:3000px; z-index:5; background:#000; mask-image:radial-gradient(circle 77rem at center, transparent 50%, rgba(0,0,0,1) 50.4%); }
.technology-box .motion-box .listbox .list .swiper-slide .box:hover .before { opacity:0; transform:rotateY(180deg); }
.technology-box .motion-box .listbox .list .swiper-slide .box:hover .after { opacity:1; transform:rotateY(0); }
@media screen and (max-width:1440px){
	.technology-box .motion-box .bg { mask-image:radial-gradient(circle 64rem at center, transparent 50%, rgba(0,0,0,1) 50.4%); }
}
@media screen and (max-width:1280px){
	.technology-box .motion-box .bg { mask-image:radial-gradient(circle 50rem at center, transparent 50%, rgba(0,0,0,1) 50.4%); }
}
@media screen and (max-width:1024px){
	.technology-box .motion-box .bg { display:none; mask-image:radial-gradient(circle 37rem at center, transparent 50%, rgba(0,0,0,1) 50.4%); }
}
@media screen and (max-width:1024px){
	.technology-box .motion-box .bg { mask-image:radial-gradient(circle 28rem at center, transparent 50%, rgba(0,0,0,1) 50.4%); }
}


.rotate-btn{display:flex;align-items:center;justify-content:center;position:relative;width:100%;max-width:190px;border-radius:50%;}
.rotate-btn::before{content:"";display:block;position:relative;width:100%;padding-top:100%;border-radius:50%;background:url("../img/main/text_img_white.png") no-repeat center center / 88.42105263157895% auto;transition:background-image .3s;z-index:10;animation:rotateText 10s infinite linear;}
.rotate-btn::after{content:"";display:block;position:absolute;top:0;left:0;width:100%;padding-top:100%;border-radius:50%;background-color:#3088ff;transition:background-color .3s;}
.rotate-btn__icon{display:block;position:absolute;top:50%;left:50%;width:33.68421052631579%;height:17.89473684210526%;background:url("../img/main/icon_arrow_white.png") no-repeat center center / 100% auto;transform:translate(-50%, -50%);transition:background-image .3s;z-index:10;}

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

/* Media Query */
@media (min-width:1025px){
	.rotate-btn:hover::before{animation:rotateText 10s infinite linear;}
	.rotate-btn:hover::after{animation:scaleBg .3s linear forwards;}
}

.main-banner{margin:0 auto; background:url(../img/main/request_bg.jpg) center top no-repeat; padding:50rem 0; }
.main-banner__inner {display: flex;  align-items: center;  justify-content: space-between;}
.main-banner__text-wrap{display:flex;align-items: center;gap:60rem;  }
.main-banner__text-wrap p {color:#fff; font-size:18rem; font-weight:200; letter-spacing:-.5px; padding-top:40rem;}

.main-banner .rotate-btn{width:100%;}
.main-banner .rotate-btn::before{opacity:.8;}
.main-banner .rotate-btn::after{background-color:rgba(255,255,255,.1);}

@media (min-width:1025px){
	.main-banner .rotate-btn:hover::before{background-image:url("../img/main/text_img_red.png");}
	.main-banner .rotate-btn:hover::after{background-color:#fff;}
	.main-banner .rotate-btn:hover .rotate-btn__icon{background-image:url("../img/main/icon_arrow_red.png");}
}

@media (max-width:1023px){
	.main-banner__inner{flex-direction:column;align-items:flex-start; }
	.main-banner__text-wrap{width:100%;flex-direction:column;align-items:flex-start;gap:0rem; }
	.main-banner__text-wrap p {font-size:15rem; padding-left:90rem; }
	.main-banner .rotate-btn{position:absolute; text-align:center; right:5%; transform:translateX(-5%); top:-30rem; max-width:100px;}
	.main-banner .rotate-btn::before{animation:rotateText 10s infinite linear;}

}
@media (max-width:768px){
	.main-banner{flex-direction:column;}
	.main-banner .mTit_w {margin-left:-40rem;}
	.main-banner__text-wrap p {padding-left:0rem; }
}



.s06{overflow:hidden; background:url(../img/main/portfolio_bg.jpg) center top no-repeat; padding:100rem 0; }
.s06 .title_wrap { }
.s06 .title_wrap .topA {margin-top:60rem; }
.s06 .mTit_w {margin-left:-40rem;}
.s06 article .splide {margin-top:0rem;}
.s06 article .splide .splide__slider .splide__track .splide__list .splide__slide .top_box{display:flex;gap:10px;margin-bottom:10rem;}
.s06 article .splide .splide__slider .splide__track .splide__list .splide__slide .bottom_box{display:flex;gap:10px;}

.s06 article .splide .splide__slider .splide__track .splide__list .splide__slide .img_wrap{overflow:hidden}
.s06 article .splide .splide__slider .splide__track .splide__list .splide__slide .img_wrap img{transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s}
.s06 article .splide .splide__slider .splide__track .splide__list .splide__slide .img_wrap:hover img{transform:scale(1.05)}

@media(max-width: 767px){
	.s06{padding:50rem 0; }
	.s06 .title_wrap {flex-direction:column;}
	.s06 .title_wrap .topA {margin-top:45rem; }
	.s06 article .splide {margin-top:20rem;}
	.s06 article .splide{aspect-ratio:750/500}
	.s06 article .splide .splide__slider .splide__track .splide__list .splide__slide{margin-right:5px;gap:5px}
	.s06 article .splide .splide__slider .splide__track .splide__list .splide__slide .top_box{gap:5px}
}

.topA {  font-size: 16rem;  font-weight: 800;  line-height: 1;  color: #ffffff;  padding: 15px 30px;  top: 30px;  right: 20px;  transform: translate(-10px, -10px);  box-shadow: 10px 10px #fff;  border: 2px solid #fff;  background: #0b0b0b;  position: absolute;  transition: all 0.2s linear;  z-index: 1; }
a.topA  {color: #ffffff; }

.topA:hover {  transform: translate(0, 0);  box-shadow: 0 0 #fff;}

@media(max-width: 1023px){
  .topA {    font-size: 12rem; padding: 10px 25px;    top: 45rem;    transform: translate(-8px, -8px);    box-shadow: 8px 8px #fff;  }
}

@media(max-width: 768px){
  .topA {    font-size: 2.4vw;    padding: 2vw 5vw; transform: translate(-1.5vw, -1.5vw);    box-shadow: 1.5vw 1.5vw #fff;  }
}



.news-box { padding:100rem 0; overflow:hidden; max-width:1400rem; margin:0 auto; }
.news-box .mTit {margin-left:-40rem;}
.news-box .title-box p {word-break: keep-all; color:#111; font-size:25rem; font-weight:300; margin-top:35px; margin-left:45rem;}
.news-box .listbox { position:relative; padding-top:100px; }
.news-box .tabmenu { position:absolute; right:0; top:-47px; z-index:2 }
.news-box .tabmenu ul { display:flex; }
.news-box .tabmenu li { position:relative; }
.news-box .tabmenu li a { color:#111; font-size:20rem; font-weight:800; display:flex; align-items:center; justify-content:center; height:66rem; padding:0 40rem; border-radius:80px; transition:all 0.3s ease-in-out; }
.news-box .tabmenu li.active a { color:#fff; background-color:#be3238; }

.news-box .list { position:relative; }
.news-box .list:before {content:""; display:block; z-index:1; position:absolute; left:0; top:0; width:100%; height:1px; background-color:#111; }
.news-box .list ul { display:none; }
.news-box .list ul.active { display:block; }
.news-box .list ul li { position:relative; }
.news-box .list ul li:before {content:""; display:block; z-index:1; position:absolute; left:0; bottom:-1px; width:100%; height:1px; background-color:#e0e0e0; }
.news-box .list ul li:after {content:""; display:block; z-index:2; position:absolute; left:0; bottom:-1px; width:0; height:1px; background-color:#be3238; transition:all 0.5s 0.1s; }
.news-box .list ul li:hover:after { width:100%; transition:all 0.7s 0.2s; }
.news-box .list ul li a { position:relative; padding:40rem 160px 40rem 355px; display:block; z-index:5; }
.news-box .list ul li a strong { position:absolute; left:0; top:50%; transform:translateY(-50%); padding-left:75px; font-weight:800; color:#be3238; font-size:20rem; }
.news-box .list ul li a .txt { color:#111; font-size:20rem; font-weight:600; line-height:1.4; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.news-box .list ul li a .date { display:block; margin-top:10rem; color:#8a8a8a; font-size:15rem; font-weight:300; }
.news-box .list ul li a .date i { display:inline-block; margin:-2px 2px 0 0; vertical-align:middle }
.news-box .list ul li .imgbox { position:absolute; right:-242px; top:50%; transform:translateY(-50%); opacity:0; width:550px; height:550px; }
.news-box .list ul li .imgbox img { position:absolute; left:0; top:0; border-radius:500px; transition:all 1.4s; width:100%; height:100%; transform:scale(.65); transition:opacity 1s, transform 0.5s cubic-bezier(.3,.68,.34,.8); }
.news-box .list ul li:hover .imgbox { display:block; opacity:1; }
.news-box .list ul li:hover .imgbox img { transform:scale(1); }
.news-box .list ul li .arr { position:absolute; right:80px; top:50%; transform:translateY(-50%); width:94px; height:94px; }
.news-box .list ul li .arr:before {content:""; display:block; z-index:1; position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; background:url(../img/main/news_arr.png) no-repeat center center; transition:all 0.5s; }
.news-box .list ul li .arr .circle { stroke:#be3238; fill:none; stroke-width:0.5; stroke-dasharray:100; stroke-dashoffset:100; transition:all 0.5s; }
.news-box .list ul li:hover .arr .circle { stroke-dashoffset:0;  }
.news-box .list ul li:hover .arr:before { opacity:1; }

@media screen and (max-width:1640px){
    .news-box .title-box h4 { font-size:70px; }
    .news-box .list ul li a { padding:55px 140px 55px 355px; }
    .news-box .list ul li .arr { right:60px; width:84px; height:84px; }
}
@media screen and (max-width:1400px){
    .news-box { padding:180px 60px 150px; }
    .news-box .title-box h4 { font-size:55px; }
    .news-box .title-box p { font-size:22px; margin-top:32px; }
    .news-box .tabmenu li a { font-size:19px; height:72px; padding:0 45px; }
    .news-box .list ul li a { padding:45px 130px 45px 300px; }
    .news-box .list ul li a strong { padding-left:60px; font-size:18px; }
    .news-box .list ul li a .txt { font-size:28px; }
    .news-box .list ul li a .date { margin-top:25px; font-size:15px; }
    .news-box .list ul li .imgbox { right:-150px; width:470px; height:470px; }
    .news-box .list ul li .arr { right:40px; width:74px; height:74px; }
}
@media screen and (max-width:1023px){
    .news-box .title-box p { font-size:20px; margin-top:28px; margin-left:0;}
    .news-box .listbox { padding-top:50px; }
    .news-box .tabmenu { position:relative; right:unset; top:unset; z-index:2; text-align:center; }
    .news-box .tabmenu > ul {justify-content:center; }
    .news-box .tabmenu li a { font-size:17px; height:60px; padding:0 30px; }
    .news-box .list { margin-top:50px; }
    .news-box .list ul li a { padding:30px 120px 30px 180px; }
    .news-box .list ul li a strong { padding-left:40px; font-size:16px; }
    .news-box .list ul li a .txt { font-size:22px; }
    .news-box .list ul li a .date { margin-top:20px; font-size:15px; }
    .news-box .list ul li .imgbox { right:-120px; width:350px; height:350px; }
    .news-box .list ul li .arr { right:20px; width:64px; height:64px; }
}
@media screen and (max-width:960px){
    .news-box .list ul li .imgbox,
    .news-box .list ul li .imgbox:hover,
    .news-box .list ul li .imgbox img,
    .news-box .list ul li .imgbox:hover img,
    .news-box .list ul li .arr  { display:none }
    .news-box .list ul li a { padding:30px 30px 30px 180px; }
}
@media screen and (max-width:640px){
    .news-box { padding:80px 20px 80px; }
    .news-box .title-box p { font-size:16rem; margin-top:22px; }
    .news-box .listbox { padding-top:30px; }
    .news-box .tabmenu ul { width:100%; max-width:400px; margin:0 auto }
    .news-box .tabmenu li { width:calc(33.333% + 4px);  }
    .news-box .tabmenu li a { font-size:16px; height:50px; padding:0; }
    .news-box .list { margin-top:30px; }
    .news-box .list ul li a { padding:20px; }
    .news-box .list ul li a strong { position:relative; left:0; top:0; transform:translateY(0); padding-left:0; font-size:16px; display:block; margin-bottom:10px; }
    .news-box .list ul li a .txt { font-size:18px; -webkit-line-clamp:2; }
}