/* ===== MAIN - VISUAL ===== */ .main-visual {position:relative;margin:0 auto;height:80vh;} .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-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);} .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_banner4.jpg);} .main-visual .visual-slider .swiper-slide .vs-bg5{ background-image:url(../img/main/Visual_banner5.jpg);} .main-visual .visual-slider .swiper-slide .vs-txt {display:flex; flex-direction:column; text-align:center; justify-content:center; position:relative; margin:0 auto; max-width:150em; width:85%; 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, .main-visual .visual-slider .swiper-slide .vs-txt img {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:50px;font-weight:600; } .main-visual .visual-slider .swiper-slide .vs-txt h2 {font-size:26px;} .main-visual .visual-slider .swiper-slide .vs-txt p {font-size:25px;} .main-visual .visual-slider .swiper-slide .ty01{ text-align:left; } .main-visual .visual-slider .swiper-slide .ty01 h1{ font-size:106px; line-height:116px; margin:15px 0 50px 0; font-weight:600;} .main-visual .visual-slider .swiper-slide .ty01 h1 b{ font-weight:900;} .main-visual .visual-slider .swiper-slide .ty01 p{ position:relative; font-size:24px; line-height:32px;} .main-visual .visual-slider .swiper-slide .ty01 a{color: #fff; border-radius: 40px; padding: 16px 60px; margin-top: 22px; position: absolute; bottom: 18%;} /*.main-visual .visual-slider .swiper-slide .ty02{ background:rgb(0,0,0,0.5); padding:130px 0;} .main-visual .visual-slider .swiper-slide .ty02 h1, .main-visual .visual-slider .swiper-slide .ty03 h1{ font-size:67px; font-weight:700; padding-bottom:15px;} .main-visual .visual-slider .swiper-slide .ty02 p, .main-visual .visual-slider .swiper-slide .ty03 p{ font-size:30px; line-height:40px;} .main-visual .visual-slider .swiper-slide .ty03{ color:#333;} .main-visual .visual-slider .swiper-slide .ty03 ul{justify-content: center; gap:0 70px; margin-top:70px;} .main-visual .visual-slider .swiper-slide .ty03 ul li span{ display:block; color:#4a65ac; } .main-visual .visual-slider .swiper-slide .ty03 ul li p{ font-weight:500; font-size:25px;} .main-visual .visual-slider .swiper-slide .ty03 ul li+li{ border-left:3px dotted #fff; padding-left:70px}*/ .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 { margin-left:-100px; } .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; left:50%; top:auto; border-radius:50%; border:1px solid #fff; bottom:150px; z-index:10; } .main-visual .visual-slider .swiper-button-prev:after { display:none;} .main-visual .visual-slider .swiper-button-next { } .main-visual .visual-slider .swiper-button-next:after { display:none;} .main-visual .visual-slider .swiper-pagination { position:absolute; right:auto; bottom:150px; left:50%; margin-left:70px; 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, .main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-txt img {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 .ty01 h1{ font-size:65px; line-height:72px; margin:7px 0 30px 0; } .main-visual .visual-slider .swiper-slide .ty01 p, .main-visual .visual-slider .swiper-slide .ty02 p{ font-size:20px; line-height:25px;} .main-visual .visual-slider .swiper-slide .ty02{ padding:100px 0;} .main-visual .visual-slider .swiper-slide .ty02 h1{ font-size:50px; font-weight:700;} .main-visual .visual-slider .swiper-slide .ty03 ul { margin-top:30px;} .main-visual .visual-slider .swiper-slide .ty03 ul li img{ width:200px;} .main-visual .visual-slider .swiper-slide .ty03 ul li p{ line-height:30px} .main-visual .visual-slider .swiper-pagination { font-size:17px; bottom:90px; height:50px;} .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{width:50px; height:50px;bottom:90px;} .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 { margin-left:-70px; } .main-visual .visual-slider .swiper-button-next {} } @media all and ( max-width: 1680px ){ .main-visual .visual-slider .swiper-slide .vs-txt{ width:87%;} } @media all and ( max-width: 1440px ){ .main-visual {height:650px;} .main-visual .visual-slider .swiper-slide .vs-txt{ width:87%;} .main-visual .visual-slider .swiper-slide .ty01 h1 { font-size: 60px; line-height: 65px; margin: 5px 0 20px 0;} .main-visual .visual-slider .swiper-slide .ty01 p{ font-size: 18px;line-height: 24px;} .main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:20px;} .main-visual .visual-slider .swiper-slide .ty01 a { padding: 13px 50px; bottom: 16%;} .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-pagination{ width:57px; font-size:15px;} } @media all and ( max-width: 1280px ){ .main-visual .visual-slider .swiper-slide .vs-txt{ } .main-visual .visual-slider .swiper-slide .ty01 h1{ font-size:60px; line-height:70px;} .main-visual .visual-slider .swiper-slide .ty01 p, .main-visual .visual-slider .swiper-slide .ty02 p, .main-visual .visual-slider .swiper-slide .ty03 p{ font-size:20px; line-height:25px;} .main-visual .visual-slider .swiper-slide .ty02{ padding:50px 15px;} .main-visual .visual-slider .swiper-slide .ty02 h1, .main-visual .visual-slider .swiper-slide .ty03 h1{ font-size:40px;} .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{ bottom:100px; width:50px; height:50px;} } @media all and ( max-width: 1024px ){ .main-visual .visual-slider .swiper-slide .ty01{ display:block;} .main-visual .visual-slider .swiper-slide .ty01 p{ margin-top:15px;} .main-visual .visual-slider .swiper-slide .ty01 p br, .main-visual .visual-slider .swiper-slide .ty02 p br, .main-visual .visual-slider .swiper-slide .ty03 p br{ display:none;} .main-visual .visual-slider .swiper-slide .ty02 h1 br{ display:none;} .main-visual .visual-slider .swiper-slide .ty02 h1, .main-visual .visual-slider .swiper-slide .ty03 h1{ font-size:35px;} .main-visual .visual-slider .swiper-slide .ty01 h1{ font-size:50px; line-height:60px;} .main-visual .visual-slider .swiper-slide .ty03 ul li{ width:calc((100% / 3) - 96px)} .main-visual .visual-slider .swiper-slide .ty03 ul li img{ width:100%;} } @media all and ( max-width: 800px ){ .main-visual .visual-slider .swiper-slide .ty03 ul{gap:0 20px;} .main-visual .visual-slider .swiper-slide .ty03 ul li p{ font-size:20px} .main-visual .visual-slider .swiper-slide .ty03 ul li+li { border-left: 3px dotted #fff; padding-left:20px;} .main-visual .visual-slider .swiper-slide .ty03 ul li{ width:calc((100% / 3) - 29px)} } @media all and ( max-width: 640px ){ .main-visual .visual-slider .swiper-slide .ty01 h1{ font-size:30px; line-height:35px;} .main-visual .visual-slider .swiper-slide .ty02 h1, .main-visual .visual-slider .swiper-slide .ty03 h1{ font-size:30px;} .main-visual .visual-slider .swiper-button-prev{ margin-left:-60px} .main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{ bottom:30px; width:40px; height:40px;} .main-visual .visual-slider .swiper-pagination{ bottom:30px; margin-left:60px} .main-visual .visual-slider .swiper-slide .ty02 h1{ font-size:25px;} .main-visual .visual-slider .swiper-slide .ty01 p, .main-visual .visual-slider .swiper-slide .ty02 p, .main-visual .visual-slider .swiper-slide .ty03 p{ font-size:17px;} .main-visual .visual-slider .swiper-slide .ty03 ul li span{ font-size:17px;} .main-visual { height: 380px;} .main-visual .visual-slider .swiper-slide .vs-txt h2 { font-size: 15px;} .main-visual .visual-slider .swiper-slide .ty01 h1 { font-size: 25px; line-height: 27px;} .main-visual .visual-slider .swiper-slide .ty01 p, .main-visual .visual-slider .swiper-slide .ty02 p, .main-visual .visual-slider .swiper-slide .ty03 p { font-size: 15px;line-height: 19px;} .main-visual .visual-slider .swiper-slide .ty01 a {padding: 9px 26px; bottom: 13%; font-size: 12px;} } @media all and ( max-width: 480px ){ .main-visual .visual-slider .swiper-slide .vs-txt h2 { font-size: 13px;} .main-visual .visual-slider .swiper-slide .ty01 h1 { font-size: 21px; line-height: 24px; margin: 2px 0 5px 0; } .main-visual .visual-slider .swiper-slide .ty01 p, .main-visual .visual-slider .swiper-slide .ty02 p, .main-visual .visual-slider .swiper-slide .ty03 p {font-size: 12px; line-height: 16px; margin-top: 0;} .main-visual .visual-slider .swiper-slide .ty01 a {bottom: 20%;} } .dl{ display:flex;} .dl dt{flex-shrink: 0;} .dl dd{flex-grow: 1;} .df{ display:flex; flex-wrap: wrap; } .mainh1 {font-size: 64px;font-weight: 700;} .mainp{font-size: 22px; font-weight: 500;} /*#sec01{ position:relative; background:url(../img/main/sec-01-01.jpg) no-repeat;background-attachment: fixed; background-size:cover; padding:150px 0; }*/ #sec01{padding: 60px 0;background: #f6f6f6;} #sec01 .inner{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;} #sec01 .inner a{background: #fff; border: 1px solid #ddd; padding: 30px; display: flex; align-items: center; justify-content: space-between; border-radius: 20px; font-size: 24px;} #sec01 .inner a:hover {} .clearfix:after{content:""; display:block; clear:both;} .cen1800{position:relative; width:100%; max-width:1800px; margin: 0 auto;} /* 뉴 메인 비주얼 */ .main_contents_wr{ position:relative; } .main_fxtitle_wr{position: -webkit-sticky; position:sticky; top:0; left:10%; width:50%; height:700px; display:flex; align-items: center;float:left; padding:180px;background:#fff; border-radius:150px 0 0 150px;} .main_fxtitle_wr:before{ content:''; position:absolute; top:0; right:-657px;display:inline-block; width:41%; height:100%; background:#fff;} .main_fxtitle_wr .area{ } .main_fxtitle_wr .area h1{ font-size:60px; color:#999; font-weight:500;} .main_fxtitle_wr .area h1 span{ color:#222;} .main_fxtitle_wr .area h2{ font-size:25px; border-bottom:1px #ddd solid; padding-bottom:50px;display:block; margin:50px 0; font-weight:400; color:#777;} .main_fxtitle_wr .area ul{gap:50px;} .main_fxtitle_wr .area ul li{ width:calc((100% / 3) - 50px)} .main_fxtitle_wr .area ul li strong{ color:#0054a6; font-size:30px; font-weight:700;} .main_fxtitle_wr .area ul li p{ color:#777; margin-top:15px;} .main_fxtitle_wr .result00{font-size:40px; line-height:45px; font-weight:300; color:#2a2a2a;} .main_fxtitle_wr .result00 b{font-weight:500;} .main_fxtitle_wr a.view_more{font-size:16px; color:#656565; font-weight:400; margin-top:80px; position:Relative; padding-right:20px;} .main_fxtitle_wr a.pc_view_more{display:inline-block;} .main_fxtitle_wr a.mo_view_more{display:none;} .main_fxtitle_wr a.view_more:before, .main_fxtitle_wr a.view_more:after{content:''; display:block; position:absolute; right:0px; top:50%; margin-top:-6px; width:2px; height:15px; background-color:#656565; -ms-transition-duration:0.3s; -webkit-transition-duration:0.3s; transition-duration:0.3s} .main_fxtitle_wr a.view_more:after{-ms-transform: rotate(90deg);-webkit-transform: rotate(90deg);transform: rotate(90deg);} .main_fxtitle_wr a.view_more:hover:before{background-color:#333; -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg);} .main_fxtitle_wr a.view_more:hover:after{background-color:#333; -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);} .main_fxtitle_wr a.view_more img{margin-top:-2px; margin-left:10px;} .main_fxtitle_wr.fix{position:fixed; width:95%; max-width:1770px;} .main_fxtitle_wr.btfix{position:absolute; width:100%; max-width:1770px; top:initial; bottom:292px;} #main_portfolio_box{position:relative;width:calc((100% - 60%) - 300px);float:right;} #main_portfolio_box ul{ padding:150px 0;} #main_portfolio_box li img{ width:400px;} #main_portfolio_box li+li{ margin-top:70px;} #sec02 dl{ border-top:3px #222 solid; padding:100px 0; margin-top:100px;} #sec02 dl dt{ flex-basis: 28%;} #sec02 h1 {font-size: 64px;} #sec03{text-align: center;padding-top: 120px; background: #f6f6f6;} #sec03 .mainp{margin: 10px 0 50px 0;} #sec03 .mainbox{display: grid; grid-template-columns: repeat(3, 1fr);} #sec03 .mainbox a { position: relative; display: flex; align-items: center; justify-content: flex-end; flex-direction: column; font-size: 32px; color: #fff; font-weight: 600; height: 600px; overflow: hidden; /* 확대되는 배경이 밖으로 나가지 않도록 */} /* ::before에 배경 이미지 삽입 */ .mainbox a::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; transform: scale(1); transition: transform 0.6s ease, filter 0.4s ease; z-index: 0;} /* 각 섹션별 이미지 지정 */ #sec03 .mainbox a:nth-child(1)::before { background-image: url(../img/main/sec03_1.jpg); } #sec03 .mainbox a:nth-child(2)::before { background-image: url(../img/main/sec03_2.jpg); } #sec03 .mainbox a:nth-child(3)::before { background-image: url(../img/main/sec03_3.jpg); } /* hover 시 배경 확대 + 어둡게 + 흐릿하게 */ .mainbox a:hover::before { transform: scale(1.025); /* 이미지만 확대 */ filter: brightness(0.7) blur(2px);} /* 텍스트는 blur에 영향받지 않음 */ .mainbox a p { position: relative; z-index: 1; /* 이미지 위에 표시 */ color: #fff; font-size: 36px; font-weight: 600;} .mainbox a span{ position: relative; z-index: 1; /* 이미지 위에 표시 */ background: rgba(0, 0, 0, 0.85);color: #fff; padding: 12px 60px; border-radius: 40px; margin: 2% 0 10% 0;font-size: 20px; transition: background 0.3s ease, transform 0.3s ease;} #sec04{text-align: center;padding-top: 120px; background: #f6f6f6;} #sec04 .mainp{margin: 10px 0 50px 0;} #sec04 .mainbox{display: grid; grid-template-columns: repeat(2, 1fr);} #sec04 .mainbox a { position: relative; display: flex; align-items: center; justify-content: flex-end; flex-direction: column; font-size: 32px; color: #fff; font-weight: 600; height: 400px; overflow: hidden; /* 확대되는 배경이 밖으로 나가지 않도록 */} #sec04 .mainbox a:nth-child(1)::before { background-image: url(../img/main/sec04_1.jpg); } #sec04 .mainbox a:nth-child(2)::before { background-image: url(../img/main/sec04_2.jpg); } #sec04 .mainbox a span {margin: 2% 0 6% 0;} @media all and ( max-width: 1920px ){ .mainbox a p, #sec03 .mainbox a p {font-size: 27px;} .main_fxtitle_wr{ padding:120px;} .main_fxtitle_wr:before{ content:''; position:absolute; top:0; right:-1000px;display:inline-block; width:1000px; height:100%; background:#fff;} .main_fxtitle_wr .area h1{ font-size:50px} .main_fxtitle_wr .area h2{ font-size:20px;} .main_fxtitle_wr .area ul li strong{ font-size:25px;} #sec01 .inner a {padding: 16px;} #sec01 .inner a img{width: 15%;} .mainh1, #sec02 h1{font-size: 52px;} #sec01 .inner a { font-size: 22px;} #sec01 {padding: 40px 0;} #sec03 .mainbox a { height: 400px; } #sec03 .mainbox a p { font-size: 32px; } #sec03 .mainbox a span { font-size: 18px; padding: 10px 50px; } #sec04 .mainbox a{ height: 250px; } } @media all and ( max-width: 1680px ){ .main_fxtitle_wr{ left:5%;} #main_portfolio_box{width: calc((100% - 60%) - 110px);} } @media all and ( max-width: 1280px ){ #sec02 .area{ padding:0 20px;} .main_fxtitle_wr{ position:relative; width:calc(100% - 240px); height:auto;} #main_portfolio_box{ display:none;} .main_fxtitle_wr::before{ display:none;} #sec03 .mainbox { grid-template-columns: repeat(2, 1fr); gap: 10px; } #sec03 .mainbox a { } #sec03 .mainbox a p { font-size: 28px; } #sec03 .mainbox a span { font-size: 17px; padding: 10px 40px; } } @media all and ( max-width: 1152px ){ } @media all and ( max-width: 1024px ){ .main_fxtitle_wr{ position:relative; width:calc(100% - 120px); padding:50px;border-radius: 50px 0 0 50px;} #sec02 dl{ display: inline-block; width: 100%; padding:50px 0; margin-top:50px;} #sec02 dl dt {margin-bottom:30px;} #sec02 dl dt br{ display:none; } } @media all and ( max-width: 960px ){ .main_fxtitle_wr .area h1{ font-size:40px;} .main_fxtitle_wr .area h2 br{ display:none;} .mainh1, #sec02 h1 { font-size: 46px;} .mainp {font-size: 20px;} #sec03 { padding-top: 80px; } #sec03 .mainbox { grid-template-columns: 1fr; gap: 2px; } #sec03 .mainbox a { } #sec03 .mainbox a p { font-size: 26px; } #sec03 .mainbox a span { font-size: 16px; padding: 10px 36px; } #sec04 .mainbox { grid-template-columns: repeat(1, 1fr);} } @media all and ( max-width: 640px ){ .mainh1 {font-size: 32px;} .mainp {font-size: 18px;} #sec01 .inner { grid-template-columns: repeat(1, 1fr);} #sec01 .inner a { font-size: 18px;} #sec02 h1 { font-size: 32px;} #sec03 { padding-top: 60px; } #sec03 .mainbox a {} .mainbox a p { font-size: 18px; } .mainbox a span { font-size: 14px; font-weight:400; padding: 8px 30px; } #sec03 .mainp, #sec04 .mainp {margin: 3px 0 20px 0;} #sec04 {padding-top: 60px;} #sec04 .mainbox a {height: 200px;} } @media all and ( max-width: 480px ){ .mainh1 { font-size: 22px;} .mainp { font-size: 14px;} #sec01 .inner a { padding: 15px 40px;} #sec01 .inner a img{ width: 15%;} #sec01 {padding: 35px 0;} #sec03 .mainbox a { height: 270px; } #sec03 .mainbox a p { font-size: 18px; } #sec03 .mainbox a span { font-size: 14px; padding: 6px 24px; } #sec03, #sec04 { padding-top: 42px;} }