/* ==========================================================
   GWANGJU HOSPITAL
   HOSPITAL GUIDE V2
   Premium Medical UI
   ========================================================== */

.gjh-guide{
    background:#fff;
    color:#102c4d;
}

/* ==========================================================
   HERO
   ========================================================== */

.guide-hero{
    position:relative;
    overflow:hidden;
    color:#fff;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(74,176,255,.35),
            transparent 28%
        ),
        radial-gradient(
            circle at 60% 100%,
            rgba(16,117,222,.25),
            transparent 35%
        ),
        linear-gradient(
            115deg,
            #061d3d 0%,
            #0a3468 48%,
            #1474d3 100%
        );
}

.guide-hero:after{
    content:"";
    position:absolute;
    right:-130px;
    bottom:-180px;

    width:500px;
    height:500px;

    border:1px solid rgba(255,255,255,.10);
    border-radius:50%;

    box-shadow:
        0 0 0 70px rgba(255,255,255,.025),
        0 0 0 140px rgba(255,255,255,.018);
}

.guide-hero-in{
    position:relative;
    z-index:2;

    width:min(1180px,calc(100% - 48px));
    min-height:365px;

    margin:auto;

    display:flex;
    align-items:center;
}

.guide-hero-in>div:first-child{
    max-width:600px;
}

.guide-hero small{
    display:block;

    margin-bottom:16px;

    color:#72c2ff;

    font-size:10px;
    font-weight:900;
    letter-spacing:.25em;
}

.guide-hero h1{
    margin:0;

    font-size:58px;
    line-height:1;
    letter-spacing:-.065em;
}

.guide-hero p{
    margin:22px 0 0;

    color:rgba(255,255,255,.70);

    font-size:14px;
    line-height:1.9;
}

.guide-hero-number{
    margin-left:auto;

    width:205px;
    height:120px;

    padding:22px 24px;

    display:flex;
    align-items:center;
    gap:14px;

    border:1px solid rgba(255,255,255,.20);
    border-radius:22px;

    background:rgba(255,255,255,.09);
    backdrop-filter:blur(15px);

    box-shadow:0 20px 60px rgba(0,0,0,.12);
}

.guide-hero-number b{
    color:#fff;

    font-size:60px;
    line-height:1;
    letter-spacing:-.08em;
}

.guide-hero-number span{
    color:#91d0ff;

    font-size:9px;
    font-weight:900;
    line-height:1.5;
    letter-spacing:.15em;
}

.guide-crumb{
    position:absolute;
    right:0;
    bottom:30px;

    display:flex;
    gap:9px;

    color:rgba(255,255,255,.50);

    font-size:10px;
}

.guide-crumb a{
    color:inherit;
    text-decoration:none;
}

.guide-crumb b{
    color:#fff;
}


/* ==========================================================
   INTRO
   ========================================================== */

.guide-intro{
    width:min(1180px,calc(100% - 48px));

    margin:auto;
    padding:88px 0 55px;

    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:90px;

    align-items:end;
}

.guide-intro-copy small{
    color:#1680e9;

    font-size:10px;
    font-weight:900;
    letter-spacing:.23em;
}

.guide-intro h2{
    margin:14px 0 0;

    color:#0d2d51;

    font-size:39px;
    line-height:1.25;
    letter-spacing:-.055em;
}

.guide-intro>p{
    margin:0 0 4px;

    max-width:440px;

    color:#78899d;

    font-size:13px;
    line-height:1.9;
}


/* ==========================================================
   SECTION TITLE
   ========================================================== */

.guide-section{
    width:min(1180px,calc(100% - 48px));

    margin:auto;
    padding:28px 0 80px;
}

.guide-section-alt{
    padding-top:15px;
}

.guide-section-title{
    display:flex;
    align-items:center;
    gap:17px;

    margin-bottom:26px;
}

