/****************************************** 메인이미지 부분 css 파일입니다. *******************************************/ .main_visual {clear:both; position:relative;height:870px;overflow:hidden; } .flexslider {position:relative;width:100%;height:870px;left:50%;margin-left:-50%;} /** text_box 스타일1번 **/ #main-slider .slides .text_box.ver1 {position:absolute;top:400px;left:0px;width:50%;margin:0 10% 0 10%;z-index:3; } /* 메인이미지 텍스트 순서대로 */ #main-slider .slides .text_box.ver1 .txt1 { font-size:42px; line-height:1.2; font-weight:bold; color:#fff; } #main-slider .slides .text_box.ver1 .txt2 { font-size:40px; line-height:1; font-weight:200; color:#fff; text-transform:uppercase; letter-spacing:-3px; } #main-slider .slides .text_box.ver1 .txt3 { font-size:16px; font-weight:bold; color:#fff; margin-top:20px;} /* 메인이미지 버튼 */ #main-slider .slides .text_box.ver1 .btn_more { position:relative; display:block; width:200px; height:32px; margin:50px 0; box-sizing:border-box; text-align:center; line-height:30px; font-size:13px; color:#fff; border:1px solid #fff; } #main-slider .slides .text_box.ver1 .btn_more:hover { color:#fff; border:1px solid #000; background:#000; } /** text_box 스타일2번 **/ #main-slider .slides .text_box.ver2 {position:absolute; top:300px; left:0px; width:80%; margin:0 10% 0 10%; z-index:3; } /* 메인이미지 텍스트 순서대로 */ #main-slider .slides .text_box.ver2 .txt1 { font-size:32px; font-weight:400; color:#000; } #main-slider .slides .text_box.ver2 .txt2 { font-size:60px; line-height:1.2; font-weight:500; color:#000; text-transform:uppercase; letter-spacing:-3px; } #main-slider .slides .text_box.ver2 .txt3 { font-size:17px; font-weight:400; color:#000; } /* 메인이미지 버튼 */ #main-slider .slides .text_box.ver2 .btn_more { position:relative; display:block; width:200px; height:32px; margin:50px 0; box-sizing:border-box; text-align:center; line-height:30px; font-size:13px; color:#fff; border:1px solid #000; background:#000; } #main-slider .slides .text_box.ver2 .btn_more:hover { background:none; border:1px solid #fff; } /* text_box */ #main-slider .slides li .text_box { opacity:0;filter:alpha(opacity=0); } #main-slider .slides li.flex-active-slide .text_box { opacity:1;filter:alpha(opacity=100); -webkit-transition-delay: 1000ms; -moz-transition-delay: 1000ms; -o-transition-delay: 1000ms; -ms-transition-delay: 1000ms; transition-delay: 1000ms; -webkit-transition: 1200ms ease-in-out; -moz-transition: 1200ms ease-in-out; -o-transition: 1200ms ease-in-out; -ms-transition: 1200ms ease-in-out; transition: 1200ms ease-in-out; } /* slide_img */ #main-slider .slides li { position:relative; } #main-slider .slides li .first {z-index:2;} #main-slider .slides li .slide_img { position:absolute; width:100%; min-width:2000px; transform: translateX(-50%); top:0; left:50%; opacity:1; filter:alpha(opacity=100); } #main-slider .slides li .slide_img img {min-width:100%;min-height:100%;} #main-slider .slides li .slide_img:first-child { opacity:1; filter:alpha(opacity=100); } #main-slider .slides li .flex-active-slide img{ opacity:1; filter:alpha(opacity=100); z-index:2; } #main-slider .slides li .slide_img img { -ms-transform: scale(1.08,1.08); -o-transform: scale(1.08,1.08); -moz-transform: scale(1.08,1.08); -webkit-transform: scale(1.08,1.08); transform: scale(1.08,1.08); -webkit-transition: 4000ms ease-in-out; -moz-transition: 4000ms ease-in-out; -o-transition: 4000ms ease-in-out; -ms-transition: 4000ms ease-in-out; transition: 4000ms ease-in-out; } #main-slider .slides li.flex-active-slide .slide_img { opacity:1; filter:alpha(opacity=100); } #main-slider .slides li.flex-active-slide .slide_img img { -ms-transform: scale(1.0,1.0); -o-transform: scale(1.0,1.0); -moz-transform: scale(1.0,1.0); -webkit-transform: scale(1.0,1.0); transform: scale(1.0,1.0); -webkit-transition: 7000ms ease-in-out; -moz-transition: 7000ms ease-in-out; -o-transition: 7000ms ease-in-out; -ms-transition: 7000ms ease-in-out; transition: 7000ms ease-in-out; } /* paging */ #main-slider .flex-control-paging { position:absolute; bottom:50px; left:0; width:100%; text-align:center; z-index:3; } #main-slider .flex-control-paging * { vertical-align:middle; } #main-slider .flex-control-paging li { display:inline-block; margin:0 5px; } #main-slider .flex-control-paging li a { display:inline-block; width:12px; height:12px; box-sizing:border-box; font-size:0; line-height:0; border:3px solid #fff; border-radius:10px; } #main-slider .flex-control-paging li a.flex-active { background:#fff; border:0; } /* nav */ #main-slider .flex-direction-nav { width:100%; margin:0 auto; *height:0; z-index:3; } #main-slider .flex-direction-nav a { position:absolute; text-decoration:none; display:block; width:40px; height:40px; margin:-20px 0 0; top:45%; z-index:10; overflow:hidden; opacity:0; cursor:pointer; color:rgba(0, 0, 0, 0.8); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #main-slider:hover .flex-direction-nav a { opacity: 0.5; } #main-slider .flex-direction-nav a:before { font-family:"flexslider-icon"; font-size:36px; display:inline-block; content:'\f001'; color:rgba(255, 255, 255, 0.8); } #main-slider .flex-direction-nav a.flex-next:before { content:'\f002'; } #main-slider .flex-direction-nav .flex-prev { left:5%; } #main-slider .flex-direction-nav .flex-next { right:5%; } #main-slider .flexslider:hover .flex-direction-nav .flex-prev { opacity: 0.7; left:25%; } #main-slider .flexslider:hover .flex-direction-nav .flex-prev:hover { opacity:1; } #main-slider .flexslider:hover .flex-direction-nav .flex-next { opacity:0.7; right:25%; } #main-slider .flexslider:hover .flex-direction-nav .flex-next:hover { opacity:1; } /* ============= * RESPONSIVE * ============*/ @media (max-width: 1024px) { #main-slider .slides li .slide_img { position:absolute; width:100%; min-width:1200px; transform: translateX(-50%); top:0; left:50%; opacity:1; filter:alpha(opacity=100); } /** text_box 스타일1번 **/ #main-slider .slides .text_box.ver1 {top:280px;} #main-slider .slides .text_box.ver1 .txt1 {font-size:32px;} #main-slider .slides .text_box.ver1 .txt2 {font-size:30px;letter-spacing:-1px; } #main-slider .slides .text_box.ver1 .txt3 {font-size:14px;} /** text_box 스타일2번 **/ #main-slider .slides .text_box.ver2 {top:200px;width:70%; } #main-slider .slides .text_box.ver2 .txt1 { font-size:28px; font-weight:300;} #main-slider .slides .text_box.ver2 .txt2 { font-size:32px; line-height:1.2;letter-spacing:-1px; } #main-slider .slides .text_box.ver2 .txt3 { font-size:14px; font-weight:300;} }