body {overflow: hidden;}

.bg-center {background-repeat: no-repeat; background-size: cover; background-position: center;}
.uppercase {text-transform: uppercase;}
.nowrap {white-space: nowrap;}
.h100vh {height: 100vh;}

#main .main.swiper-container .swiper-slide, #main .main.swiper-container .swiper-slide .back_img {background-repeat: no-repeat; background-size: cover; background-position-x: 50%; background-position-y: center;}
#main .main.swiper-container .swiper-slide.slide01 {background-image: url(/img/main_slide01.jpg);}
#main .main.swiper-container .swiper-slide.slide02 {background-image: url(/img/main_slide02.jpg);}
#main .main.swiper-container .swiper-slide.slide03 {background-image: url(/img/main_slide03.jpg);}
#main .main.swiper-container .container {height: 100%;}

#main .main.swiper-container .inner {position: absolute;    top: 50%;    left: 50%;
    transform: translate(-50%,-50%);    width: 100%;}
#main .main.swiper-container .inner span {color: #ffeb79;}
#main .swiper-pagination-fraction {width: 190px;    color: #fff;    font-weight: 600;    bottom: 6.55rem;    margin: 0 auto;    position: relative; letter-spacing: 1px;  font-size: 1.500rem;}   
#main .swiper-progress-bar {position: relative;    width: 100px;    display: block;    z-index: 1;    height: 2px;    margin: 0 auto;  }
#main .swiper-progress-bar .slide_progress-bar {position: absolute;    height: 2px;    background: rgba(255, 255, 255, 0.3);    width: auto;    clear: both;    opacity: 0;    bottom:6rem;    left: 0;    right: 0;  }
#main .swiper-progress-bar .slide_progress-bar:after {position: absolute;    top: 0;    left: 0;    background: #fff;    height: 100%;    width: 0;    content: "";    transition: 0.1s width linear;  }
#main .swiper-progress-bar.active .slide_progress-bar {opacity: 1;  }
#main .swiper-progress-bar.animate .slide_progress-bar:after {transition: width linear;    transition-delay: unset;    width: 100%;    transition-duration: 5s;  }   

#main .swiper-pagination-current {left: 10px;position: absolute;top: -5px}
#main .swiper-pagination-total {right: 10px;position: absolute;top: -5px}

.subtit {letter-spacing: 10px; position: relative;}
.line {height: 2px; background-color: var(--pointcolor); width: 80px; display: inline-block; vertical-align: middle; margin-left: 1rem;}
.check::before {content: ''; position: relative; background-image: url(/img/check.png);height: 15px; width: 19px;   display: inline-block;    margin-right: 10px; background-size: contain;background-repeat: no-repeat;}

