.dl{ display:flex;} .dl dt{flex-shrink: 0;} .dl dd{flex-grow: 1;} .hid {position: absolute;margin: -1px; padding: 0; width: 1px; height: 1px;border: 0;clip: rect(0, 0, 0, 0);overflow: hidden;} /* slick slide common */ .slick-slider {-webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; -webkit-box-sizing: border-box; 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-slide {display: none; height: 100%;vertical-align: middle;} .slick-list {overflow: hidden;} .slick-list.dragging {cursor: pointer;} .slick-initialized .slick-slide {display: inline-block;} .slick-arrow.slick-hidden {display: none;} .slick-current {opacity: 1; display: block;} .slick-track {position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto;} /* slick arrow show */ .arwShow .slick-arrow.slick-hidden { display: inline-block; } .mainContents:before{ } /* 메인비주얼 */ .MVisual { position: relative; padding:0 5%; } .MVisual:before{ content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../img/main/MVisual-bg.jpg) no-repeat; background-size:100% auto; z-index:-2; } .MVisual:after{ content:''; position:absolute; top:100px; left:41%; width:250px; height:250px; background:url(../img/main/MVisual-deco.png) no-repeat; background-size:100% auto; z-index:10000; } .MVisual .Visual-txt{ position:absolute; right:10%; width:35%; top:100px;} .MVisual .Visual-txt img{ width:100%;} .MVisual .slider { } .MVisual .slider, .MVisual .slick-list, .MVisual .slick-track { position: relative;} .MVisual .item { position: relative; padding-bottom:100px; z-index:1 !important; } .MVisual .item .item-txt{ position:absolute; right:5%; bottom:300px; width:35%; } .MVisual .item .item-txt h3{ font-size:40px;} .MVisual .item .item-txt h2{ font-size:80px; font-weight:700; margin:7px 0 20px 0;} .MVisual .item .item-txt p{ font-size:25px;} .MVisual .item img { position:relative; width:53%;} .MVisual .item .mo{ display:none;} .MVisual .control { position: absolute; bottom:200px; left:50%;transform: translateX(-65%); display: flex; align-items: center; z-index:999; } .MVisual .control .page { color: #333; margin:0 15px; } .MVisual .control .page span { position: relative; display: inline-block; padding-left: 0.4rem; margin-left: 0.4rem; color:#333; } .MVisual .control .page span::before { position: absolute; top: 50%; left: -0.1rem; width: 0.2rem; height: 0.2rem; border-radius: 50%; background: #333; content: ""; } .MVisual .control a { color: #fff; } .MVisual .control .slick-arrow{background:url(../img/main/MVisual-control.png) no-repeat 50% 50%; display:flex; width:110px; height:110px; background-size:100% auto;justify-content: center;align-items: center;} .MVisual .control .slick-arrow i{ font-size:50px;} .MVisual .control a.play { display: none; } #sec01{margin-bottom:170px;} #sec01 ul{display: grid; grid-template-columns:repeat(2, 1fr); gap:30px; } #sec01 ul+ul{ margin-top:100px;} #sec01 ul li img{ width:100%;} #sec01 ul li h1{ font-size:30px; font-weight:600; margin:30px 0 15px 0;} #sec01 ul li h2{ color:#777; font-size:23px;} #sec01 .s01{ text-align:center;} #sec01 .s01 img{ width:45%; margin-top:50px;} #sec01 .s01 p{ font-size:35px; margin-top:30px;} #sec02, #sec03{ padding:170px 0; background-size:cover; background-repeat:no-repeat; color:#fff;} #sec02{background-image:url(../img/main/sec02-01.jpg);} #sec02 h3{ color:#a4e416;text-transform:uppercase} #sec02 h1, #sec03 h1{ font-size:57px; color:#fff;} #sec02 dl dt a, #sec03 a{ color:#fff; font-size:20px; display:block; margin-top:70px; font-size:25px; font-weight:500;} #sec02 dl dt a i, #sec03 a i { margin-left:30px;} #sec02 dl{display: grid; grid-template-columns:50% 1fr;} #sec03{background-image:url(../img/main/sec03-01.jpg);} #sec03 h1 span{ font-weight:700; color:#a4e416} #sec03 .area{ margin:50px 0 0 0 ;} #sec03 .area b{ display:block; font-weight:600; font-size:35px;} #sec03 .area strong{ font-size:75px; color:#deef24 ; font-weight:700;} #sec03 .area p{ font-size:25px;} @media all and ( max-width: 1920px ){ .MVisual:after{left:41%; width:200px; height:200px;} .MVisual .control .slick-arrow{width:77px; height:77px; } .MVisual .control .slick-arrow i{ font-size:40px;} .MVisual .Visual-txt{ right:12%; width:30%;} .MVisual .item .item-txt{ bottom:250px;} .MVisual .item .item-txt h3{ font-size:35px;} .MVisual .item .item-txt h2{ font-size:60px; } .MVisual .item .item-txt p{ font-size:20px;} #sec01 ul{gap:20px;} #sec01 ul+ul{ margin-top:70px;} #sec01 ul li h1{ font-size:25px; margin:20px 0 10px 0;} #sec01 ul li h2{ color:#777; font-size:18px;} #sec01 .s01 p{ font-size:27px;} #sec02 h1, #sec03 h1{ font-size:43px;} #sec03 .area b{font-size:40px;} #sec03 .area strong{ font-size:60px;} #sec03 .area p{ font-size:20px;} #sec02 dl dt a, #sec03 a{ font-size:20px;} } @media all and ( max-width: 1680px ){ } @media all and ( max-width: 1440px ){ .MVisual{ padding:0 10px;} .MVisual .control{ bottom:20%;} .MVisual .item .item-txt{ bottom:100px;} .MVisual .item .item-txt h3{ font-size:25px;} .MVisual .item .item-txt h2{ font-size:40px;} .MVisual .item .item-txt p{ font-size:20px;} .MVisual .item .item-txt p br{ display:none;} #sec01{ margin-bottom:0;} #sec02, #sec03{ padding:100px 10px;} } @media all and ( max-width: 1280px ){ } @media all and ( max-width: 1152px ){ } @media all and ( max-width: 1024px ){ .MVisual .item{ padding-bottom:0;} .MVisual .item img{ width:80%;} .MVisual .item .item-txt{ position:relative; bottom:0; width:100%; right:0; margin-top:50px;} .MVisual .control{ bottom:auto; top:40%; left:65%; transform: translateX(0);} .MVisual .control .slick-arrow{ width:60px; height:60px;} .MVisual .control .slick-arrow i{ font-size:20px;} .MVisual:after { display:none;} .MVisual .Visual-txt{ z-index:99; right:10px; top:50px; width:50%;} #sec01 .s01 p{ font-size:20px;} #sec02 dl{ display:block;} #sec02 dl dt a{ margin-top:30px; margin-bottom:100px;} } @media all and ( max-width: 900px ){ } @media all and ( max-width: 800px ){ .MVisual .item .item-txt h3{ font-size:20px} .MVisual .item .item-txt h2{ font-size:35px} .MVisual .item .item-txt p{ font-size:17px;} #sec01{ padding:20px 10px 70px 10px;} #sec01 ul{ display:block;} #sec01 .s01{ margin-bottom:30px;} #sec01 ul+ul, #sec01 li+li{ margin-top:30px} #sec02 .inner{grid-template-columns: repeat(1, 1fr);} #sec02 .inner .s01{background: #ebe6e1; padding:30px 10px;} #sec02 .inner .s01:before{ display:none;} #sec02 .inner .s01:after{ display:none;} } @media all and ( max-width: 640px ){ .MVisual:after{ width:100px; height:100px;} .MVisual .control .slick-arrow{ width:50px; height:50px;} } @media all and ( max-width: 480px ){ #sec01 ul{grid-template-columns: repeat(2, 1fr);} #sec01 ul li a{ padding:20px 0;} #sec01 ul li p{ font-size:19px;} #sec02 .inner h1 i{ width:40px; height:40px;} #sec02 .inner h1, #sec03 .inner h1{ margin-bottom:0;} .MVisual .item .item-txt h3{ font-size:} #sec02 h1, #sec03 h1{ font-size:25px;} .MVisual .control{ left:50%;} }