@import url('https://webfontworld.github.io/SCoreDream/SCoreDream.css');
html {  letter-spacing: -0.5px;  font-size: 62.5% !important;overflow: auto !important;}
#container {width: 100%; height:100vh; display:flex; justify-content: center; align-items: center; flex-wrap:wrap;   position: relative; background-position: center; background-size:cover;  background-image:url('https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/DONGSAN/165029894410308.jpg'); }       
#container>.main-door {max-width:50%; flex-basis:50%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; color:#fff; height: 100vh; background-color:rgba(0,0,0,0.2);}      
#container>.main-door.blur {backdrop-filter: blur(5px) grayscale(100%);  -webkit-backdrop-filter: blur(5px) grayscale(100%); transition: 0.5s ease-out; position: relative;}
#container>.main-door.blur::before {content: ''; position: absolute; inset: 0; background: inherit;  opacity: 0.2; width: 100%; height: 100%;}
#container>.main-door.blur .content {opacity: 0; transition: all 0.4s; z-index: 1;}

#container>.main-door.on {position: relative;}
#container>.main-door.on .content {opacity: 1;}
#container>.main-door>.content {text-align: center;}
#container>.main-door>.content .enter-button {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding:0.5rem 3rem; border:1px solid rgba(255,255,255,1); color:#fff; font-size:14px; width:100%; max-width: 200px; margin: 0 auto; margin-top:20px; font-weight: bold;}
#container>.main-door>.content .enter-button>p {margin-right:1rem;font-family: 'SCoreDream';font-weight:700;}
#container>.main-door:hover .enter-button:hover {background-color:#fff; color:#000000;}
#container>.main-door:hover .enter-button:hover>img {filter: brightness(0);}
#container>.main-door>.content>h2 {font-size:45px; text-shadow: 4px 4px 13px rgba(0, 0, 0, 0.5); font-family: "Play","sans-serif"; display: inline-block; font-weight: 700;}
#container>.main-door>.content>p {font-size:16px; text-shadow: 4px 4px 13px rgba(0, 0, 0, 0.5);}
#container>.copy-right {position: absolute; bottom:5%; text-align: center; font-size:14px; color:#fff; font-family: "Play","sans-serif";  }
#container .main-door-logo {position: absolute; top:5%; left:50%; transform: translateX(-50%); max-width: 240px; z-index: 1;}  
#container .main-door .button-wrap {width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; margin-top:20px;}  
#container .main-door .button-wrap>li {flex-basis: 32.333%; max-width: 32.333%; margin:0.5%; display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; border:1px solid #fff;}
#container .main-door .button-wrap>li:hover {background-color:#fff;}
#container .main-door .button-wrap>li:hover a {color:#000000;}
#container .main-door .button-wrap>li:hover a>.right-button {filter: brightness(0);}
#container .main-door .button-wrap>li>a {width: 100%; display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; color:#fff; padding:0.5rem 3rem; position: relative; z-index: 1;}
#container .main-door .button-wrap>li>a>p {font-size:14px; font-weight: bold; margin-right:1rem; font-family: 'SCoreDream';}
#container .main-door .button-wrap>li>a>.na {max-width: 2.4rem; margin-right:1rem;} 

@media screen and (max-width:1680px){
html, body {
    font-size: 50% !important;
}

}
@media screen and (max-width:1024px){

    #container {background-image:url('https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/DONGSAN/165029895288931.jpg'); background-position: center; background-size:cover;}
    #container>.main-door:first-child {padding:10px; border-right:1px solid rgba(255,255,255,0.1);}
    #container>.main-door>.content>h2 {font-size:34px;}
    #container>.main-door>.content>p {font-size:13px;}
    #container .main-door .button-wrap {margin-top:5px; flex-direction: column;}
    #container .main-door .button-wrap>li {max-width: 100%; flex-basis: 100%; margin-bottom:1%; max-width: 185px;}
    #container>.copy-right {bottom:2.4%; font-size:11px;}

    #container .main-door .button-wrap>li>a {backdrop-filter: blur(1.5px);  -webkit-backdrop-filter: blur(1.5px);}

}


@media screen and (max-width:666px){

    #container .main-door-logo {position: absolute; top:2.5%; left:2.5%; transform: translateX(0%); max-width: 140px; z-index: 1;} 
    #container {background-image:url('https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/DONGSAN/165029895288931.jpg'); background-position: center; background-size:cover; height: 100vh;}
    #container>.main-door {padding:10px 20px 40px 20px; flex-basis: 100%;  border-right:0; max-width: 100%; height: 50vh;}
    #container>.main-door#shop-door { border-bottom:1px solid rgba(255,255,255,0.3);}
    #container>.main-door>.content .enter-button {margin-top:5px;}
    #container .main-door .button-wrap>li {max-width: 100%; flex-basis: 100%; margin-bottom:2%;}
    #container .main-door .button-wrap>li {max-width: 185px;}

}


@media screen and (max-height:375px){ /*가로*/

    #container>.main-door {max-width:50%; flex-basis:50%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; color:#fff; height: 100vh; background-color:rgba(0,0,0,0.2);}      
    #container>.main-door>.content>h2 {font-size:24px;}
    #container>.main-door>.content>p {font-size:13px;}
    #container .main-door .button-wrap>li {max-width: 185px;}
    #container .main-door-logo {position: absolute; top:4%; left:50%; transform: translateX(-50%); max-width: 120px; z-index: 1;}  
}