/* 섹션별 */
.main_visual {position: relative; min-height: 100vh; background: url("/resources/integratedCancerCenter/new/images/bg_01.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center center; overflow: hidden;}
.main_visual .con {display:flex; flex-wrap:wrap; justify-content: center; align-items: center;}
.tit {font-size: 40px; font-weight:500;  margin-bottom: 10px; letter-spacing:-.5px; font-family: 'esamanru';}
.tit_ss {font-size: 16px; font-weight:400; margin-bottom: 10px; text-transform:uppercase; letter-spacing:2px;}

/* 왼쪽 텍스트 영역 */
.hero-inner {width:100%; max-width: 1400px; margin: 0 auto; padding: 140px 60px;}
.hero-text {width: 50%;}
.hero-text h1 {color: #1c3c6b;}
.hero-text h3 { color: #1c3c6b;}
.hero-text p {font-size: 18px; font-weight:500; line-height: 1.8; margin-bottom: 20px;}

.highlight {color: #c62828; font-weight: 600;}
.gradient-bar_1 {width:100%; height: 3px; margin:30px 0;
    background: linear-gradient(
    to right,
    #0c3a73 0%,
    rgba(28, 79, 184, 0.8) 30%,
    rgba(28, 79, 184, 0.4) 60%,
    rgba(28, 79, 184, 0) 100%
    );
}

.gradient-bar_2 {
    width: 100%;
    height: 3px;
    margin:30px 0;
    background: linear-gradient(
    to left,
    #0c3a73 0%,
    rgba(28, 79, 184, 0.8) 30%,
    rgba(28, 79, 184, 0.4) 60%,
    rgba(28, 79, 184, 0) 100%
    );
}

/* ✅ 병원 이미지 우측 하단 고정 */
.hero-image {position: absolute; right: 8%; bottom: 0; width: 55%; max-width: 900px;}
.hero-image img {width: 100%; height: auto; display: block;}

/* 로고 */
.logo {position: absolute; top: 40px; right: 100px; width: 90px; z-index: 10; max-width:200px;}
.logo img {width:140%;}
.about_center {position: relative; min-height: auto; padding:150px 0; background: url("/resources/integratedCancerCenter/new/images/bg_02.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center center; overflow: hidden; display:flex; flex-wrap:wrap; justify-content: center; align-items: center;}
/* 리스트 */
.info-item {display: grid; grid-template-columns: 120px 260px 1fr; align-items: center; gap: 15px; margin: 20px 0;}

/* 이미지 */
.info-item .thumb img {width: 100%; border-radius: 10px 0 10px 0;}

/* 텍스트 */
.info-item .text {font-size: 18px; line-height: 1.7; color: rgba(255,255,255,0.85);}
.info-item .text span {color:#bbd6ff;}
.circle-gradient {position: relative; width: 90px; height: 90px; border-radius: 50%; display: flex; align-items: center; justify-content: center;}

/* 그라데이션 원 테두리 */
.circle-gradient::before {content: ''; position: absolute; inset: 0; border-radius: 50%;  
    /* 원형 그라데이션 */
    background: conic-gradient(
        from 360deg,
        rgba(255,255,255,0) 0deg,
        rgba(255,255,255,0) 40deg,
        rgba(255,255,255,0.8) 180deg,
            rgba(255,255,255,0) 320deg,
        rgba(255,255,255,0) 360deg
    );

    /* 테두리 두께 */
    mask: radial-gradient(
        circle,
        transparent 60%,
        black 68%
    );
}

/* 작은 점 */
.dot {position: absolute; width: 6px; height: 6px; background: #fff; border-radius: 50%; right: -12px; top: 50%; transform: translateY(-50%);}
/* 숫자 */
.num-text {font-size: 22px; font-weight: 300; color: #fff; z-index: 1;}

/* 푸터 */
#footer {background-color: #2a2a2a; padding:35px 0 60px;}
#footer .bottom-menu a {color:#fff;}
#footer .copytxt p {line-height: 20px; }
#footer .bottom_menu li {margin:0 20px; position:relative; color:#fff;}
#footer .bottom_menu li a { color:#fff;}
#footer .bottom_menu li a:hover {text-decoration: underline;}
#footer .bottom_menu li::after {display: block; content:''; width:1px; height:15px; background:#fff; position:absolute; top:5px; left:-17px;}
#footer .bottom_menu li:first-child::after {display: none;}
#footer .line {width:100%; height:1px; background-color:#555; margin-top:30px;}



/* 반응형 */
@media (max-width: 1400px) {
    .tit {font-size:34px;}
    .tit_ss {font-size:16px;}
}
@media (max-width: 1024px) {
    .hero-text {width: 90%;}
    .hero-image {position: relative; width: 100%; max-width: none; margin-top: 40px; right:0;}
    .logo {right:30px;}
    .hero-inner {padding:100px 40px 50px;}
    .main_visual {background: url("/resources/integratedCancerCenter/new/images/bg_01_m.jpg");}
    .hero-image img {width:85%;}
    .info-item .text {font-size:15px;}
    .info-list {text-align: center;}
    .tit {font-size:25px;}
    .tit_ss {font-size:15px;}
    .hero-text p {font-size:15px;}
}

@media screen and (max-width: 768px) {
    .wrap.pc {display: none;}
    .wrap.mo {display: block;}
    .logo img {width:100%;}
    .logo {right:5px; top:20px;}
    .circle-gradient {width:50px; height:50px; text-align: center;}
    .info-item {grid-template-columns: 1fr; text-align: center;}
    .info-item .text {font-size:14px;}
    .info-item .circle-number {justify-self: center;}
    .hero-text p {font-size:13px; line-height: 1.5;}
    .tit {font-size:23px;}
    .tit_ss {font-size:13px;}
}