/* ===== MAIN - VISUAL ===== */ .BML{ font-family: 'BookkMyungjo-Lt';} .BMB{ font-family: 'BookkMyungjo-Bd';} .HSB21{font-family: 'HSBombaram21-Regular';} .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%; min-height: 1px; 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; } /* 메인비주얼 */ .MVisual { position: relative; width:100%; height:100vh; overflow: } .MVisual .slider {overflow: hidden; background: rgba(0, 0, 0, 0.5); isolation: isolate; } .MVisual .slider, .MVisual .slick-list, .MVisual .slick-track {height: 100%; } .MVisual .item { position: relative; background-size:cover; background-position:50% 50%; } .MVisual .item .inner{ height:100%;} .MVisual .area{ position:absolute; top:50%;transform: translateY(-50%);left:0; z-index:2; width:100%; color:#fff; } .MVisual .area h1{ font-size:55px; font-weight:500;} .MVisual .area h2{ font-size:90px;font-family: 'Paperlogy'; font-weight:800; } .MVisual .type1 h2{margin:10px 0 30px 0;} .MVisual .area p{ font-size:27px;} .MVisual .type2 p{ margin:20px 0 35px 0;} .MVisual .control { position: absolute; bottom:250px; left: 0; height: 2rem; display: flex; align-items: center;z-index: 2; } .MVisual .control .page { color: #fff; margin-right: 1rem; } .MVisual .control .page span { position: relative; display: inline-block; padding-left:85px; color: #ebebeb; } .MVisual .control .page span::before { position: absolute; top: 50%; left:20px; width:50px; height:1px; border-top:1px #fff solid; background: #fff; content: ""; } .MVisual .control a { color: #fff; padding: 0 0.1rem; } .MVisual .control a.play { display: none; } #MVisual{position: relative; width:100%; height:100vh; overflow:hidden;background-image:url(../img/main/main_V_bg.jpg); background-size:cover; background-position:50% 50%;} #MVisual img{ position:relative; width:100%; z-index:2} #MVisual .mimg{ display:none;} #starCanvas { position: absolute; top: 0; left: 0; display: block; width: 100vw; height: 100vh; z-index:0; } .m_Txt{font-family: 'HSBombaram21-Regular'; font-size: 62px; margin-bottom: 20px; } .m_txt{color: #ccc; font-size: 24px; } .m_txt strong { background: linear-gradient(135deg, #c2995e 0%, #d4af37 10%, #fff1b8 60%, #c2995e 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; font-weight: bold;} .m_img { color: #fff; margin: 20px 0 80px 0; display: block;} .m_img img{margin-left: 10px; width: 50px; height: 50px;} #sec0102 { background-color: #000; color: #fff; overflow: hidden; position: relative;} #sec0102:before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to bottom, #000 0%, transparent 20%, transparent 80%, #000 100%), url(../img/main/s0102_bg.jpg); background-size: cover; background-position: center; z-index: 0; opacity: 0.8; background-position-y: top;} #sec0102 #sec01{ position: relative; padding: 180px 0; text-align: center;} #sec0102 #sec01 ul.s01 { display: flex; justify-content: center; gap: 25px; margin-top: 80px;} #sec0102 #sec01 ul.s01 li { position: relative; flex: 1; width: 550px; height: 600px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.4s ease;} #sec0102 #sec01 ul.s01 li:nth-child(1) {border-radius: 50% 0 0 50%;} #sec0102 #sec01 ul.s01 li:nth-child(3) {border-radius: 0 50% 50% 0;} #sec0102 #sec01 ul.s01 li:hover { /* border-color: #ffd700;*/box-shadow: 0 0 25px rgba(255, 215, 0, 0.6), inset 0 0 15px rgba(255, 215, 0, 0.3);transform: translateY(-5px);} #sec0102 #sec01 ul.s01 li a { position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; box-sizing: border-box; text-decoration: none; color: #fff; z-index: 2;} #sec0102 #sec01 ul.s01 li a img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform 0.5s ease;} #sec0102 #sec01 ul.s01 li:hover a img {transform: scale(1.05);} #sec0102 #sec01 ul.s01 li a::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 80%; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%); z-index: 2;} #sec0102 #sec01 ul.s01 li a h2, #sec0102 #sec01 ul.s01 li a h4, #sec0102 #sec01 ul.s01 li a p { position: relative; z-index: 3; margin: 0; text-align: center;} #sec0102 #sec01 ul.s01 li a h2 { font-family: 'HSBombaram21-Regular'; font-size: 42px; color: #fff; margin-bottom: 6px; letter-spacing: 2px;} #sec0102 #sec01 ul.s01 li a h2 strong { font-size: 30px; font-weight: 300; margin-left: 4px;} #sec0102 #sec01 ul.s01 li a h4 {font-size: 24px; color: #f0f0f0; margin-bottom: 55px; font-weight: 600;} #sec0102 #sec01 ul.s01 li a p { font-size: 18px; color: #d1d1d1; line-height: 1.5;} #sec0102 #sec02 { position: relative; padding: 100px 0; text-align: center;} #sec0102 #sec02 ul.s02_1, #sec0102 #sec02 ul.s02_2 { display: flex; justify-content: center; gap: 40px;} #sec0102 #sec02 ul.s02_1 {margin-bottom: 40px;} #sec0102 #sec02 ul.s02_1 li, #sec0102 #sec02 ul.s02_2 li { position: relative; width: 440px; height: 600px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.2);} #sec0102 #sec02 ul.s02_1 li:nth-child(1), #sec0102 #sec02 ul.s02_2 li:nth-child(1) {border-radius: 250px 0 0 250px;} #sec0102 #sec02 ul.s02_1 li:nth-child(2) {border-radius: 0 0 250px 0;} #sec0102 #sec02 ul.s02_1 li:nth-child(3), #sec0102 #sec02 ul.s02_2 li:nth-child(2) {border-radius: 250px;} #sec0102 #sec02 ul.s02_1 li:nth-child(4), #sec0102 #sec02 ul.s02_2 li:nth-child(4) {border-radius:0 250px 250px 0;} #sec0102 #sec02 ul.s02_2 li:nth-child(3){border-radius: 250px 0 0 0;} #sec0102 #sec02 .hover-card { position: relative; width: 100%; height: 100%;} #sec0102 #sec02 .card-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;} #sec0102 #sec02 .card-content { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(194, 153, 94, 0.6) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 0 60px 27% 60px; box-sizing: border-box; opacity: 0; transform: translateY(20px); transition: all 0.4s ease-in-out; z-index: 2; text-align: left;} #sec0102 #sec02 .hover-card:hover .card-content { opacity: 1; transform: translateY(0); } #sec0102 #sec02 .hover-card:hover .card-img { transform: scale(1.05);} #sec0102 #sec02 .card-title {font-family: 'HSBombaram21-Regular'; color: #fff; font-size: 32px; margin-bottom: 30px;} #sec0102 #sec02 .card-desc { color: #e0e0e0; font-size: 18px; line-height: 1.5;} #sec03 {position: relative; background-color: #050505; color: #fff; text-align: center; height: 1000px; padding-top: 100px;} #sec03::before{ content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height:100%; background-image: linear-gradient(to top, transparent 80%, #000 100%), url('../img/main/s03_bg.jpg'); background-size: cover; background-position: center; z-index: 0; opacity: 0.8; background-position-y: top;} .video_wrapper{position:relative; width:50%; height:715px; margin:0 auto; background-color:#000;} .video_wrapper_full{} .videoIframe{position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; background-color:transparent;} .videoPoster{position:absolute; opacity:1; overflow:hidden; top:0px; left:0px; width:100%; height:100%; background-size:100%; border:none; text-indent:-999em; transition:opacity 800ms, height 0s; -webkit-transition:opacity 800ms, height 0s; -moz-transition:opacity 800ms, height 0s; -webkit-transition-delay:0s, 0s; -moz-transition-delay:0s, 0s; transition-delay:0s, 0s;background:url(../img/main/main_V.jpg) no-repeat 50% 50%; background-size:cover } .videoPoster:hover{cursor:pointer;} .videoPoster:before{content:''; position:absolute; top:50%; left:50%;transform: translate(-50%, -50%); z-index:2; width:96px; height:96px; background:url(../img/main/icon_play.png) no-repeat 50% 50%; background-size:100% auto; transition:border-color 300ms; border-radius:100%; -webkit-transition:border-color 300ms; -moz-transition:border-color 300ms;} .videoPoster:after{content:''; position:absolute; opacity:0.2; top:0; left:0; z-index:1; width:100%; height:100%; background:#000; transition:all 0.4s ease-out 0s;} .videoPoster:hover:after, .videoPoster:focus:after{opacity:0.4;} .videoPoster:hover:after, .videoPoster:focus:after{border-left-color:#f00;} .videoWrapperActive .videoPoster{opacity:0; height:0; -webkit-transition-delay:0s, 800ms; -moz-transition-delay:0s, 800ms; transition-delay:0s, 800ms;} @media all and ( max-width: 1920px ){ .video_wrapper{ width:900px; height:540px;} .videoPoster:before{ width:70px; height:70px;} .m_Txt {font-size: 50px;} .m_Txt strong{font-size: 62px;} .m_txt {font-size: 20px;} #sec0102 #sec01 {padding: 150px 0;} #sec0102 #sec01 ul.s01 {margin-top: 50px;} #sec0102 #sec01 ul.s01 li {height: 460px;} #sec0102 #sec01 ul.s01 li a h2 {font-size: 32px; letter-spacing: 1.3px;} #sec0102 #sec01 ul.s01 li a h2 strong {font-size: 24px;} #sec0102 #sec02 ul.s02_1 li, #sec0102 #sec02 ul.s02_2 li {height: 450px;} #sec0102 #sec02 .card-title {font-size: 24px;} #sec0102 #sec02 .card-desc { font-size: 16px; line-height: 1.2;} #sec0102 #sec02 .card-content { flex-direction: column; justify-content: center; padding: 0 14%; text-align: left;} #sec0102 #sec02 ul.s02_1 li:nth-child(1), #sec0102 #sec02 ul.s02_2 li:nth-child(1) {border-radius: 180px 0 0 180px;} #sec0102 #sec02 ul.s02_1 li:nth-child(2) {border-radius: 0 0 180px 0;} #sec0102 #sec02 ul.s02_1 li:nth-child(3), #sec0102 #sec02 ul.s02_2 li:nth-child(2) {border-radius: 180px;} #sec0102 #sec02 ul.s02_1 li:nth-child(4), #sec0102 #sec02 ul.s02_2 li:nth-child(4) {border-radius:0 180px 180px 0;} #sec0102 #sec02 ul.s02_2 li:nth-child(3){border-radius: 180px 0 0 0;} #sec03 { height: 1100px;} } @media all and ( max-width: 1680px ){ #MVisual {height: 72vh;} .video_wrapper{ height:500px;} } @media all and ( max-width: 1440px ){ #MVisual {height: 56vh;} .m_Txt {font-size: 40px;} .m_txt { font-size: 18px;} .m_img { margin: 15px 0 40px 0;} .m_img img { width: 40px; height: 40px;} #sec0102 #sec01 { padding: 80px 0;} #sec0102 #sec01 ul.s01 { margin-top: 40px; gap: 16px;} #sec0102 #sec01 ul.s01 li { width: 400px; height: 400px;} #sec0102 #sec01 ul.s01 li a h2 { font-size: 26px;letter-spacing: 1px; margin-bottom: 3px;} #sec0102 #sec01 ul.s01 li a h2 strong { font-size: 20px; } #sec0102 #sec01 ul.s01 li a h4 { font-size: 20px; margin-bottom: 30px;} #sec0102 #sec01 ul.s01 li a p {font-size: 16px;} #sec0102 #sec02 ul.s02_1, #sec0102 #sec02 ul.s02_2 {gap: 16px;} #sec0102 #sec02 ul.s02_1 { margin-bottom: 20px;} #sec03 { padding: 40px;} } @media all and ( max-width: 1280px ){ #sec03 { height: 1000px; } } @media all and ( max-width: 1152px ){ } @media all and ( max-width: 1024px ){ #MVisual {height: 65vh;} .video_wrapper{ width:600px; height:337px;} .m_Txt { font-size: 32px; } .m_Txt strong { font-size: 46px;} .m_txt { line-height: 1.3; font-size: 18px;} #sec0102 #sec01 ul.s01 li { height: 350px; } #sec0102 #sec01 ul.s01 { margin-top: 28px; gap: 8px; } #sec0102 #sec01 ul.s01 li a h2 { font-size: 22px; margin-bottom: 0;} #sec0102 #sec01 ul.s01 li a h4 { font-size: 18px;margin-bottom: 22px;} #sec0102 #sec02 ul.s02_1, #sec0102 #sec02 ul.s02_2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;} #sec0102 #sec02 ul.s02_1 li:nth-child(1), #sec0102 #sec02 ul.s02_2 li:nth-child(1),#sec0102 #sec02 ul.s02_2 li:nth-child(4), #sec0102 #sec02 ul.s02_1 li:nth-child(4) {border-radius: 150px 0 0 150px;} #sec0102 #sec02 ul.s02_1 li:nth-child(2) {border-radius: 0 0 150px 150px;} #sec0102 #sec02 ul.s02_1 li:nth-child(3), #sec0102 #sec02 ul.s02_2 li:nth-child(2) {border-radius: 150px;} #sec0102 #sec02 ul.s02_2 li:nth-child(3) {border-radius: 150px 150px 0 0;} } @media all and ( max-width: 900px ){ .video_wrapper{ width:500px; height:280px;} #MVisual { background: none; height: 100% !important;} #MVisual .mimg{ display:block; height: 100%;} #sec0102 #sec01 ul.s01 {display: block;} #sec0102 #sec01 ul.s01 li {width: 100%;} #sec0102 #sec01 ul.s01 li:nth-child(1) {border-radius: 50% 50% 0 0 ;} #sec0102 #sec01 ul.s01 li:nth-child(2) {margin: 10px 0;} #sec0102 #sec01 ul.s01 li:nth-child(3) {border-radius: 0 0 50% 50%;} #sec0102 #sec02 ul.s02_1 li, #sec0102 #sec02 ul.s02_2 li {width: 100%; height: 400px;} #sec0102 #sec02 {padding: 50px 0;} } @media all and ( max-width: 800px ){ } @media all and ( max-width: 640px ){ .video_wrapper{ width:340px; height:192px;} .videoPoster::before{ width:35px; height:35px;} #MVisual { height: 22vh;} .m_Txt {font-size: 24px;} .m_txt {font-size: 15px;} #sec0102 #sec01 ul.s01 li {height: 300px;} #sec0102 #sec01 ul.s01 li:nth-child(2) {margin: 6px 0;} #sec0102 #sec02 { padding: 0 0 50px 0;} #sec0102 #sec02 ul.s02_1 li, #sec0102 #sec02 ul.s02_2 li {height: 265px;} #sec0102 #sec02 .card-title { font-size: 20px;} #sec0102 #sec02 ul.s02_1 li, #sec0102 #sec02 ul.s02_2 li { border-radius: 50px ! important; } #sec0102 #sec02 ul.s02_1 { margin-bottom: 10px;} #sec0102 #sec02 .card-content {padding: 0 10%;} #sec0102 #sec02 .card-desc {font-size: 15px;} #sec03 { height: 750px; padding: 20px;} } @media all and ( max-width: 480px ){ }