@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
* { font-family: 'Noto Sans KR', sans-serif;  word-break: keep-all; word-wrap: break-word;  outline: none; }
html, body { width: 100%;  margin: 0px; padding: 0px; }
img { display: block; }

#main-wrapper {width: 100%; height: 100%; min-width: 970px; overflow-x: hidden; }
#header-wrapper { width: 100%; height: 130px; background-color: #eee; }
#header { width: 90%; max-width: 1200px; margin: auto; padding-top: 35px;}
#header > table { width: 100%; }
#header > table a { color: inherit; text-decoration: inherit; }

.mobile-menu-bar { width: 100%; display: none;  }
.mobile-menu-bar a { color: black; }

#mobile-menu-page table { width: 100%; height: 60vh; margin-top: 7vh;}
#mobile-menu-page td { color: #aaa; font-size: 3em; font-weight: 900; text-align: center; width: 100%; }
#mobile-menu-page a { color: inherit; text-decoration: inherit; }

#mobile-search-page table { width: 100%; height: 70vh; } 
#mobile-search-page td { color: #aaa; font-size: 2.5em; font-weight: 900; text-align: center; width: 100%; }
#mobile-search-page input { border: 0px; border-bottom: 1px solid #aaa; width: 70%; padding: 3% 0px; font-size: 1em;}

