.section {width:100%; height:auto; box-sizing: border-box;} .section:after {content: ''; display: block; clear: both; } /* com */ .layout {width:100%; margin:0 auto;padding:0 2%;box-sizing: border-box; } .main{width:100%; overflow:hidden;} .visual{text-align:center;} .main .txt{position:absolute; top:30%; left:100px; color:#fff; text-align:left;} .main .txt01{font-size: 4rem; font-weight:700;opacity:0;} .main .txt02{padding-top:20px; font-size:2rem; font-weight:500;opacity:0;} .active div .txt01{ animation: txtDisplay1 1.9s ;animation-delay: 500ms ;animation-fill-mode: forwards;} .active div .txt02{ animation: txtDisplay2 1.9s ;animation-delay: 1.5s ;animation-fill-mode: forwards;} .btn_w {margin:80px 0 0 0 ;} a .btn {border:1px solid #ccc; padding:20px 30px 18px; color:#fff;} .arr{padding-left:50px; } .visual1{width:100%; min-width:100%; height:100vh; background:url("/images/main/main_v1.jpg") 50% 0 ; background-size:cover;transition: 0.6s ease;} .visual2{width:100%; min-width:100%; height:100vh; background:url("/images/main/main_v2.jpg") 50% 0; background-size:cover;transition: 0.6s ease;} .visual3{width:100%; min-width:100%; height:100vh; background:url("/images/main/main_v3.jpg") 50% 0; background-size:cover;transition: 0.6s ease;} #business{background:url("/images/main/business_bg.jpg")center top; height: 100vh; padding:0 6.5vw; margin:0 auto; width:100%; max-width:1920px; position:relative; overflow:hidden;box-sizing: border-box;} #business .business_h{padding:120px 0 0 0; } #business .business_h div{ float:left;} #business .business_h .business_tit{ position:relative; width:35%; height:20vh; } #business .business_h .business_tit p{font-size: 4rem; font-weight:800; position:absolute; bottom:0;} #business .business_h .business_txt{font-size: 1rem; position:relative; width:50%; height:20vh;} #business .business_h .business_txt p{position:absolute; bottom:10px; font-weight:400;} #business .business_h .business_btn{position:relative; width:10%; height:20vh; float:right;} #business .business_h .business_btn span{position:absolute; bottom:10px; left:0; text-align:left;vertical-align:middle; line-height:30px; font-weight:400; font-size: 1rem;} #business .business_h .business_btn a span {border:1px solid #ccc; padding:22px 30px 18px 30px; color:#000; line-height:30px;} #business .business_h .business_btn a span .arr{padding:22px 0px 8px 6.5vw; border:0px solid #ccc;position:absolute;right:0; line-height:30px;} #business .business_w{position:absolute; bottom:0; width:86vw; max-width:1600px; height: 58vh; width:100%; } #business .business_c {width:86vw; max-width:1600px; height:100%; bottom:0; } /*#business .business_c { float:left; width:100%; height:58vh;; box-shadow:20px 20px 20px rgba(0,0,0,0.0); }*/ #business .business_c a .business_ban1 {background:url("/images/main/business_ban1.jpg")50% 0; width:21.5vw; max-width:400px; float:left; height: 58vh;;overflow:hidden; display: inline-block; padding: 0 0 0 0; min-width: 25%; position: relative;} #business .business_c a .business_ban2 {background:url("/images/main/business_ban2.jpg")50% 0; width:21.5vw; max-width:400px; float:left; height:58vh;; overflow:hidden; display: inline-block; padding: 0 0 0 0; min-width: 25%; position: relative;} #business .business_c a .business_ban3 {background:url("/images/main/business_ban3.jpg")50% 0; width:21.5vw; max-width:400px; float:left; height:58vh;; overflow:hidden; display: inline-block; padding: 0 0 0 0; min-width: 25%; position: relative;} #business .business_c a .business_ban4 {background:url("/images/main/business_ban4.jpg")50% 0; width:21.5vw; max-width:400px; float:left; height:58vh;; overflow:hidden; display: inline-block; padding: 0 0 0 0; min-width: 25%; position: relative;} #business .business_c a .business_ban1 p{padding:22vh 0; font-size: 2.5rem; font-weight:500; color:#fff; text-align:center; height:100%; width:100%; z-index:100; position: absolute;transition: 0.6s ease;} #business .business_c a .business_ban2 p{padding:22vh 0; font-size:2.5rem; font-weight:500; color:#fff; text-align:center; height:100%; width:100%;transition: 0.6s ease;} #business .business_c a .business_ban3 p{padding:22vh 0; font-size:2.5rem; font-weight:500; color:#fff; text-align:center; height:100%; width:100%;transition: 0.6s ease;} #business .business_c a .business_ban4 p{padding:22vh 0; font-size:2.5rem; font-weight:500; color:#fff; text-align:center; height:100%; width:100%;transition: 0.6s ease;} #business .business_c a div .hover{ position: absolute; background:rgba(0,0,0,0.5); width:21.5vw; z-index:100; left: 0; top: 0; height: 100%; overflow:hidden; display: inline-block; padding: 0 0 0 0;transition: 0.6s ease; } #business .business_c a div p.hover{padding:17vh 0; font-size: 2.5rem; font-weight:500; color:#fff; text-align:center; height:100%; width:100%; z-index:100;transition: 0.6s ease;} #business .business_c a div .plus_ico{display:none;transition: 0.6s ease;} #news{ height: 100vh; padding:0 6.5vw; margin:0 auto; width:100%; max-width:1920px; position:relative; overflow:hidden;box-sizing: border-box;} #news .news_h{padding:120px 0 0 0; width:100%; position:relative; } #news .news_h div{ } #news .news_h .news_btn{position:relative; width:10%; height:20vh; float:left;} #news .news_h .news_btn span{position:absolute; bottom:10px; left:0_; text-align:left;vertical-align:middle; line-height:30px; font-weight:400; font-size: 1rem;} #news .news_h .news_btn a span {border:1px solid #ccc; padding:22px 30px 18px 30px; color:#000; line-height:30px;} #news .news_h .news_btn a span .arr{padding:22px 0px 8px 6.5vw; border:0px solid #ccc;position:absolute;right:15px; line-height:30px;} #news .news_h .news_txt{font-size: 1rem; position:absolute; padding-left:15%; width:65%; height:20vh; float:left;} #news .news_h .news_txt p{position:absolute; bottom:10px; font-weight:400;} #news .news_h .news_tit{ position:relative; width:35%; height:20vh; float:right; text-align:right;} #news .news_h .news_tit p{font-size: 4rem; font-weight:800; position:absolute; bottom:0; right:0; float:right; } #news .news_w{width:100%; height: 58vh; position:relative_;padding-top:80px; clear:both;} /* #news .news_w div{width:32%; margin:0 2%; float:left;} #news .news_w div:first-child{width:32%; margin:0 0% !important;} #news .news_w div:last-child{width:32%; margin:0 0% !important;} #news .news_w div p.news_bg01{background:url("/images/main/ban_bg01.png")left top; height:220px; } #news .news_w div p.news_bg02{background:url("/images/main/ban_bg02.png")left top; height:220px; } #news .news_w div p.news_bg03{background:url("/images/main/ban_bg03.png")left top; height:220px; } #news .news_w div .news_tit{padding-top:60px;} #news .news_w div .news_tit a{color:#1B1B1B; font-weight:500; width:95%;overflow:hidden; white-space:nowrap;text-overflow:ellipsis;word-wrap:break-word;} #news .news_w div .news_txt{padding-top:40px;} #news .news_w div .news_txt a{color:#1B1B1B; width:98%;text-overflow:ellipsis; overflow: hidden;white-space:normal;-webkit-line-clamp: 2;-webkit-box-orient: vertical;display: -webkit-box;word-wrap:break-word;} #news .news_w div .news_date{font-weight:300; padding-top:40px;} */ #news .news_w .slick-list div div{width:32%; margin:0 0% !important; float:left;padding:0 1%;} #news .news_w .slick-list div div:first-child{width:32% ; margin:0 0% !important;} #news .news_w .slick-list div div:last-child{width:32% ; margin:0 0% !important;} #news .news_w .slick-list div div p.news_bg01{background:url("/images/main/ban_bg01.png")left top; height:220px; } #news .news_w .slick-list div div p.news_bg02{background:url("/images/main/ban_bg02.png")left top; height:220px; } #news .news_w .slick-list div div p.news_bg03{background:url("/images/main/ban_bg03.png")left top; height:220px; } #news .news_w .slick-list div div .news_tit{padding-top:60px; font-size: 1.5rem;} #news .news_w .slick-list div div .news_tit a{color:#000;font-size: 1.5rem; font-weight:500; width:95%;overflow:hidden; white-space:nowrap;text-overflow:ellipsis;word-wrap:break-word;}/* 20240514수정 */ #news .news_w .slick-list div div .news_txt{padding-top:40px;} #news .news_w .slick-list div div .news_txt a{color:#000;font-size: 1.2rem; width:98%;text-overflow:ellipsis; overflow: hidden;white-space:normal;-webkit-line-clamp: 2;-webkit-box-orient: vertical;display: -webkit-box;word-wrap:break-word;}/* 20240514수정 */ #news .news_w .slick-list div div .news_date{font-weight:300; padding-top:40px;} #cooperator{ height: 100vh; padding:0 6.5vw; margin:0 auto; width:100%; max-width:1920px; position:relative; overflow:hidden;box-sizing: border-box;} #cooperator .cooperator_h{padding:120px 0 0 0; } #cooperator .cooperator_h div{ float:left;} #cooperator .cooperator_h .cooperator_tit{ position:relative; width:45%; height:20vh; } #cooperator .cooperator_h .cooperator_tit p{font-size: 4rem; font-weight:800; position:absolute; bottom:0;} #cooperator .cooperator_h .cooperator_txt{font-size: 1rem; position:relative; width:55%; height:20vh;} #cooperator .cooperator_h .cooperator_txt p{position:absolute; bottom:10px; font-weight:400;} #cooperator .cooperator_h .cooperator_btn{position:relative; width:; height:20vh; float:right; font-weight:400; font-size: 1rem;} #cooperator .cooperator_h .cooperator_btn span{position:absolute; bottom:10px; left:0; text-align:left;vertical-align:middle; line-height:30px;} #cooperator .cooperator_h .cooperator_btn a span {border:1px solid #ccc; padding:22px 30px 18px 30px; color:#000; line-height:30px;} #cooperator .cooperator_h .cooperator_btn a span .arr{padding:22px 0px 8px 6.5vw; border:0px solid #ccc;position:absolute;right:0; line-height:30px;} #cooperator .cooperator_w{position: relative; clear:both; height: 58vh;; width:100%; max-width:1680px;} #cooperator .cooperator_w .cooperator_c div {width:22.3%; position: relative; margin-right:4%; margin-bottom:2vh; border:1px solid #ccc; float:left; } #cooperator .cooperator_w .cooperator_c :nth-child(4) {width:21%; margin-right:0px !important;} #cooperator .cooperator_w .cooperator_c :nth-child(8) {width:21%; margin-right:0px !important;} #cooperator .cooperator_w .cooperator_c {max-width:1680px; width:100%; position: relative; margin-top:250px; } #cooperator .cooperator_c div img{width:100%;} #cooperator .cooperator_c .cooperator_ban1 {background:url("/images/main/bottom_ban01_off.jpg")50% 50% no-repeat; float:left; height:10vh; line-height:10vh; display: inline-block; position: relative;} #cooperator .cooperator_c .cooperator_ban1:hover {background:url("/images/main/bottom_ban01_on.jpg")50% 50% no-repeat; float:left; height:10vh; line-height:10vh;overflow:hidden; display: inline-block; position: relative;} #cooperator .cooperator_c .cooperator_ban2 {background:url("/images/main/bottom_ban02_off.jpg")50% 50% no-repeat; float:left; height:10vh; line-height:10vh;overflow:hidden; display: inline-block; position: relative;} #cooperator .cooperator_c .cooperator_ban2:hover {background:url("/images/main/bottom_ban02_on.jpg")50% 50% no-repeat; float:left; height:10vh; line-height:10vh;overflow:hidden; display: inline-block; position: relative;} #cooperator .cooperator_c .cooperator_ban3 {background:url("/images/main/bottom_ban03_off.jpg")50% 50% no-repeat; float:left; height:10vh; line-height:10vh;overflow:hidden; display: inline-block; position: relative;} #cooperator .cooperator_c .cooperator_ban3:hover {background:url("/images/main/bottom_ban03_on.jpg")50% 50% no-repeat; float:left; height:10vh; line-height:10vh;overflow:hidden; display: inline-block; position: relative;} #cooperator .cooperator_c .cooperator_ban4 {margin-right:0px !important; background:url("/images/main/bottom_ban04_off.jpg")50% 50% no-repeat; float:left; height:10vh; line-height:10vh;overflow:hidden; display: inline-block; position: relative;} #cooperator .cooperator_c .cooperator_ban4:hover {margin-right:0px !important; background:url("/images/main/bottom_ban04_on.jpg")50% 50% no-repeat; float:left; height:10vh; line-height:10vh;overflow:hidden; display: inline-block; position: relative;} #cooperator .cooperator_c .cooperator_ban5 {background:url("/images/main/bottom_ban05_off.jpg")50% 50% no-repeat; float:left; height:10vh; line-height:10vh;overflow:hidden; display: inline-block; position: relative;} #cooperator .cooperator_c .cooperator_ban5:hover {background:url("/images/main/bottom_ban05_on.jpg")50% 50% no-repeat; float:left; height:10vh; line-height:10vh;overflow:hidden; display: inline-block; position: relative;} #cooperator .cooperator_c .cooperator_ban6 {background:url("/images/main/bottom_ban06_off.jpg")50% 50% no-repeat; float:left; height:10vh; line-height:10vh;overflow:hidden; display: inline-block; position: relative;} #cooperator .cooperator_c .cooperator_ban6:hover {background:url("/images/main/bottom_ban06_on.jpg")50% 50% no-repeat; float:left; height:10vh; line-height:10vh;overflow:hidden; display: inline-block; position: relative;} #cooperator .cooperator_c .cooperator_ban7 {background:url("/images/main/bottom_ban07_off.jpg")50% 50% no-repeat; float:left; height:10vh; line-height:10vh;overflow:hidden; display: inline-block; position: relative;} #cooperator .cooperator_c .cooperator_ban7:hover {background:url("/images/main/bottom_ban07_on.jpg")50% 50% no-repeat; float:left; height:10vh; line-height:10vh;overflow:hidden; display: inline-block; position: relative;} #cooperator .cooperator_c .cooperator_ban8 {margin-right:0px !important;background:url("/images/main/bottom_ban08_off.jpg")50% 50% no-repeat; float:left; height:10vh; line-height:10vh;overflow:hidden; display: inline-block; position: relative;} #cooperator .cooperator_c .cooperator_ban8:hover {margin-right:0px !important;background:url("/images/main/bottom_ban08_on.jpg")50% 50% no-repeat; float:left; height:10vh; line-height:10vh;overflow:hidden; display: inline-block; position: relative;} #cooperator .cooperator_c .cooperator_ban9 {background:url("/images/main/bottom_ban09_off.jpg")50% 50% no-repeat; float:left; height:10vh; line-height:10vh;overflow:hidden; display: inline-block; position: relative;} #cooperator .cooperator_c .cooperator_ban9:hover {background:url("/images/main/bottom_ban09_on.jpg")50% 50% no-repeat; float:left; height:10vh; line-height:10vh;overflow:hidden; display: inline-block; position: relative;} #cooperator .cooperator_c .cooperator_ban10 {background:url("/images/main/bottom_ban10_off.jpg")50% 50% no-repeat; float:left; height:10vh; line-height:10vh;overflow:hidden; display: inline-block; position: relative;} #cooperator .cooperator_c .cooperator_ban10:hover {background:url("/images/main/bottom_ban10_on.jpg")50% 50% no-repeat; float:left; height:10vh; line-height:10vh;overflow:hidden; display: inline-block; position: relative;} #cooperator .cooperator_c .cooperator_ban11 {background:url("/images/main/bottom_ban11_off.jpg")50% 50% no-repeat; float:left; height:10vh; line-height:10vh;overflow:hidden; display: inline-block; position: relative;} #cooperator .cooperator_c .cooperator_ban11:hover {background:url("/images/main/bottom_ban11_on.jpg")50% 50% no-repeat; float:left; height:10vh; line-height:10vh;overflow:hidden; display: inline-block; position: relative;} @media all and (max-width:1280px) { .main .txt{position:absolute; top:30%; left:50px; color:#fff; text-align:left;} .main .txt01{font-size: 3rem; font-weight:700;} .main .txt02{padding-top:20px; font-size:1.8rem; font-weight:500;} #business .business_h .business_tit p{font-size: 3rem;} #business .business_h .business_txt{width:47%; } #business .business_h .business_btn{width:13%; } #business .business_h .business_btn a span {padding:15px 20px 10px 20px; } #business .business_h .business_btn a span .arr{padding:15px 0px 0px 8vw;} #business{height: 90vh; } #business .business_w{height: 48vh; } #business .business_c a .business_ban1 p.hover{font-size: 2rem; } #business .business_c a .business_ban1 p{font-size: 2rem; } #business .business_c a .business_ban2 p.hover{font-size: 2rem; } #business .business_c a .business_ban2 p{font-size: 2rem; } #business .business_c a .business_ban3 p.hover{font-size: 2rem; } #business .business_c a .business_ban3 p{font-size: 2rem; } #business .business_c a .business_ban4 p.hover{font-size: 2rem; } #business .business_c a .business_ban4 p{font-size: 2rem; } .prev, .next {top:350px !important;} .slideshow-container { max-width: 1280px !important; position: relative; margin: auto;} #news{ height: 90vh; } #news .news_w{height: 50vh; }/*20240514수정*/ #news .news_h{padding:60px 0 0 0; width:100%; position:relative; } #news .news_h .news_btn{width:13%; position:absolute; left:0;} #news .news_h .news_btn a span {padding:15px 20px 10px 20px; } #news .news_h .news_btn a span .arr{padding:15px 0px 0px 8vw; } #news .news_h .news_tit p{font-size: 3rem; } #news .news_h .news_txt{width:60%; position:absolute; padding-left:15%;} /* #news .news_w div .news_tit{font-size: 1.3rem; font-weight:500; padding-top:40px;} #news .news_w div .news_txt{font-size: 1rem; padding-top:30px; } #news .news_w div .news_date{padding-top:20px;} #news .news_w div p.news_bg01{height:180px; } #news .news_w div p.news_bg02{height:180px; } #news .news_w div p.news_bg03{height:180px; } */ #news .news_w .slick-list div div .news_tit{font-size: 1.3rem; font-weight:500; padding-top:40px;} #news .news_w .slick-list div div .news_txt{font-size: 1rem; padding-top:30px; } #news .news_w .slick-list div div .news_date{padding-top:20px;} #news .news_w .slick-list div div p.news_bg01{height:180px; } #news .news_w .slick-list div div p.news_bg02{height:180px; } #news .news_w .slick-list div div p.news_bg03{height:180px; } #cooperator{ height: 90vh; } #cooperator .cooperator_w .cooperator_c div { margin-bottom:2vh; border:1px solid #ccc; float:left; } #cooperator .cooperator_w{ height: 48vh; } #cooperator .cooperator_h .cooperator_tit p{font-size: 3rem;} #cooperator .cooperator_h .cooperator_tit{width:45%; height:20vh; } #cooperator .cooperator_h .cooperator_txt{width:55%; } #cooperator .cooperator_h .cooperator_btn{} #cooperator .cooperator_h .cooperator_btn a span {padding:15px 20px 10px 20px; } #cooperator .cooperator_h .cooperator_btn a span .arr{padding:15px 0px 0px 8vw; } #cooperator .cooperator_c .cooperator_ban1 { background-size:80%; height:8vh; line-height:8vh;} #cooperator .cooperator_c .cooperator_ban1:hover { background-size:80%; height:8vh; line-height:8vh;} #cooperator .cooperator_c .cooperator_ban2 { background-size:80%; height:8vh;} #cooperator .cooperator_c .cooperator_ban2:hover { background-size:80%; height:8vh;} #cooperator .cooperator_c .cooperator_ban3 { background-size:80%; height:8vh;} #cooperator .cooperator_c .cooperator_ban3:hover { background-size:80%; height:8vh;} #cooperator .cooperator_c .cooperator_ban4 { background-size:80%; height:8vh;} #cooperator .cooperator_c .cooperator_ban4:hover { background-size:80%; height:8vh;} #cooperator .cooperator_c .cooperator_ban5 { background-size:80%; height:8vh;} #cooperator .cooperator_c .cooperator_ban5:hover { background-size:80%; height:8vh;} #cooperator .cooperator_c .cooperator_ban6 { background-size:80%; height:8vh;} #cooperator .cooperator_c .cooperator_ban6:hover { background-size:80%; height:8vh;} #cooperator .cooperator_c .cooperator_ban7 { background-size:80%; height:8vh;} #cooperator .cooperator_c .cooperator_ban7:hover { background-size:80%; height:8vh;} #cooperator .cooperator_c .cooperator_ban8 { background-size:80%; height:8vh;} #cooperator .cooperator_c .cooperator_ban8:hover { background-size:80%; height:8vh;} #cooperator .cooperator_c .cooperator_ban9 { background-size:80%; height:8vh;} #cooperator .cooperator_c .cooperator_ban9:hover { background-size:80%; height:8vh;} #cooperator .cooperator_c .cooperator_ban10 { background-size:80%; height:8vh;} #cooperator .cooperator_c .cooperator_ban10:hover { background-size:80%; height:8vh;} #cooperator .cooperator_c .cooperator_ban11 { background-size:80%; height:8vh;} #cooperator .cooperator_c .cooperator_ban11:hover { background-size:80%; height:8vh;} } @media all and (max-width:1024px) { .dot_w{ right:10px !important;} .main .txt{position:absolute; top:30%; left:50px; color:#fff; text-align:left;} .main .txt01{font-size: 2.5rem; font-weight:700;} .main .txt02{padding-top:20px; font-size:1.3rem; font-weight:500;} #business{ max-width:1024px !important; } #business{padding:0 0vw; height: 75vh; } #business .business_w{height: 40vh; } #business .business_w { padding-top:70_px;} #business .business_h{padding:0px 30px 0 30px; } #business .business_c {width:120vw;} #business .business_h .business_tit{ width:100%; } #business .business_h .business_tit p{font-size: 2.5rem;} #business .business_h .business_txt{font-size: 1rem; float:left; width:85%; height:8vh;} #business .business_h .business_btn{ width:15%; float:right;height:8vh; font-weight:400; font-size: 1rem; text-align:right; } #business .business_h .business_btn a span {width:15%; padding:10px 20px 5px 20px; min-width:120px; } #business .business_h .business_btn a span .arr{padding:15px 15px 0px 0px; position:absolute; text-align:right; } #business .business_c a .business_ban1 img{width:15%;} #business .business_c a .business_ban1 p, #business .business_c a .business_ban2 p, #business .business_c a .business_ban3 p, #business .business_c a .business_ban4 p{padding:5.5vh 0 0; font-size:1.3rem;} #business .business_c a .business_ban1, #business .business_c a .business_ban2, #business .business_c a .business_ban3, #business .business_c a .business_ban4 { width: 50vw;max-width: 600px; height:20vh; min-width: 50%;} #business .business_c a div .hover{ background:rgba(0,0,0,0.5);transition: 0.6s ease; } #business .business_c a div p.hover{padding:3vh 0; font-size: 1.5rem !important; transition: 0.6s ease;} #business .business_c a div .plus_ico{display:none;transition: 0.6s ease;} #business .business_c a div .plus_ico img{width:14%;} #news{ max-width:1024px !important; overflow:hidden; height:100%;}/*20240514수정*/ #news .news_h .news_tit{padding-top:30px; padding-left:10px; width:100%; position:relative_; } #news .news_h .news_tit p{font-size: 2.5rem;} #news .news_h .news_txt { position: absolute; top:18vh; right:30px !important; font-size: 1.0rem; padding-top:30px; right:0vw; width:85%; height:9vh; float:right !important; text-align:right !important; } #news .news_h .news_txt p { position: absolute; bottom: 10px; right:0; font-weight: 400;} #news .news_w { padding-top:200px;} #news .news_w{height: 40vh; } /* #news .news_w div{width:48%; margin:0 2%; float:left;} #news .news_w div:first-child{width:48%; margin:0 0% !important;} #news .news_w div:last-child{width:48%; margin:0 0% !important;} #news .news_w div p.news_bg01{height:150px; } #news .news_w div p.news_bg02{height:150px; } #news .news_w div p.news_bg03{height:150px; } #news .news_w .news_txt{font-size: 1rem; padding-top:10px; padding-left:10px; width:85%;} #news .news_w .news_date{font-weight:300; padding-top:0px; padding-left:10px;} */ #news .news_w .slick-list div div{width:48%; margin:0 0%; padding: 0 1%; float:left;} #news .news_w .slick-list div div p.news_bg01{height:150px; } #news .news_w .slick-list div div p.news_bg02{height:150px; } #news .news_w .slick-list div div p.news_bg03{height:150px; } #news .news_w .slick-list div div .news_tit{padding-top:30px;} #news .news_w .slick-list div div .news_txt{font-size: 1rem; padding-top:20px; padding-left:10px; width:85%;} #news .news_w .slick-list div div .news_date{font-size: 0.9rem;font-weight:300; padding-top:20px; padding-left:10px;} #news_h{ display: -webkit-box; display: -moz-box; display: box; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; } #news_tit { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; box-ordinal-group: 1; } #news_txt { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; box-ordinal-group: 2; text-align:right; } #news .news_h .news_btn{position: absolute; top:20vh; left:30px;width:80%; height:8vh; float:left !important; text-align:left !important; font-weight:400; font-size: 1rem;} #news .news_h .news_btn a span {width:15%; padding:10px 20px 5px 20px; min-width:120px; } #news .news_h .news_btn a span .arr{padding:15px 15px 0px 0px; position:absolute; text-align:right; } #news{padding:0 0vw; height: 55vh; } #news .news_h{padding:0px 30px; } #cooperator .cooperator_h .cooperator_tit{ width:100%; } #cooperator .cooperator_h .cooperator_txt{font-size: 1rem; float:left; width:85%; height:8vh; clear:both;} #cooperator .cooperator_h .cooperator_btn{ width:15%; float:right;height:8vh; font-weight:400; font-size: 1rem; text-align:right; } #cooperator .cooperator_h .cooperator_btn a span {width:15%; padding:15px 20px 10px 20px; min-width:120px; } #cooperator .cooperator_h .cooperator_btn a span .arr{padding:15px 15px 0px 0px; position:absolute; text-align:right; } #cooperator { max-width:1024px !important;} #cooperator{ padding:0 0vw; height: 82vh; } #cooperator .cooperator_w{ height: 40vh; } #cooperator .cooperator_h{padding:0px 30px 0 30px; } #cooperator .cooperator_h .cooperator_tit p{font-size: 2.5rem;} #cooperator .cooperator_w .cooperator_c {padding-top:20px;} #cooperator .cooperator_w .cooperator_c div {margin:0 2.1%; margin-bottom:2vh; border:1px solid #ccc; width:20%; float:left;} .prev, .next {top:350px !important;} .slideshow-container { max-width: 1000px !important; position: relative; margin: auto;} } @media all and (max-width:840px) { } /* 모바일 사이즈 수정 */ @media all and (max-width:855px) { .main .txt { left: 20px;} .main .txt01 { font-size: 1.9rem;} .main .txt01 img{width:60%;} .main .txt02 { font-size: 1.2rem;} #business {height: 85vh; margin-top:50px;} #business .business_h{padding:50px 30px 0 30px; overflow:hidden; } #business .business_h .business_txt { width: 100%;} #business .business_h .business_btn{ width:100%; } #business .business_h .business_btn span{ font-size: 0.9rem !important;}/* 20240514추가 */ #business .business_c a .business_ban1 p, #business .business_c a .business_ban2 p, #business .business_c a .business_ban3 p, #business .business_c a .business_ban4 p{padding:4.5vh 0 0; font-size:1.3rem;} /* #news .news_w div .news_tit{font-size: 1.2rem; padding-top:20px; padding-left:10px; } #news .news_w .news_txt{padding-top:20px; padding-left:10px; width:85%;} #news .news_w .news_date{ padding-top:10px; padding-left:10px;} */ #news {margin-top:50px; height: 75vh;} #news .news_w .slick-list div div .news_tit{font-size: 1.2rem; padding-top:20px; padding-left:10px; } #news .news_w .slick-list div div .news_txt{padding-top:10px; padding-left:10px; width:85%;} #news .news_w .slick-list div div .news_date{ padding-top:10px; padding-left:10px;} #news .news_h {padding:50px 30px 0 50px;} #news .news_h .news_txt { width: 100%; top: 25vh; width: 100%;} #business .business_c a div .plus_ico img{width:0%;} #news .news_h .news_btn { width:93%; ; float: right !important; top:33vh; text-align: right !important; clear:both;}/* 20240514수정 */ #news .news_h .news_btn span{ right:0 !important; font-size:0.9rem !important;}/* 20240514추가 */ #news .news_w { padding-top: 230px;} /*#news { height: 85vh;}*/ #cooperator {margin-top:50px;} #cooperator .cooperator_h .cooperator_btn{ font-size: 0.9rem !important; }/* 20240514추가 */ #cooperator .cooperator_w .cooperator_c { margin-top:10px; }/* 20240514추가 */ #cooperator .cooperator_w .cooperator_c :nth-child(2) {width:45%; margin-right:0px !important;} #cooperator .cooperator_w .cooperator_c :nth-child(4) {width:45%; margin-right:0px !important;} #cooperator .cooperator_w .cooperator_c :nth-child(6) {width:45%; margin-right:0px !important;} #cooperator .cooperator_w .cooperator_c :nth-child(8) {width:45%; margin-right:0px !important;} #cooperator .cooperator_w .cooperator_c :nth-child(10) {width:45%; margin-right:0px !important;} #cooperator .cooperator_w { height:auto; overflow:hidden; margin-bottom:100px;} #cooperator .cooperator_h{padding:50px 0 0 30px; } #cooperator .cooperator_h .cooperator_txt { width: 100%;} #cooperator .cooperator_h .cooperator_btn{ width:100%; } #cooperator .cooperator_w .cooperator_c div {width:45%; position: relative; margin-right:2.5%; margin-bottom:2vh; border:1px solid #ccc;float:left; } #cooperator .cooperator_w .cooperator_c div img{width:100%;} #cooperator .cooperator_c .cooperator_ban1, #cooperator .cooperator_c .cooperator_ban1:hover, #cooperator .cooperator_c .cooperator_ban2, #cooperator .cooperator_c .cooperator_ban2:hover, #cooperator .cooperator_c .cooperator_ban3, #cooperator .cooperator_c .cooperator_ban3:hover, #cooperator .cooperator_c .cooperator_ban4, #cooperator .cooperator_c .cooperator_ban4:hover #cooperator .cooperator_c .cooperator_ban5, #cooperator .cooperator_c .cooperator_ban5:hover, #cooperator .cooperator_c .cooperator_ban6, #cooperator .cooperator_c .cooperator_ban6:hover, #cooperator .cooperator_c .cooperator_ban7, #cooperator .cooperator_c .cooperator_ban7:hover, #cooperator .cooperator_c .cooperator_ban8, #cooperator .cooperator_c .cooperator_ban8:hover, #cooperator .cooperator_c .cooperator_ban9, #cooperator .cooperator_c .cooperator_ban9:hover, #cooperator .cooperator_c .cooperator_ban10, #cooperator .cooperator_c .cooperator_ban10:hover, #cooperator .cooperator_c .cooperator_ban11, #cooperator .cooperator_c .cooperator_ban11:hover {background-size:50% !important; } #cooperator .cooperator_c .cooperator_ban5{background-size:50% !important; } #cooperator { height:auto;} .slideshow-container { position: relative; margin: auto;} } @media all and (max-width:640px) { #business .business_h .business_btn{ width:100%; } #business .business_h { padding: 30px 2% 30px 2%;} #business {height: 100vh;} #business .business_w { height: 60vh;} #business .business_c{width: 96%; margin:0 2% } #business .business_c a .business_ban1 { width: 93vw; max-width: 640px; height: 15vh; min-width: 100%; } #business .business_c a .business_ban2 { width: 93vw; max-width: 640px; height: 15vh; min-width: 100%; } #business .business_c a .business_ban3 { width: 93vw; max-width: 640px; height: 15vh; min-width: 100%; } #business .business_c a .business_ban4 { width: 93vw; max-width: 640px; height: 15vh; min-width: 100%; } #business .business_c a .business_ban1 img{width:5%;} #business .business_c a .business_ban1 p{padding:4vh 0; font-size: 1.3rem; } #business .business_c a .business_ban2 p{padding:4vh 0; font-size:1.3rem; } #business .business_c a .business_ban3 p{padding:4vh 0; font-size:1.3rem;} #business .business_c a .business_ban4 p{padding:4vh 0; font-size:1.3rem;} #news { height: 81vh;} #business .business_w { height: 60vh;} #news .news_h .news_txt { width: 90%; top: 22.5vh; right:2% !important; width: 100%;} #news .news_h .news_txt p { position: relative; } #news .news_w {width:96%; margin:0 2%; padding-top: 150px;} #news .news_h .news_btn{ top:34vh; width:89%;} /* #news .news_w div{width:100%; } #news .news_w div:first-child{width:100%; } #news .news_w div:last-child{width:100%; } */ #news .news_w .slick-list div div{width:100%; margin:0 0%; padding: 0 1%;} #news .news_w .slick-list div div .news_tit{padding-top:10px;font-size: 1.1rem;} #news .news_w .slick-list div div .news_txt{font-size: 0.9rem; padding-top:10px; padding-left:10px; width:85%;} #news .news_w .slick-list div div .news_date{font-size: 0.8rem;font-weight:300; padding-top:5px; padding-left:10px;} #news .news_h { padding: 30px 2% 0 2%;} #cooperator {height: 100vh;} #cooperator .cooperator_h { padding: 30px 2% 0 2%;} #cooperator .cooperator_w .cooperator_c div { border: 1px solid #ccc; width: 43.6vw; float: left;} #cooperator .cooperator_w { height: 60vh;} #cooperator .cooperator_c .cooperator_ban1 { background-size:60%; height:7vh;} #cooperator .cooperator_c .cooperator_ban1:hover { background-size:60%; height:7vh;} #cooperator .cooperator_c .cooperator_ban2 { background-size:60%; height:7vh;} #cooperator .cooperator_c .cooperator_ban2:hover { background-size:60%; height:7vh;} #cooperator .cooperator_c .cooperator_ban3 { background-size:60%; height:7vh;} #cooperator .cooperator_c .cooperator_ban3:hover { background-size:60%; height:7vh;} #cooperator .cooperator_c .cooperator_ban4 { background-size:60%; height:7vh;} #cooperator .cooperator_c .cooperator_ban4:hover { background-size:60%; height:7vh;} #cooperator .cooperator_c .cooperator_ban5 { background-size:60%; height:7vh;} #cooperator .cooperator_c .cooperator_ban5:hover { background-size:60%; height:7vh;} #cooperator .cooperator_c .cooperator_ban6 { background-size:60%; height:7vh;} #cooperator .cooperator_c .cooperator_ban6:hover { background-size:60%; height:7vh;} #cooperator .cooperator_c .cooperator_ban7 { background-size:60%; height:7vh;} #cooperator .cooperator_c .cooperator_ban7:hover { background-size:60%; height:7vh;} #cooperator .cooperator_c .cooperator_ban8 { background-size:60%; height:7vh;} #cooperator .cooperator_c .cooperator_ban8:hover { background-size:60%; height:7vh;} #cooperator .cooperator_c .cooperator_ban9 { background-size:60%; height:7vh;} #cooperator .cooperator_c .cooperator_ban9:hover { background-size:60%; height:7vh;} #cooperator .cooperator_c .cooperator_ban10 { background-size:60%; height:7vh;} #cooperator .cooperator_c .cooperator_ban10:hover { background-size:60%; height:7vh;} #cooperator .cooperator_c .cooperator_ban11 { background-size:60%; height:7vh;} #cooperator .cooperator_c .cooperator_ban11:hover { background-size:60%; height:7vh;} .slideshow-container { max-width: 640px !important; position: relative; margin: auto;} .partner {padding:0 !important;} .partner_pad { height:100px !important;} } @media all and (max-width:540px) { #news .news_h .news_btn{ top:34vh; width:92%;} #news { height: 85vh;} #news .news_w {padding-top: 180px;} } @media all and (max-width:450px) { #news .news_h .news_btn{ width:91%;} #news { height: 75vh;} #news .news_h .news_btn{ top:30vh} #news .news_w {margin:20px 2%; padding-top: 120px;} } @media all and (max-width:400px) { #business { margin-top:0px;} #news {margin-top:0px; #news { height: 80vh;}} #news { height: 85vh;} #news .news_h .news_btn{ top:32vh} #cooperator {margin-top:0px;} #news .news_w {margin:20px 2%; padding-top: 120px;} #news .news_h .news_btn{ width:89%;} #cooperator .cooperator_h { padding: 0px 2% 0 2%;} .main{height:auto !important;} .newswrap {padding:100px 0 100px 0 !important;} .partner {padding: 0 !important;} } /* mv : main visual */ @media all and (max-width:1024px) { margin:110px 0px 10px 30px !important;} } @media all and (max-width:768px) { } @media all and (max-width:640px) { .partner .h2{font-size:28px !important;} .partner .h2 span { font-size:18px !important; } #news .news_w .slick-list div div .news_tit a{font-size: 1.2rem; } #news .news_w .slick-list div div .news_txt{font-size: 0.8rem;} #news .news_w .slick-list div div .news_date{font-size: 0.8rem;} } .item{ position:relative; height:auto; width:100%; max-width:1900px; } .content-slider ul{ width:100%; max-width:1400px; } .content-slider li{ text-align: left; padding-left:10px; color: #000; height:auto; padding-bottom:50px; } .content-slider h3 { margin: 0; padding: 70px 0; } @media all and (max-width:1024px) { .content-slider ul{ width:98% !important; max-width:100% !important; margin:0 auto;} .newswrap_t{font-size:18px; font-weight:600;margin-top:20px;letter-spacing:-1px; height:auto; position:relative;} .content-slider img{width:100%; height:auto;} } @media all and (max-width:768px) { .content-slider ul{ width:98% !important; max-width:100% !important; margin:0 auto;} .newswrap_t{font-size:16px; font-weight:600;margin-top:20px;letter-spacing:-1px; height:auto; position:relative;} } /* partner */ /* footer */ @media all and (max-width:768px) { .bg{ background:url(/img/main/business1bg_on2.png) no-repeat right 50%; background-size:60% !important;} } @media all and (max-width:640px) { .prev, .next { top: 60% !important;} } @media all and (max-width:500px) { .prev, .next { display:none;} } @media all and (max-width:400px) { } * {box-sizing: border-box} .mySlides {display: none;transition: 0.6s ease; } img {vertical-align: middle;} /* Slideshow container */ .slideshow-container { max-width: 100%; height:100vh; position: relative; margin: auto;} /* Next & previous buttons */ .prev{ cursor: pointer; position: absolute; top: 48%; left: 10px; width: auto; padding: 8px 16px; margin-top: -22px; color: white; font-weight: 300; font-size: 18px; transition: 0.6s ease; border:1px solid #5a6167; height:50px; background-color: #4f545a; z-index:2000; user-select: none;} .prenex_bg{background-color: #4f545a; border:1px solid #5a6167;} /* Position the "next button" to the right */ .next { cursor: pointer; position: absolute; top: 48%; right: 10px; width: auto; padding: 8px 16px; margin-top: -22px; color: white; font-weight: 300; font-size: 18px; transition: 0.6s ease; border:1px solid #5a6167; height:50px; background-color: #4f545a; z-index:2000; user-select: none;} /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); list-style:none; text-decoration:none !important;} /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center;} /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0;} /* The dots/bullets/indicators */ .dot_w{position:absolute; z-index:1000; right:40px; top:50%; width:30px;text-align: center;} .dot { cursor: pointer; height: 20px; width: 20px; margin: 10px 2px; background-color: #666; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease;} .dot.on { background-color: #fff; animation:Loading 1.6s ease-in-out ; } /* 하트 도트 .dot {position: relative;margin: auto;top: 0;right: 0;bottom: 0;left: 0;background-color: #e6217d;height: 20px;width: 20px;transform: rotate(-45deg);display: inline-block; transition: background-color 0.6s ease;} .dot:after {position: relative;background-color: #e6217d;content: "";border-radius: 50%;position: absolute;width: 20px;height: 20px;top: 0px;left: 10px;} .dot:before {position: relative;content: "";background-color: #e6217d;border-radius: 50%;position: absolute;width: 20px;height: 20px;top: -10px;left: 0px;} .dot.on {margin: auto;top: 0;right: 0;bottom: 0;left: 0;background-color: #fff;height: 20px;width: 20px;transform: rotate(-45deg);animation:Loading 1.6s ease-in-out ; } .dot.on:after {background-color: #fff;content: "";border-radius: 50%;position: absolute;width: 20px;height: 20px;top: 0px;left: 10px; } .dot.on:before {content: "";background-color: #fff;border-radius: 50%;position: absolute;width: 20px;height: 20px;top: -10px;left: 0px;} .dot_w li {margin:30px 0px !important;} */ active, .dot:hover { background-color: #fff;} /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s;} @-webkit-keyframes fade { from {opacity: .1} to {opacity: 1} } @keyframes fade { 0%{ opacity:0.1; } 30%{ opacity:0.7; } 100%{ opacity:1; } } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .prev, .next,.text {font-size: 11px} } @keyframes Loading{ 0%, 60%, 100%{ transform:scale(1) rotate(-45deg); } 30%{ transform:scale(1.5) rotate(-45deg); } } /* over 768px */ @keyframes txtDisplay {from {bottom:-100%;}to {bottom:90px;}} /* not used */ @keyframes txtDisplay1 {from {opacity:0}to {opacity:1;}} @keyframes txtDisplay2 {from {opacity:0}to {opacity:1;}}