.guide-section-title>span{
    width:48px;
    height:48px;

    display:grid;
    place-items:center;

    border-radius:15px;

    background:#eaf5ff;
    color:#147fe6;

    font-size:12px;
    font-weight:900;
}

.guide-section-title h2{
    margin:5px 0 0;

    color:#0e3156;

    font-size:27px;
    line-height:1;
    letter-spacing:-.05em;
}

.guide-section-title small{
    color:#1680e9;

    font-size:9px;
    font-weight:900;
    letter-spacing:.22em;
}


/* ==========================================================
   GUIDE CARDS
   ========================================================== */

.guide-grid{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:14px;
}

.guide-card{
    position:relative;

    min-height:220px;

    padding:28px 28px 25px;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    border:1px solid #e1eaf4;
    border-radius:21px;

    background:
        linear-gradient(
            145deg,
            #fff 0%,
            #fbfdff 100%
        );

    color:inherit;
    text-decoration:none;

    box-shadow:
        0 7px 25px rgba(20,65,105,.035);

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

.guide-card:before{
    content:"";

    position:absolute;

    right:-55px;
    top:-65px;

    width:170px;
    height:170px;

    border-radius:50%;

    background:#edf7ff;

    transition:.3s ease;
}

.guide-card:hover{
    transform:translateY(-7px);

    border-color:#b9dafa;

    box-shadow:
        0 22px 50px rgba(16,80,140,.12);
}

.guide-card:hover:before{
    transform:scale(1.2);
    background:#e5f4ff;
}

.guide-card-no{
    position:relative;
    z-index:2;

    color:#1682ea;

    font-size:10px;
    font-weight:900;
    letter-spacing:.12em;
}

.guide-card-body{
    position:relative;
    z-index:2;

    margin-top:auto;
}

.guide-card-body small{
    display:block;

    margin-bottom:8px;

    color:#8da0b4;

    font-size:8px;
    font-weight:900;
    letter-spacing:.17em;
}

.guide-card-body h3{
    margin:0 0 9px;

    color:#102f53;

    font-size:22px;
    line-height:1.2;
    letter-spacing:-.045em;
}

.guide-card-body p{
    max-width:275px;

    margin:0;

    color:#7c8d9f;

    font-size:11px;
    line-height:1.7;
}

.guide-card-arrow{
    position:absolute;
    z-index:3;

    right:25px;
    bottom:23px;

    width:32px;
    height:32px;

    display:grid;
    place-items:center;

    border:1px solid #d8e9f8;
    border-radius:50%;

    background:#fff;
    color:#1682ea;

    font-size:15px;

    transition:.25s ease;
}

.guide-card:hover .guide-card-arrow{
    background:#1682ea;
    border-color:#1682ea;
    color:#fff;
}


/* ==========================================================
   FIRST MEDICAL CARD = FEATURE
   ========================================================== */

.guide-section:not(.guide-section-alt) .guide-card:first-child{
    grid-column:span 2;

    min-height:255px;

    padding:34px;
}

.guide-section:not(.guide-section-alt) .guide-card:first-child:after{
    content:"OUTPATIENT";

    position:absolute;
    right:38px;
    top:48px;

    color:#d9edff;

    font-size:43px;
    font-weight:900;
    letter-spacing:-.06em;
}

.guide-section:not(.guide-section-alt) .guide-card:first-child .guide-card-body h3{
    font-size:29px;
}

.guide-section:not(.guide-section-alt) .guide-card:first-child .guide-card-body p{
    max-width:390px;

    font-size:12px;
}


/* ==========================================================
   HOSPITAL INFORMATION
   ========================================================== */

.guide-section-alt .guide-card:first-child{
    grid-column:span 2;

    min-height:255px;

    background:
        linear-gradient(
            135deg,
            #092f5c 0%,
            #0d5da7 100%
        );

    border-color:#0d5da7;

    color:#fff;
}

.guide-section-alt .guide-card:first-child:before{
    background:rgba(255,255,255,.06);
}

.guide-section-alt .guide-card:first-child .guide-card-no,
.guide-section-alt .guide-card:first-child .guide-card-body small{
    color:#7ec7ff;
}

.guide-section-alt .guide-card:first-child .guide-card-body h3{
    color:#fff;
    font-size:29px;
}

.guide-section-alt .guide-card:first-child .guide-card-body p{
    color:rgba(255,255,255,.68);
    max-width:390px;
}

.guide-section-alt .guide-card:first-child .guide-card-arrow{
    border-color:rgba(255,255,255,.25);
    background:rgba(255,255,255,.10);
    color:#fff;
}

.guide-section-alt .guide-card:nth-child(2):before{
    background:#eaf9ff;
}

.guide-section-alt .guide-card:nth-child(3):before{
    background:#eef6ff;
}

.guide-section-alt .guide-card:nth-child(4):before{
    background:#edfaff;
}

.guide-section-alt .guide-card:nth-child(5):before{
    background:#f0f6ff;
}


/* ==========================================================
   VISUAL MARKERS
   ========================================================== */

.guide-section:not(.guide-section-alt) .guide-card:nth-child(2) .guide-card-no:before{
    content:"＋";
}

.guide-section:not(.guide-section-alt) .guide-card:nth-child(3) .guide-card-no:before{
    content:"▣";
}

.guide-section:not(.guide-section-alt) .guide-card:nth-child(4) .guide-card-no:before{
    content:"₩";
}

.guide-section:not(.guide-section-alt) .guide-card:nth-child(5) .guide-card-no:before{
    content:"♡";
}

.guide-section-alt .guide-card:nth-child(2) .guide-card-no:before{
    content:"⌂";
}

.guide-section-alt .guide-card:nth-child(3) .guide-card-no:before{
    content:"☎";
}

.guide-section-alt .guide-card:nth-child(4) .guide-card-no:before{
    content:"⌖";
}

.guide-section-alt .guide-card:nth-child(5) .guide-card-no:before{
    content:"▣";
}

.guide-card-no:before{
    display:inline-block;

    margin-right:8px;

    font-size:13px;
}


/* ==========================================================
   CONTACT BAND
   ========================================================== */

.guide-contact{
    position:relative;
    overflow:hidden;

    width:min(1180px,calc(100% - 48px));

    margin:10px auto 100px;

    padding:48px 52px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:40px;

    border-radius:26px;

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(72,178,255,.22),
            transparent 30%
        ),
        linear-gradient(
            115deg,
            #071f42,
            #0b4c91
        );

    color:#fff;

    box-shadow:
        0 25px 65px rgba(5,42,83,.18);
}

