@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');

 /* reset.css */
 html { width: 100%; height: 100%; overflow: hidden; vertical-align: middle; }
 body { width: 100%; height: 100%; margin: 0; padding: 0; font-family: "Noto Sans KR", sans-serif; font-size: 16px; /* 기본 폰트 크기 설정 */
	 line-height: 1.2; color: #171717;
 }
 *{ box-sizing: border-box; margin: 0; padding: 0; font-family: "Noto Sans KR", sans-serif; }
 a { color: #171717; text-decoration: none; }
 a:active, a:hover { text-decoration: none; }
 button, input, select, textarea { vertical-align: middle; border: 0; background: none; cursor: pointer; outline: none; box-shadow: none; transition:none; -webkit-tap-highlight-color : transparent !important;}
 button:active, button:focus, a:active, a:focus, a:link, a:visited{outline: none !important; box-shadow: none !important; transition:none !important; }
 input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; }
 fieldset, img { border: 0; }
 dl, ul, ol, menu, li { list-style: none; }
 blockquote, q { quotes: none; }
 blockquote::before, blockquote::after, q::before, q::after { content: ''; }
 table { border-collapse: collapse; border-spacing: 0; table-layout: fixed; }

 address, caption, cite, code, dfn, em, var { font-style: normal; font-weight: normal; }

 .hide { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

 .web{display: inline-block;}
 .mobile{display: none;}

 .section { width: 100%; position: relative; overflow: a; display: flex; flex-direction: column; justify-content: space-between;opacity: 0.2; transition: opacity 1s ease; background-color: #fff;}
 .section *{transition: 0.6s bottom ease;}
 .section.fadeIn { opacity: 1; }
 .section:nth-child(odd) { background-color: #f5f5f5; }

/* active 컨텐츠 아래서 위로 */
.section .titBox + div{position: relative; bottom: -200px;}
.section.active .titBox + div{bottom: 0;}

.titBox{text-align: center; padding-top: 60px;}
.titBox .title01{font-size: 32px; font-weight: 700; color: #000;}
.titBox .txt01{font-size: 22px; font-weight: 400; color: #000; margin-top: 22px;}

/* section01 */
.section.section01{height: 100vh; background: url(./img/main-bg.jpg); background-size: cover; }
.section.section01 .txtBox{position: absolute; left: 5%; bottom: 10%; background: rgba(0,0,0,0.5); padding:60px; display: inline-block; max-width: 80%;}
.section.section01 .txtBox p{color: #fff; font-size: 40px; font-weight: 500;}
.section.section01 .txtBox p span{font-size: 45px; color: #fe282a;}
.section.section01 .txtBox .policyArea {margin-top:20px; text-align: center;}
.section.section01 .txtBox .policyArea a {color:#fff;}
.section.section01 .btnWrap{margin-top: 50px; display: flex; gap: 17px;}
.section.section01 .btnWrap .btn{ border-radius: 10px; color: #fff; padding: 16px 24px 16px 56px;}
.section.section01 .btnWrap .btn.apple{background: url(./img/ic-apple.svg) left 24px center #000 no-repeat;}
.section.section01 .btnWrap .btn.google{background: url(./img/ic-google.svg) left 19px center #000 no-repeat;}

/* dropdown list */
.secTop{width: 100%; display: flex; justify-content: flex-end;}
.dropdown { min-width: 102px; position: relative; margin: 30px 50px 0 0; }
.dropdown .select-label { position: relative; display: block; width: 100%; height: 30px; border-radius: 15px; padding:0 40px 0 20px; line-height: 30px; color: #fff; font-size: 16px; font-weight: 500; background: #000; z-index: 9999; cursor: pointer; transform-origin: 50% 0%; user-select: none; }
.dropdown .select-label:after { content: '▼'; position: absolute; top: 0; right: 12px; height: 60px; line-height: 30px; text-align: center; font-size: 12px; }
.dropdown-list { position: absolute; top: 0px; width: 100%; height: 0; padding-top: 30px; border-radius: 15px; background: #000; overflow: hidden;}
.dropdown.active .dropdown-list{min-height: 120px;} 
.dropdown-list li { display: block;  width: 100%; font-size: 16px; line-height: 30px; color: #fff; cursor: pointer; letter-spacing: 2px; background-color: #000; transition-duration: .3s; list-style: none; opacity: 1; user-select: none;  padding:0 0 0 20px;}
.dropdown-list li:hover { background-color: #000; }
.dropdown-list li:nth-child(1) { z-index: 4; }
.dropdown-list li:nth-child(2) { z-index: 3; }
.dropdown-list li:nth-child(3) { z-index: 2; }
.dropdown-list li:nth-child(4) { z-index: 1; }
.dropdown .select-label:active:after { content: '▲'; }
.dropdown.active .select-label:after { content: '▲'; }

  /*section02 */
  .section02 .imgBox{width: 100%; text-align: center; margin: 40px auto 50px;}

  /* section03 */
  .exList{display: flex; justify-content: space-around; gap: 10px; width: 80%; margin: 40px auto 80px; position: relative; bottom: -200px; }
  .exList img{ width: 20%;}
  
  /* section04 */
  .crossBox{width: 100%; text-align: center; margin: 40px auto 0;}

  /* section05 */
  .section05{align-items: center;}
  .metaApp{width: 800px; height: 600px; background: url(./img/section05-bg.png) center center no-repeat; position: relative; margin: 40px 0 80px;  bottom: -100px;}
  .metaApp img{position: absolute; margin: auto; }
  .metaApp img.img01{left: 0; top: 0; bottom: 0;}
  .metaApp img.img02{right: 0; top: 0; bottom: 0; }

  /* section06 */
  .msgList{margin: 0 auto; margin-top: 40px;}

  /* sectionLast */
  .section.sectionLast{justify-content: flex-start; min-height: auto;}
  .lastBox{width: 100%;  height: 435px; background: url(./img/section-last.png); background-size: cover; display: flex; justify-content: center; align-items: center;}
  .lastTxt{font-size: 40px; font-weight: 500; color: #fff; text-align: center;}  
  .btnWrap{margin-top: 70px; display: flex; justify-content: center; gap: 17px;}
  .lastBox .btnWrap .btn{ border-radius: 10px; color: #fff; padding: 16px 24px 16px 56px;}
  .lastBox .btnWrap .btn.apple{background: url(./img/ic-apple.svg) left 24px center #000 no-repeat;}
  .lastBox .btnWrap .btn.google{background: url(./img/ic-google.svg) left 19px center #000 no-repeat;}

  .footer{display: flex; padding: 30px 30px 30px 102px; gap: 90px;}

  .f-logo{display: block;}
  .termsList{display: flex; gap: 29px;}
  .termsList a{font-size: 16px; font-weight: 500; color: #000; text-decoration: underline;}
  .footer p{font-size: 15px; line-height: 25px; margin-top: 15px;}

@media (max-width:720px) {
  .section{min-height: 50vh;}
  .web{display: none;}
  .mobile{display: inline-block;}
  .titBox{padding-top: 40px;}
  .titBox .title01{font-size: 20px;}
  .titBox .txt01{font-size: 15px;}


  /* section01 */
  .section.section01{background-position: center center;  background-attachment: scroll;}
  .section.section01 .txtBox{left: 0; right: 0; margin: 0 auto; padding:40px 20px; max-width: 80%;}
  .section.section01 .txtBox p{font-size: 25px;}
  .section.section01 .txtBox p span{font-size: 30px;}
  .section.section01 .btnWrap{justify-content: flex-start; margin-top: 30px;}
  .section.section01 .btnWrap .btn{ padding:10px; border-radius: 50%; width: 50px; height: 50px; background-position: center center !important; }
  .section.section01 .btnWrap .btn.apple{background-size: 40% !important;}
  .section.section01 .btnWrap .btn.google{background-size: 55% !important;}
  .section.section01 .btnWrap .btn span{display: none;}

  /* section02 */
  .imgBox img{width: 200px;}
  /* section03 */
  .exList{margin: 0; flex-wrap: wrap; justify-content: center; width: 100%; padding: 20px 0;}
  .exList img{width: calc(35% - 10px);}

  /* section04 */
  .section.section04{min-height: 70vh;}
  .crossBox{margin: 20px auto;}
  .crossBox img{width: 300px;}

  /* section05 */
  .metaApp{width: 80%; background-size: 70% auto; height: 385px; background-size: 50% auto; margin: 20px;}
  .metaApp img{width: 50%;}
  .metaApp img.img01{left:-10%}
  .metaApp img.img02{right:-10%}

  /* section06 */
  .msgList{text-align: center; margin: 20px auto;}
  .msgList img{ width: 80%;}

  /* sectionLast */
  .lastTxt{font-size: 25px; line-height: 1.5;}
  .lastBox .btnWrap{flex-direction: column; align-items: center; margin-top: 40px;}
  .lastBox .btnWrap .btn{width: 182px; height: 63px; line-height: 63px; padding: 0 24px 0 60px;}

  .footer{padding: 40px 20px 20px; flex-direction: column; gap: 20px;}
  .termsList a{font-size: 14px;}
  .footer p{font-size: 13px;}
}