@charset "utf-8";

/*
* File       : layout.css
* Author     : B-WORKER
* Dependency : css/reset.css
*      
 * SUMMARY:
 * 1) MAIN animation
 * 2) MAIN CONTENTS
*/

/* **************************************** *
 * 사이트 시작시 커버
 * **************************************** */
.main-cover{position:fixed; opacity:1; visibility:visible; top:0; left:0; z-index:999; width:100%; height:100%; background:#121212; transition:all 1.2s ease 0s;}
.motion-on .main-cover{opacity:0; visibility:hidden;}

/* **************************************** *
 * Main animation set
 * **************************************** */
[data-txt-motion]{}
[data-txt-motion="hidden"]{overflow:hidden;}
[data-txt-motion="hidden"] > span{display:block; opacity:0;}

.swiper-slide-active [data-txt-motion="hidden"] > span{animation:text_hidden_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="left"]{animation:text_left_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="right"]{animation:text_right_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="up"]{animation:text_up_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="down"]{animation:text_down_motion 1.6s ease 0.1s forwards;}

.main-visual__text [data-txt-motion="hidden"]{opacity: 1;}
.main-visual__bg i{transform: scale(1.2); transition:transform 15s ease;}
.swiper-slide-active .main-visual__bg i{transform: scale(1);}

@keyframes text_hidden_motion {
 from{opacity:0; transform:translateY(70rem);}
 to{opacity:1; transform:translateY(0);}
}
@keyframes text_left_motion {
 from{opacity:0; transform:translateX(70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_right_motion {
 from{opacity:0; transform:translateX(-70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_up_motion {
 from{opacity:0; transform:translateY(70rem);}
 to{opacity:1; transform:translateX(0);}    
}
@keyframes text_down_motion {
 from{opacity:0; transform:translateY(-70rem);}
 to{opacity:1; transform:translateX(0);}
}

/* **************************************** *
 * Site custom
 * **************************************** */
 .main body{background-color:#0A0A12}
main section{z-index: 1; position: relative;}

/* main visual */
.main-visual{height:var(--height-full); position: relative; /*background: url(../img/main/main-video.gif) no-repeat;*/background-size: 78%;background-position: 50% 50%;}
.main-visual::before{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%;  background: linear-gradient(180deg, rgba(10, 10, 18, 0.50) 0%, rgba(10, 10, 18, 0.00) 27.02%), linear-gradient(180deg, rgba(10, 10, 18, 0.00) 52.55%, #0A0A12 100%), linear-gradient(90deg, rgba(10, 10, 18, 0.00) -7.06%, rgba(10, 10, 18, 0.52) 100%), linear-gradient(270deg, rgba(10, 10, 18, 0.00) 0%, rgba(10, 10, 18, 0.50) 100%);}

.main-visual__text--wrap{position:absolute; bottom: 60rem; width:100%;  color:#fff; z-index: 1;}
.main-visual__text--wrap .wrap{justify-content: space-between; align-items: flex-end;}
.main-visual__text h2{overflow:hidden;line-height:116%; font-weight:400; font-size:97rem; font-family: var(--lang-en-title); letter-spacing:-0.97rem;}
.main-visual__text p{margin-top:37rem;font-weight:500;font-size:22rem; line-height: 1.727; font-family: var(--lang-en-title); }

.main-visual__bar{position:absolute; bottom:0; z-index:50; width:100%; height:10rem; background:rgba(255,255,255,0.3);}
.main-visual__bar > i{position:absolute; width:0%; height:100%; background:var(--c-01);}
.main-visual .swiper-slide-active .main-visual__bar > i{ width: 100%; transition: var(--progress-duration) linear; }

.main-visual__play{position:absolute; top:50%; left:0; z-index:99999; background:#fff; font-size:30rem; cursor:pointer;}
.main-visual__play:not(.on){opacity:0; visibility:hidden;}
.main-visual__play.on{opacity:1; visibility:visible;}

video.video{height:85vh;}
.video-wrap{display:flex; justify-content:center; align-items:center; height:100%;}
.video-wrap iframe{position:relative !important; height:80% !important;}

@media (max-width:1480px){
    .main-visual__text h2{font-size: 80rem;}
}
@media (max-width:1200px){


}

@media (max-width:1023px){
	.main-visual{min-height: 600rem;}
}

@media (max-width:860px){
	
    .main-visual__text h2{font-size: 64rem;}
    .main-visual__text p{font-size: 17rem; font-weight: 400;}
}

@media (max-width:540px){

    .main-visual{background-size: 120%; background-position: 50% 35%;}

	.main-visual__text{top:260rem;}
	.main-visual__text h2{line-height:1.2; font-size:40rem; font-weight: 500;}
	.main-visual__text p{margin-top:10rem; font-size:15rem;}
	.main-visual__count{margin:0 10rem; font-size:15rem;}
	.main-visual__btn{font-size:14rem;}
	
	[fullpage-ani]{opacity: 1 !important; transform:none !important;}
}


.main-intro{padding-top: 131rem; padding-bottom: 122rem; background: linear-gradient(180deg, rgba(10, 10, 18, 0.00) 0%, #0A0A12 95.01%);}
.main-intro .comm-title{text-align: center; margin-top: 85rem;}
.main-intro img{max-width: 1190rem; width: 100%; display: block; margin: 0 auto;}
.main-intro .btn-wrap{margin-top: 60rem; justify-content: center;}

.main-title--wrap{justify-content: space-between; align-items: flex-end;}

.main-customized{background-color: #191825; border-radius: 90rem; padding: 120rem 0;}
.main-customized .comm-title{text-align: center;}
.main-customized .btn-wrap{justify-content: center;}

.compare-choose{justify-content: center; margin: 88rem auto 57rem;}
.compare-choose__box{border: 0; background-color: none;}
.compare-choose__box li + li:last-child{margin-top: 26rem; background-color: var(--c-primary); font-size: 19rem; font-weight: 500; height: 90rem; justify-content: center;}
.compare-choose__box li{height: 70rem;}
.compare-choose__box li:last-child::before{width: 32rem; height: 46rem; background-image:url(../img/main/ic-compare.svg); }
.compare-choose__part{max-width: 392rem;}
.compare-hoose__desc{display: flex; gap: 14rem; flex-direction: column; justify-content: center; align-items: center;}
.compare-choose__icon{display: flex; align-items: center; justify-content: center; gap: 19rem;}

.main-logo{text-align: center;padding-top: 140rem;padding-bottom: 0;background: linear-gradient(180deg, rgba(10, 10, 18, 0.00) 0%, #0A0A12 95.01%);}
.main-logo .btn-wrap{margin-top: 52rem; justify-content: center;}
.main-logo .rolling-img{margin-top: 106rem;}

.main-comparision{text-align: center;padding-top: 140rem;padding-bottom: 0;}
.main-comparision .wrap{align-items: center;}
.main-comparision .comm-title{}
.main-comparision {
    --cols: 20% 27% 22% 22% 9%;
    --border: #1a1a1d;
    --text-dim: #888;
    --text-faint: #666;
    --accent: #7580bd;
  }
  
  /* wrapper */
  .main-comparision .table-outer {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    margin-top: 52rem;
    min-width: 880rem;
  }
  
  .main-comparision .table-wrap {
    border: 1px solid #14141c;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
  }
  
  /* fade */
  .main-comparision .table-wrap::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 80px;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.9));
    pointer-events: none;
  }
  
  /* grid */
  .main-comparision .grid,
  .main-comparision .body {
    display: grid;
    grid-template-columns: var(--cols);
  }
  .main-comparision .body {
    grid-column: 1 / -1;
    grid-template-rows: repeat(12, 1fr);
  }
  
  /* header */
  .main-comparision .grid > .head {
    grid-row: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: #d4d4dc;
    text-transform: uppercase;
    padding: 16px 12px;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.06);
}
.main-comparision .head.h2, .main-comparision .head.h3, .main-comparision .head.h4 {
    border-left: 1px solid var(--border);
}
.main-comparision .head.h2 {
    grid-column: 2;
}
.main-comparision .head.h5 {
    grid-column: 5;
    border-left: 1px dashed rgba(138, 138, 149, 0.28);
    color: var(--text-faint);
    background: rgba(255, 255, 255, 0.02);
    letter-spacing: 0.14em;
}
.main-comparision a.head.h5 {
    text-decoration: none;
    cursor: pointer;
}
.main-comparision a.cell.ghost-col {
    text-decoration: none;
    cursor: pointer;
}
.main-comparision .cell.pixel, .main-comparision .cell.product {
    min-height: 96px;
}
.main-comparision .cell.pixel.r1 {
    grid-column: 1;
    grid-row: 1 / span 3;
}
.main-comparision .cell.pixel.r2 {
    grid-column: 1;
    grid-row: 4 / span 3;
}
.main-comparision .cell.pixel.r3 {
    grid-column: 1;
    grid-row: 7 / span 3;
}
.main-comparision .cell.pixel.r4 {
    grid-column: 1;
    grid-row: 10 / span 3;
}
.main-comparision .cell.product.r1 {
    grid-column: 2;
    grid-row: 1 / span 3;
}
.main-comparision .cell.product.r2 {
    grid-column: 2;
    grid-row: 4 / span 3;
}   
.main-comparision .cell.product.r3 {
    grid-column: 2;
    grid-row: 7 / span 3;
}
.main-comparision .cell.product.r4 {
    grid-column: 2;
    grid-row: 10 / span 3;
}
.main-comparision .cell.orient.r1 {
    grid-column: 3;
    grid-row: 1 / span 4;
}
.main-comparision .cell.orient.r2 {
    grid-column: 3;
    grid-row: 5 / span 4;
}
.main-comparision .cell.orient.r3 {
    grid-column: 3;
    grid-row: 9 / span 4;
}
.main-comparision .cell.viewers.r1 {
    grid-column: 4;
    grid-row: 1 / span 4;
}
.main-comparision .cell.viewers.r2 {
    grid-column: 4;
    grid-row: 5 / span 4;
}
.main-comparision .cell.viewers.r3 {
    grid-column: 4;
    grid-row: 9 / span 4;
}
.main-comparision .cell.ghost-col {
    grid-column: 5;
    grid-row: 1 / span 12;
    border-left: 1px dashed rgba(138, 138, 149, 0.28);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--text-faint);
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.012) 0 6px, transparent 6px 12px);
}
.main-comparision .icon-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.main-comparision .table_wrapper {
    overflow-x: auto;
    width:100%;
    overflow-y: hidden;
}
.main-comparision .table-desc {
    color:#fff;
}
.main-comparision .icon-cell .caption {
    font-size: 11px;
    color: var(--text-dim);
}
.main-comparision .icon-cell svg {
    display: block;
    width: auto;
    height: 40px;
}
.main-comparision .product {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.15;
}
.main-comparision .product .suffix {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.main-comparision .cell.product.r1, .main-comparision .cell.product.r2, .main-comparision .cell.product.r3, .main-comparision .cell.product.r4, .main-comparision .cell.orient.r1, .main-comparision .cell.orient.r2, .main-comparision .cell.orient.r3, .main-comparision .cell.viewers.r1, .main-comparision .cell.viewers.r2, .main-comparision .cell.viewers.r3 {
    border-left: 1px solid var(--border);
}
  .main-comparision .head.ghost {
    border-left: 1px dashed #444;
  }
  .main-comparision .cell.ghost-col .more-text {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 600;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}
.main-comparision .cell.ghost-col {
    grid-column: 5;
    grid-row: 1 / span 12;
    border-left: 1px dashed rgba(138, 138, 149, 0.28);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--text-faint);
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.012) 0 6px, transparent 6px 12px);
}
.main-comparision .cell.ghost-col .plus {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px dashed rgba(138, 138, 149, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    color: var(--text-dim);
}
  /* cell */
  .main-comparision .cell {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 0;
  }
  
  /* column borders */
  .main-comparision .cell[data-col="2"],
  .main-comparision .cell[data-col="3"],
  .main-comparision .cell[data-col="4"] {
    border-left: 1px solid var(--border);
  }
  
  /* row span logic */
  .main-comparision .pixel,
  .main-comparision .product {
    --row-span: 3;
  }
  
  .main-comparision .orient,
  .main-comparision .viewers {
    --row-span: 4;
  }
  .main-comparision .pixel-circle {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    margin: 0 auto;
    background: #050505;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 0 1px #1a1a1d;
}
.main-comparision .pixel-circle svg, .main-comparision .pixel-circle img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast;
}
  
  .main-comparision .cell {
    grid-row: calc((var(--row-index) - 1) * var(--row-span) + 1)
              / span var(--row-span);
  }
  
  /* product */
  .main-comparision .product {
    flex-direction: column;
  }
  
  .main-comparision .product .name {
    font-size: 16px;
    font-weight: bold;
    color: var(--accent);
  }
  
  .main-comparision .product .suffix {
    font-size: 13px;
    color: #fff;
  }
  
  /* icon */
  .main-comparision .icon-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  
  /* ghost */
  .main-comparision .ghost-col {
    grid-column: 5;
    grid-row: 1 / -1;
    border-left: 1px dashed #444;
    flex-direction: column;
    gap: 10px;
  }
  
  .main-comparision .plus {
    width: 36px;
    height: 36px;
    border: 1px dashed #666;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .main-comparision .more-text {
    font-size: 10px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }
  
  /* note */
  .main-comparision .table-note {
    margin-top: 12px;
    text-align: center;
    font-size: 12px;
    color: #777;
  }

.main-case{overflow: hidden; background: linear-gradient(180deg, rgb(10 10 18 / 0%) 0%, #0A0A12 25.96%, rgba(10, 10, 18, 0.60) 78%, rgba(10, 10, 18, 0.20) 100%);padding-bottom: 173rem;padding-top: 173rem;}
.main-case .wrap{align-items: center;}
.main-case .comm-title{min-width: 560rem;}
.main-case .swiper-slide{background:transparent; flex-direction: column;}
.main-case .swiper-slide figure{aspect-ratio: 1 / 1; border-radius: 24rem;}
.main-case .swiper-slide strong{color: var(--w); display: block; margin-top: 20rem;}
.main-case__slide{width: calc(45.9vw + (min(1520rem,90%)/2));margin-right:calc(50% - 50vw);overflow:visible;padding-right:40rem;padding-left: 122rem;}

@media (max-width:1480px){

    .main-case__slide{width: calc(45.9vw + (min(1520rem,60%)/2));}
}

@media all and (max-width:1200px){
	.main-customized{border-radius: 60rem;}
    .main-case .swiper-slide strong{font-size: 17rem;} 
}
@media all and (max-width:1023px){
	.compare-choose{margin: 54rem auto;}
    .main-customized{padding: 100rem 0;}
    .main-intro{padding-top: 100rem; padding-bottom: 100rem;}
    .main .rolling-img img{height: 36rem;}
    .main-case .wrap{display: block;}
    .main-case__slide{width: 100%; margin-right: 0; padding: 0; margin-top: 32rem;}
    .main-case{padding: 120rem 0 100rem;}
    .main-logo{overflow: hidden;}
    
}
@media (max-width:860px){

}
@media (max-width: 540px){

    .main-customized{border-radius: 40rem;}    

    .main-customized{padding:  64rem 0;}
    .main-intro{padding-top: 40rem; padding-bottom: 70rem;}
    .main-intro .comm-title{margin-top: 52rem;}

    .main .rolling-img img{height: 22rem;}

    .main-logo{padding-top: 100rem;}
    .main-logo .rolling-img {margin-top: 66rem;}
	.main-logo .comm-title p br {display: none;}

    .main-case{padding: 100rem 0;}
    .main-case .comm-title{min-width: fit-content;}
    .main-case .swiper-slide figure{border-radius: 14rem;}
    .main-case .swiper-slide strong{margin-top: 14rem; font-size: 15rem;}
	.main-case .swiper-container {width: 106%;}
    .main-title--wrap{flex-direction: column;}   

}

.main-board{ padding-bottom: 180rem; background-color: rgba(10, 10, 18, 0.20);}
.main-board__list{padding-top: 80rem;}

.main-contact{ }
.main-contact__box{background-color: var(--c-secondary); border-radius: 60rem; padding: 70rem 87rem 70rem; }
.main-contact__box h3{font-size: 60rem;  line-height: 124%; color: #8896FF; font-family: var(--lang-en-title); font-weight: 400;}
.main-contact__box h3 .point{color: var(--w); }
.main-contact__box p{margin-top: 30rem; color: var(--w); font-weight: 300;}
.main-contact__box p b{font-weight: 600;}
.main-contact__box .btn-wrap{margin-top: 98rem; justify-content: flex-end;}

.main-backgroundVideo{position: fixed;top: 0;left: 0;width: 100%;height: 100vh;}
.main-backgroundVideo::before{content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0;  background-image: url(../img/main/main-video_cover.png);  background-size: cover;}
.main-backgroundVideo video{ width: 100%;}

/* **************************************** *
*  footer
* **************************************** */
.main #footer .footer-gnb__menu li:nth-child(1) a{color: var(--c-primary); opacity: 1;}



@media all and (max-width:1200px){
    .main-board{padding-bottom: 130rem;}
	.main-contact__box{border-radius: 60rem;}
}
@media all and (max-width:1023px){
	/*화면 768에 맞춰놓고 작업*/

    .main-board{padding-bottom: 100rem;}
    .main-contact__box{padding: 47rem; border-radius: 45rem;}
    .main-contact__box h3{font-size: 45rem;}
}
@media (max-width:860px){

    .main-contact__box p{margin-top: 20rem;}
}
@media (max-width: 540px){
	.main-contact__box{border-radius:22rem; padding: 28rem;}
	.main-contact__box h3{font-size: 28rem;}
	.main-contact__box .btn-wrap{margin-top: 60rem;}   
    
    .main-board .btn-wrap{margin-top: 30rem; justify-content: center;}
    .main-board  .btn-wrap .btn-base{display: flex !important;}
    .main-board__list{padding-top: 34rem;}
}