@charset "utf-8";

/* 스킵메뉴 */
#skip {position:relative;}
#skip a {position:absolute; z-index:10000; top:-40px; left:0; width:140px; border:1px solid #FFF; color:#FFF; text-align:center; line-height:30px; background:#333;}
#skip a:active, #skip a:focus {top:0;}

/* 레이아웃 */
#mNav {display:none; position:absolute; top:10px; right:14px;}
#header {width:100%; border-bottom:1px solid #C6C6C6; background-color:#FFF;}
#banner {position:relative;}
#movie { background-color:#f8f8f8;}
#event {}
#opening {margin:17px 0;background:url("../img/bg01.jpg") no-repeat center top; background-size:cover;}
#new {}
#help {}
#footer {background:#211f1f;}


/* 로우 영역 */
.row {padding: 0 28px;}

/* 모바일 메뉴 */
.ham {display:block; width:25px; height:10px; background:rgba(0,0,0,0); padding:15px 10px 10px 10px;}
.ham span {position:relative; display:block; width:25px; height:4px; background:#39106a;}
.ham span:before {content:''; width:25px; height:4px; background:#39106a; position:absolute; left:0px; bottom:-7px;}
.ham span:after {content:''; width:25px; height:4px; background:#39106a; position:absolute; left:0px; top:-7px;}

/* 가운데 영역 */
.container {position:relative; width:1280px; margin:0 auto; background:rgba(0,0,0,0);}

/* 헤더 영역 */

.header h1 {float:left;}
.header h1 em {padding: 15px 8px 5px 0; display:inline-block;}
.header h1 em img {width:155px;}
.header h1 strong {display:block; position:absolute; left:194px; top:23px;}
.header h1 strong img {width:126px;}
.header .nav {float:right; }
.header .nav ul {border-left:1px solid #C6C6C6;}
.header .nav li {float:left; width:103px; text-align:center; border-right:1px solid #C6C6C6;}
.header .nav li a {display:block; font-size: 17px; padding:19px 10px; font-weight:700; color:#444;}

/* 배너 영역 */
.banner_menu {overflow:hidden; position:absolute; left:0px; top:20px; width:100%; height:100px; z-index:10;}
.banner_menu a {color:#FFF; font-size:16px; transition:all 0.3s ease;}
.banner_menu a:hover {color:#C1C1C1;}
.banner_menu .bn_left {float:left;}
.banner_menu .bn_left ul {padding-top:7px;}
.banner_menu .bn_left ul li {position:relative; display:inline; margin-right:30px;}
.banner_menu .bn_left li.total {margin-right:20px;}
.banner_menu .bn_left li.total a {border:1px solid #FFF; transition: all 0.3s; font-size:14px; padding:3px 10px; display:inline-block;}
.banner_menu .bn_left li.total a:hover {background:#FFF; border-color:#000; color:#000;}
.banner_menu .bn_left li.total a i {margin-right:4px;}

.banner_menu .bn_right {float:right;overflow:hidden;} 
.banner_menu .bn_right ul {float:left;}
.banner_menu .bn_right ul:first-child {padding-top:7px; }
.banner_menu .bn_right li {position:relative; display:inline; text-align:center; margin-right:20px;} 
.banner_menu .bn_right li.line {margin-right:30px;}
.banner_menu .bn_right li.white {margin-right:10px;}
.banner_menu .bn_right li.white a {display:inline-block; width:80px; background-color:#FFF; color:#3a0c6a; padding:7px 30px 9px 30px; border:1px solid #FFF;}
.banner_menu .bn_right li.purple {margin-right:0px;}
.banner_menu .bn_right li.purple a {display:inline-block; width:80px; background-color:#3a0e6a; color:#FFF; padding:7px 30px 9px 30px; border:1px solid #6e40c4;}
.banner_menu li.line:after {content:''; width:1px; height:14px; background:#FFF; position:absolute; right:-18px; top:2px; }

.banner_menu .slider {}

/* 슬라이드 */
.slider {width:100%; height:600px;}
.slider .ss1 {background:url("../img/swiper01.jpg") no-repeat center center; background-size: cover;}
.slider .ss2 {background:url("../img/main_slider01_2000.jpg") no-repeat center center; background-size: cover;}
.slider .ss3 {background:url("../img/main_slider02_2000.jpg") no-repeat center center; background-size: cover;}

.slider .swiper-slide h2 {position:relative; display:inline-block; color:#FFF; font-size:62px; margin-top:200px; line-height:70px;}
.slider .swiper-slide h2:after {position:absolute; left:0px; bottom:-35px; content:''; width:100%; height:1px; background:rgba(255,255,255,0.3);}
.slider .swiper-slide h2 em {display:block; font-size:59px; font-weight:100; }
.slider .swiper-slide p {font-size: 27px; color:#FFF; padding-top:55px;}

/* movie */
.movie {padding:100px 0;}
.movie_title {margin-bottom:60px;}
.movie_title ul {overflow:hidden; width:848px; margin:0 auto;}
.movie_title li {float:left; width:210px; text-align:center; border:1px solid #c4c4c4; margin-right:-1px;}
.movie_title li a {font-size:18px; font-weight:700; display:block; padding:15px 0; color:#666; }
.movie_title li.active a {background:#666; color:#FFF; }
.movie_chart {overflow:hidden; }
.movie_chart > div > div > div {display:inline-block; width:292px; margin-right:15px;}
.movie_chart > div > div > div:last-child {margin-right:0;}
.movie_chart > div > div > div .poster {position:relative;}
.movie_chart > div > div > div .poster img {display:block;}
.movie_chart > div > div > div .poster .rank {box-shadow:3px 3px 8px rgba(0,0,0,0.5); font-size:22px; position:absolute; left:0; top:17px; width:50px; height:50px; line-height:50px; background-color:#38116a; text-align:center; }
.movie_chart > div > div > div .poster .rank strong {color:#FFF; text-shadow:2px 2px 3px rgba(0,0,0,0.5);}
.movie_chart > div > div > div .poster .mx {position:absolute; right:17px; top: 17px;}
.movie_chart > div > div > div .poster .mx span {width:103px; height:25px; display:block;}
.movie_chart > div > div > div .poster .mx span.m {background-position:0 -75px;}
.movie_chart > div > div > div .poster .mx span.b {background-position:0 -100px;}
.movie_chart > div > div > div .infor {background:#FFF; padding:17px; border:1px solid #d9d9d9;}
.movie_chart > div > div > div .infor h3 {color:#333; font-size:30px; font-weight:700; margin-bottom:20px; }
.movie_chart > div > div > div .infor h3 span {vertical-align:-2px; width:29px; height:29px; display:inline-block; margin-top:9px;}
.movie_chart > div > div > div .infor h3 span.all {background-position: -87px -125px;}
.movie_chart > div > div > div .infor h3 span.a19 {background-position: -58px -125px;}
.movie_chart > div > div > div .infor h3 span.a12 {background-position: 0px -125px;}
.movie_chart > div > div > div .infor h3 span.a15 {background-position: -29px -125px;}
.movie_chart > div > div > div .infor .infor_btn {overflow:hidden;}
.movie_chart > div > div > div .infor .infor_btn a {margin-right:2%; width:49%; float:left; background:#f2f2f2; font-size:18px; text-align:center; padding :15px 0; box-sizing:border-box;}
.movie_chart > div > div > div .infor .infor_btn a:last-child {margin-right:0;}

/* event */
.event {overflow:hidden; padding:100px 0;}
.event img {display:block;}
.event h2 {font-size:30px; margin-bottom:20px; font-weight:500;}
.event .event_left {overflow:hidden; float:left; width:66%; margin-right:2%;}
.event .event_left .event_box1 {float:left; width:50%;}
.event .event_left .event_box2 {float:left; width:50%;}
.event .event_right {float:right; width:32%;}

/* opening */
.opening {padding:100px 0; text-align:center; color:#bb9b51;}
.opening h2 {margin-bottom:15px;}
.opening h2 .grand {background-position:0 -175px; display:inline-block; width:330px; height:50px;}
.opening .date {background-position:0 -225px; display:inline-block; width:260px; height:45px;}
.opening .desc {font-size:35px; font-weight:300; padding-bottom:20px; background:url("../img/bar.png") no-repeat center bottom; background-size:100%;}
.opening .open_box {overflow:hidden; padding: 20px 3% 0 3%;}
.opening .open_box > div {background:rgba(0,0,0,0.5);float:left; width:27.333%; margin:4% 3% 0 3%; border:1px solid #3e4b44; box-sizing:border-box;}
.opening .open_box > div h3 {display:inline-block; padding:10px 20px;background:#551e9b;color:#FFF; border:1px solid #6e3abb; font-size:19px; font-weight:300; margin-top:-24px;}
.opening .open_box > div p { padding:6% 0 10% 0; color:#FFF; font-size:23px; font-weight:700;}
.opening .open_box > div em {display:block;font-weight:bold;}
.opening .open_box > div strong {display:block;}

/* 새로운 영화 */
.new {padding:100px 0; position:relative;}
.new h2 {font-size:30px; margin-bottom:20px; font-weight:500;}
.new .new_left {position:relative; margin-right:423px;  height:500px; background:#CCC url("../img/new01.jpg") no-repeat center center; background-size:cover;}
.new .new_left .play {position:absolute; left:50%; top:50%; width:120px; height:120px; transform:translate(-50%,-50%);}
.new .new_left .play .st0 {fill:#FFF; opacity:0.3;}
.new .new_left .play .st1 {fill:#FFF;}

.new .new_right {padding:34px; box-sizing:border-box; position:absolute; top:165px; right:0; width:400px; height:500px; background:#F0F0F0;}
.new .new_right .title {font-size:28px; color:#000; }
.new .new_right .relase {font-size:12px; color:#333;}
.new .new_right .star {padding:13px 0;}
.new .new_right .star strong {font-size:15px; padding-left:5px;}
.new .new_right .star span {display:inline-block;width:20px; height:20px; vertical-align:-3px;}
.new .new_right .star .star1 {background-position: -394px 0px;}
.new .new_right .star .star2 {background-position: -413px 0px;}
.new .new_right .star .star0 {background-position: -374px 0px;}

.new .new_right .summary {font-size:14px; }
.new .new_right .genre {padding-bottom:3px;}
.new .new_right .age {padding-bottom:10px;}
.new .new_right .desc {margin-bottom:20px; height:108px;overflow:hidden; }

.new .new_right .select {overflow:hidden;}
.new .new_right .select .s1 {float:left; width:49%; margin-right:2%; background-color:#000;}
.new .new_right .select .s2 {float:left; width:49%; background-color:#000;}
.new .new_right .select .s3 {float:left; width:100%; margin-top:2%;}

.new .new_right .btn {overflow:hidden; text-align:center; margin-top:2%;}
.new .new_right .btn a {float:left; width:49%; display:block; box-sizing:border-box; padding: 10px 30px 12px 30px;}
.new .new_right .btn .white {color:#3a0e6a; background:#FFF; border:1px solid #3a0e6a; margin-right:2%;}
.new .new_right .btn .purple {color:#FFF; background:#3a0e6a; border:1px solid #6e40c4;}

/* help */
.help {overflow:hidden;padding-bottom:200px;}
.help article {float:left; width:32%; margin-right:2%; height:350px; }
.help .help_box3 {margin-right:0;}
.help article > div {border:1px solid #Dbdbdb; height:350px; }
.help .help_box3 > div {border:0;}
.help article h3 {font-size:30px; font-weight:500; margin-bottom:20px;}

/* 공지사항 */
.notice {padding:17px; position:relative;}
.notice ul {overflow:hidden;}
.notice ul li {float:left;text-align:center; margin-right:-1px;}
.notice ul li a {border:1px solid #dbdbdb; font-size:15px; color:#666; display:block; width:80px; padding:10px 20px; background-color:#f5f5f5;}
.notice ul li.active a {background-color:#FFF;}
.notice ul li ul {position:absolute; left:17px; top:70px; width:90%; }
.notice ul li ul li {width:100%; box-sizing:border-box; text-align:left; padding:17px; border-bottom:1px solid #dbdbdb;}
.notice ul li ul li:last-child {border-bottom:0;}
.notice ul li ul li dt em {color:#999;}
.notice ul li ul li dt .bar {position:relative;padding-right:10px; }
.notice ul li ul li dt .bar:after {content:''; position:absolute; right:3px; top:5px; width:1px; height:10px; background:#999;}
.notice ul li ul li dd {color:#777; padding-top:3px; }
.notice ul li ul li a {border:0; padding:0; width:100%;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* 할인카드 */
.card {padding:17px; }
.card ul li {position:relative;border:1px solid #d7d7d7; padding:17px; margin-bottom:15px; min-height:102px; box-sizing:border-box;}
.card ul li span {position:absolute; top:17px; left:17px;}
.card ul li span img {width:105px;}
.card ul li strong {color:#777; display:block; padding-left:120px; font-size:18px;}
.card ul li em {color:#777; font-weight:300; display:block; padding-left:120px; font-size:14px; }

/* 서비스 */
.service ul {overflow:hidden;}
.service li {float:left; width:50%; height:193px; box-sizing:border-box; border:1px solid #d7d7d7; text-align:center; }
.service li a span {display:block; width:120px; height:120px; margin:20px auto 0 auto; overflow:hidden; }
.service li a strong {color:#666; font-size:18px; font-weight:500;}
.service li:nth-child(1) {border-right:0; border-bottom:0;}
.service li:nth-child(2) {border-bottom:0;}
.service li:nth-child(3) {border-right:0;}

/* 푸터 */
.footer {position:relative;}
.footer_sns {position:absolute; top:33px; right:17px; z-index:1;}
.footer_sns ul {}
.footer_sns ul li {display:inline-block; margin-left:4px;}
.footer_sns ul li a {display:block;width:36px; height:36px;}
.footer_sns .sl {background-position: 0 -375px;}
.footer_sns .s2 {background-position: -36px -375px;}
.footer_sns .s3 {background-position: -72px -375px;}
.footer_sns .s4 {background-position: -108px -375px;}
.footer_sns .s5 {background-position: -144px -375px;}
.footer_sns .sl:hover {background-position: 0 -411px;}
.footer_sns .s2:hover {background-position: -36px -411px;}
.footer_sns .s3:hover {background-position: -72px -411px;}
.footer_sns .s4:hover {background-position: -108px -411px;}
.footer_sns .s5:hover {background-position: -144px -411px;}
.footer_sns .tel {text-align:right; padding-top:5px;}
.footer_sns .tel a {color:#8f8f8f; font-size:21px; }
.footer_sns .tel a em {color:#FFF;}

.footer_info {padding:50px 0; width:80%; }
.footer_info h2 img {width:150px;}
.footer_info ul {padding:15px 0;}
.footer_info li {position:relative;display:inline; padding-right:16px; white-space:nowrap; }
.footer_info li:after {content:''; position:absolute; right:5px; top:5px; width:1px; height:11px; background:#8f8f8f;} 
.footer_info li:last-child:after {width:0;height:0;}
.footer_info li a {color:#8f8f8f;}
.footer_info address {color:#8f8f8f;}
.footer_info address p {padding-bottom:15px;}

/* 트레일러 */
.overlay {background:rgba(0,0,0,0.92); display:none; width:100%; height:100%; position:fixed; top:0; left:0; z-index:10000;}
.modal {position:absolute; }
.modal_close {
	background: url("../img/close.svg") no-repeat; background-size:32px; border:0; color:transparent; 
	display:block; width:32px; height:32px; overflow:hidden; position:absolute; top:24px; right:24px;
	text-indent:100%;
}
body.modal_on {overflow:hidden;}


/* 미디어 쿼리*/
@media (max-width:1290px){
	.container {width:100%;}
	.header .nav li {width:93px;}
	.header .nav li a {font-size:15px; padding: 17px 10px;}
	.header h1 em {padding:11px 8px 5px 0;}
	.header h1 strong {top:19px;}

	.swiper-button-next, .swiper-button-prev {display:none;}
}

@media (max-width:1024px){
	#mNav {display:block;}
	.row {padding: 0 24px;}
	.header h1 {float:none; text-align:center; }
	.header h1 strong {left:24px;}
	.header .nav {display:none;}

	.banner_menu .bn_left {display:none;}
	.banner_menu .bn_right ul:first-child {display:none;}

	.help article {height:auto;}
	.help article.help_box1 {width:49%; margin-right:2%;}
	.help article.help_box2 {width:49%; margin-right:0;}
	.help article.help_box3 {width:100%; margin-top:2%;}
	.help article.help_box3 h3 {display:none;}
	
	.service li {width:25%; height:auto;}
	.service li:nth-child(1) {border-bottom:1px solid #d7d7d7;}
	.service li:nth-child(2) {border-bottom:1px solid #d7d7d7; border-right:0;}
	.service li a strong {padding-bottom:10%; display:block;}


}

@media (max-width:960px){
	
	.slider {height:500px;}
	.slider .swiper-slide h2 {margin-top:170px; font-size:37px;line-height:45px;}
	.slider .swiper-slide h2:after {bottom:-15px;}
	.slider .swiper-slide h2 em {font-size:34px;}
	.slider .swiper-slide p {font-size:16px; padding-top:35px;}
	
	.movie_title ul {width:auto;}
	.movie_title li {width:25%; box-sizing:border-box;}

	.opening {padding:50px 0;}
	.opening .desc {font-size:25px; background:none;}
	.opening .open_box {display:none;}
	
	.new .new_left {margin-right:0; height:400px; }
	.new .new_right {position:relative; top:0; width:100%; height:auto;}

	.help {padding-bottom:0px;}
	.footer_sns {position:static; background:#352c2c; text-align:center; padding-bottom:15px;}
	.footer_sns .tel {display:none;}
	.footer_info {text-align:center; width:100%;}



}

@media (max-width:768px){
	body {background:#d9d7e0;}
	#mNav {right:6px;}
	.row {padding: 0 16px;}
	.header h1 strong {display:none;}
	.header h1 {text-align:left; }

	#movie { background:none;}
	#movie .row {background:#FFF; margin:24px 24px 0 24px; padding:24px;}
	#movie .ir_so {position:static; width:auto; height:auto; line-height:normal; text-indent:0; font-size:24px; font-weight:bold; padding-bottom:20px;}
	.movie {padding:0;}
	.movie_title {margin-bottom:30px;}
	.movie_title ul {position:relative; padding-bottom:10px;}
	.movie_title ul:before {content:''; position:absolute; z-index:1; left:0; bottom:0; width:100%; height:2px; background:#e1e1e1;}
	.movie_title li {width:auto; border:0;}
	.movie_title li a {position:relative; font-size:18px; color:#666; font-weight:400; padding:0; margin-right:35px;}
	.movie_title li.active a:before {content:''; position:absolute; z-index:2; left:0; bottom:-10px; width:100%; height:2px; background:#666;}
	.movie_title li.active a {background:none; color:#666;}

	#event .row {padding:24px;}
	.event {padding:24px; background:#FFF;}
	.event h2 {font-size:24px; font-weight:700;}
	.event .event_left {width:100%;}
	.event .event_right {display:none;}

	#opening {margin:0;}

	#new .row {padding:0 24px;}
	.new { padding:24px; background:#FFF; margin-top:24px;}
	.new h2 {font-size:24px; font-weight:700; height:27px; margin-bottom:20px; padding-bottom:10px;}
	.new .new_right {padding:24px;}

	#help .row {padding:0 24px;}
	.help {backgrou nd:#FFF; padding-bottom:24px;}
	.help article.help_box1 {box-sizing:border-box; background:#FFF; width:100%; margin-top:24px; margin-right:0; padding:24px;}
	.help article.help_box2 {box-sizing:border-box; background:#FFF; width:100%;  margin-top:24px; padding:24px;}
	.help article.help_box3 {background:#FFF; margin-top:24px; }

	.help article h3 {font-size:24px; font-weight:700; height:27px; margin-bottom:20px; padding-bottom:10px;}
	.help article.help_box3 > div {height:auto;}
	.service li {border:0;}
	.service li:nth-child(1) {border-bottom:0;}
	.service li:nth-child(2) {border-bottom:0;}




}

@media (max-width:600px){
	.banner_menu {top:16px;}
	.banner_menu .bn_right li.white a {font-size:14px; color:#FFF; background:rgba(0,0,0,0.7); padding:3px 5px 5px 5px; border-color:#FFF;}
	.banner_menu .bn_right li.purple a {font-size:14px; background:rgba(0,0,0,0.7); padding:3px 5px 5px 5px; border-color:#FFF;}

	.slider {height:400px;}
	.slider .swiper-slide h2 {margin-top:140px; font-size:24px;line-height:30px;}
	.slider .swiper-slide h2:after {bottom:-5px;}
	.slider .swiper-slide h2 em {font-size:20px;}
	.slider .swiper-slide p {font-size:14px; padding-top:25px;}

	.slider .swiper-pagination-bullet {width:13px; height:13px;}

	#movie .container {}
	#movie .container:after {content:''; position:absolute; z-index:20; top:0; right:0; width:8px; height:100%; background:#d9d7e0;}
	#movie .row {position:relative; margin:8px; padding:16px; margin-right:0; padding-right:0;}
	#movie .row:after {content:''; position:absolute; z-index:10; top:0; right:0; width:24px; height:100%; background-color:#FFF;}
	.movie .ir_so {font-size:18px; padding-bottom:10px;}
	.movie_title {margin-bottom:20px;}
	.movie_title ul {padding-bottom:8px; white-space:nowrap; overflow-x:auto;}
	.movie_title li a {font-size:14px; margin-right:15px;}
	.movie_title li.active a:before {bottom:-8px;}

	.movie_chart {position:relative; z-index:30;}
	.movie_chart > div > div > div .infor {padding:5px; }
	.movie_chart > div > div > div .infor h3 {text-align:center; margin: 5px 0 10px;}
	.movie_chart > div > div > div .infor h3 strong {display:block; font-size:19px; color:#222; font-weight:300;}
	.movie_chart > div > div > div .infor h3 span {display:none;}
	.movie_chart > div > div > div .infor .infor_btn a {width:52%; margin-left:24%;  display:block; margin-right:0; padding:5px; color:#777; margin-bottom:5px; box-sizing:border-box; font-size:14px; background:none; border:1px solid #DDD;}
	.movie_chart > div > div > div .infor .infor_btn a:last-child {display:none;}

	#event .row {padding:0 8px;}
	.event {padding:16px;}
	.event h2 {font-size: 18px; margin-bottom:10px;}

	#opening {margin:8px 0;}
	.opening {padding:20px 0;}
	.opening h2 {margin-bottom:10px;}
	.opening h2 .grand {background-size:300px; background-position:0 -105px; width:197px; height:24px;}
	.opening .date {display:none;}
	.opening .desc {font-size:16px; font-weight:400; padding-bottom:0;}

	
	#new .row {padding:0 8px;}
	.new {padding:16px; margin-top:8px;}
	.new h2 {font-size: 18px; margin-bottom:0px;}
	.new .new_left {height:300px;}
	.new .new_right {padding:17px;}
	.new .new_right .title {font-size:22px;}
	.new .new_right .star {padding:9px 0;}
	.new .new_right .select .s1 {width:100%; margin-right:0; margin-bottom:2%;}
	.new .new_right .select .s2 {width:100%;}
	.new .new_right .select .s3 {width:100%;}

	#help .row {padding:0 8px;}
	.help article h3 {font-size:18px; margin-bottom:0px;}
	.help article.help_box1 {padding:16px; margin-top:8px;}
	.help article.help_box2 {padding:16px; margin-top:8px;}
	.help article.help_box3 {margin-top:8px;}

	.card {padding:8px;}

	.service {}
	.service li {width:50%;}
	.service li:nth-child(1) {border-right:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7;}
	.service li:nth-child(2) {border-bottom:1px solid #d7d7d7;}
	.service li:nth-child(3) {border-right:1px solid #d7d7d7;}

}


@media (max-width:480px){
	
}

@media (max-width:320px){
	.movie_title li a {margin-right:9px;}
	.notice {padding:8px;}
	.notice ul li ul {left:9px;top:56px;}
	.notice ul li ul li {padding:8px;}
	.help article > div.notice {height:287px;}
	.help article > div.card {height:auto;}
	.card ul li {padding:8px;margin-bottom: 8px; min-height:90px;}
	.card ul li strong {padding-left:75px; font-size:14px;}
	.card ul li em {padding-left:75px;}
	.card ul li span {left:11px; top:10px;}
	.card ul li span img {width:60px;}
	.service li a span {width:70px; height:70px;}
	.service li a strong {font-size:14px;}
}