@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
@import url('https://webfontworld.github.io/PyeongChang/PyeongChang.css');
@font-face {font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(https://example.com/MaterialIcons-Regular.eot); src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'), url(https://example.com/MaterialIcons-Regular.woff) format('woff'), url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');}

  .material-icons {font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 36px; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;-moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga';}  

*{margin: 0; padding: 0;}
li{list-style: none;}
a{text-decoration: none; outline: 0; display: block;}
img{display: block;}
body{background-color: rgb(255, 243, 229);}
header, section, body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, a, p, span{font-family: 'Montserrat','PyeongChang','Material Icons';}

#header{position: relative; height: 70px; z-index: 999;}
.header_wrap{position: absolute; width: 100%; display: flex; margin-top: 20px;}
.main_logo a{display: flex; margin-left: 20px; color: #FFF;}
.main_logo img{width: 100%; margin-right: 10px;}
.sns_menu{position: absolute; left: 50%; transform: translateX(-50%);}
.header_wrap .sns_menu ul{ display: flex; justify-content: space-around; align-items: center;}
.header_wrap .sns_menu ul li{width: 13%; padding: 0 15px;}
.header_wrap .sns_menu ul li img{width: 90%;}
.lang_box{position: absolute; right: 100px; top: 20px;}
.dep{color: #000; font-size: 0.8em;}
.gnb_btn{position: absolute; right: 30px; top: 10px; width: 40px; height: 40px; background:none; border: none; cursor: pointer; z-index: 999;}
.gnb_btn span{position: absolute; display: block; width: 37px; height: 2px; background-color: #FF66CC; transition-duration: 0.5s; top: 50%;}
.gnb_btn span:first-child{margin-top: -10px;}
.gnb_btn span:last-child{margin-top: 9px;}

.active_btn span:nth-child(2){opacity: 0;}
.active_btn span:first-child{transform: rotate(45deg); margin-top: 0;}
.active_btn span:last-child{transform: rotate(135deg); margin-top: 0;}

#popMenu{position: absolute; width: 100%; background-color: rgba(0,0,0,0.8); left: 0; top: 0; z-index: 99; display: none;} 
#popMenu a{color: #FFF;}
.menu_wrap{padding: 80px 50px;}
.tr_menu{display: flex; flex-direction: column;}
.menu_item li{margin-top: 5px;}
.menu1, .menu2{display: flex; justify-content: space-between;}
.menu1{padding-bottom:100px;}
.mobile_m{display: none;}

select{width: 60px; font-family: inherit; background: url(../img/icon/drop_down.png) no-repeat 95% 40%; border:none; -webkit-appearance: none; -moz-appearance: none; font-size: 1.2em; appearance: none; color: #FFF; }

.left,.right{position: absolute; color: #FFF; top: 45%; transform: translateY(-50%); cursor: pointer;}
.right{right: 2%;}
.left{left: 2%;}

.top_btn{position: fixed; right: 8px; bottom: 30px; z-index: 999;}

#footer{display: flex; justify-content: space-between; align-items: center; position: fixed; bottom: 0px; width: 100%; height: 30px; background-color: rgba(255, 255, 255, 0.2);}
.footer_left ul{display: flex; margin:0 20px;}
.footer_left ul li{margin-right: 15px; font-size: 1em;}
.footer_right{margin-right: 20px;}
.footer_right span{font-weight: bold; color:#FF66CC}
#footer a{color: #000;}








@media screen and (min-width:801px) and (max-width:1200px) {

  #popMenu{height: 700px; background-color: #0D060D; }
  #popMenu a{color: #FFF; font-size: 0.9em;}
  .pc_v{display: none;}
  .tr_menu{display: flex; flex-direction: column; margin-bottom: 5%;}
  .menu1, .menu2{display: flex; flex-direction: column; }
  .mobile_m{position: relative; display: flex; flex-direction: column;}
  .mobile_m>div h3{margin-bottom: 10%;}
  .menu1{padding-bottom: 25px;}
  .sns_menu{left: 10%; bottom: 50%; transform: translateY(-50%);}
  .sns_menu ul{display: flex; flex-direction: column;}
  .header_wrap .sns_menu ul li{width:80%; padding:15px 0;}
  .header_wrap .sns_menu ul li img{width: 100%;}

  .footer_left ul li{font-size: 1.5vw;}
  .footer_right{font-size: 1.5vw;}

}





/* Tablet 세로 */
@media screen and (min-width:601px) and (max-width:800px) {

  #popMenu{height: 700px; background-color: #0D060D; }
  #popMenu a{color: #FFF; font-size: 0.9em;}
  .pc_v{display: none;}
  .tr_menu{display: flex; flex-direction: column; margin-bottom: 5%;}
  .menu1, .menu2{display: flex; flex-direction: column; }
  .mobile_m{position: relative; display: flex; flex-direction: column;}
  .mobile_m>div h3{margin-bottom: 10%;}
  .menu1{padding-bottom: 25px;}
  .sns_menu{left: 10%; bottom: 50%; transform: translateY(-50%);}
  .sns_menu ul{display: flex; flex-direction: column;}
  .header_wrap .sns_menu ul li{width:80%; padding:15px 0;}
  .header_wrap .sns_menu ul li img{width: 100%;}
  
  #footer{display: flex; height: 30px; flex-direction: column; align-items: center; position: fixed; width: 100%; background-color: rgba(255, 255, 255, 0.2); padding:2% 0;}
  .footer_left ul li{font-size: 2vw;}
  .footer_right{font-size: 2vw;}

}





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

  select{width: 50px; font-family: inherit; background: url(../img/icon/drop_down.png) no-repeat 95% 40%; border:none; -webkit-appearance: none; -moz-appearance: none; font-size: 3vw; appearance: none; color: #FFF; }

  .main_logo img{width: 70%; margin-right: 10px;}

  #popMenu{height: 700px; background-color: #0D060D; }
  #popMenu a{color: #FFF; font-size: 0.9em;}
  .pc_v{display: none;}
  .tr_menu{display: flex; flex-direction: column; margin-bottom: 5%;}
  .menu1, .menu2{display: flex; flex-direction: column; }
  .mobile_m{position: relative; display: flex; flex-direction: column;}
  .mobile_m>div h3{margin-bottom: 10%;}
  .menu1{padding-bottom: 25px;}
  .sns_menu{left: 10%; bottom: 50%; transform: translateY(-50%);}
  .sns_menu ul{display: flex; flex-direction: column;}
  .header_wrap .sns_menu ul li{width:80%; padding:15px 0;}
  .header_wrap .sns_menu ul li img{width: 100%;}
  
  #footer{display: flex; height: 30px; flex-direction: column; align-items: center; position: fixed; width: 100%; background-color: rgba(255, 255, 255, 0.2); padding:1% 0;}
  .footer_left ul li{font-size: 2.5vw;}
  .footer_right{font-size: 2.5vw;}

}