/* ****************** 공통클래스 ********************** */ .area{ max-width:1400px; margin:0px auto;} /* width 홈페이지 컨텐츠 가로값에 맞게 변경 */ @media all and ( max-width: 1240px ){ .area{padding:0 15px;} } /* ****************** 메인 비주얼 ********************** */ #mainVisual{overflow:hidden; width:100%; height:100% !important; text-align:center; position:relative;} /* 비주얼높이값 이미지에맞게 수정 */ #mainVisual.full-height{} .slick-track, .slick-list { -webkit-perspective: 2000; -webkit-backface-visibility: hidden; } #mainVisual .main-visual-list-con, #mainVisual .main-visual-con, #mainVisual .slick-list, #mainVisual .slick-track, .main-visual-item{ height:100%; overflow:hidden; } .main-visual-con{z-index:1;} /* 메인 비주얼 :: 이미지 */ .main-visual-item{position:relative;} .main-visual-item .main-visual-pc-img{ width:100%; height:100%; background-size:cover !important; -ms-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); -webkit-transition:transform 5000ms ease-in-out ; -moz-transition:transform 5000ms ease-in-out ; -o-transition:transform 5000ms ease-in-out ; -ms-transition:transform 5000ms ease-in-out ; transition:transform 5000ms ease-in-out ; } .main-visual-item .main-visual-m-img{display:none;} /* 메인 비주얼 :: 텍스트 */ .main-visual-item .main-visual-txt-con{position:absolute; top:50%; left:0px; width:100%; /*margin-top:-121px;*/margin-top:-90px;} /* margin-top은 조정 (텍스트영역 높이의 반) */ .main-visual-item.item02 .main-visual-txt-con{margin-top: 10px;} .main-visual-item.item03 .main-visual-txt-con{margin-top:-50px;} .main-visual-item.item04 .main-visual-txt-con{margin-top:-30px;} .main-visual-item .main-visual-txt-con .main-visual-txt1, .main-visual-item .main-visual-txt-con .main-visual-txt2, .main-visual-item .main-visual-txt-con .main-visual-txt3, .main-visual-item .main-visual-txt-con .main-visual-txt4, .main-visual-item .main-visual-txt-con .main-visual-more-btn{ opacity:0;filter:Alpha(opacity=0); -ms-transform: translateX(50px); -o-transform: translateX(50px); -moz-transform: translateX(50px); -webkit-transform: translateX(50px); transform: translateX(50px); -webkit-transition:opacity 1.0s, transform 1.0s; -moz-transition:opacity 1.0s, transform 1.0s; -o-transition:opacity 1.0s, transform 1.0s; -ms-transition:opacity 1.0s, transform 1.0s; transition:opacity 1.0s, transform 1.0s; } .main-visual-item .main-visual-txt-con.left .main-visual-txt1, .main-visual-item .main-visual-txt-con.left .main-visual-txt2, .main-visual-item .main-visual-txt-con.left .main-visual-txt3, .main-visual-item .main-visual-txt-con.left .main-visual-txt4, .main-visual-item .main-visual-txt-con.left .main-visual-more-btn{ opacity:0;filter:Alpha(opacity=0); -ms-transform: translateX(-50px); -o-transform: translateX(-50px); -moz-transform: translateX(-50px); -webkit-transform: translateX(-50px); transform: translateX(-50px); -webkit-transition:opacity 1.0s, transform 1.0s; -moz-transition:opacity 1.0s, transform 1.0s; -o-transition:opacity 1.0s, transform 1.0s; -ms-transition:opacity 1.0s, transform 1.0s; transition:opacity 1.0s, transform 1.0s; } .main-visual-item .main-visual-txt-con .main-visual-txt1, .main-visual-item .main-visual-txt-con.left .main-visual-txt1{display:block; font-size:22px; text-shadow:1px 1px 1px #000; letter-spacing:-1px; font-weight:400; color:#fff; margin-bottom:30px; padding-top:28px; -webkit-transition-delay:0.5s;-moz-transition-delay:0.5s;-o-transition-delay:0.5s;-ms-transition-delay:0.5s;transition-delay:0.5s;} .main-visual-item .main-visual-txt-con .main-visual-txt1:before{position:absolute; top:0; right:0; display:inline-block; content:""; width:36px; height:1px; background-color:#fff;} .main-visual-item.item02 .main-visual-txt-con.left .main-visual-txt1{display:block; font-size:22px; letter-spacing:-1px; font-weight:400; color:#404041; margin-bottom:30px; padding-top:28px; -webkit-transition-delay:0.5s;-moz-transition-delay:0.5s;-o-transition-delay:0.5s;-ms-transition-delay:0.5s;transition-delay:0.5s;} .main-visual-item.item02 .main-visual-txt-con .main-visual-txt1:before{position:absolute; top:0; right:0; display:inline-block; content:""; width:36px; height:1px; background-color:#404041;} .main-visual-item.item03 .main-visual-txt-con.left .main-visual-txt1{display:block; font-size:22px; letter-spacing:-1px; font-weight:400; color:#fff; margin-bottom:30px; padding-top:28px; -webkit-transition-delay:0.5s;-moz-transition-delay:0.5s;-o-transition-delay:0.5s;-ms-transition-delay:0.5s;transition-delay:0.5s;} .main-visual-item.item03 .main-visual-txt-con .main-visual-txt1:before{position:absolute; top:0; right:0; display:inline-block; content:""; width:36px; height:1px; background-color:#fff;} .main-visual-item.item04 .main-visual-txt-con.left .main-visual-txt1{display:block; font-size:22px; letter-spacing:-1px; font-weight:400; color:#fff; margin-bottom:30px; padding-top:28px; -webkit-transition-delay:0.5s;-moz-transition-delay:0.5s;-o-transition-delay:0.5s;-ms-transition-delay:0.5s;transition-delay:0.5s;} .main-visual-item.item04 .main-visual-txt-con .main-visual-txt1:before{position:absolute; top:0; right:0; display:inline-block; content:""; width:36px; height:1px; background-color:#fff;} .main-visual-item .main-visual-txt-con.left .main-visual-txt1:before{right:auto; left:0;} .main-visual-item .main-visual-txt-con .main-visual-txt2, .main-visual-item .main-visual-txt-con.left .main-visual-txt2{font-family: 'NotoL'; display:block; font-size:45px; text-shadow:1px 1px 1px #000; font-weight:100; letter-spacing:-2.5px; line-height:50px; color:#fff; margin-bottom:30px; -webkit-transition-delay:0.3s;-moz-transition-delay:0.3s;-o-transition-delay:0.3s;-ms-transition-delay:0.3s;transition-delay:0.3s;} .main-visual-item.item02 .main-visual-txt-con.left .main-visual-txt2{font-family: 'NotoL'; display:block; font-size:45px; font-weight:100; letter-spacing:-2.5px; line-height:50px; color:#000; margin-bottom:30px; -webkit-transition-delay:0.3s;-moz-transition-delay:0.3s;-o-transition-delay:0.3s;-ms-transition-delay:0.3s;transition-delay:0.3s;} .main-visual-item.item03 .main-visual-txt-con.left .main-visual-txt2{font-family: 'NotoL'; display:block; font-size:45px; font-weight:100; letter-spacing:-2.5px; line-height:50px; color:#fff; margin-bottom:30px; -webkit-transition-delay:0.3s;-moz-transition-delay:0.3s;-o-transition-delay:0.3s;-ms-transition-delay:0.3s;transition-delay:0.3s;} .main-visual-item.item04 .main-visual-txt-con.left .main-visual-txt2{font-family: 'NotoL'; display:block; font-size:45px; font-weight:100; letter-spacing:-2.5px; line-height:50px; color:#fff; margin-bottom:30px; -webkit-transition-delay:0.3s;-moz-transition-delay:0.3s;-o-transition-delay:0.3s;-ms-transition-delay:0.3s;transition-delay:0.3s;} .main-visual-item .main-visual-txt-con .main-visual-txt2 strong{font-size:36px; font-weight:500;} .main-visual-item .main-visual-txt-con .main-visual-txt2 strong > span{font-size:60px; font-weight:600;} .main-visual-item .main-visual-txt-con .main-visual-txt2 b{font-family: 'NotoM'; font-size:60px; text-shadow:1px 1px 1px #000; font-weight:500; line-height:70px;} .main-visual-item.item02 .main-visual-txt-con .main-visual-txt2 b{font-family: 'NotoM'; font-size:45px; font-weight:500; line-height:50px;} .main-visual-item.item03 .main-visual-txt-con .main-visual-txt2 b{font-family: 'NotoM'; font-size:45px; font-weight:500; line-height:50px;} .main-visual-item.item04 .main-visual-txt-con .main-visual-txt2 b{font-family: 'NotoM'; font-size:45px; font-weight:500; line-height:50px;} .main-visual-item .main-visual-txt-con .main-visual-txt3, .main-visual-item .main-visual-txt-con.left .main-visual-txt3{display:block; font-size:17px; letter-spacing:-0.95px; color:#f2f2f2; line-height:28px; margin-bottom:35px;} .main-visual-item .main-visual-txt-con .main-visual-txt4, .main-visual-item .main-visual-txt-con.left .main-visual-txt4{display:block; font-size:18px; color:#00a1e4; margin-bottom:35px;} .main-visual-item .main-visual-txt-con .main-visual-more-btn{display:inline-block; font-size:16px; font-weight:300; color:#fff; padding-bottom:13px; border-bottom:3px solid #fff; -webkit-transition-delay:0.8s;-moz-transition-delay:0.8s;-o-transition-delay:0.8s;-ms-transition-delay:0.8s;transition-delay:0.8s;} .main-visual-item .main-visual-txt-con .main-visual-more-btn:hover{text-shadow:1px 1px 2px rgba(0, 0, 0, .5);} .main-visual-item .main-visual-txt-con img{display:inline-block;} /* 메인 비주얼 :: active효과 */ .main-visual-item.active-item .main-visual-pc-img{ -ms-transform: scale(1.0,1.0) rotate(0.1deg); -o-transform: scale(1.0,1.0) rotate(0.1deg); -moz-transform: scale(1.0,1.0) rotate(0.1deg); -webkit-transform: scale(1.0,1.0) rotate(0.1deg); transform: scale(1.0,1.0) rotate(0.1deg); } .main-visual-item.active-item .main-visual-txt1, .main-visual-item.active-item .main-visual-txt2, .main-visual-item.active-item .main-visual-txt3, .main-visual-item.active-item .main-visual-txt4, .main-visual-item.active-item .main-visual-more-btn{ opacity:1.0;filter:Alpha(opacity=100); -ms-transform: translateX(0px); -o-transform: translateX(0px); -moz-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } .main-visual-item.active-item .main-visual-txt-con.left .main-visual-txt1, .main-visual-item.active-item .main-visual-txt-con.left .main-visual-txt2, .main-visual-item.active-item .main-visual-txt-con.left .main-visual-txt3, .main-visual-item.active-item .main-visual-txt-con.left .main-visual-txt4, .main-visual-item.active-item .main-visual-txt-con.left .main-visual-more-btn{ opacity:1.0;filter:Alpha(opacity=100); -ms-transform: translateX(0px); -o-transform: translateX(0px); -moz-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } /* 메인 비주얼 :: 버튼 */ #mainVisual .slick-dots{position:absolute; width:100%; text-align:center; bottom:28px;} #mainVisual .slick-dots li{display:inline-block; margin:0 10px ; } #mainVisual .slick-dots li button{ cursor:pointer; margin:0px; padding:0px; background:none; font-size:0; width:11px; height:11px; background-color:rgba(000,000,000,0.25); -webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%; } #mainVisual .slick-dots li.slick-active button{background-color:rgba(000,000,000,0.1); } /* 버튼 active */ @media all and ( max-width: 800px ){ #mainVisual{height:auto;} /* 메인 비주얼 :: 이미지 */ .main-visual-item .main-visual-pc-img{display:none;} .main-visual-item .main-visual-m-img{display:block;} .main-visual-m-img img{width:100%;} /* 메인 비주얼 :: 텍스트 */ .main-visual-item .main-visual-txt-con, .main-visual-item.item02 .main-visual-txt-con, .main-visual-item.item03 .main-visual-txt-con{margin-top:-77px} .main-visual-item .main-visual-txt-con .main-visual-txt1, .main-visual-item .main-visual-txt-con.left .main-visual-txt1{font-size:14px; margin-bottom:14px; padding-top:14px; letter-spacing:-1px;} .main-visual-item .main-visual-txt-con .main-visual-txt1:before, .main-visual-item .main-visual-txt-con.left .main-visual-txt1:before{width:18px;} .main-visual-item .main-visual-txt-con .main-visual-txt2, .main-visual-item .main-visual-txt-con.left .main-visual-txt2{font-size:30px; line-height:35px; margin-bottom:14px; letter-spacing:-1.75px;} .main-visual-item .main-visual-txt-con .main-visual-txt2 strong{font-size:21px;} .main-visual-item .main-visual-txt-con .main-visual-txt2 strong > span{font-size:40px; line-height:40px;} .main-visual-item .main-visual-txt-con .main-visual-txt3, .main-visual-item .main-visual-txt-con.left .main-visual-txt3{font-size:13px; line-height:18px; margin-bottom:15px; } .main-visual-item .main-visual-txt-con .main-visual-txt3 img, .main-visual-item .main-visual-txt-con.left .main-visual-txt3 img{max-width:116px;} .main-visual-item .main-visual-txt-con .main-visual-more-btn{font-size:12px; padding-bottom:4px; border-bottom-width:2px;} /* 메인 비주얼 :: 버튼 */ #mainVisual .slick-dots{bottom: 20px;} #mainVisual .slick-dots li{margin:0 11px;} } @media all and ( max-width: 527px ){ #mainVisual{overflow:hidden; width:100%; height:auto !important; position:relative;} /* 비주얼높이값 이미지에맞게 수정 */ /* 메인 비주얼 :: 텍스트 */ .main-visual-item .main-visual-txt-con{margin-top:-10px} .main-visual-item.item02 .main-visual-txt-con{margin-top:20px} .main-visual-item.item03 .main-visual-txt-con{margin-top:-10px} .main-visual-item.item04 .main-visual-txt-con{margin-top:0px} .main-visual-item .main-visual-txt-con.point{margin-top:-77px;} .main-visual-item .main-visual-txt-con .main-visual-txt2, .main-visual-item .main-visual-txt-con.left .main-visual-txt2{font-size:25px; line-height:30px;} .main-visual-item .main-visual-txt-con .main-visual-txt2 strong{font-size:18px;} .main-visual-item .main-visual-txt-con .main-visual-txt2 strong > span{font-size:30px; line-height:30px;} .main-visual-item .main-visual-txt-con .main-visual-txt2 strong{font-size:18px; font-weight:500;} .main-visual-item .main-visual-txt-con .main-visual-txt2 strong > span{font-size:30px; font-weight:600;} .main-visual-item .main-visual-txt-con .main-visual-txt2 b{font-family: 'NotoM'; font-size:30px; font-weight:500; line-height:35px;} .main-visual-item.item02 .main-visual-txt-con.left .main-visual-txt1{font-size:14px; margin-bottom:14px; padding-top:14px; letter-spacing:-1px;} .main-visual-item.item03 .main-visual-txt-con.left .main-visual-txt1{font-size:14px; margin-bottom:14px; padding-top:14px; letter-spacing:-1px;} .main-visual-item.item04 .main-visual-txt-con.left .main-visual-txt1{font-size:14px; margin-bottom:14px; padding-top:14px; letter-spacing:-1px;} .main-visual-item.item02 .main-visual-txt-con.left .main-visual-txt2{font-size:25px; line-height:30px; margin-bottom:14px; letter-spacing:-1.75px;} .main-visual-item.item03 .main-visual-txt-con.left .main-visual-txt2{font-size:25px; line-height:30px; margin-bottom:14px; letter-spacing:-1.75px;} .main-visual-item.item04 .main-visual-txt-con.left .main-visual-txt2{font-size:25px; line-height:30px; margin-bottom:14px; letter-spacing:-1.75px;} .main-visual-item.item02 .main-visual-txt-con .main-visual-txt2 b{font-size:25px; font-weight:500; line-height:15px;} .main-visual-item.item03 .main-visual-txt-con .main-visual-txt2 b{font-size:25px; font-weight:500; line-height:15px;} .main-visual-item.item04 .main-visual-txt-con .main-visual-txt2 b{font-size:25px; font-weight:500; line-height:15px;} } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none !important; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .slick-slider *:focus { outline: none !important; }