@import url(default.css);
@import url(common.css);
@import url(layout.css);




/****kps콘텐츠*******/
.k_container .concept {
    width: 100vw;
    height: 100vh;
    background: url(../images/kps_con_bg.png) no-repeat center center /cover;
    color: #fff;
    position: relative;
}
.k_container .concept::after {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
    width: 1px;
    height: 100%;
    content: "";
    background-color: rgba(255, 255, 255, 0.1); 
}
.k_container .concept::before {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 10;
    transform: translate(-50%, -50%);
    width: 13px;
    height: 13px;
    content: "";
    background-color: #616365;
}
.k_container .concept h2 {
    position: absolute;
    left: 38px;
    top: 60px;
    font-size: 20px;
    padding-top: 7px;
}
.k_container .concept h2::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    content: "";
    background-color: #1E6593;
}
.k_container .concept .con {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
}
.k_container .concept .con > li {
    width: 50%;
    height: 50%;
    padding-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.k_container .concept .con > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.k_container .concept .con .con01 , .k_container .concept .con .con02 {
    padding-top: 80px;
}
.k_container .concept .con .con01 ,.k_container .concept .con .con03 {
    text-align: center;
}
.k_container .concept .con .con02 ,.k_container .concept .con .con04 {
    align-items: flex-start;
    padding-left: 70px;
}
.k_container .concept .con .con01 > .tit {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 35px;
}
.k_container .concept .con .con01 > .tit > strong {
    font-size: 30px;
}
.k_container .concept .con .con01 > .tit > i {
    font-family: 'pretandard';
    font-size: 13px;
    padding: 20px 10px 0 0;
    display: block;
    width: 52px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='20' viewBox='0 0 48 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35.1028 19.0854C34.6362 19.4055 34.2062 19.3805 33.8128 19.0106C33.4195 18.6406 33.3638 18.2047 33.6457 17.7027L37.5427 11.1885H2.11529C1.77661 11.1885 1.49386 11.0766 1.26705 10.8528C1.04019 10.6289 0.926758 10.3499 0.926758 10.0157C0.926758 9.68139 1.04019 9.39713 1.26705 9.16289C1.49386 8.9286 1.77661 8.81145 2.11529 8.81145H37.5427L33.6457 2.29732C33.3638 1.79532 33.4195 1.35935 33.8128 0.989416C34.2062 0.619485 34.6362 0.594526 35.1028 0.914539L47.0225 8.21147C47.6739 8.6384 47.9996 9.23368 47.9996 9.99731C47.9996 10.761 47.6739 11.3581 47.0225 11.7885L35.1028 19.0854Z' fill='white'/%3E%3C/svg%3E%0A");
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0 150px;
    animation-name: right_move; 
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
@keyframes right_move { /* 애니메이션을 효과를 미리 설정함 */
	0% { transform:translate(-5px, 0) }  /* 애니메이션을 시작할때의 속성 */
	100% { transform:translate(20px, 0) } /* 애니메이션이 종료될때의 속성 */
}
.k_container .concept .con .con01 .sub {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 783px;
    height: 120px;
    background-color: #fff;
    color: #0d0d0d;
    border-radius: 60px;
    overflow: hidden;
    font-weight: 600;
    font-family: 'pretandard';
    margin-bottom: 20px;
    position: relative;
    z-index: 100;
}
.k_container .concept .con .con01 .sub::before {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 22em;
    height: 100%;
    content: "";
    border-radius: 60px;
    background-color: #0d0d0d;
}
.k_container .concept .con .con01 .sub:hover:before {
    animation-name: long_move;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function:  ease-in-out;
}
.k_container .concept .con .con01 .sub:hover .aft {
    color: #fff;
}
@keyframes long_move { /* 애니메이션을 효과를 미리 설정함 */
	0% { width: 22em; transform: translatex(0);}  /* 애니메이션을 시작할때의 속성 */
	100% { width: 32em; transform: translatex(65%); } /* 애니메이션이 종료될때의 속성 */
}
.k_container .concept .con .con01 .sub .bef {
    width: 22em;
    color: #fff;
}
.k_container .concept .con .con01 .sub .aft {
    width: 28em;
    padding: 0 5px;
}
.k_container .concept .con .tit {
    font-size: 30px;
    font-weight: 700;
}
.k_container .concept .con .con02 .tit {
    margin-bottom: 76px;
}
.k_container .concept .con .con02 > ul {
    display: flex;
    width: 100%;
}
.k_container .concept .con .con02 > ul > li:first-child {
    margin-right: 20px;
    width: 353px;
}
.k_container .concept .con .con02 > ul > li:last-child {
    width: calc(100% - 353px);
    padding-right: 70px;
}
.k_container .concept .con .con02 > ul > li > p {
    border-bottom: 3px solid #fff;
    padding-bottom: 17px;
    height: 2.5em;
}
.k_container .concept .con .con02 > ul > li p em {
    font-size: 15px;
    margin-left: 10px;
}
.k_container .concept .con .con02 > ul > li .sub {
    margin-top: 62px;
}
.k_container .concept .con .con02 > ul > li .sub div {
    margin-bottom: 39px;
    display: flex;
    align-items: center;
    height: 2em;
}
.k_container .concept .con .con02 > ul > li .sub span {
    width: 11em;
}
.k_container .concept .con .con03 .tit {
    margin-bottom: 80px;
}
.k_container .concept .con .con03 .sub {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.k_container .concept .con .con03 .sub p {
    width: 450px;
    padding: 15px 25px;
    line-height: 1.8;
    border-style: dashed;
    border-color: #1E6593;
    border-width: 1px;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.3);
    position: relative;
}
.k_container .concept .con .con03 .sub p::before {
    position: absolute;
    right: -108px;
    top: 50%;
    content: "";
    transform: translate(0 , -50%);
    width: 110px;
    height: 10px;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='106' height='12' viewBox='0 0 106 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M94.6667 6C94.6667 8.94552 97.0545 11.3333 100 11.3333C102.946 11.3333 105.333 8.94552 105.333 6C105.333 3.05448 102.946 0.666667 100 0.666667C97.0545 0.666667 94.6667 3.05448 94.6667 6ZM0 7H100V5H0V7Z' fill='%23e9e9e9'/%3E%3C/svg%3E%0A");
}
.k_container .concept .con .con04 {
    padding-right: 70px;
}
.k_container .concept .con .con04 .tit {
    margin-bottom: 30px;
}
.k_container .concept .con .con04 .sub .top {
    display: flex;
    padding-bottom: 18px;
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    border-bottom-color: #fff;
}
.k_container .concept .con .con04 .sub .top li:first-child {
    width: 30%;
}
.k_container .concept .con .con04 .sub .top li:last-child {
    width: 70%;
    padding-right: 70px;
}
.k_container .concept .con .con04 .sub .top li strong {
    display: block;
    font-size: 20px;
}
.k_container .concept .con .con04 .sub .top li span {
    padding-top: 125px;
    display: inline-block;
    margin-right: 75px;
    position: relative;
}
.k_container .concept .con .con04 .sub .top li span::after {
    position: absolute;
    left: 50%;
    bottom: 25px;
    transform: translate(-50%, 0);
    content: "";
    width: 102px;height: 102px;
    border-radius: 100%;
    border: 1px solid rgba(230, 230, 230, 0.6);
}
.k_container .concept .con .con04 .sub .top li span.col01::after {
    background-color: #9CD0FF;
}
.k_container .concept .con .con04 .sub .top li span.col02::after {
    background-color: #001154;
}
.k_container .concept .con .con04 .sub .top li span.col03::after {
    background-color: #FFFFFF;
}
.k_container .concept .con .con04 .sub .top li span.col04::after {
    background-color: #1D1D1D;
}
.k_container .concept .con .con04 .sub .top li:first-child span {
    padding-left: 20px;
}
.k_container .concept .con .con04 .sub .top li:first-child span::after {
    left: 60%;
}
.k_container .concept .con .con04 .sub p {
    padding-top: 20px;
    width: 83%;
}

.k_container .section_swiper .swiper-slide { width: auto; }
.k_container .design {
    height: 100vh;
    background: #0E142D;
    color: #fff;
    position: relative;
    display: flex;
    align-items: center;
    width: 4000px;
}
.k_container .design h2 {
    position: absolute;
    left: 38px;
    top: 60px;
    font-size: 20px;
    padding-top: 7px;
}
.k_container .design h2::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    content: "";
    background-color: #1E6593;
}
.k_container .design .detail {
    margin: 0 57px 0 110px;
}
.k_container .design .detail dl {
    width: 320px;
}
.k_container .design .detail dl div {
    margin-bottom: 47px;
}
.k_container .design .detail dl dt {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 7px;
}
.k_container .design .detail  dl dd {
    font-size: 15px;
    font-weight: 400;
    font-family: 'pretandard';
}
.k_container .design .detail  dl .overview dd {
    line-height: 1.6;
}
.k_container .design .detail  dl .grid dd {
    line-height: 2;
}
.k_container .design .detail  dl .grid dd span {
    width: 10em;
    display: inline-block;
}
.k_container .design .detail  dl .grid dd strong {
    width: 20em;
}

.k_container .mobile {
    height: 100vh;
    background:  url(../images/kps_mobile_img.png)  no-repeat center center/ cover;
    color: #fff;
    position: relative;
    display: flex;
    align-items: center;
    z-index: 100;
}
.k_container .mobile .tit {
    position: absolute;
    left: 38px;
    top: 85px;
}
.k_container .mobile h2 {
    font-size: 20px;
    position: relative;
    width: 4.8em;
    padding-top: 7px;
}
.k_container .mobile h2::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    content: "";
    background-color: #1E6593;
}
.k_container .mobile p {
    margin-top: 15px;
    line-height: 1.5;
}
.k_container .mobile .detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.k_container .mobile .detail.d_01 {
    margin: 0 130px 0 150px;
}
.k_container .mobile .detail.d_02 {
    padding-right: 30px;
}
.k_container .mobile .detail dl {
    width: 200px;
}
.k_container .mobile .detail dl div {
    margin-bottom: 35px;
    margin-top: 28px;
}
.k_container .mobile .detail dl dt {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 7px;
}
.k_container .mobile .detail dl dd {
    font-size: 15px;
    font-weight: 400;
    font-family: 'pretandard';
}
.k_container .mobile .detail  dl .grid dd {
    line-height: 2;
}
.k_container .mobile .detail  dl .grid dd span {
    width: 7em;
    display: inline-block;
}
.k_container .mobile .detail  dl .grid dd strong {
    width: 10em;
}
/***********kps 콘텐츠 끝***********/