.guide-contact:after{
    content:"AI";

    position:absolute;
    right:34px;
    top:20px;

    color:rgba(255,255,255,.04);

    font-size:110px;
    font-weight:900;
}

.guide-contact>div{
    position:relative;
    z-index:2;
}

.guide-contact small{
    color:#75c5ff;

    font-size:9px;
    font-weight:900;
    letter-spacing:.22em;
}

.guide-contact h2{
    margin:10px 0 9px;

    font-size:27px;
    letter-spacing:-.045em;
}

.guide-contact p{
    margin:0;

    color:rgba(255,255,255,.65);

    font-size:12px;
    line-height:1.7;
}

.guide-contact-actions{
    position:relative;
    z-index:2;

    display:flex;
    gap:10px;
}

.guide-contact-actions a,
.guide-contact-actions button{
    min-width:175px;

    padding:16px 19px;

    border:1px solid rgba(255,255,255,.15);
    border-radius:13px;

    background:rgba(255,255,255,.08);

    color:#fff;
    text-decoration:none;
    text-align:left;

    cursor:pointer;

    backdrop-filter:blur(8px);
}

.guide-contact-actions button{
    background:#fff;
    color:#0c396d;
}

.guide-contact-actions span{
    display:block;

    margin-bottom:4px;

    opacity:.6;

    font-size:9px;
}

