/**
 * CSS3 Designed by SSUNG
 * Copyright StudioBuron All Rights Reserved 
**/


/* Common */
@charset "utf-8";
@font-face { font-family: 'SCDream-1'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-1Thin.woff') format('woff'); font-weight: 100; }
@font-face { font-family: 'SCDream-2'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-2ExtraLight.woff') format('woff'); font-weight: 200; }
@font-face { font-family: 'SCDream-3'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff'); font-weight: 300; }
@font-face { font-family: 'SCDream-4'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff'); font-weight: 400; }
@font-face { font-family: 'SCDream-5'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff'); font-weight: 500; }
@font-face { font-family: 'SCDream-6'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff'); font-weight: 600; }
@font-face { font-family: 'SCDream-7'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff'); font-weight: 700; }
@font-face { font-family: 'SCDream-8'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-8Heavy.woff') format('woff'); font-weight: 800; }
@font-face { font-family: 'SCDream-9'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-9Black.woff') format('woff'); font-weight: 900; }

html, body, div, span, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, blockquote, p, address, pre, cite, form, fieldset, input, textarea, select, table, caption, tbody, tfoot, thead, tr, th, td, abbr, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    letter-spacing: 0;
    vertical-align: baseline;
    outline: 0;
    list-style-type: none;
    margin-block-start: 0;
    margin-block-end: 0;
}
html{
    scroll-behavior: smooth;
}
a{ 
    text-decoration: inherit;
    color: unset;
    cursor: pointer;
}

section{
    background-size: cover;
    background-position: center center;
    transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
    backface-visibility: hidden;
}

article {
    max-width: 100vw;
}

/* Desktop */
@media screen and (min-width: 769px) {
    article div.contents{
        display: block;
        position: relative;
        margin-left: 10vw;
        margin-right:10vw;
        max-width: 1280px;
    }
    div[role="flex-item"]:not(:only-child).column_one{
        flex: 1 1 512px;
        min-width: 512px;
    }
    div[role="flex-item"]:not(:only-child).column_two{
        flex: 1 1 512px;
        min-width: 512px;
    }
    div[role="flex-item"].relative{
        min-height: 512px;
    }
}
/* Mobile */
@media screen and (max-width: 768px) {
    article div.contents{
        display: block;
        position: relative;
        margin-left: 6vw;
        margin-right: 6vw;
        min-width: 80vw;
    }
    div[role="flex-item"]:not(:only-child).column_one{
        flex: 1 1 512px;
        min-width: 80vw;
    }
    div[role="flex-item"]:not(:only-child).column_two{
        flex: 1 1 512px;
        min-width: 80vw;
    }
    div[role="flex-item"].relative{
        min-height: 512px;
    }
}


div[role="flex-item"]:only-child{
    max-width: 750px;
}


/* Background Image */
#section_home{
    padding-top: 15vmin;
    padding-bottom: 15vmin;
    background-image: url('../img/background_home_001.jpg');
}
#home_001{
}
h1#home_title{
    font-family: 'SCDream-5';
    font-size: clamp(30px, 6vmin, 50px);
    word-break: keep-all;
}
/*#home_002 .fp-bg{
    background-image: url('../img/background_home_002.jpg');
}
#home_003 .fp-bg{
    background-image: url('../img/background_home_003.jpg');
}
#home_004 .fp-bg{
    background-image: url('../img/background_home_004.jpg');
}*/

#about_001 .fp-bg{
    background-image: url('../img/background_about_001.jpg');
}

#about_002{
    background-color: #EDEDED;
}

#about_003{
}

#about_004{
    background-color: #EDEDED;
}

#about_005{
}

#about_006{
    background-color: #EDEDED;
}

#about_007{
}

#about_008{
    background-color: #EDEDED;
}

#about_009{
}

#about_010{
    background-color: #EDEDED;
}

#about_011{
}

#about_012{
    background-color: #EDEDED;
}

