* {margin:0; padding:0;}
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
body{ font-size:16px; line-height:1.1em; color:#6f6f6f; min-width: 1200px;
    font-family: "Noto Sans KR", sans-serif;}
ul, ol, li{list-style-type:none}
img, fieldset{border:none;vertical-align: middle}
hr {clear:both;border:none}
a {color:inherit;text-decoration:none}
table{border-collapse:collapse}
input, textarea {color:inherit;font-size:inherit;
       font-family:inherit;vertical-align: middle}

#wrap{}
#header{z-index: 99;}
#section{}
#footer{}
*{box-sizing: border-box;}
/*******************************카테고리*******************************/
#category{background-color: rgba(0, 40, 72, 0.5);
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 100;
    margin-top:-83px;
    display: none;}
#category .cate_box ul{padding:0px 0px 0px 1%; margin-top: 15px;}
#category .cate_box ul li{
    float: left;
    width: calc(33% - 40px);
    padding: 40px 0;
    position: relative;
    margin:10px 20px;
    background-color: red;
    border-radius: 20px;
    cursor: pointer;
}


#category .cate_box ul .c_1{background:url('../img/category_1.jpg') center no-repeat;}
#category .cate_box ul .c_2{background:url('../img/category_2.jpg') center no-repeat;}
#category .cate_box ul .c_3{background:url('../img/category_3.jpg') center no-repeat;}
#category .cate_box ul .c_4{background:url('../img/category_4.jpg') center no-repeat;}
#category .cate_box ul .c_5{background:url('../img/category_5.jpg') center no-repeat;}
#category .cate_box ul .c_6{background:url('../img/category_6.jpg') center no-repeat;}
#category .cate_box ul .c_7{background:url('../img/category_7.jpg') center no-repeat;}
#category .cate_box ul .c_8{background:url('../img/category_8.jpg') center no-repeat;}
#category .cate_box ul .c_9{background:url('../img/category_9.jpg') center no-repeat;}
#category .cate_box ul .c_10{background:url('../img/category_10.jpg') center no-repeat;}
#category .cate_box ul .c_11{background:url('../img/category_11.jpg') center no-repeat;}
#category .cate_box ul .c_12{background:url('../img/category_12.jpg') center no-repeat;}
#category .cate_box ul .c_13{background:url('../img/category_13.jpg') center no-repeat;}
#category .cate_box ul .c_14{background:url('../img/category_14.jpg') center no-repeat;}
#category .cate_box ul .c_15{background:url('../img/category_15.jpg') center no-repeat;}
#category .cate_box ul li p{
    text-align: center;
    font-size: 25px;
    font-weight: 600;
    color: #fff;
    z-index: 2;

    width: 100%;height: 100%;
}
#logo img{
    width:150px;
    margin-left: 20px;
}
.cate_box{
    width: 700px;
    background-color: #fff;
    position: absolute;
    top: calc(50% - 350px);
    left: calc(50% - 350px);
    border-radius:20px;
    padding-bottom: 30px;

}
.cate_box .logo{text-align: center; margin-top: 30px;}
.cate_box .close{position: absolute; top: 40px; right: 40px; cursor: pointer;}
.ranking{height:480px;}
/*******************************카테고리 끝*******************************/
/******신고창 시작*******/
#declaration{background-color: rgba(0, 40, 72, 0.5);
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 50000;
    margin-top:-83px;
    display: none;
}

.declaration_box{

    width:450px;
    height: 400px;
    background-color: #fff;
    position: absolute;
    top: calc(50% - 200px);
    left: calc(50% -  225px);

}
.declare_title p{
  margin-left: 30px;
  margin-top: 15px;
  margin-bottom: 10px;
  font-weight: bold;
  color: black;
  line-height: 20px;
  font-size: 16px;
}
.declaration_button li{padding:15px 0px 15px 30px;}
.declaration_button li:hover{background-color:#e4eef4 ;}
.declaration_button img{float: left; margin-right: 20px; width: 20px;
    height: 20px;}
.declaration_button p{font-weight: bold; color: black;line-height: 20px; font-size: 15px;}
.declare_alert p{
  display: none;
  margin-left: 25px;
  margin-top: 20px;
  font-weight: bold;
  color:red;
  line-height: 20px;
  font-size: 12px;
}
#declaration .declaration_box .close{
    padding: 6px 18px;
    background-color: #bbb;
    border: 0px;
    color: #fff;
    border-radius: 30px;
    position: absolute;
    font-size: 16px;
    bottom: 10px ;
    right: 100px;
}
#declaration .declaration_box .declare{
    padding: 6px 18px;
    background-color: #bbb;
    border: 0px;
    color: #fff;
    border-radius: 30px;
    position: absolute;
    font-size: 16px;
    bottom: 10px ;
    right: 10px;
}

