:root{--ani:cubic-bezier(.32,.94,.6,1)}

.sub .xgap1 {--x-gap:1rem}
.sub .xgap2 {--x-gap:2rem}
.sub .xgap3 {--x-gap:3rem}
.sub .xgap4 {--x-gap:4rem}
.sub .xgap5 {--x-gap:5rem}
.sub .xgap6 {--x-gap:6rem}

.sub .ygap0 {--y-gap:0rem}
.sub .ygap1 {--y-gap:1rem}
.sub .ygap2 {--y-gap:2rem}
.sub .ygap3 {--y-gap:3rem}
.sub .ygap4 {--y-gap:4rem}
.sub .ygap5 {--y-gap:5rem}



.sub .subTit {font-size: 2rem; font-weight: 700;}
.sub .Line {width: 2.5rem; height: .25rem; background-color: var(--pointcolor);}
.sub .Line.Wh {background-color: #fff;}

.sub .Bg_lightGr {background-color: rgba(168,168,168,.1);}
.sub .Bg_lightBl {background-color: rgba(50,50,123,.1);}

.sub .zum {position: relative; padding-left: 1rem;}
.sub .zum:after {content:'·'; position: absolute; left: 0; top:0;} 

.sub .dash {position: relative; padding-left: 1rem;}
.sub .dash:after {content:'-'; position: absolute; left: 0; top:0;} 

.sub .check {position: relative; padding-left: 1.8rem;}
.sub .check:after {content:''; width: 1.5rem; height: 1.4375rem; background-image: url('/img/sub/check.svg'); background-size: contain; background-repeat: no-repeat; position: absolute; left: 0; top:0;}

.sub .check2 {position: relative; padding-left: 1.8rem;}
.sub .check2:after {content:''; width: 1.5rem; height: 1.4375rem; background-image: url('/img/sub/check2.svg'); background-size: contain; background-repeat: no-repeat; position: absolute; left: 0; top:.125rem;}

.sub .mark {position: relative; padding-left: 1.8rem;}
.sub .mark:after {content:''; width: 1.5rem; height: 1.4375rem; background-image: url('/img/sub/mark.svg'); background-size: contain; background-repeat: no-repeat; position: absolute; left: 0; top:0;}

.sub .pointEn {font-family: var(--pointfont); color:var(--pointcolor)}

.sub .down {height: 2.125rem;}

.sub .video_box {width: 100%; aspect-ratio: 16 / 9; margin: auto;}
.sub .video_box iframe {width: 100%; height: 100%; object-fit: cover;}

.sub .ZT_TB {width: 100%; table-layout: fixed; border-spacing: 1rem 0;}
.sub .ZT_TB th b {color:var(--pointcolor);}
.sub .ZT_TB .Tit {width: 13rem;}
.sub .ZT_TB .Tit.Lg {width: 23rem;}
.sub .ZT_TB.Non .Tit {width: 40%;}
.sub .ZT_TB .Desc img {height: 12.5rem; margin: auto;}
.sub .ZT_TB .name th {padding: 1rem; border-bottom: 2px solid var(--pointcolor);}
.sub .ZT_TB td {padding: 1rem; border-bottom:1px solid var(--gray); vertical-align: middle;}
.sub .ZT_TB thead tr:hover {background-color: transparent;}
.sub .ZT_TB tr:hover {background-color: rgba(50,50,123,.05);}
.sub .ZT_TB tr:last-child td {border-bottom: 2px solid var(--pointcolor);}
.sub .ZT_TB .borderBT {border-bottom: 2px solid var(--pointcolor);}
.sub .ZT_TB span {font-size: 1rem; color: var(--gray);}
.sub .ZT_TB .checkDot {width: 1.3rem; height: 1.3rem; display: block; border-radius: 50%; background-color: var(--pointcolor); position: relative; margin: auto;}
.sub .ZT_TB .checkDot:after {content:''; width: 1rem; height: 1rem; background-image: url('/img/sub/check.svg'); filter: invert(1) brightness(5); display: block; background-size: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.sub .checkDotImg {width: 1.2rem;}

@media(max-width:990px) {
    .sub .scrollBox {overflow-x: scroll; padding-bottom: 3rem;}
    .sub .scrollBox::-webkit-scrollbar {height: .25rem;}
    .sub .scrollBox::-webkit-scrollbar-thumb {background: rgba(50,50,123,.2);}
    .sub .ZT_TB {min-width: 1000px;}
    .sub .ZT_TB.SM {min-width: 700px;}
    .sub .ZT_TB.Non {min-width: 100%;}
}



/* subTop */
.subTop {height:40.625rem; position:Relative; left:0; overflow: hidden; z-index: 3;}
.subTop .subTopImg {position:absolute; top:0; left:0; width:100%; height:100%; overflow: hidden; opacity:0; transform:scale(1.15); transition:transform 10s var(--ani);}
.subTop .subTopImg.on {opacity:1;transform:scale(1)}

.subTop .subTopVideo::after {content:''; width: 100%; height: 100%; background-color: rgba(0,0,0,.3); position: absolute; left: 0; top:0;}
.subTop .subTopVideo video {position: absolute; left: 0; top:0; object-fit: cover; width: 100%; height: 100%;}

.subTop .inner {position: relative; max-width: 1540px; width: 90%; top:15rem; margin: auto;}
.subTop .subTop_Tit {font-size: 3.75rem;}

#subnav {display: flex; align-items: center; justify-content: center; font-size: 1rem; position: absolute; bottom:2rem; left: 50%; transform: translateX(-50%); width: 95%;}
#subnav li {padding: 0 2rem; position: relative;}
#subnav li:after {content:''; width: .3125rem; height: .3125rem; background-color: #fff; border-radius: 50%; position: absolute; left: 0; top:0; bottom:0; margin: auto;}
#subnav li:first-child:after {display: none;} 
#subnav img {width: 1rem;}

@media(max-width:500px) {
    .subTop .subTop_Tit {font-size: 3rem;}
    #subnav {font-size: .8rem;}
    #subnav img {width: .8rem;}
    #subnav li {padding: 0 .8rem;}
}


/* introProduct */
.sub .introProduct .flexList {padding: 3rem; max-width: 1440px; margin-left: auto; margin-right: auto;}
.sub .introProduct .flexList.Lg {max-width:var(--layoutwidth);}
.sub .introProduct .box {background-color: #fff; border:1px solid var(--gray); transition: ease-in .3s;}
.sub .introProduct a:hover {box-shadow: 4px 8px 20px rgba(0,0,0,.25); transition: ease-in .3s;}
.sub .introProduct .TxtFlex {padding: 2.5rem; position: relative; display: flex; align-items: center; justify-content: space-between;} 
.sub .introProduct .TxtFlex.column {flex-direction: column; align-items: flex-start;}
.sub .introProduct .TxtInner {padding: 2.5rem;}
.sub .introProduct .DotBtn {position: relative; right:0; bottom:0;}

.sub .introProduct .ZT_Btn {padding: .5rem 2rem;}
.sub .introProduct .ZT_Btn span {font-size: 1.125rem; font-weight: 400;}

.sub .introProduct ul {width: fit-content; margin-left: auto; margin-right: auto;}

@media(max-width:768px) {
    .sub .introProduct .TxtFlex {flex-direction: column;}
    .sub .introProduct .TxtFlex .Txt {width: 100%;}
    .sub .introProduct .DotBtn {margin-left: auto;}
}
@media(max-width:500px) {
    .sub .introProduct .flexList {padding: 2rem;}
    .sub .introProduct .TxtFlex {flex-direction: row;}
}


/* intro */
.sub .intro .max1080 {max-width: 1080px; margin-left: auto; margin-right: auto;}
.sub .intro .Box2 .box {border-radius: 1.5rem; padding: 2rem;}
.sub .intro .introList {width: fit-content; margin-left: auto; margin-right: auto;}
.sub .intro .checkList {max-width: 990px; margin-left: auto; margin-right: auto;}
@media(max-width:768px) {
    .sub .intro .checkList {justify-content: flex-start;}
}


/* radiusBox */
.sub .radiusBox .Img {border-radius: 1.5rem; border:1px solid var(--gray); overflow: hidden;}



/* number */
.sub .number .box {border-radius: 1.5rem; background-color: #F5F5F5; padding: 2rem 2rem 3rem;}
.sub .number.Wh .box {background-color: #fff;}
.sub .number.border .box {background-color: #fff; border: 2px solid var(--pointcolor);}
.sub .number .Num {font-family: var(--pointfont); color:var(--pointcolor); text-align: right;}



/* certificate */
.sub .certificate ul {display: flex; justify-content: center; gap:1rem;}
.sub .certificate li {width: fit-content;}
.sub .certificate .Img {padding: 2rem; border: 1px solid var(--gray);}


/* merit */
.sub .merit .flexList {--y-gap:0;}
.sub .merit .box.Img {align-self: stretch; background: no-repeat center / cover; min-height: 31.25rem; background-color: #fff;}
.sub .merit .box.Img.contain {background-size: contain;}
.sub .merit .box.Img.aspect {aspect-ratio: 1 / 1; background-size: contain;}
.sub .merit .box.Txt {padding: 3rem;}
.sub .merit .box.Txt.Non {padding: 0 3rem;}
@media(max-width:768px) {
    .sub .merit .box.Txt {order:2;}
}
@media(max-width:500px) {
    .sub .merit .box.Txt {padding: 2rem 1.5rem;}
}


/* software */
.sub .software .box.Img {align-self: stretch; background: no-repeat center / cover; min-height: 48.125rem;}
.sub .software .box.Txt {padding: 4rem 3rem;}
.sub .software .box.Txt {padding: 4rem 3rem;}


/* meritList */
.sub .meritList .box {padding: 1rem; border:1px solid var(--pointcolor)}


/* part */
.sub .part .box {padding: 3rem 2rem; border-radius: 1.5rem; border: .125rem solid var(--pointcolor);}


/* apparatus */
.sub .apparatus .box.Img {align-self: stretch; background: no-repeat center / cover; min-height: 32.125rem;}
.sub .apparatus .box.Txt {padding: 4rem 3rem;}

.sub .apparatus .swiper-slide {background-color: #fff; height: auto;}
.sub .apparatus .swiper-pagination-progressbar {position: relative; margin-top: 2rem; background-color: #D9D9D9; height: .25rem;}
.sub .apparatus .swiper-pagination-progressbar-fill {background-color: var(--pointcolor);}

@media(max-width:768px) {
    .sub .apparatus .box.Txt {padding: 2rem 2rem;}
}



/* equipment */
.sub .equipment .Img {padding: 3rem 0; border:2px solid var(--pointcolor); display: flex; align-items: center; justify-content: center;}
.sub .equipment .Img.Non {padding: 0;}
.sub .equipment .Txt {padding: 0 1rem;}
.sub .equipment .RoundBox {background-color: var(--pointcolor); color:#fff; padding: .3rem 2rem; border-radius: 1.875rem; width: fit-content;}
.sub .equipment .Tit {font-size: 3.125rem; line-height: 1.2; font-weight: 300;}
.sub .equipment .Line {width: 100%; height: 1px; background-color: var(--pointcolor); margin: 2rem auto;}
.sub .equipment ul {display: flex; flex-direction: column; gap:1rem;}



/* markBox */
.sub .markBox .box {border-radius: 1.5rem; padding: 3rem; aspect-ratio: 5 / 3;}
@media(max-width:768px) {
    .sub .markBox .box {aspect-ratio: auto;}
}


/* start */
.sub .start .box {border-bottom:1px solid var(--pointcolor);}
.sub .start .Tit {padding: 1.5rem; background-color: #F5F5F8;}
.sub .start .Desc {padding: 1.5rem; align-self: stretch; border-top:1px solid var(--pointcolor);}


/* skill */
.sub .skill .ImgBox {position: relative; background: no-repeat center / cover; height: 62.5rem;}

.sub .skill .Tit {display: flex; align-items: center; gap:.5rem; color:var(--pointcolor)}
.sub .skill .Txt {padding-left: 2rem;}

.sub .skill .skillList {max-width: 1160px; width: 90%; margin: 5rem auto 0; display: flex; flex-direction: column; gap:1rem;}
.sub .skill .skillList li {display: flex; align-items: center; gap:0 3rem;}
.sub .skill .skillList .Img {width: 32%; background: no-repeat center / cover; min-height: 15.9375rem;}
.sub .skill .skillList .Desc {width: 65%; padding: 2rem 0;}

.sub .skill .Num {position: relative; padding-left: 2rem; color:var(--pointcolor);}
.sub .skill .Num:after {content:''; font-size: 1rem; font-weight: 600; width: 1.6rem; height: 1.6rem; aspect-ratio: 1 / 1; border-radius: 50%; border:.1563rem solid var(--pointcolor); text-align: center; position: absolute; left: 0; top:0;}
.sub .skill .Num1:after {content:'1';}
.sub .skill .Num2:after {content:'2';}
.sub .skill .Num3:after {content:'3';}
.sub .skill .Num4:after {content:'4';}
.sub .skill .Num5:after {content:'5';}
.sub .skill .Num6:after {content:'6';}
.sub .skill .Num7:after {content:'7';}
.sub .skill .Num8:after {content:'8';}
.sub .skill .Num9:after {content:'9';}
.sub .skill .Num10:after {content:'10';}


@media(max-width:768px) {
    .sub .skill .ImgBox {height: 40rem;}
}
@media(max-width:500px) {
    .sub .skill .skillList li {flex-direction: column;}
    .sub .skill .skillList .Img, .sub .skill .skillList .Desc {width: 100%;}
}



/* character */
.sub .character .characterList .box {padding: 3rem; border-radius: 1.5rem; border:2px solid var(--pointcolor); background-color: #fff;}
.sub .character .characterList img {width: 3.125rem;}



/* design */
.sub .design .box {border:1px solid var(--pointcolor); padding: 3rem; display: flex; flex-direction: column; gap:1rem;}



/* kind */
.sub .kind .box {border-radius: 1.5rem; background-color: #fff; padding: 2rem;}



/* option */
.sub .option .box {border-radius: 1.5rem; padding: 2rem 2rem 3rem; border:1px solid var(--gray);}
.sub .option .optionImg {width: 2.8125rem;}


/* zetecTab */
.sub .zetecTab .TabBox {display: flex; gap:1rem; position: relative;}
.sub .zetecTab .TabMenu {width: 17.5rem; display: flex; flex-direction: column; gap:.5rem; position: sticky; top:1.5rem; height: 100%;}
.sub .zetecTab .TabMenu li {padding: 1rem; background-color: #fff; border-right: 2px solid var(--pointcolor); opacity: .5; color:var(--gray); cursor: pointer;}
.sub .zetecTab .TabMenu li.active {opacity: 1; color:#000;}

.sub .zetecTab .TabContent {width: calc(100% - 18rem); height: 100%;}
.sub .zetecTab .TabContent .Img {background: no-repeat center / cover; align-self: stretch; min-height: 37.5rem;}
@media(max-width:990px) {
    .sub .zetecTab .TabContent .Img {order:2;}
}
@media(max-width:768px) {
    .sub .zetecTab .TabMenu {width: 10rem;}
    .sub .zetecTab .TabContent {width: calc(100% - 8rem);}
}
@media(max-width:500px) {
    .sub .zetecTab .TabBox {flex-direction: column;}
    .sub .zetecTab .TabMenu {width: 14rem;}
    .sub .zetecTab .TabContent {width: 100%;}
}




.comparison {max-width: 770px; width: 100%; aspect-ratio: 77 / 60; position: relative; overflow: hidden;}
.comparison.Min {min-height: 43.75rem;}
.comparison figure {position: relative; width: 100%; height: 100%; margin: 0; background-size: cover;}
.comparison .divisor {position: absolute; width: 50%; height: 100%; background-size: cover; overflow: hidden;}

.dragBar {position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background: #fff; z-index: 10; transform: translateX(-50%);}

.dragBar .handle {position: absolute; top: 50%; left: 50%; width: 2.5rem; height: 2.5rem; background: #fff; border-radius: 50%; transform: translate(-50%, -50%); cursor: ew-resize;}

.dragBar .handle::before, .dragBar .handle::after {content: ''; position: absolute; top: 50%; width: .375rem; height: .375rem; border-top: .125rem solid #000; border-right: .125rem solid #000; transform: translateY(-50%) rotate(45deg);}
.dragBar .handle::before {left: .625rem; transform: translateY(-50%) rotate(-135deg);}
.dragBar .handle::after {right: .625rem;}

@media(max-width:768px) {
    .dragBar .handle {touch-action: none;}
}


/* secMenu */
.sub .secMenu .secMenuList {display: flex; align-items: center; justify-content: center; gap:1rem;}
.sub .secMenu .secMenuList a {padding: .5rem 1rem; border-radius: 3.125rem; width: 14rem; display: block; text-align: center; background-color: var(--gray); color:#fff; font-weight: 700;}
.sub .secMenu .secMenuList a.on {background-color: var(--pointcolor);}




/* meritImg */
.sub .meritImg.Wh .box {background-color: #fff;}
.sub .meritImg.Wh .Desc {padding: 2rem;}



/* product */
.sub .product .box {background-color: #fff; align-self: stretch;}
.sub .product .Desc {padding: 2rem;}



/* BgImg_box */
.sub .BgImg_box .flexBox {display: flex; align-items: center; gap:1rem;}
.sub .BgImg_box .box {background: no-repeat center / cover; height: 28.75rem; border:1px solid var(--gray); position: relative;}
.sub .BgImg_box .Txt {position: absolute; left: 2rem; top: 2rem;}


/* accordion */
#accordion.max1360 {max-width: 1360px; margin-left: auto; margin-right: auto;}
#accordion .accordionTitle {display: flex; align-items: center; border-bottom: 1px solid var(--pointcolor); background-color: #F4F4F8; padding: 1.5rem; cursor: pointer;}
#accordion .accordionTitle:before, .accordionTitle:after {content:''; position: absolute; height: 2px; border-radius: 50px; transition: ease-in-out 0.6s all; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center;}
#accordion .accordionTitle:hover::after {width: 100%;}
#accordion .accordionTitleActive:after {content:''; position: absolute; height: 2px; border-radius: 50px; transition: ease-in-out 0.6s all; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center;}

#accordion .accIcon {width: 30px; height: 30px; display: flex; margin-top: -3px; align-items: center; justify-content: center; margin-left: auto;}
#accordion .accIcon:before, .accIcon:after {content: "";  position: absolute;  background-color: #333;  width: 2px;  height: 10px;  transition: all 0.25s ease-in-out;}
#accordion .accIcon:before {transform: translate(-3px, 0) rotate(-45deg);}
#accordion .accIcon:after {transform: translate(3px, 0) rotate(45deg);}
#accordion .accordionTitle:hover .accIcon:before, .accordionTitle:hover .accIcon:after {background-color: #988f8f;}
#accordion .accIcon.anime.accIcon:before {transform: translate(3px, 0) rotate(-45deg);}
#accordion .accIcon.anime.accIcon:after {transform: translate(-3px, 0) rotate(45deg);}
#accordion .item:last-child{margin-bottom: 0;}
#accordion .item .text {opacity: 0; height: 0; padding: 0px 20px; position: relative; transition: all 0.6s cubic-bezier(.42,.2,.08,1); overflow: hidden;}
#accordion .item .text.show {opacity: 1; height: auto; padding: 25px 20px; position: relative; z-index: 0; border-radius: 0px 0px 3px 3px; background: #fff;}

#accordion .item .A {position: relative; padding-left: 2rem;}
#accordion .item .A:after {content:'A.'; font-family: var(--pointfont); font-weight: 700; font-size: 1.375rem; color:var(--pointcolor); position: absolute; left: 0; top: -0.125rem;}

#accordion .item .Q {position: relative; padding-left: 2rem;}
#accordion .item .Q:after {content:'Q.'; font-family: var(--pointfont); font-weight: 700; font-size: 1.375rem; color:var(--pointcolor); position: absolute; left: 0; top: -0.125rem;}

#accordion .box {padding-bottom: 2rem;}
@media(max-width:768px) {
    #accordion .box.Img {order:2;}
}


/* info */

.sub .info .map_wrap {position: relative; overflow: hidden;}
.sub .info .map_cover {position: absolute; top:0; width:100%; height: 100%; left: 0; background-color: rgb(0, 0, 0, .05); display:flex;align-items: center;justify-content: center; z-index: 3;}

.sub .info .map {height: 44.5rem;}
.sub .info .root_daum_roughmap, .root_daum_roughmap .wrap_map  {width: 100%; height: 100%;}
.sub .info .roughmap_lebel_text {display: none;}

.sub .info .infoTxt {color:#fff; padding: 3rem; display: flex; gap:1rem;}
.sub .info .Tit {white-space: nowrap;}
.sub .info .Desc ul {display: flex; flex-direction: column; gap:1rem;}
.sub .info .Desc ul li {display: flex; align-items: center; gap:1rem;} 
.sub .info .Desc ul li > img {width: 1rem;}

.sub .info .bg-gray {background-color: #333;}

@media(max-width:1100px) {
    .sub .info .infoTxt {flex-direction: column;}
    .sub .info .Tit, .sub .info .Desc {width: 100%;}
}






/* zetecDB */
.sub .zetecDB .flexList, .sub .zetecDB .personal {max-width: 1240px; background-color: rgba(168,168,168,.1); padding: 3rem;}

.sub .zetecDB .input_wrap {display: flex; align-items: center; gap:1rem; border-bottom:1px solid var(--pointcolor)}
.sub .zetecDB .TitBox {width: 20%;}
.sub .zetecDB .contentTit {width: 100%; display: block; border-bottom:1px solid var(--pointcolor); padding:1rem 0;}


.sub .zetecDB .star {position: relative; padding-right: .7rem;}
.sub .zetecDB .star:after {content:'*'; color:var(--pointcolor); font-weight: 700; position: absolute; right: 0;}

.sub .zetecDB input[type="text"], .sub .zetecDB input[type="number"], .sub .zetecDB input[type="email"], .sub .zetecDB textarea {border: none; box-shadow: none; border-radius: 0; background-color: transparent; padding: 1rem; width: 80%;}
.sub .zetecDB input[type=text]:focus {box-shadow: none !important; border:none !important;}

.sub .zetecDB textarea {height: 9.375rem; width: 100%; border-bottom:1px solid var(--pointcolor)}
.sub .zetecDB textarea:focus {border:none !important; border-bottom:1px solid var(--pointcolor) !important; box-shadow: none !important;}
.sub .zetecDB input::placeholder, .sub .zetecDB textarea::placeholder {font-size: 1rem; color:#bfbfbf;}

.sub .zetecDB .scrollBox {height: 12.5rem; overflow-y: scroll; padding: 2rem 2rem 2rem 0;}
.sub .zetecDB .scrollBox::-webkit-scrollbar {width: 4px;}

.sub .zetecDB .input_chk {margin: 2rem auto 0; display: flex; align-items: center; width: fit-content;}

.sub .zetecDB input.agree_checkbox { width: 0; height: 0; visibility: hidden; }
.sub .zetecDB input.agree_checkbox + label { position: relative; padding-left: 1.5rem; }
.sub .zetecDB input.agree_checkbox + label::before { position: absolute; content: ''; display: inline-block; width: 1.2rem; height: 1.2rem; cursor: pointer; border: 1px solid #515153; top: 2px; left: 0; }
.sub .zetecDB input.agree_checkbox:checked + label::before { background: #000 url(/img/sub/chk.png) no-repeat center / contain; background-size: 100%; }

.sub .zetecDB .ZT_Btn {margin-left: auto; margin-right: auto; margin-top: 5rem; padding: 1rem 4rem;}