#content{position:relative;padding-bottom:80px;background: linear-gradient(180deg, #171717 0%, #2B2D31 50.52%, #171717 100%);overflow: hidden;}

/*bg*/
.bg{background: url(../img/img-main-bg.png) 50% 50%/100% no-repeat;width:2720px;aspect-ratio:16/9;position: absolute;top:-5%;left:50%;margin-left:-1360px;}
#news .bg{top:-130%;left:0%;}
#contact .bg{top:-95%;left:50%;}

/* common */
.grid3{display: grid;grid-template-columns: repeat(3, 1fr);gap:32px 1.5rem;}
.grid2{display: grid;grid-template-columns: repeat(2, 1fr);gap:24px;justify-content:space-between;}
.row{display:flex;flex-direction:row;}
.column{display:flex;flex-direction:column;}
.btn-modal{margin-left:auto;cursor: pointer;}
.btn-modal.close{background:url(../img/btn-close.png) center/40px no-repeat;width:80px;height:80px;border:1px solid  #00D233;border-radius:50%;}

/* section - common */
.section{position:relative;margin:0 auto;width:100%;}
.section-wrap{position:relative;width:1200px;margin:160px auto;z-index:1;}
.last .section-wrap{position:relative;width:1200px;margin:160px auto 0;}
.section-wrap h3{text-align:center;max-height:40px;margin-bottom:64px;}
.section-wrap h3 img{height:40px;}
.section-cont{color:#e7e7e7;}
.section-cont .tit{display:-webkit-box;font-size:24px;line-height: 32px;font-family:'SUIT';font-weight: 600;white-space:normal;text-overflow:ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp:2;overflow:hidden;}
.section-cont .tit.big{font-size:32px;font-weight:700;}
.section-cont .sub{display:-webkit-box;font-size:16px;line-height: 32px;font-family:'SUIT';font-weight: 200;white-space:normal;text-overflow:ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp:2;overflow:hidden;}
.section-cont .sub.big{font-size:24px;font-weight: 300;}
.section-cont .sub.regular{font-weight: 300;}
.section-cont .sub.dark{color:#5e5e5e;}
.section-cont .sub.light{font-weight: 100;}

.section-cont a{display:block;}
.section-cont .img-box{display: block;position: relative;aspect-ratio:16/9;overflow: hidden;margin-bottom:24px;}
.section-cont .img-box img{position: absolute;top: 50%;left: 50%;width: 100%;height: auto;display: block;transform: translate(-50%, -50%);}
.section-cont .txt-box{display:flex;flex-direction:column;}
.section-cont .txt-box .sub{margin-top:8px;}
.section-cont .iframe-box{width:100%;min-height:331px;aspect-ratio:16/9;margin-bottom:24px;}
.section-cont .iframe-box iframe{width:100%;height:100%;}

/* section - 메인 */
.main{text-align:center;position:relative;min-width:1200px;margin:0 auto;padding:246px 0 63px;min-height:520px;background:#000;}
.main-txt{position:relative;z-index:1;}
.main-txt h2{width:700px;height:96px;margin:0 auto 57px; background:url(../img/vertigo-main-txt.png)no-repeat;background-size:contain;}
.main-txt-sub{display: flex;width: 1200px;margin: 108px auto 0;position:relative;z-index:3;align-items:center;}
.main-txt-sub .tit{min-width:296px;text-align:left;}
.main-txt-sub .desc{flex-grow:1;color:#e7e7e7;text-align:left;font-family:'SUIT';font-weight:300;line-height:32px;}
.main-video{width:1200px;margin:0 auto;position:relative;z-index:2;}
.main-video .video-box{overflow:hidden;width:1200px;height:674px;border-radius:8px;
  box-sizing: border-box;border: 1px solid transparent;background: linear-gradient(153deg, rgba(44, 45, 47, 1) 18%, rgba(29, 31, 32, 1) 43%), linear-gradient(180deg, rgba(84, 84, 84, 1) 10%, rgba(0, 0, 0, 1) 25%, rgba(131, 131, 131, 1) 49%, rgba(10, 10, 10, 1) 82%, rgba(102, 102, 102, 1) 91%);background-origin: border-box;background-clip: content-box, border-box;}
.main-video .video-box video {border-radius:8px}
.main-bg {position:absolute;left:50%;top:80px;z-index:1;width:1920px;height:1282px;background:url(../img/img-main-bg2.png) no-repeat 0 0;background-size:1920px auto;transform:translate(-50%, 0);}
.main .txt-since2002 {position:relative;z-index:3;display:block;width:190px;height:24px;margin:30px auto 0;background:url(../img/img-txt-since2002.png) no-repeat;background-size:190px auto}

/* section - features */
.features .img-box{display:none !important;}
.features .txt-box{display:block;padding:40px 0;border-bottom:1px solid #393b42;text-align:center;}
.features .txt-box .tit{min-width:296px;flex-shrink:0;}
.features .txt-box .sub{display:block;margin-top:16px;font-weight:300;line-height:28px;}
.features .txt-box .btn-modal{margin-left:auto;width:80px;height:80px;background:transparent;border:1px solid  #00D233;border-radius:50%;cursor: pointer;flex-shrink: 0;}
.features .txt-box .btn-modal.open{background:url(../img/btn-open.png) center/40px no-repeat;}
.features .txt-box .btn-modal.close{background:url(../img/btn-close.png) center/40px no-repeat;}
.features .cont-box:first-child .txt-box{padding-top:0;}

/* section - news */
#news .slider{overflow:hidden;}
.section-meun {display:flex;justify-content:center;gap:24px;margin-bottom:32px;}
.section-meun li button {display:block;height:34px;padding:0 24px;box-sizing:border-box;border:1px solid #393B42;font-family: 'SUIT', sans-serif;font-weight:300;font-size:16px;line-height:34px;background-color:#202124;border-radius:24px;color:#E7E7E7}
.section-meun li.active button {border-color:#00D233;color:#00D233;}

.section-cont.slider .img-box {position:relative;border-radius:8px;;background: linear-gradient(180deg, rgba(84,84,84,1) 10%, rgba(0,0,0,1) 25%, rgba(131,131,131,1) 49%, rgba(10,10,10,1) 82%, rgba(102,102,102,1) 91%);box-sizing:border-box;}
.section-cont.slider .img-box img {width:382px;height:214px;border-radius:8px;}
.section-cont.slider .swiper-scrollbar {width:100%;right:0;left:0;background:#393B42;}
.section-cont.slider .swiper-scrollbar-drag {right:0;background:#5e5e5e;}

#news .section-cont.slider {visibility:hidden;height:0;padding-bottom: 0}
#news .section-cont.slider.active {visibility:visible;height:auto;padding-bottom: 64px;}


/* section - use case */
#case .section-cont{}
.circle.row{display:flex;justify-content:center;gap:6px;margin-bottom:32px;}
.circle .cont-box{flex-shrink:0;text-align:center;}
.circle .img-box{position:relative;width:188px;height:188px;margin-bottom:8px}
.circle .img-box:after {position:absolute;left:50%;top:50%;width:188px;height:188px;transform:translate(-50%, -50%);background:url(../img/img-case-line.png) no-repeat;background-size:188px auto;content:""}
.circle .img-box a {display:block;width:100%;height:100%}
.circle .img-box img{width:172px;border-radius:50%;overflow:hidden;}
.circle .cont-box .sub {font-weight:400;}

.area-box {display:flex;justify-content:flex-end;gap:8px;}
.area-box .box-wrap {width:50%;justify-content:center;border-radius:16px;box-sizing:border-box;border:1px solid transparent;background:linear-gradient(153deg, rgba(44, 45, 47, 1) 18%, rgba(29, 31, 32, 1) 43%), linear-gradient(180deg, rgba(84, 84, 84, 1) 10%, rgba(0, 0, 0, 1) 25%, rgba(131, 131, 131, 1) 49%, rgba(10, 10, 10, 1) 82%, rgba(102, 102, 102, 1) 91%);background-origin:border-box;background-clip:content-box, border-box;}
.area-box .box-wrap strong {display:block;margin:32px 0;font-family:'SUIT', sans-serif;font-size:24px;font-weight:600;line-height:32px;text-align:center;}

.area-desc {display:none;padding-top:56px;}
.area-desc.active {display:block}
.area-desc p {margin-bottom:56px;font-family: 'SUIT', sans-serif;font-size:16px;font-weight:300;line-height:28px;text-align:center}
.area-desc .desc-img {display:flex;justify-content:space-between;}
.area-desc .case-img {width:828px;height:476px;}
.area-desc img {width:100%;height:auto}
.area-desc .case-qr {padding-top:62px}
.area-desc .case-qr strong {position:relative;display:block;height:48px;box-sizing:border-box;font-family: 'SUIT', sans-serif;font-size:16px;font-weight:500;line-height:48px;text-align:center;border-radius:32px;border: 1px solid transparent;background:linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)), linear-gradient(166deg, rgba(76, 183, 72, 1) 8%, rgba(76, 183, 72, 1) 21%, rgba(217, 255, 226, 1) 39%, rgba(217, 255, 226, 1) 59%, rgba(0, 65, 16, 1) 74%, rgba(0, 92, 22, 1) 94%);background-origin:border-box;background-clip: content-box, border-box;}
.area-desc .case-qr strong::after {position:absolute;left:50%;bottom:-56px;width:32px;height:40px;background:url(../img/arrow-qr.png) no-repeat;background-size:32px auto;transform:translate(-50%, 0);content:""}
.area-desc .case-qr strong span {padding:0 24px}
.area-desc .case-qr .area-qr {width:230px;height:230px;margin:72px auto 0}

/* section - products */
.diagram .diagram-list{display: grid; grid-template-columns: repeat(3, 1fr); gap:0 24px;}
.diagram .diagram-list li{position: relative;min-height: 640px;border: 2px solid transparent;border-radius: 40px;background: linear-gradient(132.56deg, #2C2D2F 0%, #1D1F20 48%) padding-box, linear-gradient(307.44deg, rgba(94, 94, 94, 0.24) 0%, rgba(0, 0, 0, 0) 67%, #4CB748 100%) border-box;padding: 56px 32px 44px;box-sizing: border-box;display: grid;gap: 32px 0;grid-template-rows:auto auto auto 1fr auto;}
.diagram .diagram-list .title{font-size: 32px;font-weight: 700;line-height: 32px;font-family: 'SUIT',sans-serif;}
.diagram .diagram-list .label {display:inline-block;}
.diagram .diagram-list .label .txt {display:inline-block;line-height:20px;font-family:'SUIT', sans-serif;font-weight:500;font-size:16px;font-style:normal;border-radius:24px;border: 1px solid transparent;background:linear-gradient(#202124, #202124),linear-gradient(146deg, rgba(0, 210, 51, 1) 42%, rgba(32, 144, 255, 1) 100%);background-origin:border-box;background-clip: content-box, border-box;}
.diagram .diagram-list .label .txt span {display:inline-block;padding:6px 24px 7px;background: linear-gradient(146deg, rgba(0, 210, 51, 1) 42%, rgba(32, 144, 255, 1) 100%);color: transparent;-webkit-background-clip: text;text-align:center;}
.diagram .diagram-list .desc{font-size: 16px;font-weight: 400;line-height: 28px;font-family: 'SUIT', sans-serif;}
.diagram .diagram-list .text{position:relative;padding-left:15px;font-family: 'SUIT',sans-serif;font-size: 16px;font-weight: 100;line-height: 28px;color: #fff;}
.diagram .diagram-list .text::before {position:absolute;left:0;top:12px;width:4px;height:4px;background:#fff;border-radius:50%;content:"";}
.diagram .diagram-list .img{display: block;}
.diagram .diagram-list .img img{width: 100%; display: block;}


/* section - contact us*/
.contact{display: flex;gap: 124px;justify-content: center;padding: 36px 0 120px;max-height:270px;}
.contact ul{text-align:center;}
.contact .sub{margin-top:16px;}
.section-cont .copy{text-align:center;display:block;font-weight:100;}

/* Marquee */
.marquee{width:100%;height:124px;background:#00D233;}
.marquee-track{width:100%;padding:24px 0;position: relative;}
.marquee-track-list{position: absolute; height: auto;}
.marquee-track-list .list-box{white-space: nowrap;display: flex;position: relative;will-change: transform;}
.marquee-track-list .txt{font-weight:600;font-size:24px;line-height: 32px;font-family:'SUIT';color:#26272A;padding-right:40px;}
.marquee-track-list .txt:nth-child(2n){color:#E7E7E7;}

.marquee-track-list.original.toLeft{animation: 80s linear 0s infinite normal forwards running toLeft1;}
.marquee-track-list.clone.toLeft{animation: 80s linear 0s infinite normal none running toLeft2;}

@keyframes toLeft1 { /* 원본용 - 왼쪽방향 */
  0% {transform: translateX(0);}
  50% {transform: translateX(-100%);}
  50.01%{transform: translateX(100%);}
  100%{transform: translateX(0);}
}

@keyframes toLeft2 { /* 클론용 - 왼쪽방향 */
  0% {transform: translateX(0);}
  100% {transform: translateX(-200%);}
}

.marquee-track-list.original.toRight{animation: 100s linear 0s infinite normal forwards running toRight1;}
.marquee-track-list.clone.toRight{animation: 100s linear 0s infinite normal none running toRight2;}

@keyframes toRight1 { /* 원본용 - 오른쪽방향 */
  0% {transform: translateX(0);}
  50% {transform: translateX(100%);}
  50.01%{transform: translateX(-100%);}
  100%{transform: translateX(0);}
}

@keyframes toRight2 { /* 클론용 - 오른쪽방향 */
  0% {transform: translateX(0);}
  100% {transform: translateX(200%);}
}

/* modal */
.modal{position:fixed !important;top:0;left:0;bottom:0;right:0;width:100%;height:100vh;z-index:1000;background:rgba(17,17,17,.96);display:none;}
.modal.on{display:block;}
.modal-wrap{width:1200px;aspect-ratio:3/2;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;}
.modal-wrap .img-box{display: block;position: relative;aspect-ratio:16/9;overflow: auto;margin-bottom:40px;width:100%;}
.modal-wrap .img-box::-webkit-scrollbar {width: 4px;}
.modal-wrap .img-box::-webkit-scrollbar-thumb {background: #393B42;border-radius: 24px;}
.modal-wrap .img-box::-webkit-scrollbar-track {background: #111;border-radius: 24px;}
.modal-wrap .img-box img{position: absolute;top: 0;left: 0;right:0;width:100%;height:auto;display: none;margin:auto;transform: translate(0%, 0%);}
.modal-wrap .img-box video{display: none;}
.modal-wrap .txt-box{padding: 0;flex-direction: column;align-items: flex-start;position: relative;border: none;gap:16px;}
.modal-wrap .txt-box .tit{margin-right:80px;}
.modal-wrap .txt-box .sub{margin-right:80px;display:flex;flex-direction:column;}
.modal-wrap .txt-box .btn-modal{position:absolute;right:0;top:0;}