@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,800&display=swap&subset=korean');

/* #d3c89c #033649 #698014 */

*{ margin: 0; padding: 0; font-family: 'NanumSquare', 'Nanum Gothic', sans-serif; box-sizing: border-box; color: #222;  }
a{ text-decoration: none; }
li{ list-style: none; }
img{ border: none; }


@media screen and (min-width: 1281px) { /* pc1 - min-width: 1180px */
    
    html{ font-size: 16px; }
    body{ width: 100%; height: auto; min-width: 1025px; background-color: #fefefe;  }
    #container{ width: 90%; min-width: 1025px; height: 100%; min-height: calc(100vh - 445px); margin: 0 auto; }

    #popup_notice{ display: none; }
    
    /* main < body */
    #main{ position: relative; width: 100%; min-width: 1025px; min-height: 100vh; margin: 0 auto; }
    #main .contents{ position: absolute; left: 3%; display: inline-block; width: 35%; min-height: 100vh; padding: calc(50vh - 130px) 5% 0; background-color: rgba(255,255,255,0.9); z-index: 1; }
    #main .contents h1{ width: 20vw; max-width: 250px; margin-bottom: 3vh; text-align: left; }
    #main .contents h1 img{ width: 100%;  }
    #main h3{ font-weight: 500; font-size: 1.4rem; margin-bottom: .8rem;  }
    #main01{ font-weight: 300; font-size: .85rem; line-height: 1.4rem; }
    #main02{ display: none;  }
    #main .wow{ position: absolute; left: 81%; bottom: 0; width: 30px; height: 80px; background-image: url(/images/main/icon_scroll.gif);  background-repeat:  no-repeat; animation-duration: 3s; background-size: 70%; }
    #main:after{ content: ''; display: block; width: 1px; height: 160px; background-color: #222; position: absolute; bottom: 10px; left: 31%; z-index: 35; }
    #main .visual{ position: absolute; top: 0; right: 0; width: 100%; min-height: 100vh; background-attachment: fixed; background-image: url(/images/main/main_pc.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; }
    

    /* hillspo */
    #hillspo{ position: relative; width: 100%; height: 80vh; background-image: url(/images/main/hillspo.jpg); background-position: left center; background-size: contain; background-repeat: no-repeat; }
    #hillspo .contents{ width: 50%; height: 80vh; margin-left: 50%; background-color: #e1ded0; padding-top: 25vh;  }
    #hillspo .contents h3{ color: #022601; text-align: center; font-size: 1.8rem; font-weight: 600; opacity: 0; transition-delay: .2s; transition-duration: .5s;  }
    #hillspo .contents h2{ color: #022601; text-align: center; font-size: 2.5rem; font-weight: 800; margin-bottom: 3vh; opacity: 0; transition-delay: .6s;  transition-duration: .5s;  }
    #hillspo .contents p{ text-align: center; font-size: 1rem; font-weight: 500;  line-height: 1.6rem; margin-bottom: 8vh;  }
    #hillspo #aboutUs{ position: relative; display: block; width: 20%; min-width: 120px; height: 5.5vh; min-height: 40px; border: 1px solid #022601; ; text-align: center; font-size: 1.1rem; font-weight: 500; line-height: 5.5vh; transition-duration: .7s; letter-spacing: .1rem; margin: 0 auto; color: #022601;  }
    #hillspo #aboutUs:after{ content: ''; display: block; width: 100%; height: 1px; position: absolute; bottom: 0; background-color: #022601; transform: scaleX(0); transition-duration: .3s; }
    #hillspo #aboutUs:hover{ border: none;  }
    #hillspo #aboutUs:hover:after{ transform: scaleX(1); }
    
     
    /* program */
    #program_mbl{ display: none; }
    #program{ position: relative; min-width: 1025px; min-height: 100%; margin: 0 auto; margin-top: 10vh; }
    #program > .contents{ margin-right: 50%; display: inline-block; width: 50%; height: 100vh; min-height: 100%; text-align: center; }
    #program > .visual{ position: absolute; top: 0; right: 0; width: 50%; height: 100vh; min-height: 100vh; background-attachment: fixed;  background-image: url(../images/main/programBg.jpg); background-repeat: no-repeat; background-position: right center; background-size: contain; }
    #program .contents h3{ font-size: 2.1rem; color: #022601; padding-top: 36vh; transition: ease .5s; font-weight: 600;  }
    #program .contents h2{ font-size: 2.5rem; color: #022601; margin-bottom: 3vh; transition: ease .5s; font-weight: 800;  }
    #program .contents p{ font-size: 1rem; margin-bottom: 8vh; line-height: 1.6rem;  }
    #program .contents a{ position: relative; display: block; width: 20%; min-width: 120px; height: 5.5vh; min-height: 40px; text-align: center; line-height: 5.5vh; font-size: 1.1rem; color: #022601; transition: ease-in .3s;  margin: 0 auto; border: 1px solid #022601; letter-spacing: .1rem;  }
    #program .contents a:after{ content: ''; display: block; position: absolute; bottom: 0; width: 100%; height: 1px; background-color: #022601; transform: scaleX(0); transition-duration: .3s;  }
    #program .contents a:hover{ border: none;  }
    #program .contents a:hover:after{ transform: scaleX(1); }
    
    
    /* toTop */
    #toTop{ position: fixed; bottom: 5vh; right: 5vw; width: 3rem; height: 3rem; z-index: 35; }
    #toTop > a{ display: block; width: 100%; height: 100%; background-image: url(/images/main/icon_toTop.gif); background-size: 100%;  text-indent: -9999em;  }
    
    
    /* slide bg 위치 밑으로 내리기 전체 위치 조정 */
    #slide_TM{ display: none; }
    #slide{ position: relative; width: 100%;  min-width: 1025px; min-height: 100%; margin: 0 auto;  }
    #slide .contents{ margin-left: 45vw; display: inline-block; width: 48vw; height: 100%; min-height: 100%;  }
    #slide > .contents > div{ position: relative; float: right; width: 100%; height: 90vh; min-width: 50vw; min-height: 80vh; background-position: center 48vh; background-repeat: no-repeat; transition: ease-in .3s; background-size: 45vh; }
    #slide > .contents > div > a{ position: relative; width: 35vw; min-width: 80%; height: 50vh; display: block; margin: auto;  margin-top: 40vh;  }
    #slide > .contents > div h3,
    #slide > .contents > div h4,
    #slide > .contents > div h5,
    #slide > .contents > div p{ position: absolute; transition: ease-in-out .5s; text-align: center; left: 0; right: 0; margin: 0 auto; }
    #slide > .contents > div h4{ color: #d3c89c; font-weight: 800; font-size: 3rem; transition: ease-in .5s; top: 0; }
    #slide > .contents > div h3{ color: #d3c89c; font-weight: 300; font-size: 2.6rem; bottom: 5.8vh; }
    #slide > .contents > div h5{ color: #022601; font-weight: 500; font-size: 1.2rem; bottom: 1.3rem; }
    #slide > .contents > div p{ font-weight: 300; font-size: .9rem; bottom: 0; }
    #slide > .contents > div span{ display: none; position: absolute; top: .7vh; left: 7vw; }
    #slide > .contents > div span:after{ content: ''; display: none; width: 4rem; height: 1px; background-color: #222; position: absolute; top: 50%; left: 0;  }
    #slide > .contents > div a:hover h4{ padding-left: 9vw;  }
    #slide > .contents > div a:hover span{ display: block; }
    #slide > .contents > div a:hover span:after{ display: block; }
    
    
    
    
    
       /* visual */
    #slide .visual{ position: absolute; top: 0; left: 0; width: 45vw; height: 100%; background-attachment: fixed;  background-repeat: no-repeat; background-size: 40vw; background-position: 5vw center; transition-duration: .3s;  }

    
        /* golf */
    #slide .golf{ background-image: url(/images/main/golf.jpg); margin-top: 10vh;  }
        /* health */
    #slide .health{ background-image: url(/images/main/health_pilates.png); background-position: center 25vh !important; }
    #slide .health > a{ height: 65vh !important; margin-top: 25vh !important; }
    #slide .health h4{ top: 24vh !important; }
    #slide .health span{ top: 24.5vh !important; left: 2vw !important; }
        /* screen */
    #slide .screen{ background-image: url(/images/main/screen.jpg); }
    #slide .screen h4{ top: 11%; right: 0; }   
        /* squash */
    #slide .squash{ background-image: url(/images/main/squash.jpg);  }
    #slide .squash a:hover h4{ padding-left: 13vw !important;  }
        /* kids */
    #slide .kids{ background-image: url(/images/main/kids.png); background-position: center 31.5vh !important; }
    #slide .kids > a{ height: 65vh !important; margin-top: 25vh !important; }
    #slide .kids h4{ padding-left: 1.4vw; }  
    #slide .kids h3{ padding-right: 5.1vw;  }
    #slide .kids a:hover h4{ padding-left: 14vw !important;  }
        /* roller */
    #slide .roller{ background-image: url(/images/main/roller.jpg); margin-bottom: 300px; }
    #slide .roller h4{ top: 10%; right: 0; }
        

    /* fMenu */
    #fMenu{ position: relative; min-width: 1025px; margin: auto; margin: 15vh 0; }
    #fMenu ul{ width: 80%; height: 20vh; margin: 0 auto; display: flex; }
    #fMenu li{ flex: 1; text-align: center; background-repeat: no-repeat; background-position: center 60%; background-size: 10%; transition-duration: .5s; border-left: 1px solid #ccc; padding: 3vh 0; }
    #fMenu li:first-child{ background-image: url(/images/main/icon_map.png);  }
    #fMenu li:nth-child(2){ background-image: url(/images/main/icon_cs.png);  }
    #fMenu li:last-child{ background-image: url(/images/main/icon_email.png); border-right: 1px solid #ccc; }
    #fMenu a{ display: block; width: 100%; height: 100%;  color: #022601; font-weight: 500; font-size: 1.6rem; transition-duration: .5s;  }
    #fMenu li:hover{ background-position: center 15%; }
    #fMenu li:hover a{ padding-top: 25%;  }

}



@media screen and (min-width: 1025px) and (max-width: 1280px) { /* pc2 */
    
    html{ font-size: 14px; }
    body{ width: 100%; height: auto; min-width: 1025px; background-color: #fefefe;  }
    #container{ width: 90%; min-width: 1025px; height: 100%; min-height: calc(100vh - 445px); margin: 0 auto; }

    #popup_notice{ display: none; }
    
    /* main < body */
    #main{ position: relative; width: 100%; min-width: 1025px; min-height: 100vh; margin: 0 auto; }
    #main .contents{ position: absolute; left: 3%; display: inline-block; width: 35%; min-height: 100vh; padding: calc(50vh - 100px) 5% 0; background-color: rgba(255,255,255,0.9); z-index: 1; }
    #main .contents h1{ width: 20vw; max-width: 250px; margin-bottom: 3vh; text-align: left; }
    #main .contents h1 img{ width: 100%;  }
    #main h3{ font-weight: 500; font-size: 1.4rem; margin-bottom: .8rem;  }
    #main01{ font-weight: 300; font-size: .85rem; line-height: 1.4rem; }
    #main02{ display: none;  }
    #main .wow{ position: absolute; left: 81%; bottom: 0; width: 30px; height: 80px; background-image: url(/images/main/icon_scroll.gif);  background-repeat:  no-repeat; animation-duration: 3s; background-size: 70%; }
    #main:after{ content: ''; display: block; width: 1px; height: 160px; background-color: #222; position: absolute; bottom: 10px; left: 31%; z-index: 35; }
    #main .visual{ position: absolute; top: 0; right: 0; width: 100%; min-height: 100vh; background-attachment: fixed; background-image: url(/images/main/main_pc.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; }
    

    /* hillspo */
    #hillspo{ position: relative; width: 100%; height: 80vh; background-image: url(/images/main/hillspo.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; }
    #hillspo .contents{ width: 50%; height: 80vh; margin-left: 50%; background-color: #e1ded0; padding-top: 25vh;  }
    #hillspo .contents h3{ color: #022601; text-align: center; font-size: 1.8rem; font-weight: 600; opacity: 0; transition-delay: .2s; transition-duration: .5s;  }
    #hillspo .contents h2{ color: #022601; text-align: center; font-size: 2.5rem; font-weight: 800; margin-bottom: 3vh; opacity: 0; transition-delay: .6s;  transition-duration: .5s;  }
    #hillspo .contents p{ text-align: center; font-size: 1rem; font-weight: 500;  line-height: 1.6rem; margin-bottom: 8vh;  }
    #hillspo #aboutUs{ position: relative; display: block; width: 20%; min-width: 120px; height: 5.5vh; min-height: 40px; border: 1px solid #022601; ; text-align: center; font-size: 1.1rem; font-weight: 500; line-height: 5.5vh; transition-duration: .7s; letter-spacing: .1rem; margin: 0 auto; color: #022601;  }
    #hillspo #aboutUs:after{ content: ''; display: block; width: 100%; height: 1px; position: absolute; bottom: 0; background-color: #022601; transform: scaleX(0); transition-duration: .3s; }
    #hillspo #aboutUs:hover{ border: none;  }
    #hillspo #aboutUs:hover:after{ transform: scaleX(1); }
    
     
    /* program */
    #program_mbl{ display: none; }
    #program{ position: relative; min-width: 1025px; min-height: 100%; margin: 0 auto; margin-top: 10vh; }
    #program > .contents{ margin-right: 50%; display: inline-block; width: 50%; height: 100vh; min-height: 100%; text-align: center; }
    #program > .visual{ position: absolute; top: 0; right: 0; width: 50%; height: 100vh; min-height: 100vh; background-attachment: fixed;  background-image: url(/images/main/programBg.jpg); background-repeat: no-repeat; background-position: right center; background-size: contain; }
    #program .contents h3{ font-size: 2.1rem; color: #022601; padding-top: 36vh; transition: ease .5s; font-weight: 600;  }
    #program .contents h2{ font-size: 2.5rem; color: #022601; margin-bottom: 3vh; transition: ease .5s; font-weight: 800;  }
    #program .contents p{ font-size: 1rem; margin-bottom: 8vh; line-height: 1.6rem;  }
    #program .contents a{ position: relative; display: block; width: 20%; min-width: 120px; height: 5.5vh; min-height: 40px; text-align: center; line-height: 5.5vh; font-size: 1.1rem; color: #022601; transition: ease-in .3s;  margin: 0 auto; border: 1px solid #022601; letter-spacing: .1rem;  }
    #program .contents a:after{ content: ''; display: block; position: absolute; bottom: 0; width: 100%; height: 1px; background-color: #022601; transform: scaleX(0); transition-duration: .3s;  }
    #program .contents a:hover{ border: none;  }
    #program .contents a:hover:after{ transform: scaleX(1); }
    
    
    /* toTop */
    #toTop{ position: fixed; bottom: 10vh; right: 5vw; width: 3rem; height: 3rem;  z-index: 40; }
    #toTop > a{ display: block; width: 100%; height: 100%; background-image: url(/images/main/icon_toTop.gif); background-size: 100%;  text-indent: -9999em;  }
    
    
    /* slide bg 위치 밑으로 내리기 전체 위치 조정 */
    #slide_TM{ display: none; }
    #slide{ position: relative; width: 100%;  min-width: 1025px; min-height: 100%; margin: 0 auto;  }
    #slide .contents{ margin-left: 45vw; display: inline-block; width: 48vw; height: 100%; min-height: 100%;  }
    #slide > .contents > div{ position: relative; float: right; width: 100%; height: 90vh; min-width: 50vw; min-height: 80vh; background-position: center 43vh; background-repeat: no-repeat; transition: ease-in .3s; background-size: 48vh; }
    #slide > .contents > div > a{ position: relative; width: 35vw; min-width: 80%; height: 55vh; display: block; margin: auto;  margin-top: 35vh; }
    #slide > .contents > div h3,
    #slide > .contents > div h4,
    #slide > .contents > div h5,
    #slide > .contents > div p{ position: absolute; transition: ease-in-out .5s; text-align: center; left: 0; right: 0; margin: 0 auto; }
    #slide > .contents > div h4{ color: #d3c89c; font-weight: 800; font-size: 3rem; transition: ease-in .5s; top: 0; }
    #slide > .contents > div h3{ color: #d3c89c; font-weight: 300; font-size: 2.6rem; bottom: 7vh; }
    #slide > .contents > div h5{ color: #022601; font-weight: 500; font-size: 1.2rem; bottom: 3vh; }
    #slide > .contents > div p{ font-weight: 300; font-size: .9rem; bottom: 0; }
    #slide > .contents > div span{ display: none;  position: absolute; top: .7vh; left: 7vw; }
    #slide > .contents > div span:after{ content: ''; display: none; width: 4rem; height: 1px; background-color: #222; position: absolute; top: 50%; left: 0;  }
    #slide > .contents > div a:hover h4{ padding-left: 13vw;   }
    #slide > .contents > div a:hover span{ display: block; }
    #slide > .contents > div a:hover span:after{ display: block; }
    
    
    
       /* visual */
    #slide .visual{ position: absolute; top: 0; left: 0; width: 45vw; height: 100%; background-attachment: fixed;  background-repeat: no-repeat; background-size: 40vw; background-position: 5vw center; transition-duration: .3s;  }

    
        /* golf */
    #slide .golf{ background-image: url(/images/main/golf.jpg); margin-top: 10vh;  }
        /* health */
    #slide .health{ background-image: url(/images/main/health_pilates.png); background-position: center 19vh !important; }
    #slide .health > a{ height: 70vh !important; margin-top: 20vh !important; }
    #slide .health h4{ top: 24vh !important; }
    #slide .health span{ top: 25vh !important; }
    #slide .health a:hover h4{ padding-left: 6vw !important;   }
    #slide .health a:hover span{ left: -1vh !important;   }
        /* screen */
    #slide .screen{ background-image: url(/images/main/screen.jpg); }
    #slide .screen h4{ top: 11%; right: 0; }   
        /* squash */
    #slide .squash{ background-image: url(/images/main/squash.jpg);  }
    #slide .squash a:hover h4{ padding-left: 13vw !important;  }
        /* kids */
    #slide .kids{ background-image: url(/images/main/kids.png); background-position: center 28vh !important; }
    #slide .kids > a{ height: 70vh !important; margin-top: 20vh !important; }
    #slide .kids h4{ padding-left: 6vw; }  
    #slide .kids h3{ padding-right: 7.5vw;  }
        /* roller */
    #slide .roller{ background-image: url(/images/main/roller.jpg); margin-bottom: 300px; }
    #slide .roller h4{ top: 10%; right: 0; }
    



    /* fMenu */
    #fMenu{ position: relative; min-width: 1025px; margin: auto; margin: 15vh 0; }
    #fMenu ul{ width: 80%; height: 20vh; margin: 0 auto; display: flex; }
    #fMenu li{ flex: 1; text-align: center; background-repeat: no-repeat; background-position: center 60%; background-size: 10%; transition-duration: .5s; border-left: 1px solid #ccc; padding: 3vh 0; }
    #fMenu li:first-child{ background-image: url(/images/main/icon_map.png);  }
    #fMenu li:nth-child(2){ background-image: url(/images/main/icon_cs.png);  }
    #fMenu li:last-child{ background-image: url(/images/main/icon_email.png); border-right: 1px solid #ccc; }
    #fMenu a{ display: block; width: 100%; height: 100%;  color: #022601; font-weight: 500; font-size: 1.6rem; transition-duration: .5s;  }
    #fMenu li:hover{ background-position: center 15%; }
    #fMenu li:hover a{ padding-top: 25%;  }
    
        
}





@media screen and (min-width: 768px) and (max-width: 1024px) {/* tbl - min-width: 768px */
    
    html{ font-size: 14px; }
    body{ width: 100%; height: auto; min-width: 768px; background-color: #fefefe; }
    #container{ width: 100%; height: 100%; min-height: calc(100vh - 445px); }

    #popup_notice{ display: none; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; width: 60vw; height: 50vh; min-width: 40vh; min-height: 50vw; background-color: #fff; z-index: 100; padding: 10vh 5vw 0; background-image: url(/images/common/logo.png); background-repeat: no-repeat; background-position: center 85%; background-size: 30%; }
    #popup_notice:after{ content: ''; display: block; width: 50vw; height: 40vh; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border: 1px solid #d3c89c; }
    #popup_notice .popup_inner{ position: relative; width: 100%; height: 100%; }
    #popup_notice .popup_inner h4{ text-align: center; font-size: 1.8rem; margin-bottom: 3.3vh; }
    #popup_notice .popup_inner p{ text-align: center; font-size: 1.2rem; line-height: 1.8rem; }
    #popup_notice .popup_inner span{ display: block; font-size: 1rem; margin-top: 2vh; color: #bf1e03; }
    #popup_notice #close_today{ position: absolute; bottom: 0; left: 0; display: block; width: 50%; bottom: 1.5vh; background-image: url(/images/common/icon_cancel.png); background-size: .8rem; background-position: left center; background-repeat: no-repeat; padding-left: 1.1rem;}
    #popup_notice #close_popup{ position: absolute; bottom: 0; right: 0; display: block; width: 50%; bottom: 1.5vh; text-align: right; background-image: url(/images/common/icon_cancel.png); background-size: .8rem; background-position: 84% center; background-repeat: no-repeat; }
    
        
    /* main */
    #main{ position: relative; width: 100%; min-width: 768px; min-height: 100vh; margin: 0 auto; background-image: url(/images/main/main_tbl.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; }
    #main .contents{ position: absolute; left: 3%; display: inline-block; width: 40vw; min-height: 100vh; padding: calc(50vh - 130px) 5% 0; background-color: rgba(255,255,255,0.9); z-index: 1; }
    #main .contents h1{ width: 20vw; max-width: 22rem; margin-bottom: 3vh; text-align: left; }
    #main .contents h1 img{ width: 100%;  }
    #main h3{ font-weight: 500; font-size: 1.4rem; margin-bottom: .8rem;  }
    #main02{ display: none; }
    #main01{ font-weight: 300; font-size: 1rem; line-height: 1.4rem;  }
    #main .wow{ position: absolute; left: 81%; bottom: 0; width: 2.5rem; height: 6rem; background-image: url(/images/main/icon_scroll.gif);  background-repeat: no-repeat; animation-duration: 3s; background-size: 70%;  }
    #main:after{ content: ''; display: block; width: 1px; height: 160px; background-color: #222; position: absolute; bottom: 10px; left: 35%; z-index: 29; }
    #main .visual{ display: none;  }
    
    
    
    /* hillspo */
    #hillspo{ position: relative; width: 100%; height: 50vh; background-image: url(/images/main/hillspo_tbl.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; margin: 25vh 0; }
    #hillspo .contents{ width: 50%; height: 50vh; margin-left: 50%; background-color: #e1ded0; padding: 15vh 5vw 0;  }
    #hillspo .contents h3{ color: #022601; text-align: center; font-size: 1.8rem; font-weight: 600; opacity: 0; transition-delay: .2s; transition-duration: .5s; margin-bottom: 1vh; }
    #hillspo .contents h2{ color: #022601; text-align: center; font-size: 2.5rem; font-weight: 800; margin-bottom: 3vh; opacity: 0; transition-delay: .6s;  transition-duration: .5s;  }
    #hillspo .contents p{ text-align: center; font-size: 1rem; font-weight: 500;  line-height: 1.6rem; margin-bottom: 7vh;  }
    #hillspo #aboutUs{ position: relative; display: block; width: 20%; min-width: 120px; height: 4.5vh; min-height: 40px; border: 1px solid #022601; ; text-align: center; font-size: 1.1rem; font-weight: 500; line-height: 4.5vh; transition-duration: .7s; letter-spacing: .1rem; margin: 0 auto; color: #022601;  }
 
        
        
    /* program */
    #program{ display: none; }    
    #program_mbl{ width: 100%; height: 50vh; min-width: 768px; margin-bottom: 5vh; }
    #program_mbl a{ display: block; width: 100%; height: 100%; background-image: url(/images/main/programBg_tbl.jpg); background-size: 100%; background-repeat: no-repeat; background-position: center; }
    #program_mbl a h2{ text-align: center; font-size: 3.4rem; font-weight: 800; padding-top: 20vh;  }
    #program_mbl a h2 span{ display: block; text-align: center; font-size: 4rem; font-weight: 800; letter-spacing: 1px; }
    
    
    /* toTop */
    #toTop{ position: fixed; display: none; bottom: 0; width: 100%; height: 3vh; text-align: center; line-height: 3vh; background-color: #fff; border-top: 1px solid #ccc; z-index: 35;}
    
    
    /* slide */
    #slide{ display: none; }
    #slide_TM{ width: 100%; height: auto; min-width: 768px; }
    #slide_TM .contents{ width: 90vw; margin: 0 auto; }
    #slide_TM .contents > div{ display: block; width: 100%; height: 80vh; background-size: auto 50vh; background-repeat: no-repeat; }
    #slide_TM .contents > div > a{ display: inline-block; width: 100%; height: 50vh; min-height: 50vh; margin-top: 30vh; opacity: 0;  }
    #slide_TM .contents > div h4{ color: #d3c89c; font-size: 3rem; font-weight: 800; }
    #slide_TM .contents > div h3{ color: #d3c89c; font-size: 2rem; font-weight: 300; margin-bottom: 20px;  }
    #slide_TM .contents > div h5{ color: #033649; font-size: 1.6rem; font-weight: 500; margin-bottom: 5px;  }
    #slide_TM .contents > div p{ font-size: .9rem; font-weight: 300; }
    
    #slide_TM .golf{ width: 100%; background-image: url(/images/main/proG_mbl.jpg); text-align: right; background-position: left bottom; }    
    #slide_TM .health{ width: 100%; background-image: url(/images/main/proH_mbl.jpg); background-position: right bottom; }
    #slide_TM .screen{ width: 100%; background-image: url(/images/main/proS_mbl.jpg);  background-position: left bottom; text-align: right; }
    #slide_TM .squash{ width: 100%; background-image: url(/images/main/proQ_mbl.jpg); background-position: right bottom; }
    #slide_TM .kids{ width: 100%; background-image: url(/images/main/proK_mbl.jpg); text-align: right; background-position: left bottom; }
    #slide_TM .roller{ width: 100%; background-image: url(/images/main/proR_mbl.jpg); background-position: right bottom; }
    
    
 
    /* fMenu */
    #fMenu{ position: relative; min-width: 700px; margin: 15vh auto 10vh; }
    #fMenu ul{ width: 700px; height: 150px; margin: 0 auto; display: flex; }
    #fMenu li{ flex: 1; text-align: center; background-repeat: no-repeat; background-position: center; background-size: 40px; }
    #fMenu li:first-child{ background-image: url(/images/main/icon_map.png);  }
    #fMenu li:nth-child(2){ background-image: url(/images/main/icon_cs.png);  }
    #fMenu li:last-child{ background-image: url(/images/main/icon_email.png);  }
    #fMenu a{ display: block; width: 100%; height: 100%;  color: #033649; font-weight: 500; font-size: 20px; padding-top: 100%; visibility: hidden; }
    
        
}











@media screen and (max-width: 767px) {/* mbl - min-width: 350px */
    
    html{ font-size: 12px; }
    body{ width: 100%; height: auto; min-width: 350px; background-color: #fefefe; }
    #container{ width: 100%; height: 100%; min-height: calc(100vh - 445px); }

    /* popup_notice */
    #popup_notice{ display: none; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; width: 60vw; height: 50vh; min-width: 40vh; min-height: 50vw; background-color: #fff; z-index: 100; padding: 7vh 7vw 0; background-image: url(/images/common/logo.png); background-repeat: no-repeat; background-position: center 85%; background-size: 30%; }
    #popup_notice:after{ content: ''; display: block; width: 58vw; height: 42vh; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border: 1px solid #d3c89c; }
    #popup_notice .popup_inner{ position: relative; width: 100%; height: 100%; }
    #popup_notice .popup_inner h4{ text-align: center; font-size: 1.2rem; margin-bottom: 3vh; }
    #popup_notice .popup_inner p{ text-align: center; font-size: 1rem; line-height: 1.6rem; }
    #popup_notice .popup_inner span{ display: block; font-size: .8rem; margin-top: 2vh; color: #bf1e03; }
    #popup_notice #close_today{ position: absolute; bottom: 0; left: 0; display: block; width: 70%; bottom: 1vh; background-image: url(/images/common/icon_cancel.png); background-size: .8rem; background-position: left center; background-repeat: no-repeat; padding-left: 1.1rem; font-size: .9rem; }
    #popup_notice #close_popup{ position: absolute; bottom: 0; right: 0; display: block; width: 30%; bottom: 1vh; text-align: right; background-image: url(/images/common/icon_cancel.png); background-size: .8rem; background-position: 58% center; background-repeat: no-repeat; font-size: .9rem; }
    
        
    /* main */
    #main{ position: relative; width: 100%; min-width: 350px; min-height: 100vh; background-image: url(/images/main/main_mbl.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;  }
    #main .contents{ position: absolute; left: 3%; display: inline-block; width: 50vw; min-height: 100vh; padding: calc(50vh - 130px) 5% 0; background-color: rgba(255,255,255,0.9); z-index: 1; }
    #main .contents h1{ width: 35vw; max-width: 22rem; margin-bottom: 3vh; text-align: left; }
    #main .contents h1 img{ width: 100%;  }
    #main h3{ font-weight: 500; font-size: 1.2rem; margin-bottom: 2vh;  }
    #main01{ display: none; }
    #main02{ font-weight: 300; font-size: 1rem; line-height: 1.6rem; }
    #main .wow{ position: absolute; left: 80%; bottom: 0; width: 2rem; height: 5rem; background-image: url(/images/main/icon_scroll.gif);  background-repeat:  no-repeat; animation-duration: 3s; background-size: 70%;  }
    #main:after{ content: ''; display: block; width: 1px; height: 110px; background-color: #222; position: absolute; bottom: 10px; left: 42%; z-index: 29; }
    #main .visual{ display: none;  }
    
        
    /* hillspo */
    #hillspo{ width: 100%; height: 50vh; background-image: url(/images/main/hillspo_mbl.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 25vh 0;  }
    #hillspo .contents{ width: 50%; height: 50vh; margin-left: 50%; background-color: #e1ded0; padding-top: 18vh; }
    #hillspo .contents h3{ color: #022601; text-align: center; font-size: 1.15rem; font-weight: 600; opacity: 0; transition-delay: .2s; transition-duration: .5s;  }
    #hillspo .contents h2{ color: #022601; text-align: center; font-size: 1.6rem; font-weight: 800; margin-bottom: 8vh; opacity: 0; transition-delay: .6s;  transition-duration: .5s;  }
    #hillspo .contents p{ display: none; }
    #hillspo #aboutUs{ display: block; width: 20vw; min-width: 80px; height: 4vh; min-height: 2.5rem; border: 1px solid #022601; ; text-align: center; font-size: 1rem; font-weight: 500; line-height: 4.5vh; transition-duration: .7s; margin: 0 auto; color: #022601;  }
        
        
    /* program */
    #program{ display: none; }    
    #program_mbl{ width: 100%; height: 50vh; min-width: 350px; margin-bottom: 5vh; }
    #program_mbl a{ display: block; width: 100%; height: 100%; background-image: url(/images/main/programBg_mbl.jpg); background-size: 100%; background-repeat: no-repeat; background-position: center; }
    #program_mbl a h2{ text-align: center; font-size: 2.4rem; font-weight: 800; padding-top: 20vh; }
    #program_mbl a h2 span{ display: block; text-align: center; font-size: 2.8rem; font-weight: 800; letter-spacing: 1px; }
    
    
    /* toTop */
    #toTop{ position: fixed; display: none; bottom: 0; width: 100%; min-width: 350px; height: 6vh; text-align: center; line-height: 6vh; background-color: #fff; border-top: 1px solid #ccc; z-index: 35; }
    
    
    /* slide */
    #slide{ display: none; }
    #slide_TM{ width: 100%; height: auto; min-width: 350px; }
    #slide_TM .contents{ width: 90vw; margin: 0 auto; }
    #slide_TM .contents > div{ display: block; width: 100%; height: 60vh; background-size: auto 32vh; background-repeat: no-repeat;  }
    #slide_TM .contents > div > a{ display: inline-block; width: 100%; height: 40vh; min-height: 40vh; margin-top: 20vh; opacity: 0; }
    #slide_TM .contents > div h4{ color: #d3c89c; font-size: 2.4rem; font-weight: 800; }
    #slide_TM .contents > div h3{ color: #d3c89c; font-size: 1.4rem; font-weight: 300; margin-bottom: 20px;  }
    #slide_TM .contents > div h5{ color: #033649; font-size: 1.1rem; font-weight: 500; margin-bottom: 5px;  }
    #slide_TM .contents > div p{ font-size: .9rem; font-weight: 300; }
    
    #slide_TM .golf{ width: 100%; background-image: url(/images/main/proG_mbl.jpg); text-align: right; background-position: left bottom; }    
    #slide_TM .health{ width: 100%; background-image: url(/images/main/proH_mbl.jpg); background-position: right bottom; }
    #slide_TM .screen{ width: 100%; background-image: url(/images/main/proS_mbl.jpg);  background-position: left bottom; text-align: right; }
    #slide_TM .squash{ width: 100%; background-image: url(/images/main/proQ_mbl.jpg); background-position: right bottom; }
    #slide_TM .kids{ width: 100%; background-image: url(/images/main/proK_mbl.jpg); text-align: right; background-position: left bottom; }
    #slide_TM .roller{ width: 100%; background-image: url(/images/main/proR_mbl.jpg); background-position: right bottom; }
    
    
 
    /* fMenu */
    #fMenu{ position: relative; min-width: 320px; margin: 0 auto; margin: 13vh 0 9vh; }
    #fMenu ul{ width: 320px; height: 20vh; margin: 0 auto; display: flex; }
    #fMenu li{ flex: 1; text-align: center; background-repeat: no-repeat; background-position: center; background-size: 2rem; }
    #fMenu li:first-child{ background-image: url(/images/main/icon_map.png);  }
    #fMenu li:nth-child(2){ background-image: url(/images/main/icon_cs.png);  }
    #fMenu li:last-child{ background-image: url(/images/main/icon_email.png);  }
    #fMenu a{ display: block; width: 100%; height: 100%;  color: #033649; font-weight: 500; font-size: 1.1rem; padding-top: 100%; visibility: hidden; }
    
    
    
    
}