#section_doctor{
    background-image: url('../img/background_doctor_001.jpg');
}

#doctor_002{
    background-color: #EDEDED;
}
#doctor_003{
}
#doctor_004{
    background-color: #EDEDED;
}
#doctor_005{
}
#doctor_006{
    background-color: #EDEDED;
}

#clinic_001 .fp-bg{
    background-position-x: 65%;
    background-image: url('../img/background_clinic_001.jpg');
}
#clinic_002{}
#clinic_003{
    background-color: #EDEDED;
}
#clinic_004{}
#clinic_005{
    background-color: #EDEDED;
}
#clinic_006{}
#clinic_007{
    background-color: #EDEDED;
}
#clinic_008{}
#clinic_009{
    background-color: #EDEDED;
}
#clinic_010{}
#clinic_011{
    background-color: #EDEDED;
}
#clinic_012{}
#clinic_013{
    background-color: #EDEDED;
}
#clinic_014{}


#section_contact{
    padding-top: 15vmin;
    padding-bottom: 15vmin;
    background-image: url('../img/background_contact_001.jpg');
}

#section_footer{
    padding-top: 10vmin;
    padding-bottom: 10vmin;
    background-color: #666;
}


/* Design */

.contents h1{
    width: fit-content;
    font-family: 'SCDream-4';
    font-size: clamp(24px, 2.5vmin, 34px);
    color: #FFF;
    border-top-width: clamp(3px, 0.5vmin, 10px);
    border-top-style: solid;
    border-top-color: rgb(255, 255, 255);
    padding-top: 1vmin;
    padding-bottom: 2vmin;
}

.contents h1.noborder{
    border: unset;
}

.contents h2{
    width: fit-content;
    font-family: 'SCDream-4';
    font-size: clamp(20px, 3vmin, 24px);
    color: #FFF;
    padding: 1vmin 0;
}

.contents h3{
    width: fit-content;
    font-family: 'SCDream-3';
    font-size: clamp(13px, 2vmin, 27px);
    color:#FFF;
    padding: 1vmin 0;
}

.contents p.slide_text{
    font-size: clamp(15px, 2vmin, 30px);
    font-family: SCDream-3;
    color: #FFF;
    word-break: keep-all;
}

.contents  ul.nav-slide{
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin-top: 1.5vmin;
    flex-direction: row;
    flex-wrap: wrap;
    gap:.5vw;
}

.contents  ul.nav-slide > li{
    width: fit-content;
    text-align: center;
    padding: 0.5vmin 1.3vmin;
    font-size: clamp(12px, 1.5vmin, 29px);
    font-family: SCDream-4;
    /* margin-top: 1vmin; */
    /* margin-right: 1vmin; */
    color: #FFF;
    border-style: solid;
    border-width: clamp(1px, 0.1vmin, 1px);
    border-radius: clamp(4px, 1vmin, 8px);
    cursor: pointer;
    white-space: nowrap;
}

.contents  ul.nav-slide > li:hover{
    background: rgba(255,255,255,0.1);
    /*mix-blend-mode: screen;*/
}

.contents  ul.nav-slide > li.on{
    color:#000;
    border: none;
    background: #FFF;
    mix-blend-mode: screen;
}

.contents  ul.nav-slide.navy > li{
    color: rgb(50, 70, 100);
    border-color: rgb(50, 70, 100);
}
.contents  ul.nav-slide.navy > li:hover{
}



.contents ul.card{
    display: grid;
    /* grid-auto-flow: row; */
    grid-auto-rows: min-content;
    grid-template-rows: repeat(auto-fit, minmax(120px, 1fr));
    grid-template-columns: repeat(auto-fit, minmax(120px,auto));
    gap: 1vw;
}

