.main_visual {width:100%;height:auto;overflow:hidden;margin:0 auto;padding:0 0; } /****** 여기서부터 visual.html 파일의 css 입니다.******/ /* 메인이미지 */ #DB_tab16 ul, #DB_tab16 li{list-style:none;margin:0;padding:0 } #DB_tab16 img{border:none} #DB_tab16 {width:100%;height:950px;/*이미지높이지정*/position:relative;} #DB_tab16 .DB_img{position:relative;width:100%; height: 100vh; } #DB_tab16 .DB_img li{position:absolute;width:100%; transform: translateX(-50%); top:0; left:50%;/*이미지의 절반*/;} #DB_tab16 .DB_img li img{min-width:100%;min-height:100%;} #DB_tab16 .DB_img li .first {z-index:2;} #DB_tab16 .DB_img .slide_img { position:absolute; width:100%; min-width:2000px; transform: translateX(-50%); top:0; left:50%; opacity:1; filter:alpha(opacity=100); } #DB_tab16 .DB_img .slide_img img {min-width:100%;min-height:100%;} #DB_tab16 .DB_img .slide_img:first-child { opacity:1; filter:alpha(opacity=100); } #DB_tab16 .DB_img .flex-active-slide img{ opacity:1; filter:alpha(opacity=100); z-index:2; } #DB_tab16 .DB_img .flex-active-slide .slide_img { opacity:1; filter:alpha(opacity=100); } #DB_tab16 .DB_menu{position:absolute;bottom:10px;width:100%;text-align:center} #DB_tab16 .DB_menu li{display:inline;cursor:pointer;margin:0px} #DB_tab16 .DB_dirBtn{position:absolute;width:100%;top:1%;/*화살표높이조정*/ z-index: 4;} #DB_tab16 .DB_dirBtn .DB_prev{position:absolute;left:10px;cursor:pointer; opacity:0.2;filter:alpha(opacity=20); padding: 20% 0; } #DB_tab16 .DB_dirBtn .DB_next{position:absolute;right:10px;cursor:pointer;opacity:0.2;filter:alpha(opacity=20); padding: 20% 0; } #DB_tab16 .DB_dirBtn .DB_prev:hover ,#DB_tab16 .DB_dirBtn .DB_next:hover {opacity:1;filter:alpha(opacity=100); } #img-la{display:block;margin: 0 auto;} #img-sm{display:none;} /** text_box 스타일1번 **/ #DB_tab16 .DB_img .text_box.ver1 {position:absolute;top:250px;width:100%;margin:0 0 0 4%;z-index:3; opacity: 0; animation: fadeInText 1s 0.5s ease-out forwards; } #DB_tab16 .DB_img .text_box.ver2 {position:absolute;top:250px;width:100%;margin:0 0 0 4%;z-index:3; opacity: 0; animation: fadeInText 1s 0.5s ease-out forwards;} @keyframes scaleImage { 100%{ transform: scale(1); } } @keyframes fadeInText { 100% { opacity: 1; } } /* 메인이미지 텍스트 순서대로 */ #DB_tab16 .DB_img .text_box.ver1 .txt1 { font-size:4rem; line-height:1.2; font-weight:bold; color:#fff; } #DB_tab16 .DB_img .text_box.ver1 .txt1 span{ font-size:20rem;} #DB_tab16 .DB_img .text_box.ver1 .txt1 span1{color:#03a0e5;} #DB_tab16 .DB_img .text_box.ver1 .txt2 { font-size:1.2rem; line-height:1; font-weight:200; color:#fff;;line-height:1.2; padding: 2rem 0 0; } #DB_tab16 .DB_img .text_box.ver1 .txt3 { font-size:2.8rem; font-weight:bold; color:#fff; margin-top:20px;line-height:1.2;} #DB_tab16 .DB_img .text_box.ver1 .txt3::before{ content: "";border:1px solid #fff; width:37rem;display:block; margin: 10px 0 2rem;} /* 메인이미지 버튼 */ #DB_tab16 .DB_img .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; } #DB_tab16 .DB_img .text_box.ver1 .btn_more:hover { color:#fff; border:1px solid #000; background:#000; } /** text_box 스타일2번 **/ #DB_tab16 .DB_img .text_box.ver2 .txt1 { font-size:4rem; line-height:1.2; font-weight:bold; color:#000; font-family: Malgun Gothic, "맑은 고딕", '돋움', dotum, sans-serif; ;} #DB_tab16 .DB_img .text_box.ver2 .txt1 span{ font-size:20rem;letter-spacing: -3rem; } #DB_tab16 .DB_img .text_box.ver2 .txt1 span1{color:#03a0e5;} #DB_tab16 .DB_img .text_box.ver2 .txt2 { font-size:1.3rem; line-height:1; font-weight:400; color:#000;;line-height:1.2; padding: 2rem 0 0; } #DB_tab16 .DB_img .text_box.ver2 .txt3 { font-size:2.4rem; font-weight:bold; color:#000; line-height:1.2;margin: -2.5rem 0 0;} #DB_tab16 .DB_img .text_box.ver2 .txt3::before{ content: "";border:1px solid #000; width:34rem;display:block; margin: 0 0 1.5rem;} /* 메인이미지 버튼 */ #DB_tab16 .DB_img .text_box.ver2 .btn_more { position:relative; display:block; width:200px; height:33px; margin:50px 0; box-sizing:border-box; text-align:center; line-height:30px; font-size:13px; color:#fff; border:1px solid #fff; } #DB_tab16 .DB_img .text_box.ver2 .btn_more:hover { color:#000; border:1px solid #000; background:#000; } @keyframes scaleImage { 100%{ transform: scale(1); } } @keyframes fadeInText { 100% { opacity: 1; } } /* ============= * RESPONSIVE * ============*/ @media (min-width:2000px) { #DB_tab16 {width:100%;height:0;/*이미지높이지정*/position:relative;padding-bottom :43.5%;overflow: hidden;} #DB_tab16 .DB_img{} } @media (max-width:1300px) { #DB_tab16 .DB_img .text_box.ver1 {width:100%;margin:0 10% 0 10%z-index:3; } #DB_tab16 .DB_img .text_box.ver2 {width:100%;margin:0 10% 0 10%z-index:3; } #DB_tab16 .DB_dirBtn .DB_prev{ padding: 35% 0; } #DB_tab16 .DB_dirBtn .DB_next{ padding: 35% 0; } } @media (max-width:750px) { #img-la{display:none;} #img-sm{display:block;margin: 0 auto;} #DB_tab16 img{max-width:100%;height: 100%;} #DB_tab16 { height: 350px;padding-bottom :47.5%; overflow: hidden;} #DB_tab16 .DB_img .slide_img {min-width:100%; } #DB_tab16 .DB_img .slide_img {min-width:100%; } #DB_tab16 .DB_img .text_box.ver1 {top:8rem;} #DB_tab16 .DB_img .text_box.ver1 .txt1 { font-size:2rem;line-height:1; } #DB_tab16 .DB_img .text_box.ver1 .txt3 { font-size:1.3rem;;} #DB_tab16 .DB_img .text_box.ver1 .txt3::before{width:20rem;} #DB_tab16 .DB_img .text_box.ver2 {top:5rem; padding:1rem 1rem 2rem; width: 85%;} #DB_tab16 .DB_img .text_box.ver2 .txt1 { font-size:2rem;line-height:0.8; letter-spacing: 0;} #DB_tab16 .DB_img .text_box.ver2 .txt1 span{ font-size:8rem;letter-spacing: 0;} #DB_tab16 .DB_img .text_box.ver2 .txt2 { display:none;} #DB_tab16 .DB_img .text_box.ver2 .txt3 { font-size:1.3rem;; margin: 0 0 0;} #DB_tab16 .DB_img .text_box.ver2 .txt3::before{width:18rem;margin: 1rem auto 1rem 0;} #DB_tab16 .DB_menu{;bottom:30px;} #DB_tab16 .DB_dirBtn .DB_prev{ padding: 70% 0; } #DB_tab16 .DB_dirBtn .DB_next{ padding: 70% 0; } }