/* 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;}




/* morebtn */
.morebtn{display: none; 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;}

/* ********************************************* *
 * 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;}
}


/* ********************************************* *
 * 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;}

 }


  /* ********************************************* *
 * 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;}


 }


 /* ********************************************* *
 * 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: 2;}

   .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;}


 } 
 
 /* ********************************************* *
  * 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;}
 }