@charset "utf-8";

@import url("accessibility.css"); /* Web Accessibility */

/* Layout */
@charset "utf-8";
@import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");

#wrap {width:100%; margin:0 auto;}

/* Header */
#header {width:100%; background:#f1f1ee; }
#header	.logo_area {height:110px; position:relative; width:970px; margin:0 auto;}
#header	.logo_area h1.logo {width:133px; height:43px; padding-top:30px; padding-left:13px;}
#header .banner_header {border:1px solid #dadada; width:440px; height:70px; position:absolute; left:266px; top:19px}
#header .login_area {position:absolute; right:0; top:63px; font-size:14px; color:#111}
#header .login_area a.btn_login, #header .login_area a.btn_signup {background:#fff; border:1px solid #ccc; font-weight:bold; font-size:14px; padding:5px 6px;}
#header .login_area a.btn_login:hover, #header .login_area a.btn_signup:hover {text-decoration:none; border:1px solid #f02358; color:#f02358}
#header .login_area .ico.member {background:url('http://image.cine21.com/www1/common/header_footer.png') no-repeat -300px 0px; width:18px; height:13px;}
#header .login_area .ico.arrow {background:url('http://image.cine21.com/www1/common/header_footer.png') no-repeat -330px 0px; width:14px; height:14px;}
#header .login_area a {text-decoration:none;}
#header .login_area .member_pop {z-index:5000; padding:8px 15px; background:#fff; border:1px solid #4d4d4d; position:absolute; left:0px; top:25px;}
#header .login_area .member_pop li a {display:block; padding:2px 0;  color:#333; font-weight:bold; font-size:13px}
#header .login_area .member_pop li a:hover {color: #f02358}

