@font-face {
    font-family: 'BrandRegular';
    src: url('./fonts/Montserrat-Light.woff2') format('woff2'),
         url('./fonts/Montserrat-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'BrandBold';
    src: url('./fonts/Montserrat-Bold.woff2') format('woff2'),
         url('./fonts/Montserrat-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


*, html {
    line-height: 120%;
	margin:0;
	padding:0;
}
html{height:100%;}
body{height:100%;}

body, p {
    font-family: 'BrandRegular', sans-serif;
}

h1, h2, h3, h4 {
    font-weight: normal;
}

body.main {
    overflow-x: hidden;
    font-family: 'BrandRegular', sans-serif;
    color:#FFF;
    font-size: 100%; /* best for all browser using em */
    padding: 0;
    margin: 0;
    position: relative;
    background-size:2560px;
    /* background-color: #fded04; */
    background-color: #c30f17;
    /* background-image: url('./images/DESKTOP/bg.png'); */
    background-position: center top;
    background-repeat: no-repeat;
    height:auto;
}

.wrapper {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
	padding:0 0;
    position: relative;
    z-index: 11;
}

.section_wrapper {
	
	width: 100%;
    max-width: 1080px;
}

section {
    padding-bottom:50px;
}

.top {
	width:100%;
    position: relative;
}

.top-bg { display:block; z-index:-2; width:100%; height:400px;position:absolute; top:0;    background-image: url(./images/DESKTOP/swirl-top.png);   background-position: top center; background-repeat: no-repeat;  background-size:auto 300px;}

.bottom-bg { display:block; z-index:-2; width:100%; height:400px;position:absolute; bottom:0; background-image: url(./images/DESKTOP/swirl-btm.png);   background-position: bottom center; background-repeat: no-repeat;  background-size:auto 300px; }

.logo {
    text-align: center;
    vertical-align: top;
}

.logo img {
    margin-top:180px;
    margin-bottom:25px;
    width:30%;
    max-width: 600px;
    
}

.logo-text {
    text-align: center;
    margin:0 auto;
    font-style: normal;
	font-size:3.5rem;
	line-height:100%;
}

.content{
	margin:0 auto;
    width:80%;
    position: relative;
    text-align: center;
    min-width: 840px;
    
}
.content img{
    /* border:6px solid #d31145; */
    /* max-width: 620px; */
}
.content-deco{
    display: none;
    margin:0 auto;
    width: 976px;
    position: absolute;
    z-index:10;
}
.content-frame {
	margin:0 auto;
    width: 309px;
    left:0px;
    position: absolute;
    z-index:11;
}
.content-user {
    padding-top:7px;
    width: 285px;
    left:10px;
    position: absolute;
    z-index:12;
}
section > .head-text {
    font-weight: 700;
    margin: 9px auto;
    max-width: 620px;
	line-height: 120%;
    letter-spacing: -1px;
	font-size:2.8rem;
    text-align: center;

}
section > .head-text span{
    font-size:2.0rem;
    font-weight: 400;
}


section > .hash-text {
    font-family: 'BrandBold';
    margin: 30px auto;
    max-width: 620px;
    line-height: 120%;
	font-size:2.8rem;
    text-align: center;
}
section > .mid-text {
    margin: 50px auto 0px auto;
    max-width: 620px;
	line-height:120%;
	font-size:2.1rem;
    color:#FFF;
    text-align: center;
}
section > .down-text {
    margin: 50px auto 0px auto;
    max-width: 620px;
	line-height:120%;
	font-size:2.1rem;
    color:#FFF;
    text-align: center;
}

section > .sharebutton {
  margin: 3px 0 15px 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.sharebutton a {
  font-family: 'BrandRegular';
  margin: 10px 8px;
  padding: 14px 12px;
  color: #c30f17;
  font-size: 2.2rem;
  display: inline-flex; /* ✅ inline-flex로 변경 */
  justify-content: center;
  align-items: center;
  text-decoration: none;
  background-color: #fff;
  border: 2px solid #d31145;
  border-radius: 16px;
  width: 30%;
  min-width: 280px;
  box-sizing: border-box; /* ✅ iOS 높이 계산 안정화 */
}

/* iOS Safari 보정 */
@supports (-webkit-touch-callout: none) {
  .sharebutton a {
    line-height: normal !important; /* ✅ 고정값 대신 normal */
    padding-top: 14px; /* ✅ 불필요한 보정 제거 */
    font-size: 2.2rem;
  }
}

.sharebutton a:hover {
  background-color: #c30f17;
  border-color: #fff;
  color: #fff;
}


.sharebutton #facebook {
    /* background-image: url('./images/DESKTOP/bt_qs_facebook.png'); */
}

.sharebutton #twitter {
    /* background-image: url('./images/DESKTOP/micro_btn_twitter.png');*/
} 

.sharebutton #instagram {
    /* background-image: url('./images/DESKTOP/bt_qs_insta.png'); */
}

.sharebutton #download {
    /* background-image: url('./images/DESKTOP/bt_qs_download.png');
    margin: 0px 8px;
    width: 431.5px;
    height: 102px;
    display: inline-block;
    background-position: top;
    background-size: cover; */
}