/******신고창 끝*******/
/******지도댓글창 *******/
#reple_map{background-color: rgba(0, 40, 72, 0.5);
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 100;
    margin-top: -83px;
    display: none;
}
#reple_map .close{
    width: 40px;
    height: 40px;
     border-radius: 40px;
      background: rgb(255, 255, 255);
       position: absolute;
    top:0 ;
    right: -50px;
    cursor: pointer;
    text-align: center;
    }
#reple_map .close img{
    width:60%;
    margin-top: 7px;
}
.reple_map_box{
    width:450px;
    height: 600px;
    background-color: #fff;
    position: absolute;
    top: calc(50% - 300px);
    left: calc(50% -  225px);

}
.reple_map_box .reple_map_content{
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 0;
}

.reple_map_box .reple_map_content .screen{
  height: 600px;
  width: 100%;
  background-color: #fff;
  position: relative;
}
/******지도댓글창 끝*******/

/******리플창 *******/
#reple{background-color: rgba(0, 40, 72, 0.5);
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 100;
    margin-top: -83px;
    display: none;
}
#reple .close{
    width: 40px;
    height: 40px;
     border-radius: 40px;
      background: rgb(255, 255, 255);
       position: absolute;
    top:0 ;
    right: -50px;
    cursor: pointer;
    text-align: center;
    }
#reple .close img{
    width:60%;
    margin-top: 7px;
}
.reple_box{
    width:450px;
    height: 600px;
    background-color: #fff;
    position: absolute;
    top: calc(50% - 300px);
    left: calc(50% -  225px);

}
.reple_box .tabs{
  z-index: 9999;
  position: relative;top: 0; left: 0;
}
.reple_box .tabs li{float: left;
    width: 50%;
    color:#fff;
    text-align: center;
    height: 50px;
    background-color: #bbb;
    border-radius: 0px 0px 10px 10px;
    padding-top: 15px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;}
.reple_box .tabs .active{
  color:#0e6bb7;
  background-color: #fff;
  border-radius: 0px 0px 10px 10px;
  font-size: 15px;
  font-weight: 600;
}

.reple_box .tab_content{
  padding-top: 50px;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 0;
}

.reple_box .tab_content .screen{
  height: 550px;
  width: 100%;
  background-color: #fff;
  position: relative;
}

.spiner{float: right; margin-right: 20px; margin-top: 5px;}

.reples{
    position: relative;
    height: 520px;
    width: 100%;
    overflow-y: auto;
}
.writer{
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color:#000;
    float: left;
}
.writer_reple_img{
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background-color:#000;
}
#reple_chart{
    width: 95%;
    margin: 0 auto;
}
#reple_chart li{
    position: relative;
    margin-bottom: 30px;
    background-color: #fff;
    border-radius: 20px;
    padding: 20px;
    float: left;
    width: 100%;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.1);
    margin: 20px 0;
}
.reple_time{
    position: absolute;
    bottom: 10px;
    right: 20px;
    font-size: 12px;
}
#reple_chart li .reple_mapgps{
  border: 2px solid #ccc;
  color:#aaa;
  border-radius: 18px;
  background-color: #fff;
  position: relative;
  margin-top: 60px;
  cursor:pointer;
}
#reple_chart li .reple_mapgps p{
    white-space: pre-line;
    font-size: 14px;
    line-height: 30px;
    color: #3291de;
    font-weight: 600;
    clear: both;
    text-align: center;
}
#reple_chart li .reple_img{
    position: relative;
    max-width: 100%;
    left: -30px;
    right: 20px;
}
#reple_chart li .reple_img .reple_video {
  height: 100%;
  max-width: 100%;
  background: #000;
  position: relative;
  z-index: 2;
}
#reple_chart li .reple_img .reple_s_bar{
    position: absolute;
    width: 100%;
    z-index: 55;
    bottom: 10px;
}
#reple_chart li .reple_img .reple_seekbar{
    width: 100%;
    padding: 0 20px;
    z-index: 30;
    margin-top: 10px;
}
#reple_chart li .reple_img .reple_seekbar .editor_play{
  background-color: #000;
  color: #fff;
  border: 0px;
}
#reple_chart li .reple_img .reple_seekbar .volume{
  padding: 0px 8px;
  background-color: #000;
  color: #fff;
  border: 0px;
}
#reple_chart li .reple_img .reple_seekbar .timer{
  padding: 0px 8px;
  background-color: #000;
  color: #fff;
  border: 0px;
}
#reple_chart li .my_reple_text{
    white-space: pre-line;
    font-size: 14px;
    line-height: 30px;
    margin-bottom: 20px;
    color: #000;
    font-weight: 600;
    clear: both;
}
#reple_chart h3{
    padding: 20px 0;
    margin-left: 10px;
    color: #000;
    font-size: 18px;
    float: left;}
