/*비디오 모음 페이지*/
#videoDb { position: relative; padding: 10px 0px; width: 100%;}
#videoDb * { font-family: "Malgun Gothic", sans-serif; }
#videoDb p { margin: 0; }
#videoDb h3 {color:#000000; font-weight:bold; font-size:20px; letter-spacing: -1px; margin-bottom: 25px; float: left; }
#videoDb.mobile h3 { float: none; }
#videoDb h3 .title-text { display: inline-block; background: url(//static.inven.co.kr/image_2011/r2m/video/youtube_title.png) 0 62% no-repeat; text-indent: 28px; }
#videoDb .video_top {position: relative; width: 100%;}
#videoDb .video_top > div {position: absolute; top: 3px; right: 0; width: 190px;}
#videoDb .video_top > div > * {height: 22px; font-size: 12px;}
#videoDb .video_top .cycle-time { position: absolute; font-weight: bold; color: #ad2812; font-size: 13px; letter-spacing: -1px; top: -17px; }
#videoDb .video_top .loader {
    display: inline-block;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    animation: spin 2s linear infinite;
    vertical-align: -4px;
    margin-right: 3px;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
#videoDb .video_top > div select {width: 65px; color: #3d85c6; border: 1px solid #3d85c6; border-radius: 0px;}
#videoDb .video_top > div button {width: 75px; background: #fff; border: 1px solid #cccccc; color: #686868;}
#videoDb .video_top > div button::before {
    content: '';
    display: block;
    position: relative;
    top: 4px;
    margin: 0 2px;
    width: 9px;
    height: 9px;
    float: left;
    background: url('//static.inven.co.kr/image_2011/r2m/common/video_db_img.png') no-repeat;
    background-size: 66px;
    background-position: -11px 0;
}

#videoDb .video_top > div .infor_option { display: block; float: right; width: 100%; text-align: right; overflow: hidden; margin-right: 59px; margin-top: 5px; }
#videoDb.mobile .video_top > div .infor_option { margin-top: 0; }
#videoDb .video_top > div .infor_option li { width: 100%; text-align: right; }
#videoDb .video_top > div .infor_option li a { color: #686868; }
#videoDb.mobile .video_top > div .infor_option li a { font-size: 15px; }
#videoDb .video_top > div .infor_option li a:hover { text-decoration: none; }

#videoDb .video_top .yTabs { overflow: hidden; background-color: #d7d5e0; margin-left: 20px; margin-top: 2px; border-radius: 10px; padding: 1px; margin-bottom: 10px; float: left;}
#videoDb .video_top .yTabs.mobile { width: 181px; margin: 10px auto; float: none; }
#videoDb .video_top .yTabs li { display: block; float: left; height: 100%; text-align: center; width: 90px; height: 23px; line-height: 23px; border-radius: 10px; margin-right: 1px; }
#videoDb .video_top .yTabs li:last-child { margin-right: 0; }
#videoDb .video_top .yTabs li a { display: inline-block; width: 100%; height: 100%; color: #888888; font-family: MalgunGothic, '맑은 고딕', 'Malgun Gothic', gulim, sans-serif; border-radius: 10px; }
#videoDb .video_top .yTabs.mobile li a { font-size: 13px; }
#videoDb .video_top .yTabs li a:hover,
#videoDb .video_top .yTabs li a.active { background-color: #f4f2f9; color: #000; font-weight: bold; text-decoration: none; }

#videoDb .video_top > div .admin_option { display: block; float: right; overflow: hidden; width: 100%; }
#videoDb .video_top > div .admin_option li {margin: 0 14px 0 0; float: left; text-align: center;}
#videoDb .video_top > div .admin_option li a {color: #686868;}
#videoDb .video_top > div .admin_option li a:hover {text-decoration: underline;}

#videoDb .video_list { float: none; display: block; }
#videoDb .video_list ul { float: left; display: block; width: 100%; }
#videoDb .video_list ul li {float: left; position: relative; margin-right: 19px; width: 254px; height: 227px;}
#videoDb .video_list ul li.loadAjax { display: block; float: none; margin: 40px auto; text-align: center; }
#videoDb .video_list ul li.loadAjax i.fa { font-family: 'FontAwesome' !important; font-size: 100px; color: #686868; opacity: .6; animation: spin 1000ms infinite linear; }
@-webkit-keyframes spin { 100%{ -webkit-transform: rotate(360deg); } } 
@-moz-keyframes spin { 100%{ -moz-transform: rotate(360deg); } } 
@-ms-keyframes spin { 100%{ -ms-transform: rotate(360deg); } } 
@keyframes spin { 100%{ transform: rotate(360deg); } }

