/* ===== MAIN - VISUAL ===== */ .main-visual {position:relative;margin:0 auto;height:91vh;} .main-visual .visual-slider {overflow:hidden;position:absolute;left:50%;top:50%;width:100%;height:100%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);transform:translate(-50%, -50%); } .main-visual .visual-slider .swiper-slide {overflow:hidden;position:relative;height:100%;} .main-visual .visual-slider .swiper-slide .vs-bg {position:absolute;left:0;top:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center bottom;background-size:cover;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1); transition-duration:3s;} .main-visual .visual-slider .swiper-slide .vs-bg0{ background-image:url(../img/main/Visual_banner0.jpg);} .main-visual .visual-slider .swiper-slide .vs-bg1{ background-image:url(../img/main/Visual_banner1.jpg);} .main-visual .visual-slider .swiper-slide .vs-bg2{ background-image:url(../img/main/Visual_banner2.jpg);position: relative; overflow: hidden; } .main-visual .visual-slider .swiper-slide .vs-bg2:after{ content: "";position: absolute; top: 20%;left: 17%;width: 259px;height: 257px;background: url("../img/main/mv_2_1.png") no-repeat center / contain; animation: rotate 7.5s infinite linear; pointer-events: none; /* 클릭 방해 안되게 */} .main-visual .visual-slider .swiper-slide .vs-bg2:before{ content: "";position: absolute; bottom: 5%;left: 3%;width: 1109px;height: 398px;background: url("../img/main/mv_2_2.png") no-repeat center / contain; animation: bounce 3s infinite ease-in-out; pointer-events: none; /* 클릭 방해 안되게 */} .main-visual .visual-slider .swiper-slide .vs-bg3{ background-image:url(../img/main/Visual_banner3.jpg);} .main-visual .visual-slider .swiper-slide .vs-bg4{ background-image:url(../img/main/Visual_banner2.jpg);} @keyframes bounce { 0% { transform: translate3d(0px, 0, 0px); } 50% { transform: translate3d(0px, -15px, -15px); } 100% { transform: translate3d(0px, 0, 0px); } } @keyframes rotate { 0 { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .main-visual .visual-slider .swiper-slide .vs-txt {display:flex; flex-direction:column; justify-content:center; position:relative; margin:0 auto; max-width:150em; width:74%; height:100%; z-index:1; color:#fff;} .main-visual .visual-slider .swiper-slide .vs-txt h1, .main-visual .visual-slider .swiper-slide .vs-txt h2, .main-visual .visual-slider .swiper-slide .vs-txt p {opacity:0;;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px);} .main-visual .visual-slider .swiper-slide .vs-txt h1{font-size:85px;font-weight:700; } .main-visual .visual-slider .swiper-slide .vs-txt h2 {font-size:60px; margin:20px 0 30px 0;} .main-visual .visual-slider .swiper-slide .vs-txt p {font-size:25px;} .main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ font-size:30px;color:#fff;} .main-visual .visual-slider .swiper-button-prev { left:330px; } .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{position:absolute; background:none; display:flex;align-items: center;justify-content: center;width:70px; height:70px; top:auto; border-radius:50%; border:1px solid #fff; bottom:110px; z-index:10; } .main-visual .visual-slider .swiper-button-prev:after { display:none;} .main-visual .visual-slider .swiper-button-next { left:420px;} .main-visual .visual-slider .swiper-button-next:after { display:none;} .main-visual .visual-slider .swiper-pagination { position:absolute; right:auto; bottom: 15%; margin-top:0px; left:310px; font-size:20px;display:flex;align-items: center;justify-content: center;height:70px; z-index:10; width:100px; color:#ffffff; letter-spacing:0.333em;} .main-visual .visual-slider .swiper-pagination span { font-style:normal;} .main-visual .visual-slider .swiper-pagination span {font-style:normal;} .main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-bg {-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:transform 1.4s;-moz-transition:transform 1.4s;-ms-transition:transform 1.4s;-o-transition:transform 1.4s;transition:transform 1.4s;} .main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-txt h1, .main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-txt h2 {opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 1s, transform 1.4s;-moz-transition:opacity 1s, transform 1.4s;-ms-transition:opacity 1s, transform 1.4s;-o-transition:opacity 1s, transform 1.4s;transition:opacity 1s, transform 1.4s;} .main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-txt p {opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 1s, transform 1.4s;-moz-transition:opacity 1s, transform 1.4s;-ms-transition:opacity 1s, transform 1.4s;-o-transition:opacity 1s, transform 1.4s;transition:opacity 1s, transform 1.4s;-webkit-transition-delay:0.1s;-moz-transition-delay:0.1s;-ms-transition-delay:0.1s;-o-transition-delay:0.1s;transition-delay:0.1s;} .hide {position: absolute;left: -9999%;font-size: 0;line-height: 0;text-indent: -9999px;} @media all and ( max-width: 1920px ){ .main-visual .visual-slider .swiper-slide .vs-txt h1{font-size:75px;} .main-visual .visual-slider .swiper-slide .vs-txt h2 {font-size:50px;} .main-visual .visual-slider .swiper-slide .vs-txt p {font-size:20px;} .main-visual .visual-slider .swiper-pagination { margin-top:-230px; left:230px; font-size:17px;} .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{width:50px; height:50px;bottom:200px;} .main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ font-size:25px;} .main-visual .visual-slider .swiper-button-prev { left:250px; } .main-visual .visual-slider .swiper-button-next { left:320px;} .main-visual .visual-slider .swiper-slide .vs-bg2:after {width: 169px; height: 159px;} .main-visual .visual-slider .swiper-slide .vs-bg2:before{ width: 860px; height: 335px;} } @media all and ( max-width: 1440px ){ .main-visual {height:650px;} .main-visual .visual-slider .swiper-slide .vs-txt{ margin-top:-80px;} .main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:40px;} .main-visual .visual-slider .swiper-slide .vs-txt .sTit{ font-size:25px;} .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{ width:57px; height:57px;} .main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ line-height:57px; font-size:25px;} .main-visual .visual-slider .swiper-button-prev{ margin-top:-100px;} .main-visual .visual-slider .swiper-pagination{ width:57px; font-size:15px;} .main-visual .visual-slider .swiper-slide .vs-bg2:after { width: 135px; height: 145px;} .main-visual .visual-slider .swiper-slide .vs-bg2:before { width: 660px; height: 237px;} } @media all and ( max-width: 1280px ){ .main-visual .visual-slider .swiper-slide .vs-txt{ max-width:auto; width:auto; margin-left:10%; margin-top:0;} .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{ bottom:100px; width:50px; height:50px;} .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-pagination{ left:10%;} .main-visual .visual-slider .swiper-button-next{ left:calc(10% + 60px)} .main-visual .visual-slider .swiper-pagination{ margin-top:-200px;} .main-visual .visual-slider .swiper-slide .vs-bg2:after { display: none;} .main-visual .visual-slider .swiper-slide .vs-bg2:before { display: none;} } @media all and ( max-width: 1024px ){ .main-visual {height:550px;} .main-visual .visual-slider .swiper-slide .vs-txt h1{ font-size:50px;} .main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:25px; margin:10px 0 15px 0;} .main-visual .visual-slider .swiper-slide .vs-txt p{ font-size:17px;} .main-visual .visual-slider .swiper-pagination{ margin-top:-150px;} } @media all and ( max-width: 800px ){ .main-visual {height:450px;} } @media all and ( max-width: 640px ){ .main-visual {height:240px;} .main-visual .visual-slider .swiper-slide .vs-txt p{ display:none;} .main-visual .visual-slider .swiper-slide .vs-txt h1{ font-size:40px; line-height:40px;} .main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:20px;} .main-visual .visual-slider .swiper-pagination{ margin-top:-130px;} .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{ bottom:50px; width:40px; height:40px;} .main-visual .visual-slider .swiper-button-next{ left:calc(10% + 50px)} } .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:hidden; } .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 img{ width:100%;} #MVisual .mo{ display:none} .m_txt h3 { font-size: 25px; font-weight: bold; color: #37479e; margin-bottom: 10px;} .m_txt h1 {font-size: 74px; font-weight: 700; margin-bottom: 20px; line-height: 1.4;} .m_txt h1 strong{font-weight: 700; } /* 기본 설정 */ #sec01 { background: #f6f6f6; padding: 120px 0;} #sec01 .inner { display: flex; justify-content: space-between; align-items: center;} #sec01 .s01_L {flex-basis: 75%; flex-shrink: 0;} #sec01 .s01_R {flex-grow: 1; text-align: center;} #sec01 .s01_R img { width: 70%; height: auto; animation: float 3s ease-in-out infinite;} #sec01 .m_txt {position: relative;} #sec01 .m_txt a {position: absolute; bottom: 0; right: 0; display: inline-block; background: #37479e; color: #fff; padding: 13px 32px; border-radius: 30px;text-decoration: none; font-weight: 500; margin-top: 10px;transition: 0.3s; font-size: 20px;} #sec01 .m_txt a:hover { background: #23bcda;} #sec01 .s01_1 ul { display: flex; gap: 20px; margin-top: 40px; flex-wrap: wrap;} #sec01 .s01_1 li { background: #fff; border-radius: 20px; padding: 45px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); flex: 1 1 250px;} #sec01 .s01_1 h5 { font-size: 25px; font-weight: 700; margin-bottom: 10px;} #sec01 .s01_1 h5 strong { background:#37479e;color: #fff; border-radius: 50%; width: 70px; height: 70px; display: inline-flex;align-items: center; justify-content: center; font-size: 46px; margin-right: 8px; font-weight: 600;} #sec01 .s01_1 p { font-size: 20px; line-height: 1.6; color: #333;} #sec01 .s01_1 p span{font-weight: 500;} /* 애니메이션 */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } #sec02 { padding: 120px 0;} #sec02 .m_txt {position: relative; margin-bottom: 67px;} #sec02 .m_txt a {position: absolute; bottom: 0; right: 0; display: inline-block; background: #37479e; color: #fff; padding: 13px 32px; border-radius: 30px;text-decoration: none; font-weight: 500; margin-top: 10px;transition: 0.3s; font-size: 20px;} #sec02 .m_txt a:hover { background: #23bcda;} #sec02 .s02_1 ul { display: grid; grid-template-columns: repeat(6, 1fr);} #sec02 .s02_1 li {padding: 20px; border-left: 1px solid #999;} #sec02 .s02_1 li:first-child {border-left: none; } #sec02 .s02_1 h2 {font-size: 50px; color: #37479e; font-weight: bold; margin-bottom: 10px;} #sec02 .s02_1 h4 { font-size: 26px;font-weight: 700; margin-bottom: 10px;} #sec02 .s02_1 p { font-size: 20px; color: #555; margin-bottom: 10px; line-height: 1.5;} #sec02 .s02_1 img { width: 100%; height: auto; border-radius: 4px; display: block; object-fit: cover;} #sec03 {background: #f6f6f6; padding: 60px 0;} #sec03 .inner{display: flex;} #sec03 .s03_L {flex-basis: 35%; flex-shrink: 0;} #sec03 .s03_L img {width: 100%; height: auto;} #sec03 .s03_R {flex-grow: 1; padding: 30px;} #sec03 .s03_R .m_txt { position: relative; background: #37479e; display: flex; align-items: center; justify-content: space-between;padding: 36px; border-radius: 20px; margin-bottom: 20px;} #sec03 .s03_R .m_txt h1 { font-size: 34px; color: #fff; margin-bottom: 0; } #sec03 .s03_R .m_txt h3 {position: absolute; font-size: 20px; color: #fff; left: 210px; margin-bottom: 0;} #sec03 .s03_R .m_txt a img { width: 16px; height: 16px;border: 1px solid #fff; padding: 16px; border-radius: 10px;} #sec03 .s03_R .m_txt a img:hover{background: #1a2873;} #sec03 .s03_R .s03_b { border-top: 2px solid #2b2b29;} #sec03 .s03_R .s03_b li { display: flex; flex-wrap: wrap; padding:20px 50px; border-bottom: 1px solid #ddd; gap: 45px;} #sec03 .s03_R .s03_b li strong { flex: 0 0 100px; font-weight: bold; color: #002f9e; line-height: 1.6; letter-spacing: 2px; font-size: 24px;} #sec03 .s03_R .s03_b li p { flex: 1; line-height: 1.6; color: #333; font-size: 22px;} #sec04 {display: none; background: #f6f6f6; padding-bottom: 30px;} #sec04 ul{display: flex; justify-content: space-between; gap:15px;} #sec04 ul li{width: 25%; text-align: center; } #sec04 ul li a img{width: 100%;} @media all and ( max-width: 1920px ){ .m_txt h1 {font-size: 54px;} #sec01 .s01_1 li { padding: 25px; flex: 1 1 10%;} #sec01 .s01_1 h5 strong { width: 60px; height: 60px; font-size: 34px;} #sec02 .s02_1 h4 {font-size: 22px;} #sec03 .s03_L {flex-basis: 42%;} #sec03 .s03_R .m_txt {padding: 23px 40px;} #sec03 .s03_R .s03_b li { gap: 18px; padding: 14px 40px;} #sec03 .s03_R .s03_b li p {font-size: 20px;} } @media all and ( max-width: 1680px ){ #sec01 .s01_L {flex-basis: 75%;} #sec01 .s01_R {text-align: right;} #sec01 .s01_R img {width: 84%;} #sec02 .m_txt { margin-bottom: 46px;} #sec02 .s02_1 h2 {font-size: 36px;} #sec02 .s02_1 h4 {font-size: 20px;} } @media all and ( max-width: 1440px ){ #sec03 .s03_L {flex-basis: 35%;} #sec03 .s03_R .m_txt h1 {font-size: 30px;} #sec03 .s03_R .m_txt h3 {left: 190px;} #sec03 .s03_R .s03_b li { padding: 14px 10px; } #sec03 .s03_R .s03_b li strong {flex: 0 0 77px; font-size: 22px;} } @media all and ( max-width: 1280px ){ #sec01 {padding: 100px 0 60px 0;} #sec01 .inner {display: block;} #sec01 .s01_R {text-align: center; margin-top: 30px;} #sec01 .s01_R img { width: 40%;} #sec02 .s02_1 ul { grid-template-columns: repeat(3, 1fr); } #sec02 .s02_1 li { padding: 20px; border-left: none; margin: 3px; border: 1px solid #ddd ! important;} } @media all and ( max-width: 1152px ){ } @media all and ( max-width: 1024px ){ } @media all and ( max-width: 900px ){ #MVisual .pc{ display:none;} #MVisual .mo{ display:block} } @media all and ( max-width: 800px ){ .m_txt h1 { font-size: 30px; } .m_txt h3 { font-size: 18px; } #sec01 {padding: 60px 0;} #sec01 .s01_1 ul {display: block;} #sec01 .s01_1 li { margin-bottom: 10px;} #sec02 {padding: 60px 0;} #sec02 .s02_1 ul { grid-template-columns: repeat(2, 1fr);} #sec02 .s02_1 li { padding: 10px; } #sec03 .inner {display: block; } #sec03 .s03_L{ text-align: center;} #sec03 .s03_L img {width: 65%;} } @media all and ( max-width: 640px ){ .m_txt h1 { font-size: 26px; margin-bottom: 0;} #sec01 .m_txt a, #sec02 .m_txt a { position: unset; padding: 11px 24px; font-size: 16px;} #sec01 .s01_1 ul {margin-top: 10px;} #sec01 .s01_1 p, #sec02 .s02_1 p {font-size: 18px;} #sec02 .m_txt { margin-bottom: 10px;} #sec03 {padding: 30px 0;} #sec03 .s03_R {padding: 5px 0;} #sec03 .s03_R .s03_b li strong { flex: 0 0 70px; font-size: 20px;} #sec03 .s03_R .s03_b li p { font-size: 18px; } #sec03 .s03_R .m_txt { padding: 15px 29px; } #sec03 .s03_R .m_txt h1 { font-size: 22px;} #sec03 .s03_R .m_txt h3 { left: 130px;font-size: 16px;} #sec03 .s03_R .m_txt a img { width: 10px; height: 10px; padding: 13px; border-radius: 8px;} #sec04{display: block;} } @media all and ( max-width: 480px ){ #sec02 .s02_1 ul { grid-template-columns: 1fr;} }