#reple_chart li .button{
    position: absolute;
    top: 25px;
    right: 20px;
    display: flex;
}
.reveiw_declaration{
    height: 30px;
    width: 30px;
    border: 0px;
    background-color: #fff;
    background-image: url(../img/declaration_off.png);
    background-size: cover;
    cursor: pointer;
    margin-right: 10px;
}
.reveiw_declaration:hover{
    height: 30px;
    width: 30px;
    border: 0px;
    background-color: #fff;
    background-image: url(../img/declaration_on.png);
    background-size: cover;
    cursor: pointer;
    margin-right: 10px;
}
.reveiw_declaration img{
    width: 100%;
    height: 100%;

}
#reple_chart li .declaration{
    height: 30px;
    width: 30px;
    border: 0px;
    background-color: #fff;
    background-image: url(../img/declaration_off.png);
    background-size: cover;
    cursor: pointer;
    margin-right: 10px;
}
#reple_chart li .declaration:hover{
    height: 30px;
    width: 30px;
    border: 0px;
    background-color: #fff;
    background-image: url(../img/declaration_on.png);
    background-size: cover;
    cursor: pointer;
    margin-right: 10px;
}
#reple_chart li .declaration img{
    width: 100%;
    height: 100%;

}
#reple_chart li .like{
    height: 30px;
    padding: 0px 10px;
    border: 0px;
    border-radius: 30px;
    color: #000;
    background-color: #fff;
    cursor: pointer;
}
#reple_chart li .like:hover{
    height: 30px;
    padding: 0px 10px;
    border: 0px;
    border-radius: 30px;
    color: #3291de;
    background-color: #fff;
    cursor: pointer;
}
#reple_chart li .like img{
    height: 100%;
}
#reple_chart li .mylike{
  height: 30px;
  padding: 0px 10px;
  border: 0px;
  border-radius: 30px;
  color: #3291de;
  background-color: #fff;
  cursor:default;
}
#reple_chart li .mylike img{height: 100%;}
#reple_chart li .scissors{
    height: 30px;
    width: 30px;
    border: 0px;
    background-color: #fff;
    background-image: url(../img/scissors_off.png);
    background-size: cover;
    cursor: pointer;
    margin-right: 15px;
}
#reple_chart li .scissors:hover{
    height: 30px;
    width: 30px;
    border: 0px;
    background-color: #fff;
    background-image: url(../img/scissors_on.png);
    background-size: cover;
    cursor: pointer;
    margin-right: 15px;
}
#reple_chart li .scissors img{
    width: 100%;
    height: 100%;

}

#reple_chart li .reple_img{ width: 400px;margin-left: 30px;}
#reple_chart li .reple_img img{width: 100%;}
/*********************header****************************/
#header #top{display: flex; width: 100%; padding:10px; border-bottom: 1px solid #ccc;min-width: 1100px;    position: fixed;
            top: 0; background-color: #fff;z-index: 99;
}
#logo{width: 15%;}
#Search{width: 75%;flex-basis: 1e-9px;flex: 1;}
#Search .search_box{width: 100%;
                    max-width: 540px;
                    margin: 0 auto;
                    border: 3px solid #4eacf9;
                    border-radius: 30px;}


#Search .search_box input[type=text]{width: 80%; height: 32px; border: 0;margin-left: 20px;}
#Search .search_box input[type=submit]{
   background: url('../img/Search.png') center no-repeat;
   background-size: 30px;
     float: right;
     height: 32px;
    margin-right: 20px;
    border: 0;
    cursor: pointer;
}

#top_meun{display: flex; width: 250px;}
#top_meun img{width: 40px; height:36px;margin-right: 20px;}