.contents-submenu { padding: 10px 20px; background-color: #000; color: #fff; position: absolute; right: 0px; top: 60px; z-index: 2; display: none; }
.contents-submenu a { color: inherit; text-decoration: inherit; }
.search-bar { padding: 10px 20px; background-color: #000; color: #fff; position: absolute; right: 0px; top: 60px; z-index: 2; display: none; }
.search-bar div { border-bottom: 1px solid #999;}
.search-bar input { border: 0px; background-color: #000; color: #fff; width: 250px; font-size: 0.86em; }
.search-bar i { color: #999; cursor: pointer; }

#banner-wrapper { width: 100%; height: 42.7vw;  background-color: #222;  position: relative; overflow: hidden; z-index: 1;}
#banner-image { position: absolute; top: 0px; left: 0px;  width: 100%; height:100%; background-position: center center; background-size: cover; background-repeat: no-repeat; z-index: 2}
#banner-btn { position: absolute; top:0px; left:0px; width: 100%; height: 100%; z-index: 3;}
#banner-wrapper table { width: 100%; height: 100%; table-layout: fixed; overflow: hidden; z-index: 3}
#btn-left { font-size: 6em; color: #fff; width: 10%; z-index: 3; padding-left: 2%; }  
#btn-right { font-size: 6em; color: #fff; width: 10%; text-align: right; z-index: 3; padding-right: 2%;} 
#btn-image { cursor: pointer; }
#btn-left > i, #btn-right > i {cursor: pointer; }

#btn-minus { position: absolute; right: 2.2%; bottom: 30px; font-size: 3em; color: #fff; text-align: right; z-index: 4;} 
#btn-minus .minus {  margin-left: 10px; cursor: pointer; float: left; }  

#btn-left > i:hover, #btn-right > i:hover, .minus:hover { color: #000; }     

#banner-wrapper .banner-caption { position: absolute; font-size: 1.4em; padding: 10px 20px; left: 3%; bottom: 100px; font-weight: 500; z-index: 5;} 
#banner-wrapper .banner-subtitle { position: absolute; font-size: 1.4em; padding: 10px 20px; left: 3%; bottom: 40px; font-weight: 500; z-index: 5;} 

#mobile-banner-caption { margin-left: 40px; margin-top: 50px; display: none; }
#mobile-banner-caption .banner-caption { display: inline-block;  font-size: 1.4em; padding: 10px 20px; font-weight: 500; } 
#mobile-banner-caption .banner-subtitle { display: inline-block; font-size: 1.4em; padding: 10px 20px; font-weight: 500; margin-top: 7px;  } 


#navi-wrapper { width: 100%; height: 40px; background-color: #000; color: #fff; }
#navi { width: 90%; max-width: 1200px; margin: auto; padding-top: 6px;}


#movie-wrapper { width: 100%; margin-left: 12px;  }
#movie {  margin: auto; max-width: 1225px;}
.movie-top-gap { height: 40px;}

#movie .item { float: left; margin-right: 25px; margin-top: 25px; cursor: pointer; }
#movie .item > table { width: 280px; }

#movie .item .thumb { height: 160px;  background-position: center center; background-size: cover; }
#movie .item .category { height: 35px; font-weight: 500; font-size: 0.9em; padding-left: 20px; }
#movie .item .title-description { height: 165px; background-color: #cacaca; vertical-align: top; }
#movie .item .title { margin: 0px 20px; margin-top: 10px;  padding-bottom: 20px; height: 61px; font-size: 1em; font-weight: 600; border-bottom: 1px dashed #666; overflow: hidden; }

#movie .item .author { margin: 0px 20px; padding: 10px 0px; font-size: 0.95em; }
#movie .item .description { margin: 20px; font-size: 1.2em; height: 140px; overflow: hidden; font-weight: 400; }

#movie .item-list { max-width: 900px; margin: 30px auto; cursor: pointer; }
#movie .item-list > table { width: 100% }
#movie .item-list .thumb {  width: 35%;  background-position: center center; background-size: cover; }
#movie .item-list .category { height: 32px; background-color: #000; color: #fff; font-weight: 500; font-size: 0.9em; padding-left: 20px; }
#movie .item-list .title-description { height: 150px; max-height: 150px; background-color: #cacaca; vertical-align: top; overflow-y: hidden; }
#movie .item-list .title { margin: 10px 10px 0px 20px; padding-bottom: 10px; font-size: 0.98em; font-weight: 600; height: 47px; border-bottom: 1px dashed #666; overflow: hidden; }
#movie .item-list .author { margin: 0px 20px; padding: 10px 0px; font-size: 0.9em; border-bottom: 1px dashed #666; }
#movie .item-list .description { margin: 10px 20px; font-size: 0.9em; font-weight: 400; height: 47px; overflow: hidden; }


#movie-wrapper2 { width: 100%; background-color: #f0f0f0; height: 645px; margin-bottom: 10px; }
#movie2 { width: 90%; max-width: 1200px; margin: auto; }
#movie2 .item { float: left; margin-right: 30px; margin-top: 30px;}

#more-wrapper { width: 100%; height: 90px; clear: both; }
#more { width: 90%; max-width: 1200px; margin: auto; text-align: center; height: 90px; line-height: 120px; font-size: 1.2em; }
#more > span { cursor: pointer; }

#footer-wrapper { width: 100%; background-color: #f0f0f0; height: 125px; clear: both; }
#footer { width: 90%; max-width: 1200px; margin: auto; font-size: 0.9em; color: #666; padding-top: 18px; line-height: 1.6em;  }

#ad-wrapper-index { width: 100%; margin: 15px 0px 30px 0; }
#ad-wrapper-index #ad { width: 100%; max-width: 1195px; }

#ad-wrapper { width: 100%; margin: 30px 0px; }
#ad-wrapper #ad { width: 100%; max-width: 1200px; margin: 0 auto; }

#title-wrapper { width: 100%; min-height: 140px; clear: both; }
#title { width: 90%; max-width: 1200px; margin: auto;  padding: 30px 0px; }

#article-wrapper { width: 100%; clear: both; }
#article { width: 90%; max-width: 1200px; margin: auto;  padding: 0px 0px 60px 0px; font-size: 1.4em; line-height: 1.75em;}
#article figure { margin: 0px; padding: 0px; clear: both; }
#article figure img { width: 100%; }
#article a { color: #666; text-decoration: none; }
#article a:hover { color: #000; }
#article figure figcaption { font-size: 0.8em; text-align: right;}
#article_layout { width: 100%; max-width: 900px; margin: 50px auto; padding: 0px 0px; background-color: #fff; float: left; }

#article .video-wrapper {position: relative; padding-bottom: 56.25%; /*16:9*/ padding-top: 30px; height: 0;  overflow: hidden;}
#article .video-wrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.view-more-movie { background-color: #f0f0f0; height:auto; overflow-y: auto; padding-bottom: 20px; margin-left: 0px; padding-left:12px; margin-bottom: 10px; }

.pc-list {}
.mobile-list { display: none; }


#view-ad-wrapper { float: left; margin-top: 50px; text-align: center; }
#view-ad-wrapper .ad { width: 280px; height: 280px; margin-left: 20px; margin-bottom: 20px; }


@media screen and (max-width: 1224px) {
    #movie { max-width: 915px;}
    .item[data-cnt='4'] { display: none; }
    #article_layout { float: none; margin: 50px auto;  }
    #view-ad-wrapper { width: 925px; float: none;  margin: 20px auto !important; padding-left: 25px; text-align: left;} 
    #view-ad-wrapper .ad { margin:0px; margin-right:25px; margin-bottom: 25px; display: inline-block;}
    
    #ad-wrapper-index { width: 895px;}
}

@media screen and (max-device-width: 640px) {
    #main-wrapper { min-width: 200px;}
    .mobile-menu-bar { display: block; }
    .mobile-menu-bar td { width: 50%; }
    .menu-bar { display: none; }
    
    
    #btn-left { font-size: 3em; padding-left: 4%; }  
    #btn-right { font-size: 3em; padding-right: 4%;} 
    #btn-image { cursor: pointer; }
    
    #btn-minus { display: none; } 
    #banner-wrapper .banner-caption { display: none; } 
    #banner-wrapper .banner-subtitle { display: none; } 
    #mobile-banner-caption { display: block; }
    
    #movie-wrapper { margin: 0px 40px; }
    .movie-top-gap { height: 20px; }
    
    #movie .item { margin-right: 0px; margin-top: 50px; width: 520px; }
    #movie .item > table { width: 100%; }
    
    #movie .item .thumb { height: 300px;  }
    #movie .item .category { height: 45px; font-size: 1.2em; }
    #movie .item .title { height: 83px; font-size: 1.3em; }
    #movie .item .author { padding: 20px 0px; font-size: 1.2em; }
    
    #article_layout { margin: 0px auto; float: none;}
    #view-ad-wrapper { float: none; display: block; padding: 0px; margin: 0px !important; background-color: #fff; width: 600px; }
    #view-ad-wrapper .ad { width: 520px; height: 520px; padding: 0px; margin: 20px 40px;  }
    #ad-wrapper-index { width: 520px; margin: 0; margin-top: 30px; }

    #title { font-size: 0.9em; }
    #article { font-size: 1.5em; line-height: 1.8em;}
    .article-background > div { width: 600px; }
    
    .view-more-movie { padding-left:40px; margin: 0px !important; }
    
    .pc-list { display: none; }
    .mobile-list { display: block; }
    .mobile-list .category { background-color: #000; color: #fff; }
    
    #mobie-search-keyword { display: table; width: 100%; background-color: #000; color: #fff; }
    #mobie-search-keyword > div { display: table-cell; vertical-align: middle; text-align: center; padding: 1em; font-size: 2em; font-weight: 600;}
        
    #footer-wrapper { width: 100%; background-color: #f0f0f0; height: 240px; clear: both; }
    #footer { width: 90%; max-width: 1200px; margin: auto; font-size: 1.1em; color: #666; padding-top: 18px; line-height: 1.6em;  }

}