#videoDb .video_list.mobile ul li {margin: 0 auto 15px auto; width: auto; height: auto; border-bottom: 1px solid #eee;}
#videoDb .video_list ul li.state0 { opacity: .3; }
#videoDb .video_list ul li:nth-child(3n) {margin-right: 0;}
#videoDb .video_list.mobile ul li:nth-child(3n) {margin: 0 auto 10px auto; border-bottom: 1px solid #eee;}
#videoDb .video_list ul li a:hover {text-decoration: underline;}
#videoDb .video_list ul li a > .thumb {overflow: hidden; width: 254px; height: 143px;}
#videoDb .video_list ul li a > .thumb:hover img { transform: scale(1.1); }
#videoDb .video_list.mobile ul li a > .thumb {width: auto; height: auto;}
#videoDb .video_list ul li a > .thumb img { width: 100%; height: 100%; transition: transform 0.7s; }
#videoDb .video_list ul li a > .title {margin-top: 10px; font-size: 14px;letter-spacing: -1px; max-height: 36px; overflow: hidden;}
#videoDb .video_list.mobile ul li a > .title { margin-top: 0; font-size: 16px; max-height: 48px; }
#videoDb .video_list ul li > div {overflow: hidden; margin-top: 5px;margin-bottom:5px;}
#videoDb .video_list ul li > div > * {float: left; color: #808080; font-size: 13px; padding: 0 8px;}
#videoDb .video_list ul li > div > a {padding-left: 0px; position: relative; }
#videoDb .video_list ul li > div > a::after {content: ''; display: block; position: absolute; top: 5px; right: 0; width: 1px; height: 9px; background: #808080;}
#videoDb .video_list ul li > div > a span {display: block; float: left;}
#videoDb .video_list ul li > div > a span.user {text-overflow: ellipsis; white-space: nowrap; max-width: 120px; overflow: hidden;}
#videoDb .video_list ul li > div > a:hover span.user {text-decoration: underline;}
#videoDb .video_list ul li > div > a span.offical_icon {width: 12px; height: 12px; margin: 3px 0 0 3px; border-radius: 50%; background: url("//static.inven.co.kr/image_2011/r2m/common/video_db_img.png") no-repeat; background-size: 66px; background-position: -54px 0; text-indent: -9999px;} 
#videoDb .video_list ul li > div > p {padding-right: 0px;}
#videoDb.maintenance .video_list ul li > p.admin_btn {display: block}
#videoDb .video_list ul li > p.admin_btn {display: none; position: absolute; right: -15px; width: 30px; height: 30px; padding: 0; border: 1px solid #fff; border-radius: 50%; background-size: 54px; background-color: rgba(0, 0, 0, 0.75); color: #fff; font-size: 21px; text-align: center; line-height: 23px; cursor: pointer; text-indent: -9999px;}
#videoDb .video_list ul li > p.admin_btn::after {content: ""; display: block; position: absolute; top: 0; left: 0; width: 12px; height : 12px; background: url("//static.inven.co.kr/image_2011/r2m/common/video_db_img.png") no-repeat; background-size: 67px;}
#videoDb .video_list ul li > p.admin_btn.x_btn {top: -15px;}
#videoDb .video_list ul li > p.admin_btn.x_btn:after {top: 50%; left: 50%; margin-top: -6px; margin-left: -6px; background-position: -20px 0;}
#videoDb .video_list ul li > p.admin_btn.check_btn {top: 95px;}
#videoDb.mobile .video_list ul li > p.admin_btn.check_btn {top: unset; bottom:95px;}
#videoDb .video_list ul li > p.admin_btn.check_btn.on {background: #ad2812;}
#videoDb .video_list ul li > p.admin_btn.check_btn:after {top: 50%; left: 50%; margin-top: -5px; margin-left: -6px; background-position: -32px 0;}
#videoDb .goto_top {
    border: none;
    display: inline-block;
    position: fixed;
    margin-left: 660px;
    bottom: 100px;
    width: 76px;
    height: 76px;
    background: url(//static.inven.co.kr/image_2011/r2m/video/goto_top.png) no-repeat;
    text-indent: -9999px;
    overflow: hidden;
    outline: none;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;
    visibility: hidden;
    cursor: pointer;
}
#videoDb.mobile .goto_top {
    margin-left: 0;
    right: 15px;
    bottom: 15px;
}
#videoDb .goto_top.show {
    visibility: visible;
    opacity: 1;
}

#video_popup {display: none; position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7);margin: 0 0;}
#video_popup > div {position: absolute; top: 50%; left: 50%; width: 860px; height: 484px; margin-top: -242px; margin-left: -430px; background-color:#000; border: 1px solid #808080; box-sizing: border-box;}
#video_popup.mobile > div { width: 94%; left: 3%; margin-left: 0; height: 250px }
#video_popup p {display: block; position: absolute; top: 6px; right: 6px; width: 27px; height: 27px; border: 1px solid #808080; border-radius: 50%; background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 18px; text-align: center; line-height: 21px; cursor: pointer;}
#video_popup > div iframe {width: 100%; height: 100%;}

@media screen and (max-width: 768px) {
    #videoDb .video_list.mobile ul li {
        float: none;
        padding: 0 15px;
    }
}

/* iPad(768x1024) 기준, 모바일에서 화면 전환 */
@media screen and (min-width: 768px) {
    #videoDb.mobile { width: 920px; margin: 0 auto; }
    #videoDb .video_list.mobile ul li {
        float: left;
        width: 300px;
        height: 252px;
        margin-right: 10px;
    }
    #videoDb .video_list.mobile ul li:nth-child(3n) {
        margin-right: 0;
    }
    #videoDb .video_list.mobile ul li a > .thumb {
        width: 300px;
        height: 173px;
    }
    #video_popup.mobile > div {
        height: 60%;
    }
}