/* Global Navigation bar */
.gnb_area {width:100%; background:#fff; border-top:1px solid #dadada; border-bottom:3px solid #4c4c4c;}
.gnb_area .gnb_box {position:relative; width:970px; height:50px; margin:0 auto; }
.gnb_area .gnb_box #gnb, .gnb_area .gnb_box h1.logo {display:block; float:left}
#gnb, #gnb_quick {}
#gnb li, #gnb_quick li {float:left;height:50px}
#gnb li:last-child, #gnb_quick li:last-child {border:none}
#gnb li a, #gnb_quick li a {font-size:14px; font-weight:bold; color:#111; padding:15px 0 10px; display:block; }
#gnb li a span, #gnb_quick li a span {border-left:1px solid #c4c4c4; padding:0 12px}
#gnb li:first-child a span, #gnb_quick li:first-child a span {border:none;}
#gnb li a:hover span, #gnb li a.on span, #gnb_quick li a:hover span, #gnb_quick li a.on span {display:block; margin-top:-4px; color:#dd1a4d;}
#gnb_quick.gnb_special {position:absolute; right:220px;}
#gnb_quick.gnb_special li.gnb_people a {color:#23629d}
#gnb_quick.gnb_special li.gnb_db a {color:#21988f}
#gnb li a:hover, #gnb li a.on, #gnb_quick li a:hover, #gnb_quick li a.on {border-top:4px solid #f02358; text-decoration:none;}
.gnb_area .gnb_box .search_area {background:#b2b2b2; display:inline-block; position:absolute; right:0; top:12px}
.gnb_area .gnb_box .search_area .input_search {background:#b2b2b2; border:none; color:#fff; padding:3px 7px; width:160px}
.gnb_area .gnb_box .search_area .input_search::-webkit-input-placeholder {color:#fff}
.gnb_area .gnb_box .search_area .input_search::-moz-placeholder {color:#fff} 
.gnb_area .gnb_box .search_area .input_search::-ms-input-placeholder  {color:#fff} 
.gnb_area .gnb_box .search_area .btn_search {width:28px; height:26px; display:inline-block; text-indent:-5000px; background:url('http://image.cine21.com/www1/common/header_footer.png') no-repeat 7px 4px;}

/* LNB */
.lnb_area {position:relative; width:100%;  border-bottom:1px solid #4c4c4c;}
.lnb_area #lnb {width:970px; margin:0 auto; height:60px; border-left:1px solid #dfdedf;}
.lnb_area #lnb li {float:left; } 
.lnb_area #lnb li a {border-right:1px solid #dfdedf; display:block; height:40px; padding-top:20px;  text-align:center; color:#000; font-weight:bold; font-size:16px}
.lnb_area #lnb li a:hover, .lnb_area #lnb li a.on  {text-decoration:none; color:#fff; background:#f02459;}

/*
.lnb_area01 {width:100%; }
.lnb_area01 .lnb_title {width:970px; margin:0 auto ; color:#f02459; font-size:30px; padding:52px 0 10px}
.lnb_area01 #lnb {width:969px; margin:0 auto; overflow:hidden; border-top:1px solid #e0dcdc; border-bottom:1px solid #e0dcdc; border-left:1px solid #e0dcdc;}
.lnb_area01 #lnb li {float:left; }
.lnb_area01 #lnb li a {text-align:center; background:#fff; font-size:16px; color:#000; text-decoration:none; font-weight:bold; padding:20px 0 ;display:block; border-right:1px solid #e0dcdc;}
.lnb_area01 #lnb li a:hover {color:#f02459}
.lnb_area01 #lnb li a.on {background:#f02459; color:#fff; }
*/

/* SNB */
#snb_l {border-bottom:1px solid #d9d9d9; margin-bottom:60px}
#snb_l li {position:relative;}
#snb_l li a {text-decoration:none; display:block; padding:10px 0 10px 20px; color:#000; font-weight:bold; font-size:14px; border-top:1px solid #d9d9d9}
#snb_l li a .ico {background:url('http://image.cine21.com/www1/common/icon.png') no-repeat 0 -340px ; width:10px; height:10px; position:absolute; right:20px; top:15px; display:none;}
#snb_l li a.on {border-top:2px solid #000; border-bottom:2px solid #000; color:#f02459;}
#snb_l li a.on .ico {display:block; }
#snb_l li a:hover {color:#f02459;}

#snb_t {overflow:hidden; margin-left:-10px; height:52px; margin-bottom:25px;}
#snb_t li {float:left;}
#snb_t li a {position:relative; border-top:1px solid #000; border-bottom:1px solid #000; text-decoration:none; padding:12px 0; display:block; font-weight:bold; color:#000; font-size:14px; text-align:center;  margin-left:10px; } 
#snb_t li a.on {border-top:2px solid #000; border-bottom:2px solid #000; padding:11px 0; color:#f02459}
#snb_t li a .ico {background:url('http://image.cine21.com/www1/common/icon.png') no-repeat -140px -340px ; width:11px; height:6px; position:absolute; bottom:-8px; left:50%; margin-left:-5px ; display:none;}
#snb_t li a.on .ico {display:block; }
#snb_t li a:hover {color:#f02459;}

/* Container */
#container {position:relative; width:100%; }
#container:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
#container {display: inline-block;}
* html #container {height: 1%;}
#container {display: block;}

/* Main Visual */
.main_movie_list_area {position:relative; height:318px; margin:0 auto; margin-bottom:35px; overflow:hidden; }/* 20120712 추가 */
.portal_discovery {position:relative; left:0; top:0; width:5500px;}
.portal_discovery li {position:absolute; margin-right:12px; display:inline-block; }

.main_movie_list_area .movie_list_inner {position:relative; width:990px; height:318px; margin:0 auto;}
.main_movie_list_area .movie_list_inner .prev {position:absolute; top:115px; right:20px;}
.main_movie_list_area .movie_list_inner .next {position:absolute; top:115px; left:20px;}
.main_movie_list_area .movie_list_inner .mask_prev {width:1000px; height:318px; position:absolute; top:0; left:50%; margin-left:-1500px; z-index:100; cursor:pointer; background:#fff; filter:alpha(opacity=70); opacity:0.7;}
.main_movie_list_area .movie_list_inner .mask_next {width:1000px; height:318px;  position:absolute; top:0; right:50%; margin-right:-1500px; z-index:100;  cursor:pointer; background:#fff; filter:alpha(opacity=70); opacity:0.7;}
.main_movie_list_area .movie_list_inner .mask_next .rolling {position:absolute; top:207px; left:16px;}
.main_movie_list_area .movie_list_inner .mask_next .rolling img {margin-right:8px;}

/* Contents */
#content {padding:40px 0 50px; min-height:670px; width:970px; margin:0 auto; }
#content:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
#content {display: inline-block;}
* html #content {height: 1%;}
#content {display: block;}

/* Footer */
#footer {width:100%; border-top:1px solid #dadada; background:#f3f3f3;}
#footer h2 {font-size:19px; font-weight:800; margin-bottom:10px; color:#545454}
#footer .ft_menu1_area {width:970px; margin:0 auto; padding:40px 0 70px; overflow:hidden; }
#footer .ft_menu1_area h2 a.more {display:inline-block; background:#959595; padding:4px 6px; color:#fff; font-size:13px; font-weight:bold; border-radius:4px; vertical-align:middle;text-decoration:none; margin-left:10px}
#footer .ft_menu1_area .ft_menu1_left {float:left; width:620px;}
#footer .ft_menu1_area .ft_menu1_left .btnArea.subscription {text-align:left; padding-bottom:15px}
#footer .ft_menu1_area .ft_menu1_left .btnArea.subscription a {display:inline-block; background:#959595; padding:6px 10px; color:#fff; font-size:13px; font-weight:bold; border-radius:4px; vertical-align:middle;text-decoration:none;}
#footer .ft_menu1_area .ft_menu1_left .btnArea.subscription a.highlight {background:#dd1a4d}
#footer .ft_menu1_area .ft_menu1_left .magazine {overflow:hidden; margin-left:-25px}
#footer .ft_menu1_area .ft_menu1_left .magazine li {float:left; width:190px; margin-left:25px}
#footer .ft_menu1_area .ft_menu1_left .magazine li .thumbnail {margin-bottom:8px}
#footer .ft_menu1_area .ft_menu1_left .magazine li .number {font-size:20px; color:#333; font-weight:800; text-align:center;}
#footer .ft_menu1_area .ft_menu1_left .magazine li .btnArea {}
#footer .ft_menu1_area .ft_menu1_left .magazine li .btnArea a {font-size:13px; color:#666; font-weight:bold; display:inline-block; padding:10px 3px 5px}
#footer .ft_menu1_area .ft_menu1_left .magazine li .btnArea a .ico {margin-left:3px; background:url('http://image.cine21.com/www1/common/header_footer.png') no-repeat -320px -330px; width:6px; height:8px}
#footer .ft_menu1_area .ft_menu1_left .magazine a {text-decoration:none;}
#footer .ft_menu1_area .ft_menu1_right {float:right; width:274px;}
#footer .ft_menu1_area .ft_menu1_right .notice {margin-bottom:35px}
#footer .ft_menu1_area .ft_menu1_right .notice ul li a {display:block; padding:2px 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; /* 라인수 */ -webkit-box-orient: vertical; word-wrap:break-word;  line-height: 1.5em; height: 1.5em;}
#footer .ft_menu1_area .ft_menu1_right .menu_img {display:inline-block; vertical-align:middle; margin-right:5px; background:url('http://image.cine21.com/www1/common/header_footer.png') no-repeat 0 0; width:21px; height:21px}
#footer .ft_menu1_area .ft_menu1_right .sns {margin-bottom:35px;}
#footer .ft_menu1_area .ft_menu1_right .sns ul, #footer .ft_menu1_area .ft_menu1_right .family ul {overflow:hidden;}
#footer .ft_menu1_area .ft_menu1_right .sns ul li, #footer .ft_menu1_area .ft_menu1_right .family ul li  {float:left; width:50%; margin:2px 0}
#footer .ft_menu1_area .ft_menu1_right .sns ul li a, #footer .ft_menu1_area .ft_menu1_right .family ul li a {font-size:11px; color:#666}
#footer .ft_menu1_area .ft_menu1_right .sns .ico1 {background-position:0 -330px}
#footer .ft_menu1_area .ft_menu1_right .sns .ico2 {background-position:-40px -330px}
#footer .ft_menu1_area .ft_menu1_right .sns .ico3 {background-position:-80px -330px}
#footer .ft_menu1_area .ft_menu1_right .sns .ico4 {background-position:-120px -330px}
#footer .ft_menu1_area .ft_menu1_right .sns .ico5 {background-position:-160px -330px}
#footer .ft_menu1_area .ft_menu1_right .sns .ico6 {background-position:-200px -330px}
#footer .ft_menu1_area .ft_menu1_right .family .ico1 {background-position:-240px -330px}
#footer .ft_menu1_area .ft_menu1_right .family .ico2 {background-position:-280px -330px}
#footer .ft_menu2_area  {background:#595959; clear:both;  border-bottom:1px solid #797979;}
#footer .ft_menu2_area .ft_menu2 {overflow:hidden; width:970px; margin:0 auto;}
#footer .ft_menu2_area .ft_menu2 li {float:left; }
#footer .ft_menu2_area .ft_menu2 li a {font-weight:bold; color:#fff; font-size:14px; display:block;  padding:12px 30px 10px 0;}
#footer .copyright_area {background:#595959; }
#footer .copyright_area .copyright {width:970px; margin:0 auto; font-size:12px; color:#c3c2c2; line-height:150%; padding:22px 0 38px}

/* Popup */
.pop_container {background:#fff; padding:40px;}

/*Layout */

/* Type Selector */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, input, select, textarea {
	margin:0;
	padding:0;
	border:0;
	/*background:transparent;
	line-height:normal;*/
	line-height:130%;
	font-family:'Nanum Gothic','맑은 고딕','Malgun Gothic','돋움',Dotum,'굴림',Gulim,Helvetica,sans-serif;
}
html, body, div, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, input, select, textarea {
font-size:14px; color:#545454;
}
html, body {height:100%;}

/* Anchor */
a:link {color:#545454; text-decoration:none;}
a:visited {color:#545454; text-decoration:none;}
a:hover {color:#545454; text-decoration:underline;}
a:active {color:#545454; text-decoration:none;}
a {outline:none; select-dummy: expression(this.hideFocus=true);}

table {width:100%;}
table, th, td {border-collapse:collapse; border-spacing:0;}
table caption {display: none;}

img {border:0px; vertical-align:top;}
hr {display:none;}
col {background:none;}
li {list-style:none;}

/* floating 을 해제하기 위한 클래스 추가, 의미없는 clear만 있는 gabage source 제거 */
.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* Layout Selector */
.relative {position:relative;}
.posiL {position:absolute; top:0; left:0;}
.posiR {position:absolute; top:0; right:0;}
.floatArea {overflow:hidden; !important;}
.floatL {float:left !important;}
.floatR {float:right !important;}
.alignL {text-align:left !important;}
.alignC {text-align:center !important;}
.alignR {text-align:right !important;}
.alignT {vertical-align:top !important;}

/* Design Style */
.bgNone {background:none !important;}
.hidden {display:none;}

/* Button */
.btnArea {overflow:hidden; *zoom:1; text-align:center;}
.btnL {float:left;}
.btnR {float:right;}


/* Form Selector */
.inputText {height:17px; line-height:17px; color:#777; padding:0 0 0 5px; vertical-align:middle; border: 1px solid #abadb3;}
.inputCheck {vertical-align:middle; width:15px; height:15px; position:relative; top:-1px;_top:-3px;}
.inputRadio {vertical-align:middle; width:15px; height:15px; position:relative; top:-2px;_top:-4px;}
/* euc-kr일 경우
.inputCheck {vertical-align:middle; width:20px; height:20px; position:relative; top:-1px;*top:-2px;}
.inputRadio {vertical-align:middle; width:20px; height:20px; position:relative; top:-2px;*top:-3px;}
label {display:inline-block; width:100px;}
*/
button{margin:0; padding:0; font-size:0; border:none; background:none; width:auto; height:auto; overflow:visible;}
fieldset{border:0; margin:0; padding:0;}
legend {display:none}
form * {vertical-align:middle;}
select {height:19px; border:1px solid #ccc; }

/* Margin */
.mgB0 {margin-bottom:0px !important;}
.mgB5 {margin-bottom:5px !important;}
.mgB10 {margin-bottom:10px !important;}
.mgB15 {margin-bottom:15px !important;}
.mgB20 {margin-bottom:20px !important;}
.mgB25 {margin-bottom:25px !important;}
.mgB30 {margin-bottom:30px !important;}
.mgB40 {margin-bottom:40px !important;}
.mgB50 {margin-bottom:50px !important;}
.mgL0 {margin-left:0px !important;}
.mgL5 {margin-left:5px !important;}
.mgL10 {margin-left:10px !important;}
.mgL15 {margin-left:15px !important;}
.mgL20 {margin-left:20px !important;}
.mgL25 {margin-left:25px !important;}
.mgL30 {margin-left:30px !important;}
.mgL40 {margin-left:40px !important;}
.mgL50 {margin-left:50px !important;}
.mgR0 {margin-right:0px !important;}
.mgR5 {margin-right:5px !important;}
.mgR10 {margin-right:10px !important;}
.mgR15 {margin-right:15px !important;}
.mgR20 {margin-right:20px !important;}
.mgR25 {margin-right:25px !important;}
.mgR30 {margin-right:30px !important;}
.mgR40 {margin-right:40px !important;}
.mgR50 {margin-right:50px !important;}
.mgT0 {margin-top:0px !important;}
.mgT5 {margin-top:5px !important;}
.mgT10 {margin-top:10px !important;}
.mgT15 {margin-top:10px !important;}
.mgT20 {margin-top:20px !important;}
.mgT25 {margin-top:25px !important;}
.mgT30 {margin-top:30px !important;}
.mgT40 {margin-top:40px !important;}
.mgT50 {margin-top:50px !important;}
.mg0 {margin:0px !important;}
.mg5 {margin:5px !important;}
.m10 {margin:10px !important;}
.mg15 {margin:15px !important;}
.mg20 {margin:20px !important;}
.mg25 {margin:25px !important;}
.mg30 {margin:30px !important;}
.mg40 {margin:40px !important;}
.mg50 {margin:50px !important;}

/* Padding */
.pdB0 {padding-bottom:0px !important;}
.pdB5 {padding-bottom:5px !important;}
.pdB10 {padding-bottom:10px !important;}
.pdB15 {padding-bottom:15px !important;}
.pdB20 {padding-bottom:20px !important;}
.pdB30 {padding-bottom:30px !important;}
.pdB40 {padding-bottom:40px !important;}
.pdB50 {padding-bottom:50px !important;}
.pdL0 {padding-left:0px !important;}
.pdL5 {padding-left:5px !important;}
.pdL10 {padding-left:10px !important;}
.pdL15 {padding-left:15px !important;}
.pdL20 {padding-left:20px !important;}
.pdL30 {padding-left:30px !important;}
.pdL40 {padding-left:40px !important;}
.pdL50 {padding-left:50px !important;}
.pdR0 {padding-right:0px !important;}
.pdR5 {padding-right:5px !important;}
.pdR10 {padding-right:10px !important;}
.pdR15 {padding-right:15px !important;}
.pdR20 {padding-right:20px !important;}
.pdR30 {padding-right:30px !important;}
.pdR40 {padding-right:40px !important;}
.pdR50 {padding-right:50px !important;}
.pdT0 {padding-top:0px !important;}
.pdT5 {padding-top:5px !important;}
.pdT10 {padding-top:10px !important;}
.pdT15 {padding-top:10px !important;}
.pdT20 {padding-top:20px !important;}
.pdT30 {padding-top:30px !important;}
.pdT40 {padding-top:40px !important;}
.pdT50 {padding-top:50px !important;}
.pd0 {padding:0px !important;}
.pd5 {padding:5px !important;}
.pd10 {padding:10px !important;}
.pd15 {padding:15px !important;}
.pd20 {padding:20px !important;}
.pd30 {padding:30px !important;}
.pd40 {padding:40px !important;}
.pd50 {padding:50px !important;}

/* Cursor */
.cursorHand {cursor:pointer;}
.cursorMove {cursor:move;}

/* Radius */
.radiusBox {
	background-color:#fff;
	border:1px solid #d7d7d7;

	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

.radiusBox_gray {
	background-color:#eeeeee;

	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

/* Square Box */
.squareBox {border:1px solid #dadada;}


/* Title */
h1,h2,h3,h4,h5,h6 {}

/* Scroll */
.scroll {scrollbar-face-color:#fff;scrollbar-shadow-color:#f0f0f0;scrollbar-highlight-color:#f0f0f0;scrollbar-3dlight-color:#fff;scrollbar-darkshadow-color:#fff;scrollbar-track-color:#fafafa;scrollbar-arrow-color:#f0f0f0;}

/* Paging */
.pagination {text-align:center;}

/* ellipsis */
.ellipsis_1{
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 1; /* 라인수 */
 -webkit-box-orient: vertical;
 word-wrap:break-word; 
 line-height: 1.5em;
 height: 1.5em; /* line-height 가 1.5em 이고 1라인을 자르기 때문에 height는 1.5em * 1 = 1.5em */
} 

.ellipsis_2{
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 2; /* 라인수 */
 -webkit-box-orient: vertical;
 word-wrap:break-word; 
 line-height: 1.5em;
 height: 3em; 
} 

.ellipsis_3{
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 3; /* 라인수 */
 -webkit-box-orient: vertical;
 word-wrap:break-word; 
 line-height: 1.5em;
 height: 4.5em;
} 

.ellipsis_4{
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 4; /* 라인수 */
 -webkit-box-orient: vertical;
 word-wrap:break-word; 
 line-height: 1.5em;
 height: 6em; 
} 

.ellipsis_5{
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 5; /* 라인수 */
 -webkit-box-orient: vertical;
 word-wrap:break-word; 
 line-height: 1.5em;
 height: 7.5em; 
} 

.ellipsis_6{
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 6; /* 라인수 */
 -webkit-box-orient: vertical;
 word-wrap:break-word; 
 line-height: 1.5em;
 height: 9em;
} 

.ellipsis_7{
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 7; /* 라인수 */
 -webkit-box-orient: vertical;
 word-wrap:break-word; 
 line-height: 1.5em;
 height: 10.5em;
} 

/* Icon */
.ico {display:inline-block; vertical-align:middle; }