.contents ul.card > li{
    /* padding:0; */
    /* min-width: 120px; */
    /* min-height: 120px; */
    /* max-width: 200px; */
    /* max-height: 200px; */
    /* font-size:clamp(14px, 1.5vmin, 24px); */
    font-family: SCDream-4;
    color:#000;
    background-color: #FFF;
    border: none;
    cursor: pointer;
    position: relative;
    box-shadow: 0 0 5px -2px rgba(0,0,0,0.6);
}




.contents ul.card > li i{
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    /* box-shadow: inset 0 0 2vmin 3.5vmin rgb(255,255,255); */
}

.contents ul.card > li a{
    display: block;
    position: absolute;
    font-family: SCDream-5;
    /*font-size: 100%;*/
    font-size: clamp(14px, 1.8vmin, 30px);
    padding: clamp(4px, 2vmax, 10px);
    /* width: 100%; */
    /* height: 100%; */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
}

.contents ul.card > li p{
    font-size: clamp(14px, 1.5vmin, 27px);
    word-break: keep-all;
}


@media (overflow-block: scroll) {
    .contents ul.card > li p{
    }
}

/* Desktop */
@media screen and (min-width: 769px) {
    .contents ul.card > li i{
        opacity: 1;
    }
}

/* Mobile */
@media screen and (max-width: 768px) {
    .contents ul.card{
        grid-template-rows: repeat(auto-fit, minmax(80px, 1fr));
        grid-template-columns: repeat(auto-fit, minmax(80px,auto));
    }
    .contents ul.card > li{
        /*width: 120px;
        height: 120px;*/
        /* max-width: 200px; */
        /* max-height: 200px; */
        /* font-size:clamp(14px, 1.5vmin, 24px); */
    }
    .contents ul.card > li i{
       /* opacity: 0; */
    }
}








.contents ul.career{
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    row-gap: 0.5vmin;
}

.contents ul.career > li{
    font-size: clamp(16px, 2vmin, 30px);
    color: rgb(50, 70, 100);
    font-family: 'SCDream-3';
}

.contents dl.thesis{
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
}
.contents dl.thesis > dt{
    font-family: 'SCDream-5';
    font-size: clamp(16px, 2vmin, 26px);
    color: rgb(50, 70, 100);
    word-break: keep-all;
}
.contents dl.thesis > dd{
    font-family: SCDream-2;
    font-size: clamp(14px, 1.5vmin, 20px);
    font-style: italic;
    color: rgb(50, 70, 100);
    word-break: keep-all;
}

.contents dl.massmedia{
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin-bottom: 1vmin;
}
.contents dl.massmedia > dt{
    font-family: 'SCDream-5';
    font-size: clamp(16px, 2vmin, 29px);
    color: rgb(50, 70, 100);
    word-break: keep-all;
}
.contents dl.massmedia > dd{
    font-family: SCDream-2;
    font-size: clamp(14px, 1.6vmin, 26px);
    font-style: italic;
    color: rgb(50, 70, 100);
    word-break: keep-all;
}




table[role="default"]
{
    width: 100%;
    min-width: 200px;
}


table[role="default"] th,
table[role="default"] td
{
    font-family: SCDream-4;
    font-size: clamp(16px, 2.5vmin, 24px);
    color: #FFF;
    padding: 0.5vmin;
    text-align: left;
    /* border-bottom: solid clamp(1px, 0.1vmin, 2px) #FFF; */
}
table[role="default"] tfoot td{
    text-align: center;
}


table[role="businessHours"]
{
    width: 100%;
    min-width: 200px;
}


table[role="businessHours"] th,
table[role="businessHours"] td
{
    font-family: SCDream-4;
    font-size: clamp(16px, 2.5vmin, 30px);
    color: #FFF;
    padding: 0.5vmin;
    text-align: left;
    white-space: nowrap;
    /* border-bottom: solid clamp(1px, 0.1vmin, 2px) #FFF; */
}
table[role="businessHours"] tfoot td{
    text-align: center;
}

table[role="reservation"]{
    width: 100%;
    min-width: 200px;
}

