

:lang(en) .sub_tab::-webkit-scrollbar {
height: 7px;
} 
:lang(en) .sub_tab::-webkit-scrollbar-thumb {
  height: 30%; /* 스크롤바의 길이 */
  background: #d1d1d1;
  border-radius: 55px;
  cursor: pointer;
}
:lang(en) .sub_tab::-webkit-scrollbar-track {
  background:#eee /*스크롤바 뒷 배경 색상*/
}
:lang(en) .sub_tab{}
/* :lang(en) .no_point .sub_tab::-webkit-scrollbar{display: none;} */
:lang(en) .no_point{position: relative;}
:lang(en) .no_point::after{content: ""; position: absolute; right:0; top: 50%; transform: translateY(-50%);width: 50px; height: 100%; background: linear-gradient(to right, transparent, rgba(0,0,0,0.1));}

/* 헤더 */
header{position:fixed; width:100%; z-index:9;height:110px;top:0; transition: top 0.2s ease-in-out;border-bottom: 1px solid rgb(255 255 255 / 2%);}
header .in_header{}
header .pc_header{display:flex;justify-content: space-between; padding:23px 16px;}
header .pc_header .logo_wrap{width:135px;}
header .pc_header .logo_wrap a{display:block;}
header .pc_header .logo_wrap a.logo2{display:none}
header .pc_header .menu_wrap{display:flex;    align-items: center;}
header .pc_header .menu_wrap > div:nth-child(1){display:flex; margin-right:150px; align-items:center}
header .pc_header .menu_wrap > div:nth-child(1) > a{font-size: 16px; color: #fff;margin-left:30px; border: 1px solid rgb(255 255 255 / 58%); padding: 4px 20px; border-radius: 20px;}
header .pc_header .menu_wrap .in_menu{display:flex; align-items: center;}
header .pc_header .menu_wrap .in_menu > li{width:110px; position:relative;}
:lang(en) header .pc_header .menu_wrap .in_menu > li{width: 130px;}
header .pc_header .menu_wrap .in_menu > li > a{display:block; text-align:center;font-size: 18px; font-weight:500;color:#fff;}
header .pc_header .menu_wrap .pc_submenu{padding:16px; border-radius:8px; background:#fff; display:none;position:absolute; top:50px; left: 50%; transform: translateX(-50%); width: 180px;}
:lang(en) header .pc_header .menu_wrap .pc_submenu{top: 70px;}
/* header .pc_header .menu_wrap .pc_submenu:before{position: absolute; content: ""; top: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 0px; border-bottom:10px solid #fff; border-left: 10px solid transparent; border-right: 10px solid transparent;} */
header .pc_header .menu_wrap .pc_submenu li{ display:flex;}
header .pc_header .menu_wrap .pc_submenu li a{position:relative;color:#333; font-weight:600;display: inline-block; margin:0 auto; text-align:center; padding:5px 10px;}
header .pc_header .menu_wrap .pc_submenu li a:before{position:absolute; z-index:-1; content:""; width:0; height: 12px; left:0; top:15px; background: rgb(11 172 159 / 9%); transition:all 0.3s;}
header .pc_header .menu_wrap .pc_submenu li a:hover:before{width:100% }
header .pc_header .menu_wrap .pc_submenu li a i{display: block; opacity: 0.7; font-size: 0.85em;}
header .in_header .menu_bar{width:27px; height:20px; position:relative; cursor:pointer;}
header .in_header .menu_bar span{position:absolute;   transition: 0.4s;display:block; width:27px; height:2px; background:#fff;}
header .in_header .menu_bar span:nth-child(1){top:0}
header .in_header .menu_bar span:nth-child(2){top:9px;}
header .in_header .menu_bar span:nth-child(3){bottom:0}
.nav-up { top: -110px; }
.nav-down_2{background: rgb(255 255 255 / 63%); transition: all 0.2s ease-in-out;backdrop-filter: blur(10px);}
.nav-down_2 .menu_wrap .in_menu > li > a{color:#333 !important; font-weight:600 !important}
.nav-down_2 .menu_wrap > div:nth-child(1) > a{color:#333 !important;border: 1px solid #333 !important;}
.nav-down_2 .in_header .menu_bar span{background:#333 !important}
.nav-down_2 .pc_header .logo_wrap a.logo2{display:block;}
.nav-down_2 .pc_header .logo_wrap a.logo1{display:none;}
header.nav-down{background:rgb(255 255 255 / 0%); top: 0px; transition: all 0.2s ease-in-out;}

.overlay{}
.overlay .overlay_top{display: flex; justify-content: space-between;    align-items: center;}
.overlay .overlay_top > a{    display: block; width: 130px;}
.overlay .overlay_top > div{display: flex;    align-items: center;}
.overlay .overlay_top .over_lang{position:relative; margin:0px 32px;}
.overlay .overlay_top .over_lang i{    display: block; width: 32px; cursor:pointer;}
.overlay .overlay_top .over_lang ul{ display:none; z-index:9;border-radius: 7px;position: absolute; top: 45px; background:#fff;  color: #333; width: 75px; padding: 10px; left: -65%;}
.overlay .overlay_top .over_lang ul li span{padding:3px 0px; cursor:pointer; transition:all 0.3s; display:block; text-align:Center; font-weight: 600; font-size: 14px;}
.overlay .overlay_top .over_lang ul li span:hover{color:#FFCB51}
.overlay-content{}
.overlay-content .over_menu{display:flex;}
.overlay-content .over_menu > li{width:20%; text-align:left;}
.overlay-content .over_menu > li > a{font-size: 32px; font-weight: 600; color: #fff; opacity: 1 !important; text-shadow: 0 0 3px #fff !important;}
:lang(zh) .overlay-content .over_menu > li > a{font-weight: 500;}
.overlay-content .over_menu ul{padding-top:48px;}
.overlay-content .over_menu ul li{padding:7px 0px;}
.overlay-content .over_menu ul li a{font-size: 19px;font-weight:500; opacity:0.7}
.overlay .over_btm{    position: absolute; bottom: 50px;}
.overlay .over_btm ul{display: flex;}
.overlay .over_btm ul li{padding-right:56px;}
.overlay .over_btm ul li a{font-size: 17px; font-weight: 500; opacity:0.7;}
.overlay .over_btm ul li a i{display:inline-block; width:16px;    vertical-align: middle;}
.overlay .over_btm ul li.icon a{display:inline-block; width:26px;}
@media (hover: hover) {
  .overlay-content .over_menu > li:hover > a{color: #fff; opacity: 1 !important; text-shadow: 0 0 3px #fff !important;} 
}



/* 풀스크린 메뉴 */
.overlay {   height: 100vh; width: 100%; position: fixed;  z-index: 100; /* Sit on top */ left: 0; top: -100vh;
    background:url(../img/aws/16606837998004.jpg) no-repeat; background-size:cover; overflow-x: hidden;  transition: 0.5s;  padding:48px 110px;
  }

  .overlay-content { position: relative; padding-top:130px; width: 100%; text-align: center;  margin-top: 30px;}
  
  /* The navigation links inside the overlay */
  .overlay a { display: block;  transition: 0.3s; color:#fff; }
  .overlay a:hover, .overlay a:focus {color: #fff; opacity:1 !important;    text-shadow: 0 0 3px #fff !important;}
  .overlay .closebtn {position:relative; width:40px; height:40px;}
  .overlay .closebtn:before{position:absolute; content:""; width:1px; height:30px; background:#fff;  transform: rotate(45deg); left: 20px; top: 5px;}
  .overlay .closebtn:after{    position: absolute; content: ""; width: 1px; height: 30px; background: #fff; transform: rotate(-45deg); right: 20px; top: 5px;}


  /* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
  @media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
      font-size: 40px;
      top: 15px;
      right: 35px;
    }
  }

  /* footer */
  footer{position:relative; background:#131313}
  footer .footer_wrap{}
  footer .ft_top{    display: flex; justify-content: space-between;padding-top:70px; border-top:1px solid rgba(204, 204, 204, 0.50);}
  footer .ft_top > i{width:100px;display:block;}
  footer .ft_top > div{width: 50%; display: flex;justify-content: space-between;}
  footer .ft_top > div > ul{width:50%;}
  footer .ft_top > div > ul > li{display:inline-block;}
  footer .ft_top > div > ul > li > a{font-size: 21px; margin-right:73px; margin-bottom:10px; display:block; color:#fff;}
  footer .ft_top > div > div{}
  footer .ft_top .f_top_right > div:nth-child(1){  cursor:pointer;  display: flex; justify-content: space-between; align-items: center;color:#fff;margin-bottom: 16px; border-bottom: 1px solid #fff; padding-bottom: 5px;}
  footer .ft_top .f_top_right > div:nth-child(1) > em{position:relative; width:20px; height:20px;}
  footer .ft_top .f_top_right > div:nth-child(1) > em:before{position:absolute; content:""; width:10px; height:1px; background:#fff; left:0; transform:translate(-50%,-50%); left:50%; top:50%;}
  footer .ft_top .f_top_right > div:nth-child(1) > em:after{position:absolute; content:""; width:1px; height:10px; background:#fff; left:0; transform:translate(-50%,-50%); left:50%; top:50%;}
  footer .ft_top .f_top_right > ul{width:100%;}
  footer .ft_top .f_top_right > ul li{}
  footer .ft_top .f_top_right > ul li a{font-size: 16px; margin-bottom: 10px; display: block; color:#fff;}
  footer .ft_top .f_top_right .sns_wrap{}
  footer .ft_top .f_top_right .sns_wrap i{display: inline-block; width: 27px; margin-right: 14px; opacity: 0.8;}
  footer .ft_btm{padding-top:30px;border-top:1px solid rgba(204, 204, 204, 0.50); margin-top:35px;padding-bottom:70px}
  footer .ft_btm > div:nth-child(1){}
  footer .ft_btm > div:nth-child(2){}
  footer .ft_btm > div{padding-bottom: 16px;}
  footer .ft_btm > div span{font-size:15px; padding-right: 42px; display: inline-block; color:#fff;}
  footer .ft_btm > p{text-align:right; color:#ccc}

/* 사이드버튼 */
 .r_btn_wrap{  padding:38px 8px; box-shadow: 0 0 3px 0px rgb(255 255 255 / 43%); border-radius: 50px;
  position: fixed; top: 50%; right: 28px; background: #000; z-index: 2; transform: translateY(-50%);
} 
 .r_btn_wrap ul{} 
 .r_btn_wrap ul li{} 
 .r_btn_wrap ul li a{display:block; margin-bottom: 20px;}
 .r_btn_wrap ul li:last-child a{margin-bottom:0;} 
 .r_btn_wrap ul li a i{display:block; width:31px;margin:0 auto;} 
 .r_btn_wrap ul li a span{display:block; text-align: center; font-size: 15px; padding-top:10px; color:#fff;} 
:lang(en) .r_btn_wrap ul li a span{padding-left: 8px; padding-right: 8px;}
 
/* 모바일메뉴 */
.mo_menu_wrap{display:none; margin:0 auto; position:relative; z-index:10;}
.mo_header > a{display:block; width:100px;}
.mo_header{width: 100%; height:80px; background: #fff; position: fixed; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 16px;}
.mo_head{ height:30px;}
.mo_head .mo_menu{ width:30px; height:100%; position:relative;}
.mo_head .mo_menu .res-menu{ position:absolute; top:50%; left:50%; width:27px; height:18px; transform:translate(-50%, -50%); cursor:pointer;}
.mo_head .mo_menu .res-menu span{ display:block; position:absolute; width:100%; height:2px; background:#131313; transition: transform .3s;}
.mo_head .mo_menu span:nth-child(1){top:0;left:0; }
.mo_head .mo_menu span:nth-child(2){ top:50%; left:50%; transform:translate(-50%, -50%);}
.mo_head .mo_menu span:nth-child(3){ bottom:0;left:0;}
#sideopen {display:none;}

.mo_head input[type="checkbox"]:checked + label > .res-menu  span:nth-child(1){ top:50%; transform:translateY(-50%) rotate(-45deg);}
.mo_head input[type="checkbox"]:checked + label > .res-menu  span:nth-child(2){display:none;}
.mo_head input[type="checkbox"]:checked + label > .res-menu  span:nth-child(3){ top:50%; transform:translateY(-50%) rotate(45deg);}

.sidebar{ position:fixed; width:100%; border-top:1px solid #efefef; background:#f7f7f7; max-width:100%; height: calc(100vh - 80px); top:-110%; right:0; border-right:1px solid #ccc; transition:top .5s;}
.sidebar .accordion{padding-top:64px; padding-left:20px; padding-right:20px;}
.mo_head input[type="checkbox"]:checked + label + .sidebar{top:80px;}



/* 아코디언 메뉴 */
.cate{  width:100%;  position:relative;  border-bottom:1px solid #ccc} 
.cate:last-child{} 
.cate .menu{  display:block;  position:relative;  width:100%; padding:20px 0px;} 
.cate .menu > div{display: flex; align-items: center; justify-content: space-between;}
.cate .menu .menulink{ display:block; color:#333;  font-size:20px; font-weight:600;} 
.cate .menu .subopen{     position: relative; width: 20px; height: 20px;} 
.cate .menu .subopen span{    position: absolute; display: block; width: 13px; height: 13px; top: calc(50% - 4px); left: 50%; transform: translate(-50%, -50%) rotate(45deg); border-right: 2px solid #333; border-bottom: 2px solid #333; transition: .3s;}
.cate .menu > div.active span{ top:50%; transform:translate(-50%, -50%) rotate(-135deg);}
.cate ul li{ padding:5px 15px; font-size:13px;}
.cate ul li a{font-size: 15px; font-weight:600; color:#131313;}
.cate ul li:first-child{ padding-top:20px; } 
.cate ul li:last-child{ padding-bottom:20px; }


.sidebar .side_langwrap{display: flex;padding:0px 16px; margin-top:56px;}
.sidebar .side_langwrap p{width:33.33%; text-align: center;}
.sidebar .side_langwrap p span{display: block;border:1px solid #efefef; color:#131313;    padding: 10px; background: #fff;}
.sidebar .side_langwrap p.on span{background:#0bac9f; color:#fff;font-weight: 600;}



.rock{position: absolute; bottom: 10px; right: 10px; width: 20px; height: 20px; z-index: 2; opacity: 0.1;}

:lang(en) .mo_view{display: block;}
.mo_view {opacity: 0.5;}

.mo_view02{display: none; opacity: 0.5;}

 /* ********************************************* *
* 1400px
* ********************************************* */
@media screen and (max-width: 1400px){
  .r_btn_wrap{display:none;}
  footer .ft_top > div > ul > li > a{font-size: 18px;margin-right: 53px;}
  .overlay-content .over_menu > li > a{font-size: 24px;}
  .overlay-content .over_menu ul li a{    font-size: 17px;}

  .overlay{    padding: 48px 60px;}
  .overlay-content{margin-top: 0px;}
}


 /* ********************************************* *
* 1200px
* ********************************************* */
@media screen and (max-width: 1200px){
  header{    height: 90px;}
  header .pc_header{padding:16px;}
  header .pc_header .logo_wrap a{width: 120px;}
  header .pc_header .menu_wrap .in_menu > li{width:100px;}
  header .pc_header .menu_wrap .in_menu > li > a{font-size: 16px;}
  header .pc_header .menu_wrap > div:nth-child(1){margin-right:30px;}
  header .pc_header .menu_wrap > div:nth-child(1) > a{}
  footer .ft_top .f_top_right > ul li a{font-size: 14px;}
}

 /* ********************************************* *
* 1024px
* ********************************************* */
@media screen and (max-width: 1024px){
  .cate .menu .menulink{pointer-events: none;}
  .cate:nth-child(3) .menu .menulink{pointer-events: initial;}
  .cate ul li:first-child{padding-top: 0;}
  header{display:none;}
.mo_menu_wrap{display:block;}
  header .pc_header .logo_wrap a{    width: 100px;}

  footer .ft_top{flex-direction: column;padding-top: 50px;}
  footer .ft_top > div{    width: 100%;}
  footer .ft_top > div > ul{display:flex; flex-wrap: wrap;}
  footer .ft_top > div > ul > li > a{font-size: 15px;margin-right: 24px;}
  footer .ft_top > i{margin-bottom: 20px;}

  footer .ft_top > div{flex-direction: column;}
  footer .ft_top > div > ul{width: 100%;}
  footer .ft_top .f_top_right > div:nth-child(1) {
    width: 130px;
  }
  footer .ft_top > div > div {
    width: 100%;
    flex-direction: column-reverse;
    display: flex;
    flex-wrap: wrap-reverse;
  }
}

 /* ********************************************* *
* 960px
* ********************************************* */

@media screen and (max-width: 960px){

  

}

 /* ********************************************* *
* 768px
* ********************************************* */
@media screen and (min-width: 769px){

}


 /* ********************************************* *
* 640px
* ********************************************* */
@media screen and (max-width: 640px){
  footer .ft_top > div{    flex-direction: column;}
  footer .ft_top > div > div{width:100%; flex-direction: column-reverse; display: flex;flex-wrap: wrap-reverse;}
  footer .ft_top .f_top_right > div:nth-child(1){width: 130px;}
  footer .ft_top > div > ul{width:100%;}
  footer .ft_top .f_top_right > ul{display:flex;flex-wrap: wrap;}
  footer .ft_top .f_top_right > ul li a{    font-size: 13px; margin-right: 16px;}
  footer .ft_top > div > ul > li > a{    font-size: 14px; margin-right: 16px;}
  footer .ft_top > i{width: 80px;}
  footer .ft_btm > div span{  padding-right: 20px;  font-size: 13px;}
  footer .ft_btm > p{font-size: 12px;}
  footer .ft_btm > div{padding-bottom:10px;}
  footer .ft_btm{padding-bottom:30px;}

  .cate .menu .menulink{font-size: 18px;}
  .cate .menu .subopen span{width:11px; height:11px;}
}


 /* ********************************************* *
* 500px
* ********************************************* */
@media screen and (max-width: 500px){
  .mo_head .mo_menu .res-menu{width:20px;}
  .mo_header{z-index:99;}
  .sidebar .accordion{padding-top: 32px;}

}


/* ********************************************* *
* 400px
* ********************************************* */
@media screen and (max-width: 400px){
  footer .ft_top > div > ul{flex-wrap: wrap;}
  footer .ft_top .f_top_right > ul{flex-wrap: wrap;}
  footer .ft_top > div > ul > li > a{font-size: 13px; margin-right: 10px; margin-bottom:5px;}
  footer .ft_top .f_top_right > ul li a{margin-right:10px;}
}


