@import url('sub.css'); 



/**** S:: 회사소개 > 인사말 ****/
.about_cont {display:flex; flex-wrap:wrap; align-items:flex-end; background:url("/about/img/greeting_img01.png")no-repeat bottom right;}
.about_cont .fs68 {font-weight:200; margin:0 0 30px;}
.about_cont .fs22+.fs22 {margin:12px 0 0;}
.about_cont .blackFont {font-weight:bold; margin:30px 0 0;}

.grayBox {background:var(--grayBg); position:relative; z-index:10;}
.grayBox .tit-Box {position:relative; margin:0 0 50px; z-index:90; padding-right:380px; box-sizing:border-box;}
.greeting_cont .fs68 {font-weight:200; margin:20px 0 30px;}
.greeting_cont .fs28 {font-weight:300;}

.ci-ani {position:absolute; z-index:99; right:40px; bottom:-100px;}
.ci-ani::before, .ci-ani::after {content:''; aspect-ratio: 3 / 3; position:absolute;}
.ci-ani::before {width:16px; background:url("/about/img/ci_deco1.svg")no-repeat center / 100% auto; top:-12px; left:-8px;}
.ci-ani::after {width:27px; background:url("/about/img/ci_deco2.svg")no-repeat center / 100% auto; bottom:0; right:0;}

.ci-ani .ci-ico {width:288px; aspect-ratio: 3 / 3; background:var(--sub); border-radius:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; position:relative;}
.ci-ani .ci-ico::before {content:''; width:calc(100% + 60px); height:calc(100% + 60px); border-radius:100%; background:var(--sub); position:absolute; top:50%; left:50%; /* animation:dots 1.5s ease-in-out infinite;  */z-index:-1; opacity:0.2; transform: translate(-50%,-50%) scale(1);}
.ci-ani .ci-ico::after {content:''; width:230px; max-width:90%; aspect-ratio: 3 / 3; background:url("/about/img/text-rota.svg")no-repeat center / 100% auto; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(0); animation: logoMove 8s linear infinite;}


.ci-ani .ci-ico img {}
@keyframes logoMove {
	0% {transform:translate(-50%,-50%) rotate(0);}
	100% {transform:translate(-50%,-50%) rotate(360deg);}
}

@keyframes dots {
    0%{
      opacity: 1;
      transform: translate(-50%,-50%) scale(1);
    }
    100%{
      opacity: 0;
      transform: translate(-50%,-50%) scale(1.25);
    }
}
.promise_list {}
.promise_list dl {display:flex; flex-wrap:wrap; align-items:flex-start; padding:203px 115px 190px; gap:0 20px;}
.promise_list dl.bg01 {background:url("/about/img/promise_bg01.jpg")no-repeat center / cover;}
.promise_list dl.bg02 {background:url("/about/img/promise_bg02.jpg")no-repeat center / cover;}
.promise_list dl.bg03 {background:url("/about/img/promise_bg03.jpg")no-repeat center / cover;}
.promise_list dl.bg04 {background:url("/about/img/promise_bg04.jpg")no-repeat center / cover;}
.promise_list dl+dl {margin:10px 0 0;}
.promise_list dl dt {flex-shrink: 0; width:54px; line-height:54px; font-size:1.1rem;}
.promise_list dl dd {flex:1;}
.promise_list dl dd .fs48 {margin:0 0 12px; font-weight:bold;}
.promise_list dl dd * {color:var(--white);}
/**** E:: 회사소개 > 인사말 ****/






.lab_intro {position:relative; background:url("/about/img/lab_bg.jpg")no-repeat center / cover;}
.lab_intro::after {content:''; width:100%; height:100%; opacity: 0.8; background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.00) 100%); position:absolute; top:0; left:0;}
.lab_intro .basic_in {position:relative; z-index:10;}
.lab_intro .fs68 {font-weight:200; color:Var(--white);}
.lab_intro .fs40 {color:Var(--white); display:inline-flex; gap:0 10px; align-items:flex-end; margin:30px 0 0;}
.lab_intro .fs40 .fs22 {color:Var(--white);}
.lab_intro ul {padding-top:20px; margin-top:20px; border-top:1px dashed rgba(255,255,255,0.15); max-width:670px;}
.lab_intro ul .dots {color:rgba(255,255,255,0.7);}
.lab_intro ul .dots::before {background:var(--white);}

.lab-tech-list {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap:50px 30px;}
.lab-tech-list * {word-break: break-all;}
.lab-tech-list dl {}
.lab-tech-list dl dt {}
.lab-tech-list dl dt img {width:100%;}
.lab-tech-list dl dd {padding:20px 0 0;}
.lab-tech-list dl dd .fs15 {letter-spacing:0; font-family:var(--eng); color:var(--main); display:block; font-weight: 700;}
.lab-tech-list dl dd .fs28 {margin:3px 0 10px;}
.lab-tech-list dl dd .fs20 {}




.tour_wrap {overflow:hidden;}
.tour_roll {max-width:1090px; width:100%; margin:0 auto;}
.tour_roll .slick-list {overflow:visible; margin-left:-30px;}
.tour_roll dl {margin-left:30px; background:var(--black);}
.tour_roll dl img {opacity:0.5; transition:all 0.5s ease; aspect-ratio: 1090 / 613; width:100%;}
.tour_roll dl.slick-active img {opacity:1; transition:all 0.5s ease;}


