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

.main .Tit_en {font-family: var(--pointfont); color:var(--pointcolor); letter-spacing: 0;}

.More {box-shadow: inset 0 0 0 1px #fff; padding: .7rem 2rem; display: flex; align-items: center; width: fit-content; color: #fff; transition: color 0.25s 0.0833333333s; position: relative;}
.More:after, .More:before { border: 0 solid transparent; box-sizing: border-box; content: ""; pointer-events: none; position: absolute; width: 0; height: 0; bottom: 0; right: 0;}
.More:before {border-bottom-width: 1px; border-left-width: 1px;}
.More:after {border-top-width: 1px; border-right-width: 1px;}

.More:hover {color: var(--pointcolor);}
.More:hover:after, .More:hover:before {border-color: var(--pointcolor); transition: border-color 0s, width 0.25s, height 0.25s; width: 100%; height: 100%;}
.More:hover:before {transition-delay: 0s, 0s, 0.25s;}
.More:hover:after {transition-delay: 0s, 0.25s, 0s;}

.More2 {position: relative; display: flex;  align-items: center; width: fit-content; box-shadow: none; border: 0; background-color: var(--pointcolor); color: #fff; padding: .7rem 2rem; white-space: nowrap; z-index: 9; overflow: hidden; cursor: pointer; transition-property: all; transition-duration: 600ms; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);  color: transparent; text-shadow: -50px 0 0 transparent, 0 0 0 #fff;}
.More2:before {width: 100%; height: 100%; top: 0; left: 0; background-color: #000; transform: translate(-100%, 0); content: ""; position: absolute; z-index: -2; transition-property: inherit; transition-duration: inherit; transition-timing-function: inherit;}
.More2:hover {text-shadow: 0 0 0 #fff, 50px 0 0 transparent;}
.More2:hover:before {transform: translate(0, 0);}

.main .ygap0 {--y-gap:0;}
.main .ygap3 {--y-gap:3rem;}


/* mainSlide */
#mainSlide {overflow:hidden;position:relative;width:100%;aspect-ratio: 16/8; transition:transform .6s var(--ani)}

#mainSlide .mainSwiper {opacity:0;transform:scale(1.05);width:100%;height:100%;transition:all 2s var(--ani)}
#mainSlide .mainSwiper.on {opacity:1;transform:scale(1)}
#mainSlide .mainSwiper .swiper-slide {height:100%;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .3s}
#mainSlide .mainSwiper .swiper-slide-active {transform:skew(0)}
#mainSlide .bg {position:absolute;left:0;top:0;width:100%;height:100%;background-repeat:no-repeat; background-position: left !important; background-size:cover}

#mainSlide .bg.bg-1 {background-image:url('/img/main/mainSlide02.jpg')}

#mainSlide .Btn_wrap {display: flex; align-items: center; position: absolute; bottom: 3rem; right:0; left:0; margin: auto; width: 250px; margin: auto;}
#mainSlide .swiper-button-next, #mainSlide .swiper-button-prev {position: relative; margin-top: 0;}
#mainSlide .swiper-pagination {position: relative; bottom:0;}
#mainSlide .swiper-pagination-bullet {opacity: 1; width: 10px; height: 10px; margin: 0 6px; border-radius: 10px; background-color: #fff; transition: all .5s;}
#mainSlide .swiper-pagination-bullet-active {width: 100px; background-color: #fff; position: relative; overflow: hidden;}
#mainSlide .swiper-pagination-bullet-active:after {content:''; display: block; width: 0; height: 100%; background-color: var(--pointcolor); border-radius: 5px; position: absolute; left: 0; top: 0; animation: slideon 7s linear; animation-fill-mode: forwards;}

#mainSlide  .DescBox {position: absolute; width: 50%; height: fit-content; padding: 0 2rem; top:0; bottom:0; left:0; margin: auto; z-index: 9;}
 

@media(max-width:768px){
    #mainSlide {aspect-ratio: 125 / 183;}
	#mainSlide .bg {aspect-ratio: 125 / 183;}
    #mainSlide .mainSwiper iframe {left: 100% !important;}
    #mainSlide  .DescBox {width: 100%;}
}



/* skin */
#skin .DescBox_L {background: no-repeat center url('/img/main/skinImg.jpg'); background-size: cover; padding: 12rem 0;}
#skin .Desc {position: relative; width: fit-content; height: fit-content; top:0; bottom:0; left:0; right: 0; margin: auto;}
#skin .Desc_R {max-width: 600px; margin-left: 5rem; padding-right: 3rem; position: relative;}
#skin .txt_circle {position: absolute; top:-10rem; right: 0; animation: spinCircle 13s linear infinite; width: 13.8125rem;}
@keyframes spinCircle{100% {transform: rotate(360deg);}}

@media(max-width:990px) {
    #skin .txt_circle {width: 10rem;}
}
@media(max-width:768px) {
    #skin .DescBox {justify-content: center; padding: 5rem 0;}
    #skin .Desc {padding-right: 5rem;}
    #skin .Desc_R {margin-left: 2rem;}
    #skin .txt_circle {width: 9rem; top:-3rem; right:2rem;}
    #skin .DescBox_L {margin-right: 2rem;}
}



/* signature */
#signature .TitDesc {max-width: 570px; margin: auto; padding: 0 2rem;}
#signature .swiper-pagination {position: relative; display: flex; flex-direction: column;}
#signature .swiper-pagination-bullet {width: 100%; height: auto; font-size: 1.875rem; display: flex; align-items: center; justify-content: space-between; margin: .5rem 0 0; border-radius: 5px; background-color: transparent; text-align: left; opacity: 1; padding: 1rem 3.5rem; transition: .3s;}
#signature .swiper-pagination-bullet-active {background-color: var(--pointcolor); color:#fff;}
#signature .swiper-pagination-bullet-active span {color:#fff !important;}

#signature .SlideBox .flexList {gap:1rem}
#signature .Desc {position: absolute; bottom:4rem; width: 100%; padding-left: 3rem;} 
#signature .Tit {font-family: var(--pointfont); letter-spacing: .55rem;}
#signature .More {margin: auto;}

#signature .swiper-slide {transition: opacity 1.5s ease-out !important; background: no-repeat center; background-size: cover; width: 100%; height: 616px;}
#signature .swiper-slide.slide1 {background-image: url('/img/main/signature01.jpg');}
#signature .swiper-slide.slide2 {background-image: url('/img/main/signature02.jpg');}
#signature .swiper-slide.slide3 {background-image: url('/img/main/signature03.jpg');}
#signature .swiper-slide.slide4 {background-image: url('/img/main/signature04.jpg');}
#signature .swiper-slide.slide5 {background-image: url('/img/main/signature05.jpg');}

@media(max-width:1580px) {
    #signature .More {margin-left: 0; margin-top: 1rem;}
}
@media(max-width:990px) {
    #signature .TitDesc {padding: 0 3rem;}
    #signature .SlideBox {padding-left: 2rem; margin-top: 5rem;}
    #signature .swiper-slide {height: 480px;}
}



/* doctor */
#doctor .flexList {padding-bottom: 5rem;}
#doctor .Desc {position: relative; margin-top: 8rem; display: flex; align-items: flex-end; padding:9rem 5rem}
#doctor .Desc > div {position: relative; z-index: 3;}
#doctor .Desc:after {content:''; width: 130%; height: 50rem; background-color: #f7f7f7; position: absolute; z-index: -1; top:0; right:0; margin: auto;} 

#doctor .BG_Logo {position: absolute; top:0; right:0; z-index: 1; width: 24.25rem;}

@media(max-width:1380px) {
    #doctor .Desc:after {height: 57rem;}
}
@media(max-width:990px) {
    #doctor .Desc {padding: 9rem 3rem;}
}
@media(max-width:768px) {
    #doctor .Desc {margin-top: 0; justify-content: center;}
}




/* Speciality */
#Speciality .plus_R {position: relative; padding-right: 1.5rem;}
#Speciality .plus_R:after {content:'+'; position: absolute; font-weight: 700; font-size: 1.875rem; right: 0; top:-18px;}

#Speciality .accordion-group li:nth-child(1) {background-image: url('/img/main/Speciality01.jpg');} 
#Speciality .accordion-group li:nth-child(2) {background-image: url('/img/main/Speciality02.jpg');}
#Speciality .accordion-group li:nth-child(3) {background-image: url('/img/main/Speciality03.jpg');}
#Speciality .accordion-group li:nth-child(4) {background-image: url('/img/main/Speciality04.jpg');}

#Speciality .site-inner {position: relative; transition: all .5s ease;}
#Speciality .accordion-group {overflow: hidden; width: 100%; height: 743px; display: flex; align-items: center; transition: all .5s ease;}
#Speciality .accordion-group li {cursor: pointer; position: relative; display: flex; overflow: hidden; width: 25%; height: 743px; background-position: center center; background-size: cover; background-repeat: no-repeat; transition: all .5s ease;}
#Speciality .accordion-group li.out {width: 42%;}
  
#Speciality .Num {font-size: 3.125rem; color:rgba(255,255,255,.7); font-family: var(--pointfont);}
#Speciality .Tit {font-family: var(--pointfont); letter-spacing: .3rem;} 
#Speciality .plus {position: relative; padding-left: 1.3rem;}
#Speciality .plus:after {content:'+'; position: absolute; font-weight: 700; font-size: 1.875rem; left: 0; top:-18px;}

#Speciality li .outDesc {position: absolute; width: 100%; height: fit-content; top:0; bottom:0; left: 0; right:0; margin: auto; opacity: 0; transition: opacity .5s;}
#Speciality li.out .outDesc {opacity: 1;}

#Speciality li .outTit {position: absolute; width: 100%; height: fit-content; opacity: 1; top:0; bottom:0; left: 0; right:0; margin: auto;  transition: .5s;}
#Speciality li.out .outTit {opacity: 0;}

@media(max-width:768px) {
    #Speciality .accordion-group {flex-direction: column; height: auto;}
    #Speciality .accordion-group li {width: 100%; height: 20%; min-height: 100px;}
    #Speciality .accordion-group li.out {width: 100%; height: 50%; min-height: 400px;}
}


/* Solution */
#Solution {position: relative;}
#Solution:after {content:''; width: 80%; height: 100%; background-color: #f7f7f7; position: absolute; left: 0; top:0; z-index: -1;}

#Solution .txt_circle {position: absolute; top:-6.5rem; right:-6.5rem; animation: spinCircle 20s linear infinite; width: 13.8125rem;}
#Solution .Solution_equipment {position: absolute; width: 35.1875rem; bottom:-8rem; left: -15rem;}

@media(max-width:1240px) {
    #Solution .Solution_equipment {left:-10rem;}
}
@media(max-width:990px) {
    #Solution .ImgBox {order:-1;}
    #Solution .ImgBox .Img {width: fit-content; max-width: 90%; margin: auto;}
    #Solution .Solution_equipment {left:-4rem;}

    #Solution:after {display: none;}

    #Solution .Desc {position: relative; margin-top: 13rem; padding: 6rem 0; display: flex; align-items: center; justify-content: center;} 
    #Solution .Desc:after {content:''; z-index: -1; position: absolute; height: 100%; width: 120%; background-color: #f7f7f7; bottom:0; top:0; left: -5rem; right:0; margin: auto;}
}
@media(max-width:500px) {
    #Solution:after {height: 53%;}
    #Solution .txt_circle {width: 10rem; right:-5.5rem; top:-5.5rem}
    #Solution .Solution_equipment {left:-4rem; bottom:-13rem;}
}


/* Equipment */
#Equipment .EquipmentSwiper:after {content:''; width: 354px; height: 354px; border-radius: 50%; background-color: #f4f4f4; position: absolute; top:0; bottom:0; left: 0; right:0; margin: auto; z-index: -1;} 

#Equipment .swiper-button-next:after, #Equipment .swiper-button-prev:after {content:'';}
#Equipment .swiper-button-next,  #Equipment .swiper-button-prev {width: 50px; height: 50px; background-color: var(--pointcolor); border-radius: 50%;}
#Equipment .swiper-button-next {right:36%}
#Equipment .swiper-button-prev {left:36%}
#Equipment .swiper-button-prev img {transform: rotate(180deg);}
@media(max-width:1440px) {
    #Equipment .EquipmentSwiper {overflow: visible;}
    #Equipment .swiper-button-next {right:32%}
    #Equipment .swiper-button-prev {left:32%}
}
@media(max-width:1240px) {
    #Equipment .EquipmentSwiper:after {width: 300px; height: 300px;}
}
@media(max-width:990px) {
    #Equipment .swiper-button-next {right:28%}
    #Equipment .swiper-button-prev {left:28%}
}
@media(max-width:768px) {
    #Equipment .swiper-button-next {right:20%}
    #Equipment .swiper-button-prev {left:20%}
    #Equipment .EquipmentSwiper:after {width: 280px; height: 280px;}
}
@media(max-width:500px) {
    #Equipment .swiper-button-next {right:10%}
    #Equipment .swiper-button-prev {left:10%}   
}
@media(max-width:400px) {
    #Equipment .swiper-button-next {right:0;}
    #Equipment .swiper-button-prev {left:0;}   
}


/* key */
#key .keyWrap {display: flex; flex-wrap: wrap; justify-content: space-between; gap:1.5rem 0; margin-top: -3rem;}
#key .keyWrap li {width: fit-content; max-width: calc(22% - .5rem);}
#key .keyWrap li:nth-child(-n+3) {align-self: flex-end;}
@media(max-width:1440px) {
    #key .keyWrap {gap:1rem .5rem;}
    #key .keyWrap li {width: fit-content; max-width: calc(20% - .5rem);}
}
@media(max-width:500px) {
    #key .keyWrap {gap:1.5rem 1rem; margin-top: 3rem;}
    #key .keyWrap li {max-width: calc(48% - .5rem);}

    #key .keyWrap li:nth-child(1) {order:1;}
    #key .keyWrap li:nth-child(2) {order:2;}
    #key .keyWrap li:nth-child(3) {order:3;}
    #key .keyWrap li:nth-child(4) {order:7;}
    #key .keyWrap li:nth-child(5) {order:8;}
    #key .keyWrap li:nth-child(6) {order:9;}
    #key .keyWrap li:nth-child(7) {order:10;}
    #key .keyWrap li:nth-child(8) {order:4;}
    #key .keyWrap li:nth-child(9) {order:5;}
    #key .keyWrap li:nth-child(10) {order:6;}
}




/* info */
#info .map_wrap {position: relative; display:flex;}

#info .map_wrap_l {width:50%;}
#info .map_wrap_r {width:50%;}
#info .mapBox {width: 100%; height: 73rem;}
#info .root_daum_roughmap, #info .root_daum_roughmap .wrap_map {width: 100%; height:73rem;}
#info .map_cover{position: absolute;top:0;width:100%; height: 80.5rem; left: 0; background-color: rgb(163, 155, 144, .1); filter: sepia(1); color:#333; opacity: 0; z-index: 3;transition: 1s all ease;display:flex;align-items: center;justify-content: center;}
#info .map_cover:hover {opacity: 1;}

#info .Btn_wrap {display: flex; gap:0 2rem; margin-top: 3rem;}
#info .infoBtn {width: 11.25rem; padding: .7rem 1rem; text-align: center; display: block; font-weight: 600; transition: .3s;}
#info .infoBtn.naver {background-color: #03c65a; color:#fff}
#info .infoBtn.kakao {background-color: #f1db00;}

#info .infoBtn.naver:hover {background-color: #06af52;}
#info .infoBtn.kakao:hover {background-color: #e4d102;}

#info .infoDesc .Desc {letter-spacing: 0;}

#info .infoDesc li {display: flex;}
#info .infoDesc li:last-child {align-items: center;}
#info .infoDesc li + li {margin-top: 1.5rem;}
#info .infoDesc .Tit {width: 15%; color:var(--pointcolor); margin-right: 1rem;}
#info .main_park .Tit {width: 15%; color:var(--pointcolor); margin-right: 1rem;}


#info .TbTit {width: 10rem; letter-spacing: -0.3125rem; text-align: justify; padding-right: 2rem; height: 30px; display: block;}
#info .TbTit:after {content:''; display: inline-block; width: 100%;}

#info .main_park {display:flex; padding:30px 0 0 0;}
#info .main_park_l {padding:0 30px 0 0;}

@media(max-width:990px) {
	#info .map_wrap {position: relative; display:block;}
	#info .map_wrap_l {width:90%; margin:0 auto;}
	#info .map_wrap_r {width:90%; margin:0 auto; padding:40px 0 0 0;}
	#info .mapBox {width: 100%; height: 30rem;}
	#info .root_daum_roughmap, #info .root_daum_roughmap .wrap_map {height:30rem;}
	#info .map_cover{height: 30rem;}

}

/* footer */
footer {background-color: #212121;}
footer .footerInfo {max-width: 25.625rem; margin-left: auto;}
footer .footerInfo .More {padding: .7rem 1rem; width: 100%; justify-content: center;}

@media(max-width:990px) {
    footer .footerInfo {margin-left: 0;}
}