/* 門診區 */ #Outpatient2 {display:flex;align-items:stretch;justify-content:space-between;gap:4%;width: 93%;padding:55px 0;color:#4d4e53;box-sizing:border-box;} #Outpatient2 * { box-sizing:border-box; } #Outpatient2 #Outpatient8x4{border: 5px solid #eee;} /* 左側資訊 */ #Outpatient2 .leftBox { position:relative; display:flex; flex-direction:column; justify-content:space-between; width:52%; min-height:365px; padding:10px 0 0 6.5%; } #Outpatient2 .titleBox { position:relative; } #Outpatient2 .h2title { margin:0; color:#4b4c51; font-size:46px; font-weight:700; line-height:1.25; letter-spacing:2px; } #Outpatient2 .subtitle { margin:12px 0 0; color:#44464d; font-size:23px; line-height:1.5; letter-spacing:.2px; } #Outpatient2 .subtitle b { font-weight:700; } #Outpatient2 .titleLine { display:block; width:70px; height:5px; margin-top:37px; background:#324da0; border-radius:10px; } /* 醫師圖例 */ #Outpatient2 .doctor { display:flex; align-items:center; flex-wrap:wrap; gap:14px 24px; padding-bottom:5px; } #Outpatient2 .doctorItem { display:flex; align-items:center; gap:8px; white-space:nowrap; } #Outpatient2 .doctorDot { display:block; width:20px; height:20px; flex:0 0 20px; border-radius:50%; } #Outpatient2 .doctorName { color:#26272b; font-size:16px; font-weight:700; line-height:1; letter-spacing:1px; } #Outpatient2 .doctorName small { margin-left:3px; color:#68696d; font-size:11px; font-weight:400; } #Outpatient2 .doctor01 { background:#314da0; } #Outpatient2 .doctor02 { background:#cb2595; } #Outpatient2 .doctor03 { background:#00ab49; } #Outpatient2 .doctor04 { background:#098fb5; } #Outpatient2 .doctor05 { background:#f20c12; } #Outpatient2 .doctor06 { background:#f4a224; } /* 右側門診表 */ #Outpatient28x4 { width:44%; align-self:center; border:5px solid #eeeeee; background:#fff; } #Outpatient2 .schedule_table { display:grid; grid-template-columns:1.65fr repeat(7, 1fr); width:100%; } #Outpatient2 .schedule_cell { display:flex; align-items:center; justify-content:center; min-width:0; min-height:94px; padding:16px 6px; border-bottom:1px solid #ededed; color:#4e4f54; font-size:16px; text-align:center; } #Outpatient2 .schedule_label { grid-column:1; grid-row:1; min-height:69px; justify-content:flex-start; padding-left:42px; font-size:16px; } #Outpatient2 .schedule_day { min-height:69px; font-size:16px; } #Outpatient2 .day_mon { grid-column:2; grid-row:1; } #Outpatient2 .day_tue { grid-column:3; grid-row:1; } #Outpatient2 .day_wed { grid-column:4; grid-row:1; } #Outpatient2 .day_thu { grid-column:5; grid-row:1; } #Outpatient2 .day_fri { grid-column:6; grid-row:1; } #Outpatient2 .day_sat { grid-column:7; grid-row:1; } #Outpatient2 .day_sun { grid-column:8; grid-row:1; } #Outpatient2 .day_mo { display:none; } /* 門診時間 */ #Outpatient2 .schedule_time { align-items:flex-start; justify-content:center; flex-direction:column; padding-left:32px; text-align:left; } #Outpatient2 .schedule_time p { margin:0; color:#68696c; font-size:16px; line-height:1.5; white-space:nowrap; } #Outpatient2 .schedule_time small { display:block; color:#68696c; font-size:14px; line-height:1.6; white-space:nowrap; } #Outpatient2 .time_morning { grid-column:1; grid-row:2; } #Outpatient2 .time_noon { grid-column:1; grid-row:3; } #Outpatient2 .time_evening { grid-column:1; grid-row:4; border-bottom:0; } /* 早診 */ #Outpatient2 .mon.morning { grid-column:2; grid-row:2; } #Outpatient2 .tue.morning { grid-column:3; grid-row:2; } #Outpatient2 .wed.morning { grid-column:4; grid-row:2; } #Outpatient2 .thu.morning { grid-column:5; grid-row:2; } #Outpatient2 .fri.morning { grid-column:6; grid-row:2; } #Outpatient2 .sat.morning { grid-column:7; grid-row:2; } #Outpatient2 .sun.morning { grid-column:8; grid-row:2; } /* 午診 */ #Outpatient2 .mon.noon { grid-column:2; grid-row:3; } #Outpatient2 .tue.noon { grid-column:3; grid-row:3; } #Outpatient2 .wed.noon { grid-column:4; grid-row:3; } #Outpatient2 .thu.noon { grid-column:5; grid-row:3; } #Outpatient2 .fri.noon { grid-column:6; grid-row:3; } #Outpatient2 .sat.noon { grid-column:7; grid-row:3; } #Outpatient2 .sun.noon { grid-column:8; grid-row:3; } /* 晚診 */ #Outpatient2 .mon.evening { grid-column:2; grid-row:4; border-bottom:0; } #Outpatient2 .tue.evening { grid-column:3; grid-row:4; border-bottom:0; } #Outpatient2 .wed.evening { grid-column:4; grid-row:4; border-bottom:0; } #Outpatient2 .thu.evening { grid-column:5; grid-row:4; border-bottom:0; } #Outpatient2 .fri.evening { grid-column:6; grid-row:4; border-bottom:0; } #Outpatient2 .sat.evening { grid-column:7; grid-row:4; border-bottom:0; } #Outpatient2 .sun.evening { grid-column:8; grid-row:4; border-bottom:0; } /* 門診文字顏色 */ #Outpatient2 .doctorText { font-size:16px; font-weight:500; } #Outpatient2 .doctorColor01 { color:#314da0; } #Outpatient2 .doctorColor02 { color:#d3239b; } #Outpatient2 .doctorColor03 { color:#00aa47; } #Outpatient2 .doctorColor04 { color:#098fb5; } #Outpatient2 .doctorColor05 { color:#f20c12; } #Outpatient2 .doctorColor06 { color:#f4a224; } #Outpatient2 .slash { color:#314da0; } #Outpatient2 .rest { color:#e7e7e7; font-size:16px; font-weight:600; } @media screen and (max-width:1200px) { #Outpatient2 { gap:3%; } #Outpatient2 .leftBox { width:46%; padding-left:3%; } #Outpatient28x4 { width:51%; } #Outpatient2 .h2title { font-size:40px; } #Outpatient2 .doctor { gap:12px 16px; } #Outpatient2 .doctorName { font-size:14px; } } @media screen and (max-width:900px) { #Outpatient2 {flex-direction:column;gap:45px;padding:40px 0;margin: 0 auto;} #Outpatient2 .leftBox { width:100%; min-height:0; padding:0; } #Outpatient2 .doctor { margin-top:45px; } #Outpatient28x4 { width:100%; } } @media screen and (max-width:767px) { #Outpatient2 { gap:35px; } #Outpatient2 .h2title { font-size:32px; } #Outpatient2 .subtitle { margin-top:7px; font-size:17px; } #Outpatient2 .titleLine { width:50px; height:4px; margin-top:22px; } #Outpatient2 .doctor { gap:10px 15px; margin-top:30px; } #Outpatient2 .doctorDot { width:13px; height:13px; flex-basis:13px; } #Outpatient2 .doctorName { font-size:13px; } #Outpatient28x4 { border-width:4px; } #Outpatient2 .schedule_table { grid-template-columns:1.15fr repeat(3, 1fr); } #Outpatient2 .schedule_cell { min-height:58px; padding:10px 5px; font-size:13px; } #Outpatient2 .schedule_label { grid-column:1; grid-row:1; min-height:66px; justify-content:flex-start; padding-left:14px; font-size:12px; } #Outpatient2 .schedule_day { justify-content:flex-start; min-height:58px; padding-left:20px; font-size:13px; } #Outpatient2 .day_pc { display:none; } #Outpatient2 .day_mo { display:inline; } #Outpatient2 .day_mon { grid-column:1; grid-row:2; } #Outpatient2 .day_tue { grid-column:1; grid-row:3; } #Outpatient2 .day_wed { grid-column:1; grid-row:4; } #Outpatient2 .day_thu { grid-column:1; grid-row:5; } #Outpatient2 .day_fri { grid-column:1; grid-row:6; } #Outpatient2 .day_sat { grid-column:1; grid-row:7; } #Outpatient2 .day_sun { grid-column:1; grid-row:8; border-bottom:0; } #Outpatient2 .schedule_time { align-items:center; padding:6px 2px; text-align:center; } #Outpatient2 .schedule_time p { font-size:11px; line-height:1.35; } #Outpatient2 .schedule_time small { font-size:10px; line-height:1.35; } #Outpatient2 .time_morning { grid-column:2; grid-row:1; min-height:66px; } #Outpatient2 .time_noon { grid-column:3; grid-row:1; min-height:66px; } #Outpatient2 .time_evening { grid-column:4; grid-row:1; min-height:66px; border-bottom:1px solid #ededed; } #Outpatient2 .mon.morning { grid-column:2; grid-row:2; } #Outpatient2 .mon.noon { grid-column:3; grid-row:2; } #Outpatient2 .mon.evening { grid-column:4; grid-row:2; border-bottom:1px solid #ededed; } #Outpatient2 .tue.morning { grid-column:2; grid-row:3; } #Outpatient2 .tue.noon { grid-column:3; grid-row:3; } #Outpatient2 .tue.evening { grid-column:4; grid-row:3; border-bottom:1px solid #ededed; } #Outpatient2 .wed.morning { grid-column:2; grid-row:4; } #Outpatient2 .wed.noon { grid-column:3; grid-row:4; } #Outpatient2 .wed.evening { grid-column:4; grid-row:4; border-bottom:1px solid #ededed; } #Outpatient2 .thu.morning { grid-column:2; grid-row:5; } #Outpatient2 .thu.noon { grid-column:3; grid-row:5; } #Outpatient2 .thu.evening { grid-column:4; grid-row:5; border-bottom:1px solid #ededed; } #Outpatient2 .fri.morning { grid-column:2; grid-row:6; } #Outpatient2 .fri.noon { grid-column:3; grid-row:6; } #Outpatient2 .fri.evening { grid-column:4; grid-row:6; border-bottom:1px solid #ededed; } #Outpatient2 .sat.morning { grid-column:2; grid-row:7; } #Outpatient2 .sat.noon { grid-column:3; grid-row:7; } #Outpatient2 .sat.evening { grid-column:4; grid-row:7; border-bottom:1px solid #ededed; } #Outpatient2 .sun.morning { grid-column:2; grid-row:8; border-bottom:0; } #Outpatient2 .sun.noon { grid-column:3; grid-row:8; border-bottom:0; } #Outpatient2 .sun.evening { grid-column:4; grid-row:8; border-bottom:0; } #Outpatient2 .doctorText, #Outpatient2 .rest { font-size:14px; } }