/**
  * ----------------------------------------
  * layout
  * 공통영역
  * re/layout.css에 들어가있는 내용 중 공통
  * ----------------------------------------
  */
/*공통적용 CSS*/
@charset "UTF-8";
html{
scrollbar-gutter: stable;
}
html, body {
  overscroll-behavior-y: none;
}
 html, body {
     width: 100%;
     height: 100%;   
 }
 
 body{
     overflow-x: hidden;
     overflow-y: auto;
     scrollbar-gutter: stable overlay;
     padding: 0;
     margin: 0;
 }
 
 	
body.modal-open{
		overflow-y:hidden;
}
 
 body > div,
 body > section,
 body > main,
 body > footer{
     overflow-x: hidden;
     padding: 0;
     margin: 0;
 
 }
 
 /* seo 적용 위해 히든시킴 */
 .visuallyHidden{
     position: absolute;
     width: 0;
     height: 0;
     margin: -1px;
     padding: 0;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     border: 0;
 }
 
 .select_basic{
    
     -o-appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     padding: 0 16px;
     position: relative;
     float: left;
     width: 280px;
     height: 40px;
     color: var(--gr400, #6D757E);
     font-weight: 300;
     background: #fff url('https://www.wjthinkbig.com/re/images/icons/arrowFill_gr.svg') calc(100% - 10px) center/16px no-repeat;
     border-radius: 8px;
     transition: all 375ms ease-in-out;
     border: 1px solid var(--gr150, #DEE2E6);
     margin-bottom: 20px;
 }
 
 .select_basic:focus-visible{
    outline: none;
     border: 1px solid var(--gr900, #212529) !important;
 }
 .select_basic:focus-visible{
    outline: none;
     border: 1px solid var(--gr900, #212529) !important;
 }

.mbScroll{
     overflow-x:auto;
 }
 .mbScroll::-webkit-scrollbar{
     width: 0;
     height: 0;
 }
 .scroll-container {
     scrollbar-width: none; 
 }
 


/**================================
 미디어 쿼리 반응형 제어
================================**/

 @media only screen and (max-width: 1280px) {
     /* 레이아웃 */
     .layoutWrap{
         width: 100%;
     }  
 }/*end of 1280*/

 /*end of 1280*/
 @media only screen and (max-width: 1180px) {
     /* 폰트사이즈 */
     html{
         font-size: 15px;
     }
}/*end of 1180*/

@media only screen and (max-width: 1024px) {
     /* 폰트사이즈 */
     html{
         font-size: 16px;
     }

     /*가로 스크롤바 안보이게*/
     .subBannerEvent.mbScroll{
         -ms-overflow-style: none;  /* IE and Edge */
         scrollbar-width: none;  /* Firefox */
     }
         
     .subBannerEvent.mbScroll::-webkit-scrollbar{
         display: none;
         width: 0;  /* Remove scrollbar space */
         height: 0;
         background: transparent;  /* Optional: just make scrollbar invisible */
         -webkit-appearance: none;
     }
     /*가로 스크롤바 안보이게*/

 }/*end of 1024*/

  @media only screen and (max-width: 820px) {
    /*레이아웃*/
     .layoutWrap{
         padding: 0 20px;
     }
     .layoutPadding{
        padding-left: 20px;
        padding-right: 20px;
     }
}/*end of 820*/

@media only screen and (max-width: 720px) {
     /*폰트사이즈*/
     html{
         font-size: 14px;
     }
 }/*end of 720*/

 @media only screen and (max-width: 340px){
     /* 폰트 */
     html,body{
         font-size: 13px;
      }
 }/*end of 340*/
 
 @media only screen and (max-width: 280px){
     /*레이아웃*/
     .layoutWrap{
         padding-left: 12px;
         padding-right: 12px;
     }
     .layoutPadding{
        padding-left: 12px;
        padding-right: 12px;
     }
 
     /* 폰트*/
     html,body{
         font-size: 12px;
     }	
 }/*end of 280*/