/* 240226 엘리키즈 새작업 */

/* 헤더 */

.new_header.type_elikiz{background-color: #ffc700; border-bottom: 0;}
.new_header.type_elikiz .logo.elikiz{display: block !important;}
.new_header.type_elikiz .logo.window_414{display: none !important;}

.new_header.type_414 .logo.window_414{display: block !important;}
.new_header.type_414 .logo.elikiz{display: none !important;}




.new_header .search{background-color: #f5f5f5;}
.new_header .search input{background-color: #f5f5f5; font-size: 17px;}




.new_header{position: fixed; height: 70px; top: 0; z-index: 9998;background-color: #fff;left: 50%;width: 100%; transform: translateX(-50%); display: flex; justify-content: space-between; padding: 0 16px; align-items: center;}
.new_header h1{text-indent: -9999px;overflow: hidden;height: 70px; cursor: pointer;}
.new_header h1 img.logo01{}
.new_header h1 img.logo01_2{display: none;}
.new_header h1 img.logo02{width: 270px; margin-bottom: -8px;}
/* .new_header .left_con h1.elikiz a{background: url(../img/sub/IPC.svg)no-repeat center center /contain;} */
.new_header .left_con h1.window_414{background: url(../img/sub/414.png)no-repeat center center /contain; width: 250px; margin-left: 16px;}


.new_header .mid_con{position: absolute; left: 40%; transform: translate(-50%, -50%); top: 50%;}


.new_header h1 a{display: block;width: 100%;height: 100%;}
.new_header .left_con{display: flex; align-items: center; justify-content: center;padding-left: 68px;} 

.no_side .new_header .left_con .menu{display: none;}
.new_header .left_con .menu{display: flex;width: 22px;height: 18px; border-radius: 5px;flex-direction: column; justify-content: space-between; align-items: center; cursor: pointer;}
.new_header .left_con .menu span{display: block; width: 100%; height: 1px; background-color: #999; cursor: pointer;}
.new_header .left_con .logo{display: flex; align-items: center; margin-left: 16px; position: relative; z-index: 3; width: 160px;}






.new_header button.login_btn{}
.new_header .right_con button{border-radius: 5px; padding: 8px 12px; display: flex; align-items: center; color: #fff; background-color: #ababab; }
.new_header .right_con button img{margin-right: 12px;}
.new_header .right_con .con02{}




.new_header .right_con{display: flex; align-items: center; gap: 8px; padding-right: 80px;}
.new_header .right_con .con p{display: none; position: absolute; left: 50%; top: 60px; transform: translate(-50%, -50%); font-size: 13px; color: #fff; border-radius: 5px; padding: 4px 6px; background-color: rgba(0,0,0,0.5);}
.new_header .right_con .con{position: relative; cursor: pointer;}
.new_header .right_con .con:hover p{display: block;}
.new_header .alarm{position: relative; }
.new_header .alarm>div.in{width: 40px; height: 40px; 
    border: 1px solid #ddd; border-radius: 50%; 
    background-color: #fff; cursor: pointer; 
    position: relative; display: flex; align-items: center; justify-content: center;
}

.new_header .alarm img{width: 20px;}
.new_header .alarm span.dot{position: absolute; right: 10px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background-color: red; border: 1px solid #fff;}
.new_header .thumb{border-radius: 50% !important; overflow: hidden; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #ddd; padding: 0 !important;}
.new_header .thumb img{margin-right: 0 !important}

.new_header .logo_wrap{position: relative;}
.new_header .logo_wrap:hover .logo_list{transform: scale(1); }
.new_header .logo_wrap:hover .logo_list a{opacity: 1; transform: translateY(0);}
.new_header .logo_wrap:hover h1 span i{transform: rotate(-135deg); margin-top: 4px;}

.new_header .logo_wrap .logo_list{ transition-duration: 0.3s; width: 87%;  transform-origin: 134px 32px; transform: scale(0); overflow: hidden; position: absolute; top: 9px; border-radius: 5px; left: 10px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.2); padding: 24px; padding-top: 62px;}
.new_header .logo_wrap .logo_list a{display: block;text-align: center;position: relative;}
.new_header .logo_wrap .logo_list a:hover{opacity: 1;}
.new_header .logo_wrap .logo_list a::after{content: ""; opacity: 0; width: 130%; background-color: #e9e9e9; height: 130%; border-radius: 55px; left: 50%; top: 47%; transform: translate(-50%, -50%); position: absolute;}
.new_header .logo_wrap .logo_list a:hover::after{opacity: 1;}

.new_header .logo_wrap .logo_list a + a{margin-top: 8px;}
.new_header .logo_wrap .logo_list a img{width: 90px; margin: 0 auto; ; position: relative; z-index: 1;}
.new_header .logo_wrap h1 span{width: 15px; height: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #FF6C0F; margin-left: 3px;}
.new_header .logo_wrap h1 span i{border-right: 1px solid #fff; border-bottom: 1px solid #ddd; transform: rotate(45deg); display: block; width: 5px; height: 5px;}

.new_header .toggle{position: relative;}
.new_header .toggle >div.in{width: 40px; height: 40px; 
  border: 1px solid transparent; border-radius: 50%; 
  background-color: #fff; cursor: pointer; 
  position: relative; display: flex; align-items: center; justify-content: center;}
  .new_header .toggle >div.in img{width: 40px; opacity: .7;}



  
/* morebtn */
.morebtn{ position: fixed; top: 50%; transform: translate(0, -50%); z-index: 5;}
.morebtn button{background-color: #fff; box-shadow: 0 4px 16px #00000030; position: relative; width: 24px; height: 24px; border: 1px solid #ddd; border-radius: 50%; margin-left: 4px;}

.morebtn.open{left: 6px !important;}
.morebtn.open button{margin-left: 0;}

.morebtn.fold button:after{content: ''; display: inline-block; position: relative; width: 7px; height: 7px; border-top: 1px solid #555; border-left: 1px solid #555; position: absolute; display: block; right: 6px; top: 50%; transform: translateY(-50%) rotate(-45deg);}
.morebtn.open button:after{content: ''; display: inline-block; position: relative; width: 7px; height: 7px; border-top: 1px solid #555; border-right: 1px solid #555; position: absolute; display: block; right: 9px; top: 50%; transform: translateY(-50%) rotate(45deg);}



/* 공통 사이드바 */
.admin nav{transition: all .15s;}
.admin nav .side_nav03{overflow-y: auto; overflow-x: hidden; max-height: calc(100vh - 70px);}
.admin nav .side_nav03.click{}
.side_nav03 li p.on{color: #FF6C0F; font-weight: 600;}
.side_nav03 li.y_sub>p{font-size: 0.95em; margin-bottom: 16px; font-weight: 600; opacity: 0.7;}
.side_nav03.click{width: 50px; font-size: 0;}
.side_nav03.click li{padding: 8px;}
.side_nav03.click li p{font-size: 0 !important;}
.side_nav03.click li a{padding-right: 0;}
.side_nav03.click li .more_view button{display: none;}
.side_nav03.click li span.live_ing{display: none !important;}
.side_nav03.click li span.new_video{display: none !important;}
.side_nav03.click li.side_search{display: none !important;}
.side_nav03.click li .thumb{margin-right: 0;}

.admin .side_nav03.click li .short_414{display: block;}
.admin .side_nav03.click li .long_414{display: none;}
.admin .side_nav03 li .short_414{display: none;}
.admin .side_nav03 li .long_414{display: block;}


.side_nav03 li .thumb{width: 35px; height: 35px; margin-right: 8px; border-radius: 50%; border: 1px solid #ddd; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.admin nav.side_nav03 ul li.y_sub img{filter: invert(0); width: auto; margin-right: 0;}

.side_nav03 li p{display: flex; align-items: center; }
.side_nav03 li p + p{margin-top: 4px;}
.side_nav03 .y_sub li p{display: block; width: calc(100% - 35px);text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}

.side_nav03 li .side_depth a{display: flex; align-items: center;}
.side_nav03 li .side_depth a + a{margin-top: 8px;}

.side_nav03 li.side_service .thumb{width: auto; height: auto; border-radius: 0; border: 0;}
.side_nav03 li.side_service .thumb img{width: auto; filter: invert(0);}

.admin nav.side_nav03 ul img{display: inline-block; vertical-align:middle;}



.side_nav03 li.side_search .thumb{border: 0;}
.side_nav03 li a{position: relative; padding-right: 48px;}


.thumb_wrap{position: relative;}
.thumb_wrap .profile_sub{display: none; width: 240px; max-height: 70vh; overflow-y: auto; overflow-x: hidden; box-shadow: 0px 0px 10px rgba(0,0,0,0.3); z-index: 10; position: absolute; right: 0; top: 50px; border-radius: 15px; padding: 16px; background-color: #fff;}
.thumb_wrap .profile_sub .main{display: flex; align-items: center; }
.thumb_wrap .profile_sub .main .icon{width: 45px; height: 45px;  border: 1px solid #ddd;}
.thumb_wrap .profile_sub .main .icon img{width: 100%;}
.thumb_wrap .profile_sub .main .txt{width: calc(100% - 50px);}
.thumb_wrap .profile_sub .main .txt b{display: block;}
.thumb_wrap .profile_sub .main .txt span{display: block; margin: 6px 0; font-size: 0.85em; opacity: 0.8;}


.elikiz_list_wrap.class .live_con .thumb_wrap p{max-width: 80%; max-height: 80%; color: #666; font-size: 17px; font-weight: 600; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}


.thumb_wrap .profile_sub .main button{border-radius: 5px; padding: 4px 8px; font-size: 12px; border: 1px solid #FF6C0F;}
.thumb_wrap .profile_sub .icon{width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.thumb_wrap .profile_sub .icon img{width: 19px;}
.thumb_wrap .profile_sub .txt{width: calc(100% - 35px); padding-left: 4px;}
.thumb_wrap .profile_sub .head_list {margin-top:16px; padding-top: 16px; border-top: 1px solid #ddd;}
.thumb_wrap .profile_sub .head_list ul li .con_wrap{display: flex; align-items: center;}
.thumb_wrap .profile_sub .head_list ul li + li{margin-top: 8px;}
.thumb_wrap .profile_sub .head_list ul li{cursor: pointer;}
.thumb_wrap .profile_sub .head_list>b{font-size: 0.85em; display: block; margin-bottom: 12px; font-weight: 600;}

.strimview > .donation-btn,
.strimview > .shopview-btn {position: relative; height: auto; padding: 50px 15px 28px; border-radius: 100px;}

.strimview > .donation-btn > img,
.strimview > .shopview-btn > img {position: absolute; top: 0; left: 50%; transform: translate(-50%, 20px);}






/* 추후 변경시 여기만 삭제 */

.no_side .new_header_2 .left_con .menu{display: none;}
.new_header_2 .left_con .menu{display: flex;width: 30px;height: 29px;padding: 9px 8px; border-radius: 5px; background-color: #FF6C0F; flex-direction: column; justify-content: space-between; align-items: center; cursor: pointer;}
.new_header_2 .left_con .menu span{display: block; width: 100%; height: 1px; background-color: #fff; cursor: pointer;}
.new_header_2 .left_con .logo{display: flex; align-items: center; margin-left: 16px; position: relative; z-index: 3;}
.new_header_2 .left_con h1.elikiz a{background: url(../img/sub/promise_logo.svg)no-repeat center center /contain;}
.new_header_2 h1 a{display: block;width: 75%;height: 100%;}
.new_header_2 .left_con{display: flex; align-items: center; justify-content: center;} 
.new_header_2{ height: 70px; z-index: 9998;background-color: #fff; box-shadow: 0px 4px 10px rgba(0,0,0,0.04); display: flex; justify-content: space-between; padding: 0 16px; align-items: center;}
.new_header_2 h1{text-indent: -9999px;overflow: hidden;width: 150px;height: 70px;}


/* .new_header .new_side_btn{position: fixed !important; right: 10px; top: 135px;}
.new_header .new_side_btn.alarm{top: 80px;}
.new_header .login_btn {position: fixed; right:30px;top: 7px;} */


.lang_new{position: relative; flex-shrink: 0;}
.lang_new .con{width: 45px; height: 45px;display: flex; align-items: center; justify-content: center;}
.lang_new .con img{border: 1px solid #ddd;}
.lang_new .l_depth.view{display: flex;}
.lang_new .l_depth {display: none; z-index: 2; flex-wrap: wrap; gap: 16px; position: absolute;width:440px;  top:50px;right: 0; padding:12px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0 , 0, 0 , 0.3);}
.lang_new .l_depth p img{width: 40px; height: 25px; border-radius: 2px; margin-right: 8px; border: 1px solid #ddd; }
.lang_new .l_depth p{display: flex; align-items: center; cursor: pointer;font-size: 12px; width:calc(33.33% - 16px);}
.lang_new .l_depth p:hover{color: #FF6C0F;}



.toggle .l_depth { position: absolute;width:320px;  top:50px;right: 0; padding: 20px; background-color: #fff; border-radius: 15px; box-shadow: 0 0 10px rgba(0 , 0, 0 , 0.3); cursor: default; max-width: calc(100vw - 32px); max-height: 70vh; overflow: auto; display: none;}
.toggle .l_depth .list-wrap{display: flex; z-index: 2; flex-wrap: wrap; gap: 12px; }
.toggle .l_depth ul{display: flex; gap: 8px; flex-wrap: wrap; width: 100%; overflow: auto; align-items: flex-start;}
.toggle .l_depth .line{height: 1px; width: 100%; display: block; position: relative; background-color: #eee; }

.toggle .l_depth ul li{width: calc((100% - 16px) / 3); display: flex; flex-direction: column; box-sizing: border-box; padding: 8px 12px; border-radius: 6px; justify-content: center; gap: 6px; cursor: pointer;}
.toggle .l_depth ul li b{font-size: .85rem; text-align: center; font-weight: 500;}
.toggle .l_depth ul li i{display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / .91; width:80%; margin: 0 auto; border-radius: 6px; }
/* .toggle .l_depth ul li {background-color: #f5f5f5;   } */
.toggle .l_depth ul li i img{max-width: 90%; filter: grayscale(100%);} 
.toggle .l_depth ul li:hover{background-color: #ebebeb;}


/* .toggle .l_depth ul li i.bg-k, .toggle .l_depth ul li i.bg-g{aspect-ratio: 1 / .91;} */
.toggle .l_depth ul li i.bg-k img, .toggle .l_depth ul li i.bg-o img{filter: brightness(100000%);}
.toggle .l_depth ul li i.bright-normal img{filter: brightness(100%);}
.toggle .l_depth ul li i.colorcon img{filter: grayscale(0);}
.toggle .l_depth ul li i.w80 img{width: 70%;}


.toggle .l_depth ul.eli-btnwrap{gap: 8px; padding-bottom: 12px;}
.toggle .l_depth ul.eli-btnwrap li{width: calc((100% - 16px) / 3); padding: 0; text-align: center;}
.toggle .l_depth ul.eli-btnwrap li i{aspect-ratio: 1.8 / 1; width: 100%; padding: 12px 8px; background-color: #f0f0f0; border-radius: 6px;} 
.toggle .l_depth ul.eli-btnwrap li i img{max-width: 100%; width: 100%;}
.toggle .l_depth ul.eli-btnwrap li:hover{background-color: transparent;}
.toggle .l_depth ul.eli-btnwrap li:hover i{background-color: #ebebeb;}






/* ********************************************* *
 * 1720px
 * ********************************************* */
 @media screen and (max-width: 1720px){
   .new_header .mid_con{left: 20%; transform: translate(0, -50%);}
   /* .search{width: 450px;} */
   .search{width: calc(100vw - 1100px);}

}
 /* ********************************************* *
 * 1600px
 * ********************************************* */
 @media screen and (max-width: 1600px){

   
 }


  /* ********************************************* *
 * 1500px
 * ********************************************* */
 @media screen and (max-width: 1500px){
    .new_header .mid_con{left: 15%;}
    .search{width: calc(100vw - 950px);}

 }


 /* ********************************************* *
 * 1400px
 * ********************************************* */
 @media screen and (max-width: 1400px){

   .new_header .mid_con{left: 210px;}
   /* .search{width: 280px;} */
}

/* ********************************************* *
 * 1200px
 * ********************************************* */
 @media screen and (max-width: 1200px){
   
    .new_header .left_con{display: flex !important;}
    /* .search{width: 430px;} */

    .new_header .new_side_btn{position: static !important;}
    .new_header .new_side_btn.alarm{top: 80px;}
    .new_header .login_btn {position: fixed; right:30px;top: 7px;}
    .new_header_2{display: none !important;}

    /* .new_header .logo_wrap{display: none !important;} */
    .new_header .login_btn{position: static !important;}
    .new_header .left_con{padding-left: 0;}
    /* .search{width: 280px;} */
    .search{width: calc(100vw - 780px);}
    .new_header .mid_con{left: 130px; }
    .new_header .right_con{padding-right: 0;}

    .new_header h1 img.logo01{display: none;}
    .new_header h1 img.logo01_2{display: block;}
    .new_header .left_con .logo{ width: 70px;}

    .lang_new .l_depth{left: inherit; right: 0; transform: inherit;}

    .toggle .l_depth{right: 16px; top: 60px;}
}


/* ********************************************* *
 * 1100px
 * ********************************************* */
 @media screen and (max-width: 1100px){
  /* .search{width: 250px;} */

 }



/* ********************************************* *
 * 1024px
 * ********************************************* */
 @media screen and (max-width: 1024px){
 
  /* .search{width: 210px;} */
  .admin nav{width: 180px;}
}


/* ********************************************* *
 * 960px
 * ********************************************* */
 @media screen and (max-width: 960px){
   .new_header .right_con button.icon{display: none;}
   .admin nav .list ul li.btn_wrap{display: block !important;}

   .new_header .mid_con{left: 130px;}

   .search{width: calc(100vw - 460px);}

}



/* ********************************************* *
 * 768px
 * ********************************************* */
 @media screen and (max-width: 768px){

   .new_header .right_con button.icon{font-size: 0 !important; width: 38px; height: 38px; padding: 4px; justify-content: center;}
   .new_header .right_con button.icon img{margin-right: 0;}
   .new_header .right_con{gap: 8px;}
   .new_header .mid_con{left: 130px;}


  /* .toggle .l_depth{width: 300px; border-radius: 10px;}
  .toggle .l_depth{padding: 16px;}
  .toggle .l_depth ul{gap: 6px; }
  .toggle .l_depth ul li{width: calc((100% - 12px) / 3); padding: 5px 10px;}
  .toggle .l_depth ul li i{width: 80%; }
  .toggle .l_depth ul li b{font-size: .9rem;}
  .toggle .l_depth ul.eli-btnwrap{padding-bottom: 8px;} */

  /* 모바일에서 아주작게 */
  .toggle .l_depth .list-wrap{gap: 8px;}
  .toggle .l_depth{width: 250px; border-radius: 10px;}
  .toggle .l_depth{padding: 16px;}
  .toggle .l_depth ul{gap: 0;}
  .toggle .l_depth ul li{width: 33.333%; padding: 5px;}
  .toggle .l_depth ul li i{width: 80%; }
  .toggle .l_depth ul li b{font-size: .85rem;}
  .toggle .l_depth ul.eli-btnwrap{padding-bottom: 8px; gap: 5px;}
  .toggle .l_depth ul.eli-btnwrap li{width: calc((100% - 10px) / 3);}
  .toggle .l_depth ul.eli-btnwrap li i{border-radius: 3px; }


 }


  /* ********************************************* *
 * 640px
 * ********************************************* */
 @media screen and (max-width: 640px){
  .new_header{height: 116px; align-items: flex-start; box-shadow: 0 0 8px rgba(0,0,0,.08);}
  .new_header .right_con{padding: 14px 0;}
  .new_header .mid_con{left: 50%; top: 62px;transform: translateX(-50%); width: calc(100% - 28px); margin: 0 auto; z-index: 1;}
  .search{width: 100%;}
  .wrapper.mt-70, .mt-70{margin-top: 126px; padding-top: 0 !important;}

  .toggle .l_depth{top: 70px; z-index: 101; border-radius: 5px;}
  .lang_new .l_depth{top: 70px;}
  .toggle .l_depth ul.eli-btnwrap li i, .toggle .l_depth ul li{border-radius: 3px;}

  .new_header .toggle{position: relative !important; right: -8px;}
  .new_header .toggle >div.in{width: 34px; height: 34px;}
  .new_header .toggle >div.in img{width: 30px;}
  .toggle .l_depth{right: 8px;}


  
 }

 /* ********************************************* *
 * 550px
 * ********************************************* */
 @media screen and (max-width: 550px){
  .toggle .l_depth ul li b{font-size: .95rem;}
 }

 /* ********************************************* *
 * 500px
 * ********************************************* */
 @media screen and (max-width: 500px){
   .search button img{width: 25px;}
   .search{width: 155px;}
   

   .new_header .alarm>div.in{width: 35px; height: 35px;}
   .new_header .alarm img{width: 17px;}
   .new_header .thumb{width: 35px; height: 35px;}

   .new_header .thumb{display: none !important;}

   .new_header .right_con{gap: 4px;}
   .new_header .left_con .logo{width: 60px; }
   .search{width: 100%;}
   /* .new_header .mid_con{left: 50%; top: 62px;transform: translateX(-50%); width: calc(100% - 16px); margin: 0 auto; z-index: 1;} */
   .new_header{z-index: 3;}

   .lang_new .l_depth{width: 250px; max-height: 70vh; overflow-x: hidden; overflow-y: auto;}
   .lang_new .l_depth p{width: calc(50% - 16px);}
   .lang_new .l_depth p img{width: 35px; height: 20px;}

   .admin nav:not(#sideNavi){width: 150px;}

   
   /* .toggle .l_depth ul li{padding: 0;} */
   .toggle .l_depth ul li:hover{background-color: none;}
   .toggle .l_depth ul li i{width: 80%;}

  /* 모바일에서 아주작게 */
  .toggle .l_depth{width: 200px; border-radius: 8px; padding: 10px;}
  .toggle .l_depth .list-wrap{gap: 8px;}
  .toggle .l_depth ul{gap: 10px 0; padding-top: 4px;}
  .toggle .l_depth ul li{ padding: 0; width: 33.3333%; gap: 2px;}
  .toggle .l_depth ul li i{width: 80%; }
  .toggle .l_depth ul li i img{width: 100%;}
  .toggle .l_depth ul li b{font-size: .85rem;}
  .toggle .l_depth ul.eli-btnwrap{padding-bottom: 4px; gap: 5px; padding-top: 0;}
  .toggle .l_depth ul.eli-btnwrap li{width: calc((100% - 10px) / 3);}
  .toggle .l_depth ul.eli-btnwrap li i{border-radius: 3px; display: flex; align-items: center; justify-content: center; padding: 0;}
  .toggle .l_depth ul.eli-btnwrap li i img{width: 85%;}
  } 
 
 /* ********************************************* *
  * 400px
 * ********************************************* */
 @media screen and (max-width: 400px){
    .new_header .mid_con{}
    .new_header .left_con .logo{width: 50px;}
    .new_header .left_con .menu{width: 20px; height: 15px;}
    .search{height: 40px;}
  
    .new_header .right_con button img{display: none;}

    /* .toggle .l_depth ul li{width: calc((100% - 12px) / 3);} */
   /* .toggle .l_depth ul li i{width: 60%;} */
   /* .toggle .l_depth{width: 280px;} */

 }