.guide-contact-actions b{
    font-size:13px;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:900px){

    .guide-hero-in{
        min-height:320px;
    }

    .guide-hero h1{
        font-size:45px;
    }

    .guide-hero-number{
        display:none;
    }

    .guide-intro{
        grid-template-columns:1fr;
        gap:22px;

        padding:65px 0 40px;
    }

    .guide-intro h2{
        font-size:31px;
    }

    .guide-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .guide-section:not(.guide-section-alt) .guide-card:first-child,
    .guide-section-alt .guide-card:first-child{
        grid-column:span 2;
    }

    .guide-contact{
        padding:34px 28px;

        flex-direction:column;
        align-items:flex-start;
    }

    .guide-contact-actions{
        width:100%;
        flex-direction:column;
    }

    .guide-contact-actions a,
    .guide-contact-actions button{
        width:100%;
    }
}


@media(max-width:600px){

    .guide-hero-in{
        width:calc(100% - 36px);
        min-height:290px;
    }

    .guide-hero h1{
        font-size:40px;
    }

    .guide-hero p{
        font-size:12px;
    }

    .guide-crumb{
        bottom:20px;
    }

    .guide-intro,
    .guide-section,
    .guide-contact{
        width:calc(100% - 36px);
    }

    .guide-intro h2{
        font-size:29px;
    }

    .guide-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .guide-section:not(.guide-section-alt) .guide-card:first-child,
    .guide-section-alt .guide-card:first-child{
        grid-column:auto;
    }

    .guide-card,
    .guide-section:not(.guide-section-alt) .guide-card:first-child,
    .guide-section-alt .guide-card:first-child{
        min-height:190px;
        padding:25px;
    }

    .guide-section:not(.guide-section-alt) .guide-card:first-child .guide-card-body h3,
    .guide-section-alt .guide-card:first-child .guide-card-body h3{
        font-size:25px;
    }

    .guide-section:not(.guide-section-alt) .guide-card:first-child:after{
        font-size:30px;
        right:25px;
        top:35px;
    }

    .guide-section-title h2{
        font-size:24px;
    }

    .guide-contact{
        margin-bottom:65px;
    }
}


/* ==========================================================
   GWANGJU HOSPITAL
   GUIDE V3
   Information Architecture + Premium Cards
   ========================================================== */

.guide-quick-links-v3{
    width:min(1080px,calc(100% - 48px));
    margin:120px auto 0;
    padding:0 0 120px;
}

.guide-quick-head-v3{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:end;
    margin-bottom:42px;
}

.guide-quick-head-v3 small{
    display:block;
    margin-bottom:12px;
    color:#1683df;
    font-size:10px;
    font-weight:800;
    letter-spacing:.22em;
}

.guide-quick-head-v3 h2{
    margin:0;
    color:#102f50;
    font-size:36px;
    line-height:1.35;
    letter-spacing:-.055em;
}

.guide-quick-head-v3 p{
    margin:0 0 5px;
    color:#7890a8;
    font-size:14px;
    line-height:1.9;
}

