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

}




@font-face {
    font-family: 'BrandRegular';
    src: url('./fonts/GothamLight.woff2') format('woff2'),
         url('./fonts/GothamLight.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:#fff3e0;
    font-size: 100%; /* best for all browser using em */
    padding: 0;
    margin: 0;
    position: relative;
    background-size:2560px;
    /* background-color: #fded04; */
    background-color: #95192b;
    /* background-image: url('./images/DESKTOP/bg.png'); */
    background-position: center top;
    background-repeat: no-repeat;
    height:auto;
}

.body_wrapper {
    width:100%;
	padding:0 0;
    position: relative;
    z-index: 11;
}

.section_wrapper {
	margin: 0 auto;
	width: 100%;
}

section {
    padding-bottom:50px;
}

.top {
	width:100%;
    height:470px;
    position: relative;
    background-image: url('./images/DESKTOP/bg-top.png');
    background-size: 1920px 470px;
    background-position: center top;
    background-repeat: no-repeat;
}
.mid {
	width:100%;
    position: relative;
    background-image: url('./images/DESKTOP/bg-mid.png');
    background-size: 1920px 789px;
    background-position: center top;
    background-repeat: repeat-y;
}
.btm {
	width:100%;
    height:200px;
    position: relative;
    background-image: url('./images/DESKTOP/bg-btm.png');
    background-size: 1920px 470px;
    background-position: center top;
    background-repeat: no-repeat;
    
}

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

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

.logo img {
    margin-left: -100px;
    margin-top: 70px;
    margin-bottom: 45px;
    width: 761px;
    max-width: 761px;
}

.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:15px solid #fff3e0; 
    filter:drop-shadow(0px 0px 5px rgba(0,0,0,0.5));
    box-sizing: border-box;
     width:100%; 
    
}
.content video{
    border:15px solid #fff3e0; 
    filter:drop-shadow(0px 0px 5px rgba(0,0,0,0.5));
    box-sizing: border-box;
     width:100%; 
    
}

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:60px auto 20px 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:#fff3e0;
    text-align: center;
}
section > .down-text {
    margin: 50px auto 0px auto;
    max-width: 620px;
	line-height:120%;
	font-size:2.1rem;
    color:#fff3e0;
    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: #95192b;
  font-size: 2.2rem;
  display: inline-flex; /* ✅ inline-flex로 변경 */
  justify-content: center;
  align-items: center;
  text-decoration: none;
  background-color: #fff3e0;
  border: 2px solid #95192b;
  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: #95192b;
  border-color: #fff3e0;
  color: #fff3e0;
}


.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:#fff3e0;
    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 #fff3e0;
    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: 1080px) {
    .wrapper{width:100%}
}
@media only screen and (max-width: 860px) {
    .top {
        height:375px;
        background-size: 1500px 375px;
    }
    .mid {
        height:auto;
        background-size: 1500px auto;
    }
    .btm {
        height:375px;
        background-size: 1500px 375px;
    }
    .logo img {
        width:594px;
        margin-top:55px;
        margin-left: -70px;
    }
    .content{
        width:95%; 
        min-width: auto;
    }
    
    section {
        width: 100%;
    }
    
}
@media only screen and (max-width: 680px) {
     .top {
        height:300px;
        background-size: 1200px 300px;
    }
    .mid {
        height:auto;
        background-size: 1200px auto;
    }
    .btm {
        height:300px;
        background-size: 1200px 300px;
    }
    .logo img {
        width:480px;
        margin-top:8%;
        margin-left: -10%;
    }


    .wrapper{width:95%}
    .content {width:95%}


   section > .hash-text {
        width: 90%;
        font-size:1.6rem;
    }

	section > .mid-text {
        margin-top:30px;
		width: 90%;
        font-size:1.6rem;
	}
    
   section > .down-text {
        margin-top:30px;
       width: 90%;
       font-size:1.6rem;
   }
   section > .sns-text {
        margin-top:30px;
        width: 90%;
        font-size:1.6rem;
    }


    section > .content{
        line-height:0rem;
    }

    .content img{
    border:10px solid #fff3e0; 

    
    }
    .content video{
        border:10px solid #fff3e0; 

    }

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

    .top {
        height:240px;
        background-size: 1000px 240px;
    }
    .mid {
        height:auto;
        background-size: 1000px auto;
    }
    .btm {
        height:200px;
        background-size: 1000px 240px;
    }

     .logo img {
        width:380px;
        margin-top:10%;
        margin-left: -11%;
    }

    section > .hash-text {
        font-size:1.4rem;
    }

	section > .mid-text {
        font-size:1.4rem;
	}
    
   section > .down-text {
       font-size:1.4rem;
   }
   section > .sns-text {
        font-size:1.4rem;
    }

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

    .content img{
    border:7px solid #fff3e0; 

    
    }
    .content video{
        border:7px solid #fff3e0; 

    }

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

    .top {
        height:200px;
        background-size: 800px 200px;
    }
    .mid {
        height:auto;
        background-size: 800px auto;
    }
    .btm {
        height:200px;
        background-size: 800px 200px;
    }

     .logo img {
        width:300px;
        margin-top:10%;
        margin-left: -11%;
    }
     section > .hash-text {
        font-size:1.3rem;
    }
   
}