.tour_wrap .slick-arrow {padding:0; margin:0; position:absolute; cursor:pointer; z-index:99; top:50%; border:0; background:transparent; font-size:0; transform:translateY(-50%); transition:all 0.5s ease;}
.tour_wrap .slick-arrow:hover {opacity:0.5; transition:all 0.5s ease;}
.tour_wrap .slick-arrow::before {content:'\e941'; font-size:56px; line-height:1; display:block; color:var(--white); font-family:var(--icon); font-weight:400;}
.tour_wrap .slick-prev {left:-140px;}
.tour_wrap .slick-prev::before {content:'\ef7d';}
.tour_wrap .slick-next {right:-140px;}


.tour_wrap .slick-dots {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; z-index:70; gap:0 18px; position:relative; z-index:10; margin:40px 0 0;}
.tour_wrap .slick-dots li {cursor:pointer; cursor:pointer;}
.tour_wrap .slick-dots li button {font-size:0; background-color:transparent; border:0; padding:0; width:10px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.tour_wrap .slick-dots li button::before {content:''; width:100%; aspect-ratio: 3 / 3; background:rgba(48,49,60,0.3); border-radius:100%; display:block; position:relative; font-size:0;}
.tour_wrap .slick-dots li.slick-active button {width:18px;}
.tour_wrap .slick-dots li.slick-active button::before {width:100%; border-radius:0; background:url("/img/v_dot_b.svg")no-repeat center / 100% auto;}





/*******************************************************************************
	@media ~1700px
*******************************************************************************/
@media all and (max-width:1700px) { 


.about_cont {background-size:55% auto;}

.lab-tech-list dl br {display:none;}


}
/*******************************************************************************
	@media ~1500px
*******************************************************************************/
@media all and (max-width:1500px) { 


/**** S:: 회사소개 > 인사말 ****/
.about_cont {background-size:60% auto;}
.grayBox .tit-Box {padding-right:305px;}
.ci-ani .ci-ico {width:200px;}
.ci-ani .ci-ico img {width:100px;}

.promise_list dl {padding:200px 10%;}
/**** E:: 회사소개 > 인사말 ****/



.tour_wrap .slick-arrow::before {font-size:40px;}
.tour_wrap .slick-prev {left:-90px;}
.tour_wrap .slick-next {right:-90px;}


}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 


.tour_wrap .slick-prev {left:15px;}
.tour_wrap .slick-next {right:15px;}

}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 


/**** S:: 회사소개 > 인사말 ****/
.about_cont {background-position:center bottom; background-size:100% auto;}
.about_cont .tBox {width:100%;}
.about_cont .tBox::after {content:''; width:100%; aspect-ratio: 1015 / 630; display:block; position:relative;}
.about_cont .tBox br {display:none;}
.about_cont .blackFont br {display:block !important;}

.grayBox .tit-Box {padding-right:150px;}
.ci-ani {bottom:-80px; right:0;}
.ci-ani .ci-ico {width:140px;}
.ci-ani .ci-ico img {width:60px;}
.ci-ani .ci-ico::before {content:''; width:calc(100% + 40px); height:calc(100% + 40px);}

.greeting_cont .fs68 {margin:10px 0 20px;}
.promise_list dl {padding:150px 5%;}
.promise_list dl dt {width:40px; line-height:40px; font-size:1rem;}
/**** E:: 회사소개 > 인사말 ****/

.lab-tech-list {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap:40px 20px;}


.tour_roll .slick-list {margin-left:-15px;}
.tour_roll dl {margin-left:15px;}



}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 

/**** S:: 회사소개 > 인사말 ****/

.about_cont .fs68 {margin:0 0 15px;}

.grayBox .tit-Box {padding-right:0; margin:0 0 70px;}
.ci-ani {bottom:-120px; right:0;}
.ci-ani .ci-ico {width:100px;}
.ci-ani .ci-ico img {width:46px;}
.ci-ani::after {width:16px; bottom:-14px;}
.ci-ani .ci-ico::before {content:''; width:calc(100% + 20px); height:calc(100% + 20px);}

.promise_list dl {padding:60px 3%; gap:0 10px;}
.promise_list dl dt {width:30px; line-height:30px; font-size:1rem;}
/**** E:: 회사소개 > 인사말 ****/


.lab_intro {background-position:center right 40%;}
.lab_intro .fs40 {margin:15px 0 0;}
.lab_intro ul {margin-top:15px; padding-top:15px;}
.lab-tech-list {display: grid; grid-template-columns: repeat(1, 1fr); grid-gap:20px 0;}
.lab-tech-list dl dd {padding:13px 0 0;}
.lab-tech-list dl dd .fs28 {margin:3px 0 5px;}

.tour_wrap .slick-arrow::before {font-size:28px;}
.tour_roll .slick-list {margin-left:-10px;}
.tour_roll dl {margin-left:10px;}
.tour_wrap .slick-dots {}

.tour_wrap .slick-dots {gap:0 10px; margin:20px 0 0;}
.tour_wrap .slick-dots li {cursor:pointer; cursor:pointer;}
.tour_wrap .slick-dots li button {width:6px;}
.tour_wrap .slick-dots li.slick-active button {width:10px;}



}