.guide-quick-grid-v3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.guide-quick-card-v3{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:255px;
    padding:30px 30px 27px;
    overflow:hidden;

    text-decoration:none;

    border:1px solid #e2edf6;
    border-radius:22px;
    background:
        radial-gradient(circle at 100% 0,
            rgba(221,241,255,.75) 0,
            rgba(221,241,255,.28) 100px,
            transparent 101px),
        #fff;

    box-shadow:
        0 10px 30px rgba(22,77,121,.055);

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

.guide-quick-card-v3:after{
    content:"";
    position:absolute;
    right:-38px;
    bottom:-58px;
    width:150px;
    height:150px;
    border-radius:50%;
    border:1px solid rgba(21,132,224,.08);
    pointer-events:none;
}

.guide-quick-card-v3:hover{
    transform:translateY(-6px);
    border-color:#b9def8;
    box-shadow:
        0 20px 42px rgba(20,94,148,.12);
}

.quick-icon-v3{
    display:flex;
    align-items:center;
    justify-content:center;

    width:48px;
    height:48px;
    margin-bottom:27px;

    border:1px solid #d9ecfa;
    border-radius:14px;

    color:#1385df;
    background:#f1f9ff;

    font-size:22px;
    font-weight:700;
}

.guide-quick-card-v3 small{
    color:#8ba2b7;
    font-size:9px;
    font-weight:800;
    letter-spacing:.18em;
}

.guide-quick-card-v3 h3{
    margin:9px 0 9px;
    color:#123451;
    font-size:22px;
    font-weight:800;
    letter-spacing:-.045em;
}

.guide-quick-card-v3 p{
    margin:0;
    color:#8095a8;
    font-size:13px;
    line-height:1.75;
    letter-spacing:-.025em;
}

.guide-quick-card-v3 b{
    margin-top:auto;
    padding-top:22px;

    color:#1684df;
    font-size:12px;
    font-weight:800;
}

.guide-quick-card-v3 b i{
    margin-left:5px;
    font-style:normal;
    transition:margin .2s ease;
}

.guide-quick-card-v3:hover b i{
    margin-left:10px;
}


/* ==========================================================
   EXISTING GUIDE CARDS V3 REFINEMENT
   ========================================================== */

.guide-card{
    position:relative;
    overflow:hidden;

    border:1px solid #e2edf6 !important;
    border-radius:22px !important;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(223,242,255,.72) 0,
            rgba(223,242,255,.22) 100px,
            transparent 101px
        ),
        #fff !important;

    box-shadow:0 8px 28px rgba(20,77,120,.045) !important;

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease !important;
}

.guide-card:hover{
    transform:translateY(-5px);
    border-color:#b8ddf7 !important;
    box-shadow:0 18px 38px rgba(20,91,145,.11) !important;
}

.guide-card-body h3{
    color:#123451 !important;
    letter-spacing:-.045em;
}

.guide-card-body p{
    color:#7c91a5 !important;
    line-height:1.75 !important;
}

.guide-card-arrow{
    color:#1684df !important;
}


/* ==========================================================
   CONTACT
   ========================================================== */

.guide-contact{
    border-radius:28px !important;
    overflow:hidden;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:900px){

    .guide-quick-links-v3{
        width:calc(100% - 32px);
        margin-top:80px;
        padding-bottom:80px;
    }

    .guide-quick-head-v3{
        grid-template-columns:1fr;
        gap:20px;
        margin-bottom:30px;
    }

    .guide-quick-head-v3 h2{
        font-size:28px;
    }

    .guide-quick-head-v3 p{
        font-size:13px;
    }

    .guide-quick-grid-v3{
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }

    .guide-quick-card-v3{
        min-height:230px;
        padding:24px 21px 22px;
        border-radius:18px;
    }

    .quick-icon-v3{
        width:42px;
        height:42px;
        margin-bottom:21px;
        border-radius:12px;
        font-size:19px;
    }

    .guide-quick-card-v3 h3{
        font-size:19px;
    }

    .guide-quick-card-v3 p{
        font-size:12px;
    }
}

@media (max-width:560px){

    .guide-quick-links-v3{
        width:calc(100% - 28px);
        margin-top:65px;
    }

    .guide-quick-head-v3 h2{
        font-size:25px;
    }

    .guide-quick-grid-v3{
        grid-template-columns:1fr;
        gap:11px;
    }

    .guide-quick-card-v3{
        min-height:205px;
        padding:22px 21px;
    }

    .guide-quick-card-v3 h3{
        font-size:20px;
    }
}