table[role="reservation"] th,
table[role="reservation"] td
{
    font-family: SCDream-7;
    font-size: clamp(16px, 3vmin, 30px);
    color: #FFF;
    padding: 0.5vmin;
}
table[role="reservation"] td
{
    padding: 2vmin;
    border-style: solid;
    border-radius: 1vmin;
    background-color: #FFF;
    color: #324664;
    text-align: center;
}










.glass{
    padding: 5vmin;
    /* backdrop-filter: blur(20px); */
    background: rgba(50, 70, 100, 0.8);
}

.glass.trans{
    background:none;
}
.glass.trans h1{
    color: rgb(50, 70, 100);
    border-top-color: rgb(50, 70, 100);
}
.glass.trans h2{
    color:rgb(50, 70, 100);
}
.glass.trans h3{
    color:rgb(50, 70, 100);
}
.glass.trans p{
    color:rgb(50, 70, 100);
}


.glass.white{
    background: rgb(255, 255, 255);

}
.glass.white h1{
    color: rgb(50, 70, 100);
    border-top-color: rgb(50, 70, 100);
}
.glass.white h2{
    color:rgb(50, 70, 100);
}
.glass.white h3{
    color:rgb(50, 70, 100);
}
.glass.white p{
    color:rgb(50, 70, 100);
}



.glass.padding-1{
    padding: 1vmin;
}
.glass.padding-2{
    padding: 2vmin;
}

.glass.border{
    border-color: rgba(255,255,255,0.6);
    border-style: solid;
    border-width: clamp(1px, 0.1vmin, 1px);
    border-radius: 1vmin;
    border-right: none;
    border-bottom: none;
}
.glass.round{
    border-radius: 1vmin;
}
.glass.center{
    text-align:center;
}
.glass.dark{
    display: block;
    -webkit-backdrop-filter: brightness(0.8) blur(20px);
    backdrop-filter: brightness(0.8) blur(20px);
}


.glass.bright{
    backdrop-filter: blur(20px); 
    background: rgba(255, 255, 255, 0.4);

}
.glass.bright h1{
    color: rgb(50, 70, 100);
    border-top-color: rgb(50, 70, 100);
}
.glass.bright h2{
    color:rgb(50, 70, 100);
}
.glass.bright h3{
    color:rgb(50, 70, 100);
}
.glass.bright p{
    color:rgb(50, 70, 100);
}




/* Position */
.relative{
    position: relative;
}

.padding-top-10{
    padding-top: 10vh;
}
.padding-top-15{
    padding-top: 15vh;
}

.padding-top-bottom-10{
    padding-top: 10vh;
    padding-bottom: 10vh;
}
.padding-top-bottom-15{
    padding-top: 15vh;
    padding-bottom: 15vh;
}





.marginTop{
    margin-top: 2vmin;
}



[role="image"]{
    display: block;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}







.height-100{
    height: 100%;
}

.bg-size-cover{
    background-size: cover !important;
    background-position: center !important;
}

.bg-gradient-1{
    background: linear-gradient(rgb(255,255,255), 50%, rgba(255,255,255,0));
}


.image-device{
    display: block;
    height: 40vmax;
    min-height: 300px;
    margin-top: 2vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.image-doctor{
    display: block;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
}


/* menu */
div#menu{
    display: block;
    position:fixed;
    width: 65vmin;
    top: 5vmin;
    right: 5vmin;
}

.toggle,
[id^=drop] {
    display: none;
}

nav { 
    width: fit-content;
    margin:0;
    padding: 0;
    list-style: none;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px); 
    border-radius: 10px;
}

nav:after {
    content:"";
    display:table;
    clear:both;
}

nav ul {
    float: right;
    padding:0;
    margin:0;
    list-style: none;
    position: relative;
}
    
nav ul li {
    margin: 0px;
    display:inline-block;
    float: left;
    font-family: 'SCDream-3';
    background: unset;
}

