.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:150px; color:#111; text-align:left;} .main .txt01{font-size: 4rem; font-weight:700;opacity:0;} .main .txt02{padding-top:20px; font-size:2.7rem; font-weight:500;opacity:0;} .active div .txt01{ animation: txtDisplay1 1.9s ;animation-delay: 1s ;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; background-size:cover !important;} .visual2{width:100%; min-width:100%; height:100vh; background:url("../images/main/main_v2.jpg") 50% 0; background-size:cover;transition: 0.6s ease; background-size:cover !important;} .visual3{width:100%; min-width:100%; height:100vh; background:url("../images/main/main_v3.jpg") 50% 0; background-size:cover;transition: 0.6s ease; background-size:cover !important;} #business_w {position:relative; overflow:hidden;width:100%; height:140vh; padding:40px; max-width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; background:#f9f9f9 url('../images/main/businessbg.png') no-repeat right 100px; margin:0px auto 0; } #business {position:relative; width:100%; padding:40px; max-width:1500px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; margin:0px auto 0; } #business .l_tit{ color: #006f6f; font-size: 2.4rem; font-weight:800; letter-spacing: -1px; } #business .tit_d { font-size: 3.4rem; color: #111; font-weight:800; letter-spacing: -1px; margin-top:10px; margin-bottom:50px;} #business_w .business_list{width:100%; margin-top:30px;} #business_w .business_list div{float:left; position:relative; width:30%;margin:20px 3.2% 20px 0px; border-radius:40px;max-width:380px; padding:40px; box-shadow:20px 20px 20px rgba(0,0,0,0.1); background:#fff;} #business_w .business_list a div{max-width:380px; height:auto; width:100%; min-height:300px;} #business_w .business_list .business_img {border-radius:10px; height:auto; min-height:200px; text-align:center; position:relative; background:url('../images/main/photo_img_.jpg'); background-size:cover;} #business_w .business_list .business_img img{ } #business_w .business_list .business_img:hover img{width:68%; } #business_w .business_list div span {position:absolute; left:20px; font-weight: 800; font-size: 30px; color: #fff; width:45px; height:45px; padding:0px 12px 0px; border-radius:45px; background:#006f6f; line-height:45px;} #business_w .business_list div.end{margin-right:0%;} #business_w .business_list div .tit{font-size:1.3rem; color:#111; font-weight:600; margin-top:0px;} #business_w .business_list div .d{ color:#111; font-weight:400; margin-top:10px;} #business_w .business_list div.on { background:rgba(214,245,218,1); } #business_w .business_list div h3 { font-weight: 700; font-size: 1.4rem; color: #111; text-align:center; padding-top:30px;} #business_w .business_list div.on {background:#d6f5da;} #business_w .business_list div.on h3 {color:#006f6f !important;} #business_w .business_list div:hover {background:rgba(214,245,218,1); } #business_w .business_list{display:none !important;} #business .slide_ctn { display: flex !important; position: absolute; top: 90%; left: 0px; /*transform: translateY(-50%);*/ z-index: 10; white-space: nowrap; padding-left: 40px; opacity: 1; transition: 0.5s 0.5s;} #business .slide_ctn .item { position: relative; padding: 40px 30px; background: #fff; margin-right: 40px; width: 375px; border: 1px solid #fff_; max-height: 385px; white-space: normal; border-radius:50px;box-shadow:20px 20px 20px rgba(0,0,0,0.1);} #business .slide_ctn .item:hover, #business .slide_ctn .item:hover h3{background:#d6f5da; color:#006f6f !important;} #business .slide_ctn .item:hover img{width:68%; } #business .slide_ctn .item.on {background:#d6f5da;} #business .slide_ctn .item.on h3 {color:#006f6f !important;} #business .slide_ctn .item a { position: absolute; top: 0; left: 0; width: 100%; height: 100%;} #business .slide_ctn .item img{text-align:center !importnat; margin:0 auto !importnat;} #business .slide_ctn .item p { font-weight: 800; font-size: 30px; color: #fff; width:45px; height:45px; border-radius:50px; background:#006f6f; line-height:39px; text-align:center; } #business .slide_ctn .item h3 { font-weight: 700; font-size: 24px; color: #111; text-align:center; padding-top:30px;} /*#business .slide_ctn .item:nth-of-type(2n) { background: #000; border-color: #000; } #business .slide_ctn .item:nth-of-type(2n) .info p, #business .slide_ctn .item:nth-of-type(2n) h3, #business .slide_ctn .item:nth-of-type(2n) p { olor: #fff; } */ #business .slide_ctn2 { display: flex !important; position: absolute; top: 205%; left: 0px; margin-top:40px; /*transform: translateY(-50%);*/ z-index: 10; white-space: nowrap; padding-left: 455px; opacity: 1; transition: 0.5s 0.5s;} .on #business .slide_ctn2 { opacity: 1;} .on #business .slide_ctn2.on { transition: 0s;} #business .slide_ctn2 .item {position: relative; padding: 40px 30px; background: #fff; margin-right: 40px; width: 375px; border: 1px solid #fff_; max-height: 385px; white-space: normal; border-radius:50px;box-shadow:20px 20px 20px rgba(0,0,0,0.1);} #business .slide_ctn2 .item.on {background:#d6f5da;} #business_w .business_list .business_img img{ width:60%;} #business .slide_ctn2 .item:hover img{width:68%; } #business .slide_ctn2 .item:hover, #business .slide_ctn2 .item:hover h3{background:#d6f5da; color:#006f6f !important;} #business .slide_ctn2 .item.on h3 {color:#006f6f !important;} #business .slide_ctn2 .item a { position: absolute; top: 0; left: 0; width: 100%; height: 100%;} #business .slide_ctn2 .item img{text-align:center !importnat; margin:0 auto !importnat;} #business .slide_ctn2 .item p { font-weight: 800; font-size: 30px; color: #fff; width:45px; height:45px; border-radius:50px; background:#006f6f; line-height:39px; text-align:center; } #business .slide_ctn2 .item h3 { font-weight: 700; font-size: 24px; color: #111; text-align:center; padding-top:30px;} @media screen and (max-width:1500px){ #business_w { height:100%;} .main .txt {left:50px; } .lsquare_w { left:50px !important;} #business .slide_ctn { position: relative; padding-left: 0px !important; opacity: 1; transition: 0.5s 0.5s; } #business .slide_ctn .item { position: relative; margin-right: 40px; width: 33.3%; max-width: 375px; max-height: 385px; } #business .slide_ctn .item.end{margin-right: 0px;} #business .slide_ctn2 { position: relative; padding-left: 0px !important; opacity: 1; transition: 0.5s 0.5s;} #business .slide_ctn2 .item { position: relative; margin-right: 40px; width: 33.3%; max-width: 375px; max-height: 385px; } #business .slide_ctn2 .item.end{margin-right: 0px;} #notice .notice_list div { padding:40px; } #notice .notice_list div .notice_list_t{ font-size: 1.3rem !important; } #notice .notice_list div .notice_list_d{ font-size: 1.2rem !important; left:40px !important; bottom:20px !important;} } #notice_w {position:relative; overflow:hidden; width:100%; height:100vh; background:#004d4d; padding:40px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} #notice {position:relative; overflow:hidden;width:100%; max-width:1500px; margin:0 auto; padding:40px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} #notice .l_tit{ color: #fff; font-size: 2.4rem; font-weight:800; letter-spacing: -1px;} #notice .tit_d { position:relative; width:100%; color: #fff; font-size: 3.4rem; font-weight:800; letter-spacing: -1px; margin-top:10px;} #notice .notice_list {margin-top:80px;} #notice .tit_d a .arr{ position:absolute; color:#fff !important; font-size: 1.2rem; bottom:0; right:0;} #notice .notice_list div {position:relative; min-height:380px;width:24.99%; border-right:1px solid #418078; float:left; padding:40px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } #notice .notice_list div:hover{background:#2b6f69;} #notice .notice_list div.end{margin-right:0%; } #notice .notice_list div .hover{width:100%; height:100%; min-height:300px; position:absolute; top:0; left:0; background:rgba(82,25,227,0.7); z-index:20;} #notice .notice_list div .hover img{padding-top:35%; padding-left:40%;} #notice .notice_list div .notice_list_t{ font-size: 1.5rem; font-weight:600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4/*원하는 줄 갯수*/; -webkit-box-orient: vertical; letter-spacing: -1px; color:#fff; } #notice .notice_list div .notice_list_t{ font-size: 1.5rem; font-weight:600; letter-spacing: -1px; color:#fff; } #notice .notice_list div .notice_list_c{ font-weight:400; color:#fff; letter-spacing: -1px;} #notice .notice_list div .notice_list_a{ font-weight:400; color:#666; letter-spacing:-1px; padding-bottom:15px; } #notice .notice_list div .notice_list_m{ font-weight:400; color:#666; letter-spacing:-1px; padding-top:10px; padding-bottom:60px; } #notice .notice_list div .notice_list_d{ position:absolute; color:#fff; font-size: 1.3rem; font-weight:600; letter-spacing:-1px; left:50px; bottom:50px;} #notice .notice_list div .notice_list_d .date_p{color:#710ff8;} .line{height:1px; background:#ddd; width:100%;} #online_w {position:relative; overflow:hidden; width:100%; height:100vh; padding:40px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} #online {position:relative; overflow:hidden;width:100%; max-width:1500px; height:90vh; margin:0 auto; padding:40px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} #online .l_tit{ color: #006f6f; font-size: 2.4rem; font-weight:800; letter-spacing: -1px;} #online .tit_d { position:relative; width:100%; color: #111; font-size: 3.4rem; font-weight:800; letter-spacing: -1px; margin-top:10px;} #online span.button{font-size:2.2rem; font-weight:600; color:#fff; background:#006f6f; padding:25px 100px; border-radius:50px; box-shadow:10px 10px 10px rgba(0,0,0,0.1);} .online_pt{padding-top:100px;} .online_img{position:absolute; right:0; bottom:0;} @media all and (max-width:1280px) { #business_w .business_list{ text-align:center;} #business_w .business_list .business_img {height:auto; min-height:100%; } #business_w .business_list div{min-height:250px;} #business_w .business_list .business_img{ width:80%; margin:0 10%;text-align:center;} #business_w .business_list .business_img img{ width:90%; } #business_w .business_list .business_img:hover img{width:95%; } #business_w .business_list{display:block !important;} #business .slide_ctn { display:none !important;} #business .slide_ctn2 { display:none !important;} .visual1{height:70vh; background:url("../images/main/main_v1.jpg") 30% 0 ; } .visual2{ height:70vh; background:url("../images/main/main_v2.jpg") 30% 0; } .visual3{height:70vh; background:url("../images/main/main_v3.jpg") 30% 0; } .slideshow-container { height:70vh !important; } .main .txt{position:absolute; top:30%; left:50px; color:#111; text-align:left; } .main .txt img{width:80% !important;} #business .slide_ctn .item img{width:55%;} #business .slide_ctn2 .item img{width:55%;} #business .slide_ctn .item:hover img{width:58%; } #business .slide_ctn2 .item:hover img{width:58%; } #business .slide_ctn .item {padding: 40px 30px; margin-right: 20px; border-radius:30px;box-shadow:10px 10px 10px rgba(0,0,0,0.1);} #business .slide_ctn2 .item {padding: 40px 30px; margin-right: 20px; border-radius:30px;box-shadow:10px 10px 10px rgba(0,0,0,0.1);} #notice .notice_list div {position:relative; min-height:200px;width:47.99%; margin:1%; border:1px solid #418078; float:left; padding:40px; } #notice .notice_list {margin-top:50px;} #notice_w { height:100%; } #online_w {width:100%; height:100%; } #online {width:100%; max-width:1500px; height:100%; } .online_img{position:relative;} } @media all and (max-width:1024px) { #business_w .business_list div{width:46%;margin:0px 4% 20px 0px; border-radius:40px; } .visual1{height:70vh; background:url("../images/main/main_v1.jpg") 40% 0 ; } .visual2{ height:70vh; background:url("../images/main/main_v2.jpg") 40% 0; } .visual3{height:70vh; background:url("../images/main/main_v3.jpg") 40% 0; } .main .txt img{width:70% !important;} } @media all and (max-width:840px) { } @media all and (max-width:768px) { #business_w { padding:80px 2%; } #business { padding:2%; } #business .l_tit{ font-size: 2rem; } #business .tit_d { font-size: 3rem; } #notice_w { padding:80px 2%; } #notice { padding:2%; } #notice .notice_list div {position:relative; min-height:200px;width:98%; margin:1%; border:1px solid #418078; float:left; padding:40px; } #notice .l_tit{ font-size: 2rem;} #notice .tit_d { font-size: 3rem; } #online_w { padding:80px 2%; } #online { padding:2%; } #online .l_tit{ font-size: 2rem;} #online .tit_d { font-size: 3rem; } #online span.button{font-size:1.5rem; padding:25px 50px; border-radius:50px; box-shadow:10px 10px 10px rgba(0,0,0,0.1);} .online_img{width:90%;} } @media all and (max-width:640px) { #business_w .business_list div { padding: 20px;} #business_w .business_list div span { top:20px; font-size: 25px; width:35px; height:35px; padding:0px 5px 0px; border-radius:35px; line-height:35px;} #business_w .business_list div{width:47%;margin:0px 3% 20px 0px; border-radius:30px; } #business_w .business_list div h3 { padding-top: 20px;} #business_w .business_list div{min-height:200px;} #business_w .business_list .business_img img{ padding-top:20px; } #notice .notice_list div { width:98%;margin:1%; } #business .business_list div { } .main .txt{ top:45%; left:30px;} .lsquare_w { left:30px !important; } .visual1{height:70vh; background:url("../images/main/main_v1.jpg") 50% 0 ; } .visual2{ height:70vh; background:url("../images/main/main_v2.jpg") 50% 0; } .visual3{height:70vh; background:url("../images/main/main_v3.jpg") 50% 0; } } @media all and (max-width:540px) { #business_w .business_list div h3 { font-size: 1.2rem; } #business .l_tit{ font-size: 1.5rem; } #business .tit_d { font-size: 2.5rem; } #notice .l_tit{ font-size: 1.5rem; } #notice .tit_d { font-size: 2.5rem; } #online .l_tit{ font-size: 1.5rem; } #online .tit_d { font-size: 2.5rem; } } @media all and (max-width:450px) { #business .l_tit{ font-size: 1.2rem; } #business .tit_d { font-size: 2.2rem; } #notice .l_tit{ font-size: 1.2rem; } #notice .tit_d { font-size: 2.2rem; } #online .l_tit{ font-size: 1.2rem; } #online .tit_d { font-size: 2.2rem; } .main .txt{ top:50%;} .main .txt img{width:80% !important;} } @media all and (max-width:400px) { #business_w .business_list div span { 0 font-size: 22px; width:30px; height:30px; padding:0px 3px 0px; border-radius:30px; line-height:30px;} } /* mv : main visual */ @media all and (max-width:1024px) { margin:110px 0px 10px 30px !important;} } .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: #111; 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; bottom: 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 */ .lsquare_w{position:absolute; z-index:1000; left:150px;bottom:95px; text-align: center;} .lsquare_w li{float:left; } .lsquare { cursor: pointer; width:27px; height:27px; margin: 10px 10px; background-color: #fff; border-radius:20px; display: inline-block; } .lsquare.on { background-color: #006f6f; width:93px; } .lsquare:hover, .lsquare.on:hover{background-color: #006f6f !important; } .lsquare:active{ background-color: #006f6f !important;} @media all and (max-width:1280px) { .lsquare_w{bottom:50px;} } /* .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: 1s; animation-name: fade; animation-duration: 1s;} @-webkit-keyframes fade { from {opacity: 0} to {opacity: 1} } @keyframes fade { 0%{ opacity:0; } 100%{ opacity:1; } } /* On smaller screens, decrease text size */ @media only screen and (max-width: 320px) { .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;}}