@charset "utf-8";

@media screen and (max-width:1200px) {
    .school .history-img ol > li { width: calc(100% / 3 - 30px); }
    
}

@media screen and (max-width:1000px) {
    .medcom-info :is(.first-line, .second-line) { grid-template-columns: 1fr; gap: 25px; }
    .medcom-info .first-line .mark-caption ul { gap: 15px 30px; }
    .medcom-info .unit-history h4 { margin-top: 0; }
    .medcom-info .action-btn-group { flex-direction: column; gap: 15px; }
    .comm-greeting .top { padding-left: 0; }
    .comm-greeting .top .commdr { display: flex; flex-direction: column; align-items: center; position: relative; left: 0; }
    .comm-greeting .top .img-wrap { margin-left: 20px; margin-bottom: 40px; }
    .comm-greeting .top .highlight { padding-top: 30px; margin-bottom: 30px; }
    .comm-greeting .top .highlight p { padding-left: 43px; }
    .comm-greeting .top .highlight p:before { left: 0; }
    .comm-greeting .top .highlight p br { display: none; }
    .comm-greeting .top .img-wrap { width: 220px; height: 264px; margin-top: -20px; }
    .comm-greeting .top .img-wrap:before { width: 220px; height: 264px; left: -30px; bottom: -30px; }
    .comm-greeting .top .img-wrap .overflow { width: 177px; height: 213px; }
    .comm-greeting .bottom { margin: 0 -15px; padding: 20px; }
    .comd-history { margin: -15px 0 40px 0; display: flex; flex-wrap: wrap; }
    .comd-history li { width: 100%; margin: 15px 0; padding: 20px 20px; }
    .comd-history li .text-wrap strong { font-size: 20px; }
    .comd-history li .text-wrap p { margin-top: 13px; }
    .comd-history li .text-wrap p span { margin-bottom: 2px; display: block; }

    .hospital.introduc { flex-direction: column; }
    .hospital.introduc .text-wrap p { font-size: 17px; }
    .hospital.introduc .img-wrap .overflow { height: 180px; }
    .hospital.introduc .img-wrap .overflow img { width: 100%; }
    .hospital.introduc .left, .hospital .core-values, .hospital.greeting { flex-direction: column; }
    .hospital .left, .hospital .right, .hospital .core-values .mission, .hospital .core-values .vision { width: 100% !important; }
    .hospital .right { margin-top: 50px !important; margin-left: 0 !important; }
    .hospital .core-values .mission, .hospital .core-values .vision { padding: 20px; }
    .hospital .core-values .vision { margin-top: 30px; margin-left: 0; }
    .hospital.greeting .left .img-wrap { width: 220px; height: 264px; }
    .hospital.greeting .left .img-wrap:before { width: 220px; height: 264px; left: -30px; bottom: -30px; }
    .hospital.greeting .left .img-wrap .overflow { width: 177px; height: 213px; }
    .hospital.greeting .right .highlight strong, .hospital.greeting .right .highlight p { text-align: center; }
    .hospital .history ol li { padding: 13px 0; }    
    .medipart-list ul { margin: -7px; }
    .medipart-list ul li { width: calc(100% / 4 - 14px); margin: 7px; }
    .medipart-list ul li .dept-info { background-size: auto 30px; background-position: 50% 30px; font-size: 16px; }
    .medipart-list ul li .dept-info:before { width: 50px; height: 50px; top: 20px; }
    .doctor-list ul li { width: calc(100% / 3 - 30px); margin: 15px; padding: 20px; }
    .timetable-list ul { margin: -15px -15px 20px -15px; }
    .timetable-list ul li { width: calc(100% / 2 - 30px); padding: 20px; }
    .img-box .overflow img { width: 100%; }
    
    .school .move-img { width: 100%; }
    .school .history-img ol > li { width: calc(100% / 2 - 20px); margin: 10px; }
    .organization {  }
    .organization > ul > li { padding: 0 25px 50px 25px; }
    .organization > ul > li:before { display: none; }
    .organization > ul > li > ul { flex-direction: column; }
    .organization > ul > li > ul > li + li { margin-top: 25px; }
    .organization .inner > ul { gap: 15px; }
    .organization .inner >strong { margin-bottom: 15px; }
    .sketch-map .img-wrap { height: auto; }
    .sketch-map .address { padding: 20px; }
    .sketch-map .address .badge + p { margin-top: 8px; }
    .route { grid-template-columns: 100%; gap: 0; }

    .prov-process { margin: 15px -15px 0 -15px; }
    .prov-process li { width: calc(50% - 40px); }
    .prov-process li:nth-child(3) { order: 2; }
    .prov-process li:nth-child(4) { margin-right: 20px; order: 1; }
    .prov-process li:nth-child(5) { order: 3; }
    .prov-process li:nth-child(6) { order: 4; }
    .prov-process li:nth-child(3):after { right: 0; left: -34px; }
    .prov-process li:nth-child(2n):after { right: calc(50% - 14px); top: auto; bottom: -20px; transform: rotate(90deg); }
    .prov-process li:nth-child(n+3) { margin-top: 40px; }
    .prov-process li:nth-child(4n):before { left: calc(50% - 14px); top: auto; bottom: -20px; transform: rotate(90deg); display: block; }
    .prov-process li:nth-child(5n) { margin-left: 20px; }
    .prov-process li:nth-child(5n):before { display: none; }
    .prov-process li:last-child:before { display: none; }

    .lab-process li { width: 100%; margin: 30px 0 !important; }
    .lab-process li:after { right: calc(50% - 14px); top: auto; bottom: -20px; transform: rotate(90deg); }
    .lab-core-values .core-values .vision, .lab-core-values .core-values .mission { flex-direction: column; }
    .lab-core-values .core-values * strong { margin-right: 0; margin-bottom: 10px; padding: 15px 10px; }
    .lab-core-values .core-values * ul { padding: 20px 20px; }
    .lab-core-values .core-values * ul li + li:before { display: none; }
    .lab-core-values .mid-text { padding: 15px 30px 20px 30px; }
    
    .link-box { gap: 20px; }
    .link-box li { width: 100%; padding: 17px 20px; align-items: center; flex-direction: column; }
    .link-box li .btn-wrap { width: 100%; }
    .link-box li em { margin-top: 3px; text-align: left; }
    .link-box li em .icon { top: 3px; }
    .structure > ul { grid-template-columns: repeat(2, 1fr); }
    .structure > ul > li:nth-child(2) { grid-column: span 1; }
    .structure > ul > li:nth-child(2) > ul { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width:768px) {
    .medcom-info .first-line .mark-caption ul { grid-template-columns: 1fr; }
    .unit-video .video-wrap video { width: 100%; }
    .hospital.introduc .video-wrap { width: 100%; height: 300px; margin-bottom: 20px; background-color: #000; overflow: hidden; position: relative; }
	.hospital.introduc .video-wrap video { height: 100%; object-fit: cover; transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; }
    .hospital .history ol li { padding: 13px 0; flex-direction: column; }
    .hospital .history ol li strong { width: 100%; min-width: auto; margin-bottom: 3px; text-align: left; }
    .medipart-list ul li { width: calc(100% / 2 - 14px); }
    .doctor-list ul { margin: -7px; }
    .doctor-list ul li { width: calc(100% / 2 - 14px); margin: 7px; padding: 17px; }
    .doctor-list ul li .img-wrap { width: 100px; height: 125px; margin-bottom: 13px; }
    .timetable-list ul li { width: 100%; }    

    .school .history-list { grid-template-columns: 1fr; }
    .school .history-list > ol > li { padding: 13px 0; flex-direction: column; }
    .school .history-list > ol > li strong { width: 100%; margin-bottom: 3px; text-align: left; }

    .prov-process { margin: 0 0 -15px 0; }
    .prov-process li { width: 100%; margin: 30px 0 !important; }
    .prov-process li:nth-child(2), .prov-process li:nth-child(4), .prov-process li:last-child { margin-right: 20px; }
    .prov-process li:nth-child(3) { order: 1; }
    .prov-process li:nth-child(4) { order: 2; }
    .prov-process li:nth-child(3):after { right: calc(50% - 14px); left: auto; }
    .prov-process li:after { right: calc(50% - 14px); top: auto; bottom: -20px; transform: rotate(90deg); }
    .img-expsport { width: 100%; }

    .structure > ul { grid-template-columns: repeat(1, 1fr); }
    .structure > ul > li:nth-child(2) { grid-column: span 1; }
    .location .traffic-info > li { padding-left: 0; }
    .location .traffic-info > li .icon { margin-bottom: 10px; position: relative; left: 0; }
    .location .traffic-info > li > ol > li { display: flex; flex-direction: column; align-items: flex-start; }
    .location .traffic-info > li > ol > li > .badge { margin-bottom: 3px; }
}