.swiper-scrollbar {background: #dbdbda; border-radius: 0; max-width: 455px;}
.swiper-scrollbar-drag {height: 5px; background-color: var(--pointcolor); border-radius: 0;}

#section01.subject .swiper-container {width: 132.5%;}
#section01.subject .swiper-slide {background-color:#f1f1f1; height: 700px; max-width: 381px !important; transition: .3s;}
#section01.subject .swiper-slide.swiper-slide-active {background-color:#e8f2f8;}
#section01.subject .swiper-slide .plus { width: 50px; height: 50px; background-color:#505050; top: 0; right: 0; position: absolute; color: #fff; font-size: 37px; font-weight: 600;     text-align: center; cursor: pointer;}
#section01.subject .swiper-slide.swiper-slide-active .plus {background-color: var(--pointcolor);}
#section01.subject .swiper-slide ul li {background-color:#505050; margin-bottom: 1rem; width: fit-content; padding: 0.25rem 1rem; transition: .3s;}
#section01.subject .swiper-slide.swiper-slide-active ul li {background-color: var(--pointcolor);}
#section01.subject .img {min-height: 280px;}

#section02.sp.point {position: relative;}
#section02.sp.point li {width: calc(96%/3);}
#section02.sp.point::after {content: ''; background-color: var(--sub2color); width: 100%; height: 25%; z-index: -1; position: absolute; bottom: 0;}

#section03.doctor {background-image: url(/img/doc_bg.jpg); background-repeat: no-repeat; background-size: cover;}
#section03.doctor .doc {position: relative;z-index: 1; }
#section03.doctor .doc::after {content: ''; position: absolute; width: 100%; height: 80%; bottom: 0; z-index: -1; left: 0;}
#section03.doctor .doc.doc01::after {background: linear-gradient(to left, #fff 50%, transparent 75%);}
#section03.doctor .doc.doc02::after {background: linear-gradient(to right, #fff 50%, transparent 75%); right: 0;}
#section03.doctor .doc.doc03::after {background: linear-gradient(to right, #fff 50%, transparent 75%); right: 0;}
#section03.doctor .doc.doc04::after {background: linear-gradient(to left, #fff 50%, transparent 75%);}
#section03.doctor .doc.doc05::after {background: linear-gradient(to right, #fff 50%, transparent 75%); right: 0;}
#section03.doctor .btn {display: table; cursor: pointer; border: 2px solid var(--pointcolor); color: #fff; transition: .3s;}
#section03.doctor .btn:hover {color: var(--pointcolor); background-color: transparent;}
/* #section03.doctor .doc03 .img {height: 691px;} */
#section03.doctor .doc .txt {height: 30%; z-index: 10;} 
#section03.doctor .doc01 .img {position: absolute; right: 0; bottom: 0;}
#section03.doctor .doc02 .txt {position: absolute; right: 0;}
#section03.doctor .doc02 .img {margin-left:  -2.5rem;}
#section03.doctor .doc03 .txt {position: absolute; right: 0;}
#section03.doctor .doc03 .img {margin-left:  -2.5rem;}
#section03.doctor .doc04 .img {position: absolute; right: 0; bottom: 0;}
#section03.doctor .doc05 .txt {position: absolute; right: 0;}
#section03.doctor .doc05 .img {margin-left:  -2.5rem;}


#section04.program .txt {border-bottom: 1px solid #ccc;}
#section04.program .txt:nth-child(3),#section04.program .txt:nth-child(4){border-bottom: 0;}
#section04.program .nav {position: absolute;  right: 10%;  top:5%;   width: 300px;    height: 400px;    border-radius: 150px; z-index: 99; display: flex;} 
#section04.program .nav.on {position: fixed;  top:10%;}
#section04.program .nav li {border-radius: 30px; opacity: .5; transition: .3s; cursor: pointer;}
#section04.program .nav li:hover, #section04.program .nav li.on {opacity: 1;}

#section06.merit {background-image: url(/img/merit_bg.jpg); background-repeat: no-repeat;}
#section06.merit ul li {width: 49%; }
#section06.merit ul li h3 {border-bottom: 1px solid var(--backcolor);}
#section06.merit ul li h3 .icon {width: 70px;    height: 70px;    display: inline-block;    float: right;    border-radius: 50%; position: relative;}
#section06.merit ul li h3 .icon img {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

#section07.ultrasonic .swiper-container {width: 115% !important;}
#section07.ultrasonic .swiper-scrollbar {max-width: 100%;}

#section08.philosophy {height: 950px; background-image: url(/img/philosophy_bg.png); background-repeat: no-repeat; background-size: contain; background-position: bottom right;}
#section08.philosophy .tit.box {position: absolute; top: 50%;left: 50%; transform: translate(-50%,-50%); z-index: 1; width: 32.5%;}

#section08.philosophy .tit.box::before {content: 'philosophy'; color: var(--pointcolor); right: -145px;    position: absolute;    top: 14.5%;    transform: rotate(90deg);    text-transform: capitalize;       font-weight: 700;    font-size: 1.375rem;  letter-spacing: 10px;}
#section08.philosophy .tit.box::after {content: ''; width: 2px; background-color: var(--pointcolor); height: 80px; display: inline-block;     right: -5.75%;    position: absolute;    top: 40%;}
#section08.philosophy .bg_img {background-image: url(/img/philosophy01.jpg); background-repeat: no-repeat; background-size: cover; position: absolute; top: 0; left: 0; height: 100%; z-index: -1; }
#section08.philosophy .bg_img_side {float: right;}
#section08.philosophy .bg_img_side .inner {flex-direction: column;    align-items: flex-end;    justify-content: center; display: flex;}
#section08.philosophy .bg_img_side .inner img:nth-child(2) {margin-top: -5%;    margin-right: 20%;}

#section09.interior {background-image: url(/img/interior_bg.jpg); background-repeat: no-repeat;}
#section09.interior .swiper-container {width: 155%;}
#section09.interior .swiper-slide .inner{position: relative;}
#section09.interior .swiper-slide .inner::after {content: ''; width: 100%; height: 100%; background-color: rgba(0,0,0,.2); position: absolute; bottom: 0; text-align: right; color: #fff; padding: 2rem; font-weight: 700;}
#section09.interior .swiper-slide.slide01.swiper-slide-active .inner::after {content: '접수처';height: 20%; background-color: #000; align-items: center; display: flex; flex-direction: row-reverse;}
#section09.interior .swiper-slide.slide02.swiper-slide-active .inner::after {content: '로비1';height: 20%; background-color: #000; align-items: center; display: flex; flex-direction: row-reverse;}
#section09.interior .swiper-slide.slide03.swiper-slide-active .inner::after {content: '로비2';height: 20%; background-color: #000; align-items: center; display: flex; flex-direction: row-reverse;}
#section09.interior .swiper-slide.slide04.swiper-slide-active .inner::after {content: '로비3';height: 20%; background-color: #000; align-items: center; display: flex; flex-direction: row-reverse;}
#section09.interior .swiper-slide.slide05.swiper-slide-active .inner::after {content: '장비';height: 20%; background-color: #000; align-items: center; display: flex; flex-direction: row-reverse;}
#section09.interior .scrollbar_wrap {display: flex;    flex-direction: row-reverse;}
#section09.interior .scrollbar_wrap .swiper-scrollbar {max-width: unset;     width: 58.75%;}

#section10.info {background-image: url(/img/info_bg.jpg); background-repeat: no-repeat;}
#section10.info .width30 img {height: 100%; width: 100%; max-height: 557px;}
#section10.info .width60 {width: 68.5%; max-height: 557px;}
#section10.info .root_daum_roughmap_landing {width: 100% !important;}
#section10.info .kakao_color {background-color: #fbe100;}
.root_daum_roughmap .wrap_btn_zoom,  .root_daum_roughmap .wrap_controllers {display: none !important;}

#section11.CTscan .container {background-image: url(/img/CTscan_bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center right; padding: 6.5rem 10rem;}
#section11.CTscan .box {background-image: url(/img/point_bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; width: 50%; position: relative;}
#section11.CTscan .box > div {display: flex; flex-direction: column; align-items: center; padding: 3.5rem 0;}


#section11.CTscan .box p:last-child {width: fit-content;}
#section11.CTscan .box h2 {position: relative;}
#section11.CTscan .box h2:After {position: absolute; left: -20px; top: 50%; transform: translateY(-50%); width: 2px; height: 80%; background: #fff; content: "";}

@media (max-width: 1500px){
    #section08.philosophy .tit.box {width: 80%;}
}

@media(max-width:1400px) {
    #section11.CTscan .box {width: 55%;}
}

@media(max-width:1024) {
    #section11.CTscan .box {width: 60%;}
}

@media (max-width: 990px){
    .tit h1 {font-size: 3.750rem;}
    .font-22 {font-size: 1.500rem;}
    .font-18 {font-size: 1.375rem;}
    .font-16 {font-size: 1.125rem;}
    
    .check::before {height: 12px;width: 14px;margin-right: 8px;}

    #main .font-60 {font-size: 2.75rem;}
    #main .main.swiper-container .swiper-slide.slide01 {background-image: url(/img/main_slide01_m.jpg);}
    #main .main.swiper-container .swiper-slide.slide02 {background-image: url(/img/main_slide02_m.jpg);}
    #main .main.swiper-container .swiper-slide.slide03 {background-image: url(/img/main_slide03_m.jpg);}

    #section01.subject .container {flex-direction: column;}
    #section01.subject .width30, #section01.subject .width60 {width: 100%;}
    #section01.subject .swiper-slide {height: 450px;}
    #section01.subject .img {min-height: 190px;}
    #section01.subject .swiper-slide .plus { width: 40px;height: 40px; font-size: 30px;}

    #section02.sp.point li {width: calc(97%/2);} 

    #section03.doctor {padding-bottom: 0;}
    #section03.doctor .container {width: 100%;}
    #section03.doctor .doc {max-width: 500px;}
    #section03.doctor .doc::after {bottom: auto; top: 0; left: -50%; width: 200% !important;}
    #section03.doctor .doc .txt {position: absolute;z-index: 1;height: 80%; left: 10%;}
    #section03.doctor .flex-wrap  {flex-direction: column; align-items: center;}
    #section03.doctor .width50, #section03.doctor .width60  {width: 100%; padding-top: 5%;}
    #section03.doctor .doc01 .img {position: relative; right: auto;}
    #section03.doctor .doc04 .img {position: relative; right: auto;}
    #section03.doctor .doc02 .txt {position: absolute;z-index: 1;height: 80%; left: auto; right: 10%} 
    #section03.doctor .doc02 .img {margin-bottom: 0;}
    #section03.doctor .doc05 .txt {position: absolute;z-index: 1;height: 80%; left: auto; right: 10%} 
    #section03.doctor .doc05 .img {margin-bottom: 0;}
    #section03.doctor .doc03 .txt {position: absolute;z-index: 1;height: 80%; left: auto; right: 10%} 
    #section03.doctor .doc03 .img {margin-bottom: 0;}
    #section03.doctor .doc .img img {transform: translateX(25%); width: 70%; float: right;}
    #section03.doctor .doc02 .img img {transform: translateX(-55%);}
    #section03.doctor .doc05 .img img {transform: translateX(-75%);}
    #section03.doctor .doc03 .img img {transform: translateX(-55%);}
   /*  #section03.doctor .doc03 {margin-top: 0;}
    #section03.doctor .doc03 .img img {transform: translateX(10%);} */
    /* #section03.doctor .doc.doc03::after {background: linear-gradient(to left, #fff 50%, transparent 75%);} */
    #section03.doctor .btn {padding: 0;}

    #section04.program .tit {padding-bottom: 2rem;}
    #section04.program .nav.pc {display: none !important;}
    #section04.program .nav.mo {display: flex !important;}
    #section04.program .nav {right: auto;top: auto;width: auto;height: 50px; position: relative;     max-width: 450px;}
    #section04.program .nav ul {width: 95%;justify-content: space-between;     display: flex;}
    #section04.program .nav li {width: 32%;padding: 2% 0;margin: 0;}
    #section04.program .txt_wrap {width: 100%;}
    #section04.program .txt_wrap .txt {padding-top: 2.25rem;}
    
    #section05.endoscope .flexList {flex-direction: column;}
    #section05.endoscope .flexList .box {width: 100%;}

    #section06.merit ul li h3 .icon {width: 50px;height: 50px;}
    #section06.merit ul li {width: 100%; margin-bottom: 1.25rem;}
    #section06.merit ul li h3 .icon img {width: 65%;}

    #section07.ct .flexList>.box {padding-bottom: 2rem;}

    #section08.philosophy {background-image: none;}
    #section08.philosophy .tit.box {width: 80%; position: relative; padding: 4.5rem; left: 45%; top: 35%;}
    #section08.philosophy .tit.box::before {right: -110px;   top: auto; bottom: 170px;}
    #section08.philosophy .tit.box::after {right: -27px;top: auto;bottom: 0;}
    #section08.philosophy .bg_wrap {display: flex;flex-direction: column;height: 100%; position: absolute; top: 0;     width: 100%;}
    #section08.philosophy .bg_img { position: relative; height: 30%;  width: 100%; height: 30%;}
    #section08.philosophy .container {height: 70%;display: flex;align-items: flex-end; background-image: url(/img/philosophy_bg_m.png);  background-size: contain; width: 100%; padding: 0 5%; margin: 0; background-repeat: no-repeat;     position: relative;     background-position: bottom right;}
    #section08.philosophy .bg_img_side {    bottom: 0;        position: absolute;        right: 5%;}
    #section08.philosophy .bg_img_side img:nth-child(1) {width: 50%;}
    #section08.philosophy .bg_img_side img:nth-child(2) {width: 70%;}

    #section09.interior {background-size: 90% 55%;}
    #section09.interior .swiper-container {width: 265%;}
    #section09.interior .scrollbar_wrap .swiper-scrollbar {width: 100%;}

    #section10.info div.flex {flex-direction: column;}
    #section10.info div.width30,
    #section10.info div.width60,
    #section10.info div.width55,
    #section10.info div.width45  {width: 100%;}
    #section10.info div.width100 {flex-direction: row;}
    #section10.info div.width55 ul {max-width: 485px;}
    #section10.info div.width55 ul li.width40 {width: 30%;}
    /* #section10.info div.width55 ul li.width20 {width: 15%;} */
    #section10.info div.width100.font-18 { font-size: 1.500rem;}
    #section10.info .width60 {max-height: unset;}


    #section11.CTscan .container {background-image: url(/img/CTscan_bgm.jpg); background-repeat: no-repeat; background-size: cover; background-position: center bottom; padding: 3.5rem 3rem; height: 950px;}
    #section11.CTscan .box {margin: auto; width: 100%;}
}   

@media (max-width: 768px){
    #section07.ct .flexList>.box,#section07.ct .flexList>.box img {width:100%}

    #section11.CTscan .container {height: 650px;}
}

@media(max-width:550px){
    .tit h1 {font-size: 3rem;}
    #section03.doctor .doc05 .img img {transform: translateX(-60%);}
}

@media (max-width: 480px){
    #section11.CTscan .container {height: 550px;}
}

@media(max-width:420px) {
    #section03.doctor .doc05 .txt {right: 0;}
}

@media (max-width: 375px){
    .subtit {letter-spacing: 8px;}     
    #main br {display: none !important;}    
    #section11.CTscan .box {padding: 0 1rem;}
}


#section08 .box {background-image: url("/img/logo_bg.png"); background-repeat:no-repeat; background-position:85% 85%;}
#section10 .box {background-image: url("/img/logo_bg.png"); background-repeat:no-repeat; background-position:85% 85%;}

@media(max-width:1580px) {
    #section08 .box  {background-position:95% 52%;}
}

@media(max-width:990px) {
    #section08 .box {background-size: 200px; background-position:95% 60%;} 
    #section10 .box {background-size: 200px; background-position:98% 95%;} 
}

@media(max-width:706px){
    #section08 .box {background-position:90% 80%;} 
}

@media(max-width:500px){
    #section08 .box {background-position:90% 85%;} 
}

@media(max-width:420px){
    #section08 .box {background-position:90% 95%;} 
}