/*********************section****************************/
.left_meun{width: 230px;
    border-right: 1px solid #ccc;
    position: fixed;z-index: 1;
    left: 0;
    height: 100%;
    overflow: auto;
    background-color: #fff;
    top: 60px;
}

.left_meun .left_button li{padding:15px 0px 15px 30px;}
.left_button li:hover{background-color:#e4eef4 ;}
.subscribe{display: flex;}
.subscribe a{width:80%; display: inline-block;}
.subscribe .close2{margin-left: 5%; display: none;transition: 1s all;}
.left_meun img{float: left; margin-right: 30px; width: 30px;
    height: 30px;}
.left_meun .left_button p{font-weight: bold; color: black;line-height: 30px; font-size: 18px;}
.top_rank{font-size: 15px; font-weight: bold; color:#000; margin-bottom: 10px;padding: 15px 0px 0px 30px;}
.ranking li{padding-left: 30px; line-height: 40px;font-size: 15px}
.right_screen{margin-left: 230px; margin-top: 83px;padding-top: 1px;overflow: hidden;}

#banner_wrap{position:relative;
    width:45%;
    margin:0 auto;
    min-width: 640px;
     left: -100%;
     transition: 0.5s;
     z-index: 0;

}
#prevBtn{position:absolute;left:-25px;top:5px;}
#nextBtn{position:absolute;right:-25px;top:5px;}
#banner_wrap img{border:none 0;vertical-align:top;}
#slide_banner li img{width: 70px; height: 70px; border-radius: 50px;}
#slide_banner li{text-align: center; opacity: 0.5;color:#000000;cursor: pointer;}
#slide_banner li:hover{opacity: 1; color:#4eacf9}
#slide_banner li .user_id{font-size: 12px; margin-top: 5px;}

#main_title_img{
  display: inline-block;
  margin-left: 20px;
  width: 50px; height: 50px;
  margin-bottom: 20px;
}

#main_title{
  display: inline-block;
  background-color: #fff;
  font-size: 25px;
  margin-left: 20px;
  color:#5ca2e3;
}

.main_video{
    max-width: 100%;
    margin-top: 10px;
    margin-right: calc(-1 * 16px / 2);
    margin-left: calc(-1 * 16px / 2);
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;

}

.main_video h3{
    color: #000;
    display: -webkit-box;
    max-height: 3.2rem;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 1;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.6rem;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5rem;
    max-height: 60px;
    white-space: pre-line;
    letter-spacing:-1px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
}
.reveiw_day{font-size: 12px;}
.id_grade{font-size: 14px;color: #3291de;font-weight: bold;}
.video_window{
    margin-left: calc(60px / 2);
    margin-right: calc(60px / 2);
    margin-bottom: 40px;
    width: calc( 100% / 4 - 60px - .01px );
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}

.video_window > img{width: 100%;height: 200px;}
.video_window > h3{}
.video_window > ul{}
.reveiwer {font-size: 15px; padding: 10px 0;}
.reveiwer img{
    margin-top: -5px;
    margin-right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background-color:#fff;
}
.reveiwer span{font-weight: bolder; color: #000; font-size: 20px;}
.id_reveiwer {font-size: 15px; padding: 10px 0;}
.id_reveiwer img{
    margin-top: -5px;
    margin-right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background-color:#fff;
}
.id_reveiwer span{font-weight: bolder; color: #000; font-size: 20px;}
.left_reveiw{float: left; margin-bottom: 20px;margin-left: 20px; margin-top: 10px;}
.reight_reveiw{float: right;margin-right: 20px; margin-top: 20px;z-index: 5;}
.reight_sub{float: right;margin-right: 20px; margin-top: 20px;z-index: 5;}
/*********************footer****************************/

/***********************알림*************************/

.alarm2{
    width: 400px;
    height: 500px;
    border: 1px solid #ccc;
    position: fixed;
    right: 8%;
    top: 58px;
    z-index: 999;
    background: rgba(255,255,255,0.97);
    display: none;
}
.alarm_top{
    padding: 15px;
    border-bottom: 1px solid #ccc;
}
.alarm_top p{
    font-size: 18px;
    font-weight: bold;
}













/********1700********************/
@media screen and (max-width:1560px) {
    .video_window{
        width: calc( 100% / 3 - 60px - .01px );
    }
}
/********1300********************/
@media screen and (max-width:1300px) {
    .video_window{
        width: calc( 100% / 2 - 60px - .01px );
    }
}