/***********hospital 콘텐츠***********/
.h_container .concept {
    width: 100vw;
    height: 100vh;
    background: url(../images/hospital_con_bg.png) no-repeat center center /cover;
    color: #0d0d0d;
    position: relative;
}
.h_container .concept::after {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
    width: 1px;
    height: 100%;
    content: "";
    background-color: rgba(0, 0, 0, 0.2); 
}
.h_container .concept::before {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 10;
    transform: translate(-50%, -50%);
    width: 13px;
    height: 13px;
    content: "";
    background-color: #dfdede;
}
.h_container .concept h2 {
    position: absolute;
    left: 38px;
    top: 60px;
    font-size: 20px;
    padding-top: 7px;
    font-weight: 700;
}
.h_container .concept h2::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    content: "";
    background-color: #1E6593;
}
.h_container .concept .con {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
}
.h_container .concept .con > li {
    width: 50%;
    height: 50%;
    padding-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.h_container .concept .con > li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.h_container .concept .con .con01 , .h_container .concept .con .con02 {
    padding-top: 80px;
}
.h_container .concept .con .con01 ,.h_container .concept .con .con03 {
    text-align: center;
}
.h_container .concept .con .con02 ,.h_container .concept .con .con04 {
    align-items: flex-start;
    padding-left: 70px;
}
.h_container .concept .con .con01 em {
    color: #1E6593;
    font-weight: 700;
}
.h_container .concept .con .con01 > .tit {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 35px;
}
.h_container .concept .con .con01 > .tit > strong {
    font-size: 30px;
}
.h_container .concept .con .con01 > .tit > i {
    font-family: 'pretandard';
    font-size: 13px;
    padding: 20px 10px 0 0;
    display: block;
    width: 52px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='20' viewBox='0 0 48 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35.1028 19.0854C34.6362 19.4055 34.2062 19.3805 33.8128 19.0106C33.4195 18.6406 33.3638 18.2047 33.6457 17.7027L37.5427 11.1885H2.11529C1.77661 11.1885 1.49386 11.0766 1.26705 10.8528C1.04019 10.6289 0.926758 10.3499 0.926758 10.0157C0.926758 9.68139 1.04019 9.39713 1.26705 9.16289C1.49386 8.9286 1.77661 8.81145 2.11529 8.81145H37.5427L33.6457 2.29732C33.3638 1.79532 33.4195 1.35935 33.8128 0.989416C34.2062 0.619485 34.6362 0.594526 35.1028 0.914539L47.0225 8.21147C47.6739 8.6384 47.9996 9.23368 47.9996 9.99731C47.9996 10.761 47.6739 11.3581 47.0225 11.7885L35.1028 19.0854Z' fill='black'/%3E%3C/svg%3E%0A");
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0 150px;
    animation-name: right_move; 
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
@keyframes right_move { /* 애니메이션을 효과를 미리 설정함 */
	0% { transform:translate(-5px, 0) }  /* 애니메이션을 시작할때의 속성 */
	100% { transform:translate(20px, 0) } /* 애니메이션이 종료될때의 속성 */
}
.h_container .concept .con .con01 .sub {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 783px;
    height: 120px;
    background-color: #fff;
    color: #0d0d0d;
    border-radius: 60px;
    overflow: hidden;
    font-weight: 600;
    font-family: 'pretandard';
    margin-bottom: 20px;
    position: relative;
    z-index: 100;
}
.h_container .concept .con .con01 .sub::before {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 22em;
    height: 100%;
    content: "";
    border-radius: 60px;
    background-color: #DBCBBE;
}
.h_container .concept .con .con01 .sub:hover:before {
    animation-name: long_move;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function:  ease-in-out;
}
.h_container .concept .con .con01 .sub:hover .aft {
    color: #fff;
}
@keyframes long_move { /* 애니메이션을 효과를 미리 설정함 */
	0% { width: 22em; transform: translatex(0);}  /* 애니메이션을 시작할때의 속성 */
	100% { width: 32em; transform: translatex(65%); } /* 애니메이션이 종료될때의 속성 */
}
.h_container .concept .con .con01 .sub .bef {
    width: 18em;
    color: #0d0d0d;
}
.h_container .concept .con .con01 .sub .aft {
    width: 28em;
    padding: 0 5px 0 48px;
}
.h_container .concept .con .tit {
    font-size: 30px;
    font-weight: 700;
}
.h_container .concept .con .con02 .tit {
    margin-bottom: 76px;
}
.h_container .concept .con .con02 > ul {
    display: flex;
    width: 100%;
}
.h_container .concept .con .con02 > ul > li:first-child {
    margin-right: 20px;
    width: 353px;
}
.h_container .concept .con .con02 > ul > li:last-child {
    width: calc(100% - 353px);
    padding-right: 70px;
}
.h_container .concept .con .con02 > ul > li > p {
    border-bottom: 3px solid #A89788;
    padding-bottom: 17px;
    height: 2.5em;
    font-weight: 700;
}
.h_container .concept .con .con02 > ul > li p em {
    font-size: 15px;
    margin-left: 10px;
}
.h_container .concept .con .con02 > ul > li .sub {
    margin-top: 62px;
}
.h_container .concept .con .con02 > ul > li .sub div {
    margin-bottom: 39px;
    display: flex;
    align-items: center;
    height: 2em;
}
.h_container .concept .con .con02 > ul > li .sub span {
    width: 11em;
}
.h_container .concept .con .con02 > ul > li:last-child .sub span {
    width: 15em;
}
.h_container .concept .con .con03 .tit {
    margin-bottom: 80px;
}
.h_container .concept .con .con03 .sub {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.h_container .concept .con .con03 .sub li {
    width: 154px;
    height: 154px;
    border-radius: 100%;
    background-color: #1E6593;
    box-shadow: 2px 2px 2px 20px rgb(6 62 99 / 3%);
    color: #fff;
    display: flex;
    align-items: center;    
    line-height: 1.6;
    padding: 0 10px;
}
.h_container .concept .con .con04 {
    font-weight: 700 ;
    padding-right: 70px;
}
.h_container .concept .con .con04 em {
    color: #1E6593;
}
.h_container .concept .con .con04 .tit {
    margin-bottom: 30px;
}
.h_container .concept .con .con04 .sub .top {
    display: flex;
    padding-bottom: 18px;
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    border-bottom-color: #fff;
}
.h_container .concept .con .con04 .sub .top li:first-child {
    width: 30%;
}
.h_container .concept .con .con04 .sub .top li:last-child {
    width: 70%;
    padding-right: 70px;
}
.h_container .concept .con .con04 .sub .top li strong {
    display: block;
    font-size: 20px;
}
.h_container .concept .con .con04 .sub .top li span {
    padding-top: 125px;
    display: inline-block;
    margin-right: 75px;
    position: relative;
}
.h_container .concept .con .con04 .sub .top li span::after {
    position: absolute;
    left: 50%;
    bottom: 25px;
    transform: translate(-50%, 0);
    content: "";
    width: 102px;height: 102px;
    border-radius: 100%;
    border: 1px solid rgba(230, 230, 230, 0.6);
}
.h_container .concept .con .con04 .sub .top li span.col01::after {
    background-color: #1E6593;
}
.h_container .concept .con .con04 .sub .top li span.col02::after {
    background-color: #E3D3B8;
}
.h_container .concept .con .con04 .sub .top li span.col03::after {
    background-color: #F9F8F4;
}
.h_container .concept .con .con04 .sub .top li span.col04::after {
    background-color: #333333;
}
.h_container .concept .con .con04 .sub .top li:first-child span {
    padding-left: 20px;
}
.h_container .concept .con .con04 .sub .top li:first-child span::after {
    left: 60%;
}
.h_container .concept .con .con04 .sub p {
    padding-top: 20px;
    width: 83%;
}
.h_container .section_swiper .swiper-slide { width: auto;  }
.h_container .design {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    background: url(../images/hospital_design_bg.png) no-repeat center center /cover;
    padding-right: 150px;
}
.h_container .design h2 {
    position: absolute;
    left: 38px;
    top: 60px;
    font-size: 20px;
    padding-top: 7px;
    font-weight: 700;
}
.h_container .design h2::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    content: "";
    background-color: #1E6593;
}
.h_container .design .detail {
    margin: 0 30px 0 110px;
}
.h_container .design .detail dl {
    width: 320px;
}
.h_container .design .detail dl div {
    margin-bottom: 47px;
}
.h_container .design .detail dl dt {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 7px;
}
.h_container .design .detail  dl dd {
    font-size: 15px;
    font-weight: 400;
    font-family: 'pretandard';
}
.h_container .design .detail  dl .overview dd {
    line-height: 1.6;
}
.h_container .design .detail  dl .grid dd {
    line-height: 2;
}
.h_container .design .detail  dl .grid dd span {
    width: 10em;
    display: inline-block;
}
.h_container .design .detail  dl .grid dd strong {
    width: 20em;
}
.h_container .mobile {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
}
.h_container .mobile::after {
    position: absolute;
    right:  0;
    bottom: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -2;
    background-color: rgba(249, 248, 244, 1);
}
.h_container .mobile .tit {
    position: absolute;
    left: 38px;
    top: 85px;
    font-weight: 700;
}
.h_container .mobile h2 {
    font-size: 20px;
    position: relative;
    width: 5em;
    padding-top: 7px;
}
.h_container .mobile h2::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    content: "";
    background-color: #1E6593;
}
.h_container .mobile p {
    margin-top: 15px;
    line-height: 1.5;
}
.h_container .mobile .detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.h_container .mobile .detail.d_01 {
    margin: 0 130px 0 200px;
}
.h_container .mobile .detail.d_01 .main_photo {
    margin-top: 180px;
}
.h_container .mobile .detail.d_02 {
    padding-right: 30px;
}
.h_container .mobile .detail.d_02 .main_photo {
    margin-top: 20px;
}
.h_container .mobile .detail dl {
    width: 200px;
}
.h_container .mobile .detail dl div {
    margin-bottom: 35px;
    margin-top: 28px;
}
.h_container .mobile .detail dl dt {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 7px;
}
.h_container .mobile .detail dl dd {
    font-size: 15px;
    font-weight: 500;
    font-family: 'pretandard';
}
.h_container .mobile .detail  dl .grid dd {
    line-height: 2;
}
.h_container .mobile .detail  dl .grid dd span {
    width: 7em;
    display: inline-block;
}
.h_container .mobile .detail  dl .grid dd strong {
    width: 10em;
}
/***********hospital 콘텐츠 끝***********/