nav a {
    display:block;
    padding:14px 30px;  
    color:#FFF;
    font-size:17px;
    text-decoration:none;
}

nav ul li:first-child a:hover{
    border-radius:10px 0 0 10px;
}

nav ul li:last-child a:hover{
    border-radius:0 10px 10px 0;
}

nav ul li ul li{
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px); 
}
nav ul li ul li:hover {
    background-color: #000000; 
}

nav a:hover { 
    background-color: #000000; 
}

nav ul ul {
    display: none;
    position: absolute; 
    top: 52px; 
}
    
nav ul li:hover > ul {
    display:inherit;
}
    
/* Fisrt Tier Dropdown */
nav ul ul li {
    width:170px;
    float:none;
    display:list-item;
    position: relative;
}

/* Second, Third and more Tiers 
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
    position: relative;
    top:-60px;
    left:170px; 
}

    
/* Change ' +' in order to change the Dropdown symbol */
nav li > a:after { content:  ' +'; }
nav li > a:only-child:after { content: ''; }


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) {

    nav {
        float: right;
        margin: 0;
        width: fit-content;
        max-height: 95vh;
        /* background: rgba(0, 0, 0, 0.8); */
        background: #FFF;
        border: solid 1px #666;
        overflow-y: auto;

    }

    nav a{
        color: #000;
        font-family: 'SCDream-5';
    }

    nav a:hover { 
        background-color:rgba(0,0,0,0.1);
    }


    #menu-icon{
        fill: #000;
    }

    /* Hide the navigation menu by default */
    /* Also hide the  */
    .toggle + a,
    .menu {
        display: none;
    }

    /* Stylinf the toggle lable */

    .toggle {
        display: block;
        background:unset;
        padding:14px 30px;
        color:#000;
        font-size:17px;
        text-decoration:none;
        border:none;
        font-family: 'SCDream-5';
    }

    .toggle:hover {
        background-color:rgba(0,0,0,0.1);
    }

    .toggle.icon{
        width: fit-content;
        float: right;
        padding: 8px 12px;
        padding-top: 12px;
        border-radius: 10px;
    }




    /* Display Dropdown when clicked on Parent Lable */
    [id^=drop]:checked + ul {
        display: block;
        width: 85vw;
    }

    /* Change menu item's width to 100% */
    nav ul li {
        display: block;
        width: 100%;
        }

    nav ul ul .toggle,
    nav ul ul a {
        padding: 0 60px;
        font-family: 'SCDream-4';
    }

    nav ul ul ul a {
        padding: 0 80px;

    }

    nav a:hover,
    nav ul ul ul a {
        background-color:rgba(0,0,0,0.1);
    }


    nav ul li:first-child a:hover,
    nav ul li:last-child a:hover {
        border-radius:unset;
    }
    nav > ul > li:last-child a:hover{
        border-radius:0 0 10px 10px;
        background-color:rgba(0,0,0,0.1);

    }

  
    nav ul li ul li .toggle,
    nav ul ul a,
    nav ul ul ul a{
        padding: 14px 50px;
        color: #000;
        font-size: 17px;
    }

    nav ul li ul li{
        background: rgba(230, 230, 230, 0.8);
    }
    nav ul li ul li:hover {
        border-radius:unset;
        background-color:rgba(0,0,0,0.1);
    }
  
  
    nav ul li ul li .toggle,
    nav ul ul a {
    }



    /* Hide Dropdowns by Default */
    nav ul ul {
        float: none;
        position:static;
        color: #000;
    }
        
    /* Hide menus on hover */
    nav ul ul li:hover > ul,
    nav ul li:hover > ul {
        display: none;
    }
        
    /* Fisrt Tier Dropdown */
    nav ul ul li {
        display: block;
        width: 100%;
    }

    nav ul ul ul li {
        position: static;

    }

}

@media all and (max-width : 330px) {

    nav ul li {
        display:block;
        width: 94%;
    }

}