.whiteline {
    margin-top: 90px;
}

.bottom {
	width:100%;
    /* background-color: #333d47; */
    position: relative;
    display:block; 
    height:200px;
    text-align: center;
}
.bottom IMG {
	width: 155px;
    margin: 30px auto;
}
.sns-text{
    margin: 50px auto 0px auto;
    text-align: center;
    color:#FFFFFF;
    font-size: 2.1rem;
    padding-top:30px;
}
.snsbutton{
    text-align: center;
    margin:20px auto;
}
.snsbutton a {
    margin: 10px 10px;
    filter: brightness(1);
    width:65px;
    height:65px;
    display: inline-block;
    border: 2px solid #FFF;
    background-size: contain;
    border-radius: 16px;
}


.snsbutton a:hover {
    filter: brightness(0.9);
}
.snsbutton #facebook {
    background-image: url('./images/DESKTOP/sns-facebook.png');
}

.snsbutton #instagram {
    background-image: url('./images/DESKTOP/sns-insta.png');
} 
.snsbutton #linkdin {
    background-image: url('./images/DESKTOP/sns-linkdin.png');
}
.snsbutton #twitter {
    background-image: url('./images/DESKTOP/sns-twitter.png');
}

.swirl-top{
    visibility: hidden;
}

.swirl-bottom{
    visibility: hidden;
}

@media only screen and (max-width: 860px) {
    .content{
        width:96%; 
        min-width: auto;
    }
    .top-bg{width:100%;background-size:auto 250px;}
    .bottom-bg{width:100%;background-size:auto 250px;}
    .logo img {
        margin-top:160px;
    }
    section {
        width: 100%;
    }
    
	section > .sharebutton{
	margin:3px auto;
	
	}
}
@media only screen and (max-width: 680px) {
    .top-bg{width:100%;background-size:auto 200px;}
    .bottom-bg{width:100%;background-size:auto 200px;}
     .logo img {
        margin-top:120px;
    }
    .wrapper{width:95%}
    .content img{width:96%}
    section > .head-text {
        font-size:2.6rem;
    }
    section > .hash-text {
        width: 90%;
        font-size:2.3rem;
   }
    section > .head-text span{
        font-size:2.0rem;
    }
    section > .content{
        line-height:0rem;
    }

}
@media only screen and (max-width: 480px) {
    .bottom {height:100px;}
    .top-bg{width:100%;background-size:auto 150px;}
    .bottom-bg{width:100%;background-size:auto 150px;}
    .logo img {
        margin-top:90px;
        margin-bottom:15px;
        width:35%;
        max-width: 600px;
        
    }
    section > .head-text {
        font-size:2.0rem;
    }
    section > .head-text span{
        font-size:1.5rem;
    }
	section > .mid-text {
        margin-top:30px;
		width: 90%;
        font-size:1.6rem;
	}
    section > .hash-text {
        width: 90%;
        font-size:2.0rem;
   }
   section > .down-text {
         margin-top:30px;
       width: 90%;
       font-size:1.6rem;
   }
   section > .sns-text {
        margin-top:30px;
        width: 90%;
        font-size:1.6rem;
    }

    .snsbutton a {
        width:56px;
        height:56px;
    }

}