:root { --blue-blue: #1343be; --bright-sky-blue: #15b8ff; --water-blue: #109ddc; } html { font-family: 'Pretendard'; } .quick{position: fixed; right: 50px; bottom: 50px; z-index: 1000;} .quick ul li + li{margin-top: 10px;} .quick ul li a img{width: 60px; box-shadow:0 0 10px rgba(0,0,0,0.15); border-radius:50%;} #wrap{width:100%; max-width:1920px; margin:0 auto;position:relative;z-index:1;} .inner{width:100%; max-width:1400px; margin:0 auto;} .b_inner{width:100%; max-width:1600px; margin:0 auto;} #header{position:relative; max-width:1920px; margin:0 auto; z-index:25; background:#fff;} #header.fixed {position: fixed; top: 0; left: 0; width: 100%; z-index: 220;} .head{position:relative;width:100%; max-width:1600px; margin:0 auto; height:100px; } .head .logo {position:absolute; top:50%; left:0; transform:translateY(-50%);z-index: 10;} .head .logo .txt-area{margin:0 0 5px 50px} .head .logo .txt-area a{color:#28489b; font-size:18px; font-weight:600; margin-right:7px;} .head .logo .txt-area a:after{content:''; display:inline-block; width:3px; height:3px; background:#28489b; border-radius:100%; vertical-align:middle; margin-left:8px;} .head .logo .txt-area a:last-of-type{margin:0} .head .logo .txt-area a:last-of-type:after{display:none} .head .logo>a{display:block; width:200px;} .head .logo>a img{width:100%;} .gnb {margin-left: 150px;} .gnb > ul {display:flex; justify-content:center; align-items:center;} .gnb > ul > li + li{margin-left:50px;} .gnb > ul > li > a{display:block; font-size: 20px; text-align: left; line-height:100px; color: #000;} #header .h_right{display: flex;align-items: center; height: 100%; gap: 50px; position: absolute; top: 0; right: 0;} #header .menu_btn{height: 100%;display:flex; justify-content:center; align-items:center; cursor:pointer; } #header .menu_icon{display:block;width: 25px; height: 20px; background:url("../images/menu_icon.png")center no-repeat; background-size:contain;} #header .edu_btn{width: 260px; height: 100%; background-color: #f0f0f0; display:flex; justify-content:center; align-items:center;} #header .edu_btn i{display:inline-block; width: 25px; height: 36px; background:url("../images/h_edu_icon.png")center no-repeat; background-size:contain;;} #header .edu_btn span{font-size: 20px; font-weight: 600;margin-left:12px;} .head_mob_bg {display: none;} .gnb > ul > li:hover .gnb_2depth {display: flex;} .gnb_2depth {display: none; position: absolute; left: 0; padding: 40px 0; z-index: 1; width: 1600px; align-items: center;} .gnb_2depth.gnb_2depth2 {align-items: flex-start;} .gnb_2depth.gnb_2depth2.ggnb1 {top: 270px;} .gnb_2depth.gnb_2depth2.ggnb2 {top: 440px;} .gnb_2depth:before {content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 20000px; background: #fff; height: 100px; z-index: -1; border-top: 1px solid #e5e5e5;} .gnb_2depth.gnb_2depth2:before {height: 170px;} .gnb_2depth h3 {font-size: 20px; color: #000000; font-weight: 800; width: 170px;} .gnb_2depth ul {display: flex; width: calc(100% - 170px);} .gnb_2depth ul li a {position: relative; display: inline-block; font-size: 16px; color: #6a6a6a; padding-bottom: 5px;} .gnb_2depth ul li:hover a {color: #15b8ff;} .gnb_2depth ul li:hover a:before {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #15b8ff;} .gnb_2depth ul li {margin-right: 50px;} .gnb_2depth ul li:last-child {margin-right: 0;} .gnb_2depth.gnb_2depth2 ul {position: relative; margin: -5px 0; display: block;} .gnb_2depth.gnb_2depth2 ul:after {content: ""; display: block; clear: both;} .gnb_2depth.gnb_2depth2 ul li {float: left; width: 50%; padding: 5px 0; margin-right: 0;} #visual .slider_wrap{position:relative; height: 840px; overflow: hidden;} .visual-con{width:100%; position:relative;} .visual-con .list_m{width:100%; height:840px; background-size:cover; background-repeat:no-repeat; background-position:center;background-color:#000000;} /* .visual-con .list_m.bg01{background-image:url("../images/vis_01.jpg");} */ .visual-con .list_m.bg01{background-image:url("../images/vis_new01.jpg");} .visual-con .list_m.bg02{background-image:url("../images/vis_02.jpg");} .visual-con .list_m.bg03{background-image:url("../images/vis_03.jpg");} .vis_inner .txt_box .vis01_txt{margin: 0; width: 577px;} .vis_inner .txt_box .vis01_txt.mob{display: none;} .vis_inner{max-width:1400px; width: 100%; margin:0 auto;position:absolute; top:175px; left: 0; right: 0; z-index:20} .vis_inner .txt_box{} .vis_inner .txt_box em{font-size: 22px; color: #fff;} .vis_inner .txt_box h2{margin-top:20px; font-size: 50px; font-weight: 900; line-height: 1.2; color: #fff;} .vis_inner .txt_box h2 span{font-size: 45px; font-weight: 300;} .vis_inner .txt_box a.more{margin-top:38px;display: inline-flex; justify-content:center; align-items:center; border-radius: 28px;background-color: #ffffff; height: 55px; padding:0 40px;border: 1px solid #aaaaaa;} .vis_inner .txt_box a.more span{font-size: 16px;line-height: 1.5;color: #010101;font-weight: 800;} .vis_inner .txt_box a.more i{margin-left:8px; width:35px; height:7px; background:url("../images/vis_arrow.png")center no-repeat; background-size:contain;} .visual-nav-list{position: absolute; bottom:70px; left:0; right:0; width:1466px;margin:0 auto} .visual-nav p{display:block;opacity: 0.6;font-size: 20px;color: #ffffff;font-weight: 800; line-height:60px; margin:0 33px; text-align: center; cursor:pointer;} .visual-nav-list .slick-track {transform: translate3d(0,0,0) !important;} #visual .slick-current .visual-nav p{opacity: 1;} #visual .progress{width:80%; height:2px; margin:0 auto; background: rgba(255, 255, 255, 0.25);} #visual .slick-current .progress-bar{width:100%; height:100%; background:#fff; animation: progressAnimation 4s;} @keyframes progressAnimation { 0% { width: 0%;} 100% { width: 100%;} } #visual .slick-current .list_m.bg01{background-attachment: fixed;;animation: zoom-in 5.5s ease-in; transition: all 5.5s ease; overflow: hidden;} #visual .slick-current .list_m.bg02{background-attachment: fixed;;animation: zoom-in 5.5s ease-in; transition: all 5.5s ease; overflow: hidden;} #visual .slick-current .list_m.bg03{background-attachment: fixed;;animation: zoom-in 5.5s ease-in; transition: all 5.5s ease; overflow: hidden;} #visual .slick-current .txt_box{transform: scale(1)} @keyframes zoom-in { 0% {transform: scale(1);} 100% {transform: scale(1.15);} } #section01 {padding:120px 0;} .sec01_tit{margin-bottom:45px;padding:0 100px 0 60px;display:flex; justify-content:space-between; align-items: center;position: relative; z-index: 10;} .sec01_tit div em{font-size: 45px; font-weight: 800; line-height: 1.33; color: #000;} .sec01_tit div span{display: inline-block; margin-left:30px;font-size: 20px; line-height: 1.5; color: #474747;} .sec01_tit a.more{display:flex;justify-content:space-between;align-items: center;} .sec01_tit a.more span{font-size: 18px; font-weight: 800; line-height: 1; color: #000;} .sec01_tit a.more i {display:inline-block; width: 36px; height: 36px; margin-left: 16px; background-color: var(--blue-blue);border-radius:50%; background-image:url("../images/sec01_arrow_w.png"); background-size:12px 8px; background-position:center; background-repeat:no-repeat;} .section01-1 {background: #15B7FF; padding: 157px 0; position: relative;} .section01-1::before {content: ""; width: 100%; height: 120px; background: url(../images/main/section01-1_bg.png) no-repeat center/contain; position: absolute; top: -2px; left: 0;} .section01-1 .sec01_tit {padding-right: 0;} .section01-1 .sec01_tit div em, .section01-1 .sec01_tit div span, .section01-1 .sec01_tit .more span {color: #fff;} .section01-1 .sec01_tit .more span {margin: 0;} .section01-1 .sec01_tit .more i {background-color: #fff; background-image: url("https://www.human.or.kr/images/sec01_arrow_sky.svg");} .section01-1 ul {display: flex; align-items: center; justify-content: space-between;} .section01-1 ul li {width: calc(100%/3 - 10px); overflow: hidden;} .section01-1 ul li a {display: block; width: 100%; height: 100%; position: relative;} .section01-1 ul li .bg {width: 100%; height: 100%; object-fit: cover; object-position: center;} .section01-1 ul li .tit {position: absolute; top: 65px; left: 50px;} .section01-1 ul li .tit h2 {font-size: 30px; font-weight: 800; color: #fff; line-height: 1.3;} .section01-1 ul li .tit p {margin-top: 5px; font-size: 22px; font-weight: 500; color: #fff; line-height: 1.4;} .section01-1 ul li .plus {position: absolute; right: 0; bottom: 0; width: 60px; height: 60px;} .section01-1 ul li .plus img {width: 100%; height: 100%; object-fit: cover; object-position: center;} #section02{padding:120px 0 216px; background:url(../images/sec02_bg.jpg)center no-repeat; background-size:cover;} #section02 .sec02_tit{text-align: center;margin-bottom:80px;} #section02 .sec02_tit span{display:block;font-size: 22px; font-weight: 900; text-align: center; color: var(--bright-sky-blue);} #section02 .sec02_tit em{display:block;margin-top:20px;font-size: 45px; font-weight: 800; line-height: 1.33; text-align: center; color: #000;} #section02 .slider_wrap{display:flex; position: relative;} #section02 .slider_wrap .slick_slide{width:820px;margin:0 0 0 -40px; } #section02 .slider_wrap .slick_slide .list_m{padding:0 0 0 40px; } #section02 .slider_wrap02 .slick_slide{margin:0 -40px 0 0 ; } #section02 .slider_wrap02 .slick_slide .list_m{padding:0 40px 0 0 ; } #section02 .slider_wrap .slick_slide .list_m .img_warp{position:relative;width: 100%; height: 360px;} #section02 .slider_wrap .slick_slide .list_m .img_warp::before{content:""; position:absolute; bottom:0; left:0; right:0; width:100%; height:50%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 1) 100%);z-index:2;} #section02 .slider_wrap .slick_slide .list_m .img_warp img{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);max-width:100%; max-height:100%; } #section02 .slider_wrap .list_box{position:relative;} #section02 .slider_wrap .slick_slide .list_m .txt_box{position:absolute; bottom:0; left:0; right:0; width:100%; padding:30px 40px;z-index:3;} #section02 .slider_wrap .slick_slide .list_m .txt_box span{ font-size: 23px; font-weight: 800; color: #fff;} #section02 .slider_tit{position: relative; width: 370px; height: 360px; padding: 50px; background-color: var(--bright-sky-blue);margin-right:40px;} #section02 .slider_tit strong{font-size: 35px;line-height: 50px;color: #ffffff;font-weight: 800;} #section02 .slider_tit p{margin-top:30px; font-size: 20px; line-height: 1.5; color: #fff;} #section02 .slider_tit a.more{display:flex; justify-content:center; align-items:center;position:absolute;bottom:0; right:0; width: 65px; height: 65px; background-color: #fff;} #section02 .slider_tit a.more i{display:block; width: 25px; height: 25px; background:url(../images/sec02_plus01.png)center no-repeat; background-size:contain; transition:0.3s all;} #section02 .slider_tit a.more:hover i{transform:rotate(180deg);} #section02 .slider_tit .controls-box{margin-top:32px;width:166px; display:flex; justify-content:space-between;} #section02 .slider_tit .slick-arrow{padding:8px; cursor:pointer} #section02 .slider_tit .slick_prev_btn i.i_arrow{display:block;width: 10px; height: 17px; background:url(../images/sec02_prev.png)center no-repeat; background-size:contain;} #section02 .slider_tit .slick_next_btn i.i_arrow{display:block;width: 10px; height: 17px;background:url(../images/sec02_next.png)center no-repeat; background-size:contain;} #section02 .slick-counter {position: absolute; top: 222px; left: -360px; width: 166px; display: flex; justify-content: center; align-items: center;height: 33px; pointer-events: none; z-index:1;} #section02 .slick-counter .bar { width: 22px; height: 1px; margin: 0 10px; opacity: 0.5; background-color: #fff;} #section02 .slick-counter span{ font-size: 20px; font-weight: 900; line-height: 33px; color: #fff;} #section02 .slick-counter .total{opacity: 0.5; color: #fff;} #section02 .slick-counter .bar + span{opacity: 0.5;} #section02 .slide{display:flex;} #section02 .slide02{flex-direction: row-reverse;margin-top:40px;} #section02 .slide01 .slider_tit{margin-right:40px;} #section02 .slide02 .slider_tit{background-color: var(--blue-blue);margin-left:40px;margin-right:0;} #section02 .slide .slider_tit a.more i{background: url(../images/sec02_plus01.png)center no-repeat; background-size: contain;} #section02 .slide02 .slider_tit a.more i{background: url(../images/sec02_plus02.png)center no-repeat; background-size: contain;} #section02 .slide02 .slick-counter {left: auto;right: -255px;} #section02 .slide02 .slick-counter2 {position: absolute; top: 222px; left: auto;right: -255px; width: 166px; display: flex; justify-content: center; align-items: center;height: 33px; pointer-events: none; z-index:1} #section02 .slick-counter2 span { font-size: 20px; font-weight: 900; line-height: 33px; color: #fff;} #section02 .slick-counter2 .total{opacity: 0.5; color: #fff;} #section02 .slick-counter2 .bar { width: 22px; height: 1px; margin: 0 10px; opacity: 0.5; background-color: #fff;} #section02 .slick-counter2 .bar + span{opacity: 0.5;} #section03{padding:120px 0 185px; background:url(../images/sec03_bg.jpg)center no-repeat; background-size:cover;} #section03 .sec03_tit{position:relative; text-align: center;margin-bottom:80px;} #section03 .sec03_tit > span{display:block;font-size: 22px; font-weight: 900; text-align: center; color: var(--water-blue);} #section03 .sec03_tit em{display:block;margin-top:20px;font-size: 45px; font-weight: 800; line-height: 1.33; text-align: center; color: #fff;} .sec03_tit a.more{position: absolute; bottom: 0; right: 0;display:flex;align-items: center;font-size: 18px; font-weight: 800; line-height: 1; color: #fff;} .sec03_tit a.more i {display:inline-block; width: 36px; height: 36px; margin-left: 16px; background-color: #fff;border-radius:50%; background-image:url("../images/sec03_arrow.png"); background-size:12px 8px; background-position:center; background-repeat:no-repeat;} #section03 .swiper_box{min-height:720px;position:relative;} #section03 .swiper{width: 2000px;margin:0 auto;position:absolute; top:0; left:50%; transform:translateX(-50%);} #section03 .swiper-slide{padding-top:20px;padding-bottom:235px; text-align:center;} #section03 .swiper-slide .img_warp{border-radius:50%; overflow:hidden; transform:scale(0.8) translateX(8%); height: 500px;} #section03 .swiper-slide .img_warp img{position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); max-width: 100%; max-height: 100%; height: 100%; /* width:100%; */ border-radius: 50%;} #section03 .swiper-slide.swiper-slide-next + div .img_warp{transform:scale(0.8) translateX(-10%);} #section03 .swiper-slide.swiper-slide-prev .img_warp, #section03 .swiper-slide.swiper-slide-next .img_warp{transform:scale(0.8) translateX(0);} #section03 .swiper-slide .txt_box{display:none; width: 700px; transform: translateX(-50%); position: absolute; bottom: 0; left: 50%;} #section03 .swiper-slide .txt_box strong {margin-top:52px; display:block; font-size: 45px; font-weight: 800; line-height: 1.33; color: #fff;} #section03 .swiper-slide .txt_box strong span {margin-left:8px;display:inline-block; font-size: 30px; font-weight: 500;} #section03 .swiper-slide .txt_box em {margin-top:30px; display:block; font-size: 25px; font-weight: 800; /* line-height: 1; */ color: var(--water-blue); display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1;} #section03 .swiper-slide .txt_box p{margin-top:18px; color: #cecece;display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; font-size: 20px;line-height: 1.5; max-height: 90px;} #section03 .swiper-slide.swiper-slide-active{padding-top:0;} #section03 .swiper-slide.swiper-slide-active .img_warp{padding-top:0px;transform:scale(1);} #section03 .swiper-slide.swiper-slide-active .txt_box{display:block;width: 680px; transform: translateX(-50%);} #section03 .swiper-controll > div{position: absolute; top: 40%;left: 50%;transform: translate(-50%,-50%);z-index: 10;margin-left: -300px; width: 55px; height: 55px; box-shadow: 0px 5px 13px 0 rgba(0, 0, 0, 0.22); background-color: var(--bright-sky-blue);border-radius:50%;} #section03 .swiper-controll > div::after{content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);width: 14px; height: 21px; background:url(../images/sec03_prev.png)center no-repeat; background-size:contain;} #section03 .swiper-controll .swiper-button-next{margin-left:300px;} #section03 .swiper-controll .swiper-button-next::after{background:url(../images/sec03_next.png)center no-repeat; background-size:contain;} #section04{padding:120px 0 80px;z-index:1;position: relative;} #section04::before{content:""; position:absolute; bottom:0; left:0; right:0; background-color: var(--blue-blue);height:385px;z-index:-2;} .section04_bgtext{position: absolute;bottom:0; left:0; right:0; font-size: 165px; font-weight: 800; text-align: center; color: var(--bright-sky-blue);opacity:0.05;text-transform:uppercase;} .sec04_tit{margin-bottom:50px;} .sec04_tit span{display:block;font-size: 22px; font-weight: 900; color: var(--blue-blue);} .sec04_tit div{margin-top:20px;display:flex; align-items: flex-end;} .sec04_tit div em{font-size: 45px; font-weight: 800; line-height: 1.33;color: #000;} .sec04_tit div p{margin-left:18px;font-size: 20px; line-height: 1.5; text-align: left; color: #474747;} #section04 .swiper_box{position:relative;width:100%; } #section04 .mySwiper {width:1100px;overflow: visible;} #section04 .swiper-wrapper{position:relative;} /* #section04 .swiper-slide{padding-top:65px;} */ #section04 .swiper-slide {} #section04 .swiper-slide .img_warp{width:1100px; padding-top:630px; transform:scale(0.9); position:relative;z-index:1} #section04 .swiper-slide a{display:block;} #section04 .swiper-slide .img_warp::before{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);z-index:2;} #section04 .swiper-slide .img_warp img{position: absolute;top:50%; left:50%; transform:translate(-50%,-50%); max-width:100%; max-height:100%; } #section04 .swiper-slide .img_warp .play_btn{position: absolute;top:50%; left:50%; transform:translate(-50%,-50%); width: 135px; height: 135px;border-radius:50%; background-color:rgba(19, 67, 190,0.8); background-image:url(../images/sec04_play_w.png);background-size: 41px 45px; background-repeat:no-repeat; background-position:55% 50%;z-index:10;} #section04 .swiper-slide .txt_box{margin-top:46px; display:none; text-align:center;} #section04 .swiper-slide .txt_box strong{font-size: 28px; font-weight: 900; text-align: center; color: #fff;} #section04 .swiper-slide .txt_box p{margin-top:18px;font-size: 18px;font-weight: 300; line-height: 1.89; text-align: center; color: #fff;} #section04 .swiper-slide.swiper-slide-active {padding-top:0;} #section04 .swiper-slide.swiper-slide-active .img_warp { transform:scale(1);} #section04 .swiper-slide.swiper-slide-active .img_warp::before{content:"";display:none;} #section04 .swiper-slide.swiper-slide-active .img_warp:hover::before{content:"";display:block;} #section04 .swiper-slide.swiper-slide-active:hover .img_warp .play_btn{display:block;} #section04 .swiper-slide.swiper-slide-active .img_warp img{position: absolute;top:50%; left:50%; transform:translate(-50%,-50%); max-width:100%; max-height:100%; } #section04 .swiper-slide.swiper-slide-active .txt_box{display:block;} #section04 .controls-box{position:absolute; top:-120px; right:0; display:flex; justify-content:space-between;/* background: rgba(0,0,0,0.25); */width:240px;} #section04 .swiper-pagination-current::before{content:"0";} #section04 .swiper-pagination-total::before{content:"0";} #section04 .swiper-pagination-fraction {display: flex;gap: 8px;justify-content: center; align-items:center; font-size: 20px; font-weight: bold; line-height: 1.5; text-align: left;color: #c3c3c3; height: 60px; bottom: auto;pointer-events: none;} #section04 .swiper-pagination-current{color: #000;} .swiper-button-prev1{width: 60px; height: 60px; background-color: #000;border-radius:50%;position: relative;z-index:10; cursor:pointer;} .swiper-button-prev1::before{content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(180deg); width: 15px; height: 10px; background:url(../images/sec04_next_w.png)center no-repeat; background-size:contain;} .swiper-button-next1{width: 60px; height: 60px; background-color: #000;border-radius:50%;position: relative;z-index:10;cursor:pointer;} .swiper-button-next1::before{content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width: 15px; height: 10px;background:url(../images/sec04_next_w.png)center no-repeat; background-size:contain;} #section05{padding:120px 0 120px;z-index:1;background-color: var(--blue-blue);} #section05 .sec05_tit{margin-bottom:50px;position:relative;} #section05 .sec05_tit > span{display:block; font-size: 25px; font-weight: 800; line-height: 1; color: var(--bright-sky-blue);} #section05 .sec05_tit strong{margin-top:20px; display:block;font-size: 50px; font-weight: 900; color: #fff;} #section05 .sec05_tit strong span{font-size: 40px; font-weight: 300;} .sec05_tit a.more{position: absolute; bottom: 0; right: 0;display:flex;align-items: center;} .sec05_tit a.more span{font-size: 18px; font-weight: 800; line-height: 1; color: #fff;} .sec05_tit a.more i {display:inline-block; width: 36px; height: 36px; margin-left: 16px; background-color: #fff;border-radius:50%; background-image:url("../images/sec03_arrow.png"); background-size:12px 8px; background-position:center; background-repeat:no-repeat;} #section05 .swiper_box{position:relative;} #section05 .swiper-controll > div{position: absolute; top:50%; left:50%; margin-left: -800px; width: 55px; height: 55px; box-shadow: 0px 5px 13px 0 rgba(0, 0, 0, 0.22); background-color: #fff;border-radius:50%;} #section05 .swiper-controll .swiper-button-prev1::before{content:""; position:absolute; top:50% ;left:50%; transform:translate(-50%,-50%); width: 14px; height: 21px;background: url(../images/sec05_prev_b.png)center no-repeat;background-size:contain;} #section05 .swiper-controll .swiper-button-next1{ margin-left: 780px; } #section05 .swiper-controll .swiper-button-next1::before{content:""; position:absolute; top:50% ;left:50%; transform:translate(-50%,-50%); width: 14px; height: 21px;background: url(../images/sec05_next_b.png)center no-repeat; background-size:contain;} #section05 .swiper{margin:0 -20px;} #section05 .swiper-slide{padding:40px 20px 0;} #section05 .swiper-slide.swiper-slide-active{padding-top:0; } #section05 .swiper-slide .card_inner{border-radius: 50px;overflow:hidden;background-color: #ebebeb;} #section05 .swiper-slide .txt_box{padding:74px 50px 66px;} #section05 .swiper-slide .txt_box h2{ font-weight: 800; line-height: 1.1; color: #000;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;font-size: 32px; line-height: 1.1;max-height: 70px;} #section05 .swiper-slide .txt_box p{margin-top:50px;color: #7a7a7a;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 4;font-size: 20px;line-height: 1.5; max-height: 120px;} #section05 .swiper-slide .txt_box .txt_box_content {margin-top:50px;color: #7a7a7a;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 4;font-size: 20px;line-height: 1.5; max-height: 120px;} #section05 .swiper-slide .txt_box span{display:block; margin-top:40px; font-size: 20px; line-height: 1; color: #7a7a7a;} #section05 .swiper-slide a.more{display:none; width:100%; height: 80px; background-color: #d7e0f8; text-align:center; font-size: 20px; font-weight: 800; line-height: 80px; color: var(--blue-blue);} #section05 .swiper-slide.swiper-slide-active .card_inner{background-color: #fff;} #section05 .swiper-slide.swiper-slide-active .txt_box{padding:80px 50px 60px;} #section05 .swiper-slide.swiper-slide-active a.more{display:block;} #section06{padding:126px 0 126px;} #section06 .b_inner{position:relative;} #section06 .sec06_tit{position:absolute;top:0; left:100px;} #section06 .sec06_tit > span{display:block;font-size: 22px;font-weight: 900; color: var(--bright-sky-blue);} #section06 .sec06_tit strong{display:block; margin-top:16px;font-size: 45px; font-weight: 300; line-height: 1.22; text-align: left; color: #000;font-weight: 800;} #section06 .sec06_tit strong span{font-weight: 300;} #section06 .slider_wrap{padding-left:100px;min-height: 698px;} .sec06-nav-list{position:absolute; top:35%; left:50%; margin-left: 500px; cursor:pointer;width:280px;z-index:1;} .sec06-nav-list .slick-list{overflow: visible;} .sec06-nav{position:relative;} .sec06-nav::before{content:""; position: absolute; bottom:0;right:-16%; width:100%; height:1px; background:var(--bright-sky-blue);width: 426px;display:none;} .sec06-nav-list .sec06-nav p{font-size: 28px; font-weight: 800; line-height: 2; color: #4f4f4f;} .sec06-nav-list .slick-current .sec06-nav p{color: var(--bright-sky-blue);} .sec06-nav-list .slick-current .sec06-nav::before{display:block;} #section06 .sec06-con::before{content:""; position:absolute; top:56%; right:-16%; transform:translateY(-50%); width:700px; height:700px; background:#f5f5f5; border-radius:50%; z-index:-1;} #section06 .sec06-con .list_inner{display:flex;align-items:center;padding-top:88px;} #section06 .sec06-con .txt_box{width:630px;margin-top:70px;} #section06 .sec06-con .txt_box h2{font-size: 37px; font-weight: 900; line-height: 1; color: var(--bright-sky-blue);} #section06 .sec06-con .txt_box p{margin:30px 0; font-size: 20px;line-height: 1.4; color: #4f4f4f;} #section06 .sec06-con .txt_box a.more{display:inline-flex;padding:0 40px; height:55px; border-radius:55px; overflow: hidden;align-items:center;background-color: var(--bright-sky-blue);} #section06 .sec06-con .txt_box a.more span{font-size: 16px; font-weight: 800; line-height: 1; color: #fff;} #section06 .sec06-con .txt_box a.more i{display:block;width: 35px; height: 7px;margin-left:10px; background:url(../images/sec06_arrow_w.png)center no-repeat;background-size:contain;} #section06 .sec06-con .img_box{width:520px; height:520px; border-radius:50%;} #section06 .sec06-con .img_box img{width:100%; height:100%;} #section06 .slick-dots {bottom: -80px;} #section06 .slick-dots li{width: 10px;height: 10px; margin: 0 10px;} #section06 .slick-dots li button{width: 10px;height: 10px;} #section06 .slick-dots li button:before{width: 10px;height: 10px;opacity:1;background-color: #cecece;} #section06 .slick-dots li.slick-active button:before{background-color: var(--water-blue);} #section07{padding:120px 0; background: #f1f3f5;} .sec07_tit{text-align:center;} .sec07_tit > span{font-size: 22px;text-align: center;color: #000;} .sec07_tit em{display:block; margin-top:12px; font-size: 50px;font-weight: 800; line-height: 1.2; text-align: center; color: #000;} .sec07_tit em > span{ color: var(--blue-blue);} #section07 ul{margin-top:70px; display:flex;justify-content: space-around;} #section07 ul li{width:25%; text-align:center;} #section07 ul li a{display:block;} #section07 ul li a .img_icon{display:inline-flex; align-items:center; justify-content:center;width: 160px; height: 160px;background-color: #fff; border-radius:50%;} #section07 ul li a .img_icon i{display:block; width:84px; height:84px; background-image:url(../images/sec07_icon01.png);background-size: contain;background-position: center; background-repeat:no-repeat;} #section07 ul li:nth-child(2) a .img_icon i{ background-image:url(../images/sec07_icon02.png);} #section07 ul li:nth-child(3) a .img_icon i{ background-image:url(../images/sec07_icon03.png);} #section07 ul li:nth-child(4) a .img_icon i{ background-image:url(../images/sec07_icon04.png);} #section07 ul li:nth-child(5) a .img_icon i{ background-image:url(../images/sec07_icon05.png);} #section07 ul li a .img_icon img {width:85px; max-height:85px;} #section07 ul li a span{display:block; margin-top:30px; font-size: 23px; font-weight: 800; line-height: 1; text-align: center; color: #000;} #section07 ul li:hover a .img_icon{background-color: var(--blue-blue);} #section07 ul li:hover a .img_icon i{filter: brightness(100);} #section07 ul li:hover a span{color:var(--blue-blue);} #footer{background:#000;padding:90px 0;color:#fff;} #footer .top-area{display:flex; justify-content:space-between} #footer h3 a{display:inline-block;} #footer h3 a img{width:210px;} #footer .sns_icon{margin-right:58px} #footer .sns_icon img{width:40px; height:40px; margin-left:10px} .f_wrap {margin-top:42px; display:flex; justify-content:space-between;} .f_left address{font-size: 18px;line-height: 1.6; color: #fff;} .f_info{margin-top:44px; display:flex;} .f_left dl{font-size: 16px; line-height: 1; color: #a9a9a9;} .f_left dl dd{margin-left:8px; color: #fff;} .f_left dl dt, .f_left dl dd {display:inline;} .f_left dl:nth-of-type(n + 2) dt{margin-left:50px;} .f_copy{margin-top:20px; font-size: 15px; font-weight: 300; line-height: 1; color: rgba(165, 165, 165, 0.8);} .f_copy span:nth-of-type(1){text-transform:uppercase;} .f_copy span + span{margin-left:10px;} .f_copy .dpunch_ic {display: inline-block;vertical-align: middle;width: 100px;height: 10px;background: url(../images/dpunch_ic.png) center no-repeat;background-size: 100%;margin-left: 5px;} .f_right > em{font-size: 16px; font-weight: 600; line-height: 1; color: #fff;} .f_right > strong{display:block;margin-top:14px;font-size: 28px; font-weight: 900; line-height: 1; text-align: left; color: #d0d0d0;} .f_right > p{margin-top:20px;font-size: 14px; font-weight: 300; line-height: 1.5; color: #c8c8c8;} .f_menu{margin-top:50px;} .f_menu span{display:inline-block;position:relative;} .f_menu span a{display:block; font-size: 16px; font-weight: 600; line-height:1; color: #fff;} .f_menu span + span{margin-left:32px;} .f_menu span + span::before{content:""; position:absolute; top:50%; left:-16px; transform:translateY(-50%); height:10px; width:1px; background:#686868;} .section01-2 {padding: 130px 0 143px; background: url('../images/main/section01-2_bg.jpg') no-repeat center/cover;} .section01-2 .tit * {color: #fff;} .section01-2 .tit span {margin-left: 0; font-size: 35px; display: inline-block;} .section01-2 .tab_cont {margin-top: 45px; border: 2px solid #15B7FF;} .section01-2 .pc {display: block;} .section01-2 .mob {display: none;} .section01-2 .tab_cont .cont {position: relative; display: none; overflow: hidden; height: 605px;} .section01-2 .tab_cont .cont:first-child {display: block;} .section01-2 .tab_cont .cont img {width: 100%; height: 100%; object-fit: cover; object-position: center;} .section01-2 .tab_cont .cont .txt {position: absolute; top: 87px; left: 73px;} .section01-2 .tab_cont .cont .txt > span {display: block; font-size: 24px; font-weight: 700; color: #15B7FF; line-height: 1.3; letter-spacing: -.6px;} .section01-2 .tab_cont .cont .txt h3 {margin-top: 25px; color: #fff; font-size: 50px; font-weight: 800; line-height: 1.2; letter-spacing: -1px;} .section01-2 .tab_cont .cont .txt h3 span {color: #15B7FF;} .section01-2 .tab_cont .cont .txt p {margin-top: 28px; font-size: 22px; font-weight: 500; color: #fff; line-height: 1.45;} .section01-2 .tab_cont .cont .txt a {margin-top:45px;display: inline-flex; justify-content:center; align-items:center; border-radius: 28px; gap: 10px; background-color: #ffffff; width: 171px; height: 50px; font-size: 15px; font-weight: 500;} .section01-2 .tab_cont .cont .txt a img {width: 31.21px; height: auto;} .section01-2 .tab {border: 2px solid #15B7FF; border-top: 0; display: flex; align-items: center; justify-content: space-between; background: #000;} .section01-2 .tab li {width: calc(100%/3 + 2px); line-height: 100px; font-size: 34px; font-weight: 800; color: #fff; letter-spacing: -1px; cursor: pointer; text-align: center;} .section01-2 .tab li + li {border-left: 1px solid #15B7FF;} .section01-2 .tab li.on {background: #15B7FF; color: #222;} @media screen and (max-width:1920px){ #header .h_right{display: flex;align-items: center; height: 100%; gap: 2.60vw; position: absolute; top: 0; right: 0;} #header .menu_btn{height: 100%;display:flex; justify-content:center; align-items:center; cursor:pointer; } #header .menu_icon{display:block;width: 1.30vw; height: 1.04vw; background:url("../images/menu_icon.png")center no-repeat; background-size:contain;} #header .edu_btn{width: 13.54vw; height: 100%; background-color: #f0f0f0; display:flex; justify-content:center; align-items:center;} #header .edu_btn i{display:inline-block; width: 1.30vw; height: 1.88vw; background:url("../images/h_edu_icon.png")center no-repeat; background-size:contain;} #header .edu_btn span{font-size: 1.04vw; font-weight: 600;margin-left:0.63vw;} /* #visual .slider_wrap{position:relative; } .visual-con{width:100%; position:relative;} .visual-con .list_m{width:100%; height:43.75vw; background-size:cover; background-repeat:no-repeat; background-position:center;background-color:#000000;} .visual-con .list_m.bg01{background-image:url("../images/vis_01.jpg");} .vis_inner{max-width:72.92vw; margin:0 auto;} .vis_inner .txt_box{position:absolute; top:9.11vw;} .vis_inner .txt_box em{font-size: 1.15vw; color: #fff;} .vis_inner .txt_box h2{margin-top:1.04vw; font-size: 2.60vw; font-weight: 900; line-height: 1.2; color: #fff;} .vis_inner .txt_box h2 span{font-size: 2.34vw; font-weight: 300;} .vis_inner .txt_box a.more{margin-top:1.98vw;display: inline-flex; justify-content:center; align-items:center; border-radius: 1.46vw;background-color: #ffffff; height: 2.86vw; padding:0 2.08vw;border: 0.05vw solid #aaaaaa;} .vis_inner .txt_box a.more span{font-size: 0.83vw;line-height: 1.5;color: #010101;font-weight: 800;} .vis_inner .txt_box a.more i{margin-left:0.42vw; width:1.82vw; height:0.36vw; background:url("../images/vis_arrow.png")center no-repeat; background-size:contain;} .visual-nav-list{position: absolute; bottom:3.65vw; left:0; right:0; width:76.35vw;margin:0 auto} .visual-nav p{display:block;opacity: 0.6;font-size: 1.04vw;color: #ffffff;font-weight: 800; line-height:3.13vw; border-bottom:none; margin:0 1.72vw; text-align: center; cursor:pointer;} #visual .slick-current .visual-nav p{opacity: 1;} */ #section01 {padding:7.50vw 0;} .sec01_tit{margin-bottom:2.81vw;padding:0 6.25vw 0 3.75vw;display:flex; justify-content:space-between; align-items: center;} .sec01_tit em{font-size: 2.81vw; font-weight: 800; line-height: 1.33; color: #000;} .sec01_tit span{display: inline-block; margin-left:1.88vw;font-size: 1.25vw; line-height: 1.5; color: #474747;} .sec01_tit a.more span{font-size: 1.13vw;} .sec01_tit a.more i {display:inline-block; width: 2.25vw; height: 2.25vw; margin-left: 1.00vw; background-color: var(--blue-blue);border-radius:50%; background-image:url("../images/sec01_arrow_w.png"); background-size:0.75vw 0.50vw; background-position:center; background-repeat:no-repeat;} #section03{padding:6.25vw 0 9.64vw; background:url(../images/sec03_bg.jpg)center no-repeat; background-size:cover;} #section03 .sec03_tit{margin-bottom:4.17vw;} #section03 .sec03_tit > span{font-size: 1.15vw;} #section03 .sec03_tit em{margin-top:1.04vw;font-size: 2.34vw; } .sec03_tit a.more{font-size: 0.94vw; } .sec03_tit a.more i {width: 1.88vw; height: 1.88vw; margin-left: 0.83vw; background-image:url("../images/sec03_arrow.png"); background-size:0.63vw 0.42vw;} #section03 .swiper_box{min-height:37.50vw;} #section03 .swiper{width: 104.17vw;} #section03 .swiper-slide{padding-top:1.04vw;padding-bottom:12.24vw;} #section03 .swiper-slide .img_warp{border-radius:50%; overflow:hidden; transform:scale(0.8) translateX(10%); height: 27.04vw;} #section03 .swiper-slide.swiper-slide-next + div .img_warp{transform:scale(0.8) translateX(-10%);} #section03 .swiper-slide.swiper-slide-prev .img_warp, #section03 .swiper-slide.swiper-slide-next .img_warp{transform:scale(0.8) translateX(0);} #section03 .swiper-slide .txt_box{display:none; width: 35.42vw; transform: translateX(-50%);} #section03 .swiper-slide .txt_box strong {margin-top:2.71vw; display:block; font-size: 2.34vw;} #section03 .swiper-slide .txt_box strong span {margin-left:0.42vw;display:inline-block; font-size: 1.56vw; } #section03 .swiper-slide .txt_box em {margin-top:1.56vw; /* display:block; */ font-size: 1.30vw; font-weight: 800; } #section03 .swiper-slide .txt_box p{margin-top:0.94vw; font-size: 1.05vw; max-height: 4.68vw;} #section03 .swiper-slide.swiper-slide-active{padding-top:0;} #section03 .swiper-slide.swiper-slide-active .img_warp{padding-top:0;transform:scale(1);} #section03 .swiper-slide.swiper-slide-active .txt_box{display:block;width: 35.42vw; transform: translateX(-50%);} #section03 .swiper-controll > div{position: absolute; top: 40%;left: 50%;transform: translate(-50%,-50%);margin-left: -15.63vw; width: 2.86vw; height: 2.86vw;} #section03 .swiper-controll > div::after{content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);width: 0.73vw; height: 1.09vw;} #section03 .swiper-controll .swiper-button-next{margin-left:15.63vw;} #section04 .controls-box {right: 5%;} } @media screen and (max-width:1740px){ .gnb {margin-left: 4.62vw;} } @media screen and (max-width:1600px){ .head{padding:0 3%;} .quick{right: 3.13vw; bottom: 3.13vw;} .quick ul li + li{margin-top: 0.63vw;} .quick ul li a img{width: 3.75vw; box-shadow:0 0 0.63vw rgba(0,0,0,0.15);} #wrap{width:100%; max-width:120.00vw; margin:0 auto;position:relative;} .inner{width:100%; max-width:87.50vw; margin:0 auto;} .b_inner{width:100%; max-width:100.00vw; margin:0 auto; padding:0 5%} [class*="sec"][class*="_tit"] > span{font-size:1.4vw !important;} [class*="sec"][class*="_tit"] > em{margin-top: 1.25vw; font-size: 2.81vw !important;} [class*="sec"][class*="_tit"] a.more span{font-size: 1.8vw !important;} [class*="sec"][class*="_tit"] a.more i {display: inline-block;width: 3vw; height:3vw;background-size: 1vw 0.75vw;} #header{display:flex;justify-content: space-between;} .head{padding:0 3%; display: flex; justify-content: space-between; align-items: center;} .head .logo {position: static;left:3%;transform: inherit;z-index:1;} .head .logo>a{display:block; width:12.50vw;} .head .logo .txt-area{margin:0 0 0.31vw 3.13vw} .head .logo .txt-area a{font-size:1.13vw; margin-right:0.44vw;} .head .logo .txt-area a:after{width:0.19vw; height:0.19vw; margin-left:0.50vw;} .head{max-width:100.00vw;height:6.25vw; padding-right: 0;} .gnb {margin-left: 0;} .gnb > ul > li + li{margin-left:3vw;} .gnb > ul > li > a{display:block; font-size: 1.15vw; line-height:6.25vw; color: #000;} #header .h_right{position:static;height:6.25vw; padding-left: 1.6vw; } #header .menu_btn{height: 100%;display:flex; justify-content:center; align-items:center; cursor:pointer; } #header .menu_icon{display:block;width: 1.56vw; height: 1.25vw; background:url("../images/menu_icon.png")center no-repeat; background-size:contain;} #header .edu_btn{width: 15vw; height: 100%; background-color: #f0f0f0; display:flex; justify-content:center; align-items:center;} #header .edu_btn i{display:inline-block; width: 1.56vw; height: 2.25vw; background:url("../images/h_edu_icon.png")center no-repeat; background-size:contain;;} #header .edu_btn span{font-size: 1.25vw; font-weight: 600;margin-left:0.75vw;} .gnb_2depth { width: 100%; padding: 2.50vw 1.6vw} .gnb_2depth:before {width: 1250.00vw; height: 6.25vw;} .gnb_2depth.gnb_2depth2:before {height: 10.63vw;} .gnb_2depth h3 {font-size: 1.25vw; width: 10.63vw;} .gnb_2depth ul { width: calc(100% - 10.63vw);} .gnb_2depth ul li a { font-size: 1.00vw; padding-bottom: 0.31vw;} .gnb_2depth ul li {margin-right: 3.13vw;} .gnb_2depth.gnb_2depth2 ul { margin: -0.31vw 0; } .gnb_2depth.gnb_2depth2 ul li {padding: 0.31vw 0; margin-right: 0;} .gnb_2depth.gnb_2depth2.ggnb1 {top: 16.88vw;} .gnb_2depth.gnb_2depth2.ggnb2 {top: 27.50vw;} .vis_inner { max-width: 100%; margin: 0 auto; padding: 0 5%;} .visual-nav-list{width:100%; padding: 0 4%;} .visual-nav p {font-size: 1.4vw;line-height:3.5vw;} #section01{padding:8vw 0;} .sec01_tit{margin-bottom:2.81vw; padding: 0;} .sec01_tit div em{font-size: 2.81vw; } .sec01_tit div span{display: inline-block; margin-left:1.88vw;font-size: 1.25vw; line-height: 1.5; color: #474747;} .sec01_tit a.more{font-size: 1.6rem; font-weight: 800; line-height: 1; color: #000;} .sec01_tit a.more span{font-size: 1.6rem;} .sec01_tit a.more i {width: 2.25vw; height: 2.25vw; margin-left: 1.00vw; background-size:0.75vw 0.50vw; } .section01-1 {padding: 9.81vw 0;} .section01-1::before {height: 7.50vw; top: -0.13vw;} .section01-1 ul li {width: calc(100%/3 - 0.63vw);} .section01-1 ul li .tit {top: 4.06vw; left: 3.13vw;} .section01-1 ul li .tit h2 {font-size: 1.88vw;} .section01-1 ul li .tit p {margin-top: 0.31vw; font-size: 1.38vw;} .section01-1 ul li .plus {width: 3.75vw; height: 3.75vw;} #section02{padding:7.50vw 0 13.50vw; background:url(../images/sec02_bg.jpg)center no-repeat; background-size:cover;} #section02 .sec02_tit{text-align: center;margin-bottom:5.00vw;} #section02 .sec02_tit span{display:block;font-size: 1.38vw; font-weight: 900; text-align: center; color: var(--bright-sky-blue);} #section02 .sec02_tit em{display:block;margin-top:1.25vw;font-size: 2.81vw; font-weight: 800; line-height: 1.33; text-align: center; color: #000;} #section02 .slider_wrap{display:flex; position: relative;} #section02 .slider_wrap .slick_slide{width:51.25vw;margin:0 0 0 -2.50vw; } #section02 .slider_wrap .slick_slide .list_m{padding:0 0 0 2.50vw; } #section02 .slider_wrap02 .slick_slide{margin:0 -2.50vw 0 0 ; } #section02 .slider_wrap02 .slick_slide .list_m{padding:0 2.50vw 0 0 ; } #section02 .slider_wrap .slick_slide .list_m .img_warp{position:relative;width: 100%; height: 22.50vw;} #section02 .slider_wrap .slick_slide .list_m .img_warp::before{content:""; position:absolute; bottom:0; left:0; right:0; width:100%; height:50%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 1) 100%);z-index:2;} #section02 .slider_wrap .slick_slide .list_m .img_warp img{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);max-width:100%; max-height:100%; } #section02 .slider_wrap .list_box{position:relative;z-index:1;} #section02 .slider_wrap .list_box a{position:absolute; top:0; left:0; width:100%; height:100%;z-index:5;} #section02 .slider_wrap .slick_slide .list_m .txt_box{position:absolute; bottom:0; left:0; right:0; width:100%; padding:1.88vw 2.50vw;z-index:3;} #section02 .slider_wrap .slick_slide .list_m .txt_box span{ font-size: 1.44vw; font-weight: 800; color: #fff;} #section02 .slider_tit{position: relative; width: 23.13vw; height: 22.50vw; padding: 3.13vw; background-color: var(--bright-sky-blue);margin-right:2.50vw;} #section02 .slider_tit strong{font-size: 2.19vw;line-height: 3.13vw;color: #ffffff;font-weight: 800;} #section02 .slider_tit p{margin-top:1.88vw; font-size: 1.25vw; line-height: 1.5; color: #fff;} #section02 .slider_tit a.more{display:flex; justify-content:center; align-items:center;position:absolute;bottom:0; right:0; width: 4.06vw; height: 4.06vw; background-color: #fff;} #section02 .slider_tit a.more i{display:block; width: 1.56vw; height: 1.56vw; background:url(../images/sec02_plus01.png)center no-repeat; background-size:contain; transition:0.3s all;} #section02 .slider_tit a.more:hover i{transform:rotate(180deg);} #section02 .slider_tit .controls-box{margin-top:2.00vw;width:10.38vw; display:flex; justify-content:space-between;} #section02 .slider_tit .slick-arrow{padding:0.50vw; cursor:pointer} #section02 .slider_tit .slick_prev_btn i.i_arrow{display:block;width: 0.63vw; height: 1.06vw; background:url(../images/sec02_prev.png)center no-repeat; background-size:contain;} #section02 .slider_tit .slick_next_btn i.i_arrow{display:block;width: 0.63vw; height: 1.06vw;background:url(../images/sec02_next.png)center no-repeat; background-size:contain;} #section02 .slick-counter {position: absolute; top: 13.88vw; left: -22.50vw; width: 10.38vw; display: flex; justify-content: center; align-items: center;height: 2.06vw; pointer-events: none; z-index:1;} #section02 .slick-counter .bar { width: 1.38vw; height: 0.06vw; margin: 0 0.63vw; opacity: 0.5; background-color: #fff;} #section02 .slick-counter span{ font-size: 1.25vw; font-weight: 900; line-height: 2.06vw; color: #fff;} #section02 .slick-counter .total{opacity: 0.5; color: #fff;} #section02 .slick-counter .bar + span{opacity: 0.5;} #section02 .slide{display:flex;} #section02 .slide02{flex-direction: row-reverse;margin-top:2.50vw;} #section02 .slide .slider_tit{margin-right:2.49vw;} #section02 .slide02 .slider_tit{background-color: var(--blue-blue);margin-left:2.49vw;margin-right:0;} #section02 .slide .slider_tit a.more i{background: url(../images/sec02_plus01.png)center no-repeat; background-size: contain;} #section02 .slide02 .slider_tit a.more i{background: url(../images/sec02_plus02.png)center no-repeat; background-size: contain;} #section02 .slide02 .slick-counter {left: auto;right: -15.94vw;} #section02 .slide02 .slick-counter2 {position: absolute;top: 13.88vw; left: auto;right: -15.94vw; width: 10.38vw; display: flex; justify-content: center; align-items: center;height: 2.06vw; pointer-events: none; z-index:1} #section02 .slick-counter2 span { font-size: 1.25vw; font-weight: 900; line-height: 2.06vw; color: #fff;} #section02 .slick-counter2 .total{opacity: 0.5; color: #fff;} #section02 .slick-counter2 .bar { width: 1.38vw; height: 0.06vw; margin: 0 0.63vw; opacity: 0.5; background-color: #fff;} #section02 .slick-counter2 .bar + span{opacity: 0.5;} #section03 .swiper-slide .img_warp {height: 27.25vw;} .sec04_tit{margin-bottom:2.81vw; } .sec04_tit div em{font-size: 2.81vw;} .sec04_tit div span{display: inline-block; font-size: 1.25vw; } .sec04_tit a.more span{font-size: 1.6rem;} .sec04_tit a.more i {width: 2.25vw; height: 2.25vw; margin-left: 1.00vw; background-size:0.75vw 0.50vw; } #section06{padding:7.88vw 0 7.88vw;} #section06 .b_inner{position:relative;} #section06 .sec06_tit{position:absolute;top:0; left:5%;} #section06 .sec06_tit > span{display:block;font-size: 1.38vw;font-weight: 900; color: var(--bright-sky-blue);} #section06 .sec06_tit strong{display:block; margin-top:1.00vw;font-size: 2.81vw; font-weight: 300; line-height: 1.22; text-align: left; color: #000;font-weight: 800;} #section06 .sec06_tit strong span{font-weight: 300;} #section06 .slider_wrap{padding-left:0;min-height: 43.63vw;} .sec06-nav-list{position:absolute; top:35%; left:50%; margin-left: 25.25vw; cursor:pointer;width:17.50vw;z-index:1;} .sec06-nav-list .slick-list{overflow: visible;} .sec06-nav{position:relative;} .sec06-nav::before{content:""; position: absolute; bottom:0;right:-16%; width:100%; height:0.06vw; background:var(--bright-sky-blue);width: 26.63vw;display:none;} .sec06-nav-list .sec06-nav p{font-size: 1.75vw; font-weight: 800; line-height: 2; color: #4f4f4f;} .sec06-nav-list .slick-current .sec06-nav p{color: var(--bright-sky-blue);} .sec06-nav-list .slick-current .sec06-nav::before{display:block;} #section06 .sec06-con::before{content:""; position:absolute; top:56%; right:-16%; transform:translateY(-50%); width:43.75vw; height:43.75vw; background:#f5f5f5; border-radius:50%; z-index:-1;} #section06 .sec06-con .list_inner{display:flex;align-items:center;padding-top:5.50vw;} #section06 .sec06-con .txt_box{width:34vw;margin-top:4.38vw;} #section06 .sec06-con .txt_box h2{font-size: 2.31vw; font-weight: 900; line-height: 1; color: var(--bright-sky-blue);} #section06 .sec06-con .txt_box p{margin:1.88vw 0; font-size: 1.25vw;line-height: 1.4; color: #4f4f4f;} #section06 .sec06-con .txt_box a.more{display:inline-flex;padding:0 2.50vw; height:3.44vw; border-radius:3.44vw; overflow: hidden;align-items:center;background-color: var(--bright-sky-blue);} #section06 .sec06-con .txt_box a.more span{font-size: 1.00vw; font-weight: 800; line-height: 1; color: #fff;} #section06 .sec06-con .txt_box a.more i{display:block;width: 2.19vw; height: 0.44vw;margin-left:0.63vw; background:url(../images/sec06_arrow_w.png)center no-repeat;background-size:contain;} #section06 .sec06-con .img_box{width:32.50vw; height:32.50vw; border-radius:50%;} #section06 .slick-dots {bottom: -5.00vw;} #section06 .slick-dots li{width: 0.63vw;height: 0.63vw; margin: 0 0.63vw;} #section06 .slick-dots li button{width: 0.63vw;height: 0.63vw;} #section06 .slick-dots li button:before{width: 0.63vw;height: 0.63vw;opacity:1;background-color: #cecece;} #section06 .slick-dots li.slick-active button:before{background-color: var(--water-blue);} #footer{background:#000;padding:5.63vw 0;color:#fff;} #footer h3 a{display:inline-block;} #footer h3 a img{width:13.13vw;} #footer .sns_icon{margin-right:3.63vw} #footer .sns_icon img{width:2.50vw; height:2.50vw; margin-left:0.63vw} .f_wrap {margin-top:2.63vw; display:flex; justify-content:space-between;} .f_left address{font-size: 1.13vw;line-height: 1.6; color: #fff;} .f_info{margin-top:2.75vw; display:flex;} .f_left dl{font-size: 1.00vw; line-height: 1; color: #a9a9a9;} .f_left dl dd{margin-left:0.50vw; color: #fff;} .f_left dl dt, .f_left dl dd {display:inline;} .f_left dl:nth-of-type(n + 2) dt{margin-left:2.5vw;} .f_copy{margin-top:1vw; font-size: 0.94vw; font-weight: 300; line-height: 1; color: rgba(165, 165, 165, 0.8);} .f_copy span:nth-of-type(1){text-transform:uppercase;} .f_copy span + span{margin-left:0.53vw;} .f_copy .dpunch_ic {display: inline-block;vertical-align: middle;width: 6.25vw;height: 0.63vw;background: url(../images/dpunch_ic.png) center no-repeat;background-size: 100%;margin-left: 0.31vw;} .f_right > em{font-size: 1.00vw; font-weight: 600; line-height: 1; color: #fff;} .f_right > strong{display:block;margin-top:0.88vw;font-size: 1.75vw; font-weight: 900; line-height: 1; text-align: left; color: #d0d0d0;} .f_right > p{margin-top:1.25vw;font-size: 0.88vw; font-weight: 300; line-height: 1.5; color: #c8c8c8;} .f_menu{margin-top:3.13vw;} .f_menu span{display:inline-block;position:relative;} .f_menu span a{display:block; font-size: 1.00vw; font-weight: 600; line-height:1; color: #fff;} .f_menu span + span{margin-left:2.00vw;} .f_menu span + span::before{content:""; position:absolute; top:50%; left:-1.00vw; transform:translateY(-50%); height:0.63vw; width:0.06vw; background:#686868;} .section01-2 {padding: 8.13vw 0 8.94vw;} .section01-2 .tit span {font-size: 2.19vw;} .section01-2 .tab_cont {margin-top: 2.81vw;} .section01-2 .tab_cont .cont {height: 37.81vw;} .section01-2 .tab_cont .cont .txt { top: 5.44vw; left: 4.56vw;} .section01-2 .tab_cont .cont .txt > span {font-size: 1.50vw; letter-spacing: -0.04vw;} .section01-2 .tab_cont .cont .txt h3 {margin-top: 1.56vw; font-size: 3.13vw; letter-spacing: -0.06vw;} .section01-2 .tab_cont .cont .txt p {margin-top: 1.75vw; font-size: 1.38vw;} .section01-2 .tab_cont .cont .txt a {margin-top:2.81vw; border-radius: 1.75vw; gap: 0.63vw; width: 10.69vw; height: 3.13vw; font-size: 0.94vw;} .section01-2 .tab_cont .cont .txt a img {width: 1.95vw;} .section01-2 .tab li {width: calc(100%/3 + 0.13vw); line-height: 6.25vw; font-size: 2.13vw; letter-spacing: -0.06vw;} } @media screen and (max-width:1400px){ .inner{padding:0 5%;max-width: 100%;} .b_inner{padding:0 5%;max-width: 100%;} .quick{right: 3.57vw; bottom: 3.57vw;} .quick ul li + li{margin-top: 0.71vw;} .quick ul li a img{width: 4.29vw; box-shadow:0 0 0.71vw rgba(0,0,0,0.15);} #visual .slider_wrap {height: 56vw;} .visual-con .list_m{width:100%; height:56vw; } .vis_inner .txt_box {top: 14vw;} .vis_inner .txt_box em{font-size: 1.57vw; color: #fff;} .vis_inner .txt_box h2{margin-top:1.43vw; font-size: 3.1vw; font-weight: 900; line-height: 1.2; color: #fff;} .vis_inner .txt_box h2 span{font-size: 3.21vw; font-weight: 300;} .vis_inner .txt_box a.more{margin-top:2.71vw;display: inline-flex; justify-content:center; align-items:center; border-radius: 2.00vw;background-color: #ffffff; height: 3.93vw; padding:0 2.86vw;border: 0.07vw solid #aaaaaa;} .vis_inner .txt_box a.more span{font-size: 1.14vw;line-height: 1.5;color: #010101;font-weight: 800;} .vis_inner .txt_box a.more i{margin-left:0.57vw; width:2.50vw; height:0.50vw; background:url("../images/vis_arrow.png")center no-repeat; background-size:contain;} .vis_inner .txt_box .vis01_txt{width: 41.21vw;} .sec01_tit div em {font-size: 3.2vw;} .sec01_tit span { display: block; margin-left: 0; } .sec04_tit div em {font-size: 3.2vw;} .sec04_tit span { display: block; margin-left: 0; } #section02 .b_inner{padding:0;} #section02 .slide {justify-content: center;} #section02 .slider_tit{width: 28.27vw;height: 27.8vw; margin-right: 2.14vw;} #section02 .slider_wrap .slick_slide {width: 60.78vw;} #section02 .slider_wrap .slick_slide .list_m{padding: 0 0 0 2.14vw;} #section02 .slider_wrap .slick_slide .list_m .img_warp { height:27.79vw;} #section02 .slider_wrap .slick_slide .list_m .img_warp img{min-width:100%; } #section02 .slide02 .slider_tit{margin-right: 0.00vw;margin-left: 2.14vw;} #section02 .slider_wrap02 .slick_slide .list_m {padding: 0 2.14vw 0 0;} #section02 .slick-counter{left:-27.71vw} #section02 .slide02 .slick-counter {right: -15.71vw} #section02 .slide02 .slick-counter2 {right: -15.71vw} .sec03_tit a.more {font-size: 0.94vw; right: 5%;} #section03 .swiper_box { min-height: 46.5vw;} #section03 .swiper-slide {padding-bottom: 19.6vw;} #section03 .swiper-slide .img_warp {height: 30.71vw;} #section03 .swiper-slide .txt_box{width:60.00vw;} #section03 .swiper-slide .txt_box strong {margin-top:3.71vw; font-size: 3.21vw; } #section03 .swiper-slide .txt_box strong span {margin-left:0.57vw;font-size: 2.14vw;} #section03 .swiper-slide .txt_box em {margin-top:2.14vw;/* display:block; */ font-size: 1.79vw;} #section03 .swiper-slide .txt_box p{margin-top:1.29vw; font-size: 1.43vw; max-height: 6.43vw;} #section03 .swiper-controll > div { top: 34%;} #section04{padding:8.57vw 0 5.71vw;z-index:1;position: relative;} #section04::before{content:""; position:absolute; bottom:0; left:0; right:0; background-color: var(--blue-blue);height:27.50vw;z-index:-2;} .section04_bgtext{position: absolute;bottom:0; left:0; right:0; font-size: 11.79vw; font-weight: 800; text-align: center; color: var(--bright-sky-blue);opacity:0.05;text-transform:uppercase;} #section04 .mySwiper {width:78.57vw;} #section04 .swiper-slide .img_warp{width:78.57vw; padding-top:45.00vw;} #section04 .swiper-slide .img_warp img{position: absolute;top:50%; left:50%; transform:translate(-50%,-50%); max-width:100%; max-height:100%; } #section04 .swiper-slide .img_warp .play_btn{width: 9.64vw; height: 9.64vw;background-size: 2.93vw 3.21vw; background-repeat:no-repeat;} #section04 .swiper-slide .txt_box{margin-top:3.29vw; } #section04 .swiper-slide .txt_box strong{font-size: 2.5vw; } #section04 .swiper-slide .txt_box p{margin-top:1.6vw;font-size: 1.6vw;} #section04 .swiper-slide.swiper-slide-active {padding-top:0;} #section04 .swiper-slide.swiper-slide-active .img_warp { transform:scale(1);} #section04 .controls-box{position:absolute; top:-10vw; right:4%;width:19vw;} #section04 .swiper-pagination-fraction {font-size: 1.8vw; height: 4.29vw;} .swiper-button-prev1{width: 4.6vw; height: 4.6vw;} .swiper-button-prev1::before{content:""; width: 1.37vw; height: 0.91vw;} .swiper-button-next1{width: 4.6vw; height: 4.6vw; } .swiper-button-next1::before{content:""; width: 1.37vw; height: 0.91vw;} #section05{padding:7.50vw 0 7.50vw;} #section05 .sec05_tit{margin-bottom:3.13vw;} #section05 .sec05_tit > span{display:block; font-size: 1.56vw; } #section05 .sec05_tit strong{margin-top:1.25vw; display:block;font-size: 3.13vw;} #section05 .sec05_tit strong span{font-size: 2.50vw; font-weight: 300;} .sec05_tit a.more{right: 5%;display:flex;align-items: center;font-size: 1.13vw;} .sec05_tit a.more i {width: 2.25vw; height: 2.25vw; margin-left: 1.00vw; background-size:0.75vw 0.50vw; } #section05 .swiper-controll > div{top: 47%; left: 50%; margin-left: -46vw; width: 3.44vw; height: 3.44vw; box-shadow: 0.00vw 0.31vw 0.81vw 0 rgba(0, 0, 0, 0.22);} #section05 .swiper-controll .swiper-button-prev1::before{content:""; width: 0.88vw; height: 1.31vw;} #section05 .swiper-controll .swiper-button-next1{ margin-left: 42vw; } #section05 .swiper-controll .swiper-button-next1::before{content:""; width: 0.88vw; height: 1.31vw;} #section05 .swiper{margin:0 -1.25vw;} #section05 .swiper-wrapper{align-items:center;} #section05 .swiper-slide{padding:0;} #section05 .swiper-slide.swiper-slide-active{padding-top:0; } #section05 .swiper-slide .card_inner{border-radius: 3.13vw;transform:scale(0.85); } #section05 .swiper-slide.swiper-slide-active .card_inner{transform:scale(1);} #section05 .swiper-slide .txt_box{padding:4.63vw 3.13vw 4.13vw;} #section05 .swiper-slide .txt_box h2{ font-size: 2.00vw;max-height: 4.38vw;} #section05 .swiper-slide .txt_box p{margin-top:3.13vw;color: #7a7a7a;font-size: 1.5vw;line-height: 1.5; max-height: 9vw;} #section05 .swiper-slide .txt_box .txt_box_content {margin-top:3.13vw;color: #7a7a7a;font-size: 1.5vw;line-height: 1.5; max-height: 9vw;} #section05 .swiper-slide .txt_box span{margin-top:2.50vw; font-size: 1.5vw; } #section05 .swiper-slide a.more{display:none; width:100%; height: 5.00vw;font-size: 1.5vw; line-height: 5.00vw;} #section05 .swiper-slide.swiper-slide-active {transform:scale(1);padding:0;} #section05 .swiper-slide.swiper-slide-active .txt_box{padding:5.00vw 3.13vw 3.75vw;} #section07{padding:8.57vw 0; background: #f1f3f5;} #section07 ul{margin-top:5.00vw; display:flex;justify-content: space-around;} #section07 ul li{width:25%; text-align:center;} #section07 ul li a{display:block;} #section07 ul li a .img_icon{display:inline-flex; align-items:center; justify-content:center;width: 11.43vw; height: 11.43vw;background-color: #fff; border-radius:50%;} #section07 ul li a .img_icon i{display:block; width:6.00vw; height:6.00vw; background-image:url(../images/sec07_icon01.png);background-size: contain;background-position: center; background-repeat:no-repeat;} #section07 ul li:nth-child(2) a .img_icon i{ background-image:url(../images/sec07_icon02.png);} #section07 ul li:nth-child(3) a .img_icon i{ background-image:url(../images/sec07_icon03.png);} #section07 ul li:nth-child(4) a .img_icon i{ background-image:url(../images/sec07_icon04.png);} #section07 ul li:nth-child(5) a .img_icon i{ background-image:url(../images/sec07_icon05.png);} #section07 ul li a .img_icon img {width:6.07vw; max-height:6.07vw;} #section07 ul li a span{display:block; margin-top:2.14vw; font-size: 1.64vw; font-weight: 800; line-height: 1; text-align: center; color: #000;} #section07 ul li:hover a .img_icon{background-color: var(--blue-blue);} #section07 ul li:hover a .img_icon i{filter: brightness(100);} #section07 ul li:hover a span{color:var(--blue-blue);} } @media screen and (max-width:1280px){ #header .h_right{padding-left: 1.5vw; } /* .gnb > ul {margin-left: 11.72vw;} */ .gnb > ul > li + li{margin-left: 2.5vw;} .gnb > ul > li > a{font-size: 1.25vw;} #section03 .swiper-slide .img_warp {height: 26.06vw;} #section06 .sec06-con .txt_box { width: 35vw;} #section06 .sec06-con .txt_box p{margin:1.88vw 0; font-size: 1.4vw;line-height: 1.4; color: #4f4f4f;} #section06 .sec06-con .txt_box a.more{padding:0 2.50vw; height:3.6vw; border-radius:3.44vw;} #section06 .sec06-con .txt_box a.more span{font-size: 1.20vw;} #section06 .sec06-con .txt_box a.more i{width: 3vw; height: 0.8vw;margin-left:0.63vw; } #footer h3 a img { width: 15.13vw;} #footer .top-area{justify-content: flex-start; align-items:center} #footer .sns_icon{margin:0 0 0 1.14vw} #footer .sns_icon img{width:2.26vw; height:2.26vw; margin-left:0.71vw} .f_wrap {display: block;} .f_left address {font-size: 1.3vw;} .f_left dl {font-size: 1.20vw;} .f_right{margin-top:4.5vw;} .f_right em{font-size: 1.2vw;} .f_right > strong {display: inline-block; font-size: 2.2vw;margin-left: 1vw;} .f_right > p { margin-top: 1.5vw; font-size: 1.3vw;} .f_copy {margin-top: 1.5vw; font-size: 1.2vw;} .f_menu span a {display: block;font-size: 1.20vw;} .f_copy {margin-top: 1.5vw; font-size: 1.3vw;} .f_copy .dpunch_ic { width: 8.5vw; height: 1.2vw; background-size: contain;} } @media screen and (max-width:1024px){ [class*="sec"][class*="_tit"] > span{font-size:1.6vw !important;} [class*="sec"][class*="_tit"] > em{margin-top: 1.5vw; font-size: 3.2vw !important;} [class*="sec"][class*="_tit"] a.more span{font-size: 2.3vw !important; } .quick{right: 3vw; bottom: 4.88vw;} .quick ul li + li{margin-top: 0.98vw;} .quick ul li a img{width: 5.86vw; box-shadow:0 0 0.98vw rgba(0,0,0,0.15);} .gnb{display:none;} .head {height: 8.25vw;} #header .logo a{width: 16.5vw;} #header .h_right{height:8.25vw} #header .menu_icon{ width: 2vw; height: 1.8vw;} #header .edu_btn {width: 17vw} #header .edu_btn i{ width: 2vw; height: 2.5vw;} #header .edu_btn span{font-size: 1.5vw;} .head_all_bg.on {display: none !important;} .head .logo .txt-area{margin:0 0 0.49vw 3.4vw} .head .logo .txt-area a{font-size:1.6vw; margin-right:0.68vw;} .head .logo .txt-area a:after{width:0.29vw; height:0.29vw; margin-left:0.78vw;} .head_mob_bg.on {display: block;} .head_mob_bg {display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 3500;} .head_mob_bg_inner {float: right; width: 62.50vw; height: 100%; background: #fff; padding: 0 2.08vw 0; } .head_mob_tp { height: 9.77vw; width: 100%; z-index: 999; top: 0; display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 3.96vw 3.13vw;} .head_mob_tp .logo a{display: block;} .head_mob_tp .logo img {width: 21.67vw;} .head_mob_tp .head_mob_close_btn {width: 3.13vw; height: 2.92vw; background: url("https://www.human.or.kr/images/menu_close_icon.png") center no-repeat; background-size: 100%; cursor: pointer; z-index: 20;} .accordion > li:last-child {border-bottom: 1px solid #eee;} .accordion .link {position: relative; cursor: pointer; padding: 0 2.08vw; display: block; color: #222; font-size: 3.65vw; font-weight: 700; border-top: 1px solid #eee; height: 8.79vw; line-height: 8.59vw; background: url("https://www.human.or.kr/images/head_mob_arrow.png") 95% center no-repeat; background-size: 2.60vw;} .accordion .link a {display: block;} .accordion li.open .link { color: var(--blue-blue); border-bottom: 0;} .submenu {display: none; padding:4.17vw 5.21vw; border-top: 1px solid #eee; background: #ededed;} .submenu li + li {margin-top: 2.08vw;} .submenu a {display: block; color: #222; font-size: 2.92vw; line-height: 3.75vw;} .submenu a:hover { color: var(--blue-blue);} #visual .slider_wrap {height: 60vw;} .visual-con .list_m { height: 60vw;} .vis_inner { max-width: 100%; margin: 0 auto; padding: 0 5%;} .vis_inner .txt_box{top:14.5vw} .vis_inner .txt_box em{font-size: 1.7vw;} .vis_inner .txt_box h2{margin-top:1.43vw; font-size: 3.57vw; } .vis_inner .txt_box h2 span{font-size: 3.21vw; font-weight: 300;} .vis_inner .txt_box a.more{margin-top:2.71vw;border-radius: 2.00vw; height: 3.93vw; padding:0 2.86vw;border: 0.07vw solid #aaaaaa;} .vis_inner .txt_box a.more span{font-size: 1.14vw;} .vis_inner .txt_box a.more i{margin-left:0.57vw; width:2.50vw; height:0.50vw;} .visual-nav-list{padding:0 5%; width: 100%;} .visual-nav p{font-size: 1.8vw;line-height:4.29vw;margin:0 2.36vw; } .vis_inner .txt_box .vis01_txt{width: 44.57vw;} .sec01_tit{padding:0;} .sec01_tit div span {font-size: 2vw; display: block; margin-left: 0; margin-top: 0.5vw;} .section01-1 {padding: 9.77vw 0;} .section01-1::before {height: 6.52vw; top: -0.15vw;} .section01-1 ul li {width: calc(100%/3 - 0.59vw);} .section01-1 ul li .tit {top: 4.10vw; left: 3.13vw;} .section01-1 ul li .tit h2 {font-size: 1.86vw;} .section01-1 ul li .tit p {margin-top: 0.29vw; font-size: 1.37vw;} .section01-1 ul li .plus {width: 3.71vw; height: 3.71vw;} #section02 .slider_tit strong {font-size: 2.6vw;} #section02 .slider_tit p { margin-top: 1.88vw; font-size: 1.6vw;} #section02 .slick-counter {position: absolute;top: 14.88vw;} #section03 .swiper-slide .img_warp {height: 25.83vw;} #section07 ul li a .img_icon { width: 13.43vw; height: 13.43vw;} #section07 ul li a .img_icon i { width: 6.5vw;height: 6.5vw;} #section07 ul li a span {margin-top: 2.4vw;font-size: 1.8vw;} .f_left address {font-size: 1.5625vw;} .f_left dl {font-size: 1.3672vw;} .f_right{margin-top:5.2734vw;} .f_right em{font-size: 1.3672vw;} .f_right > strong { font-size: 2.5391vw;margin-left: 1.1719vw;} .f_right > p { margin-top: 1.7578vw; font-size: 1.5625vw;} .f_copy {margin-top: 1.7578vw; font-size: 1.3672vw;} .f_menu span a {font-size: 1.3672vw;} .f_copy {margin-top: 1.7578vw; font-size: 1.5625vw;} .f_copy .dpunch_ic { width: 9.9609vw; height: 1.3672vw; } } @media screen and (max-width:960px){ } @media screen and (max-width:768px){ [class*="sec"][class*="_tit"] > span{font-size:3.26vw !important;} [class*="sec"][class*="_tit"] > em{margin-top: 2.60vw; font-size: 5vw !important;} [class*="sec"][class*="_tit"] a.more span{font-size: 3.5vw !important; } [class*="sec"][class*="_tit"] a.more i{width: 3.5vw; height: 3.5vw;background-size: 1.35vw 1vw;} .quick{right: 3vw; bottom: 6.51vw;} .quick ul li + li{margin-top: 2.30vw;} .quick ul li a img{width: 11.81vw; box-shadow:0 0 2.30vw rgba(0,0,0,0.15);} .inner {padding: 0 2%;} .b_inner {padding: 0 3vw;} .head {height: 13vw;padding-left:3vw;} #header .logo a {width: 25.5vw;} #header .h_right {height: 13vw;gap: 3.6vw;} #header .menu_icon {width: 3.5vw;height: 3.2vw;} #header .edu_btn {width: 28vw;} #header .edu_btn i {width: 4.2vw;height: 4.4vw;} #header .edu_btn span {font-size: 3.13vw;} .head .logo .txt-area{margin:0px 0 0.59vw 5.8vw} .head .logo .txt-area a{font-size:2.6vw; margin-right:0.68vw;} .head .logo .txt-area a:after{width:0.49vw; height:0.49vw; margin-left:0.78vw;} .head_all_bg.on {display: none !important;} .head_mob_bg.on {display: block;} .head_mob_bg {display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 3500;} .head_mob_bg_inner {float: right; width: 78.13vw; height: 100%; background: #fff; padding: 0 2.6vw 0; } .head_mob_tp { height: 20vw; width: 100%; z-index: 999; top: 0; display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 5vw 3.91vw;} .head_mob_tp .logo a{display: block;} .head_mob_tp .logo img {width: 27.08vw;} .head_mob_tp .head_mob_close_btn {width: 3.91vw; height: 3.65vw; background: url("https://www.human.or.kr/images/menu_close_icon.png") center no-repeat; background-size: 100%; cursor: pointer; z-index: 20;} .accordion > li:last-child {border-bottom: 1px solid #eee;} .accordion .link {position: relative; cursor: pointer; padding: 0 2.60vw; display: block; color: #222; font-size: 4.56vw; font-weight: 700; border-top: 1px solid #eee; height: 13.02vw; line-height: 12.7604vw; background: url("https://www.human.or.kr/images/head_mob_arrow.png") 95% center no-repeat; background-size: 3.26vw;} .accordion .link a {display: block;} .accordion li.open .link { color: var(--blue-blue); border-bottom: 0;} .submenu {display: none; padding:5.21vw 6.51vw; border-top: 1px solid #eee; background: #ededed;} .submenu li + li {margin-top: 2.60vw;} .submenu a {display: block; color: #222; font-size: 3.65vw; line-height: 4.69vw;} .submenu a:hover { color: var(--blue-blue);} #visual .slider_wrap {height: 130vw;} .visual-con .list_m { height: 130vw; background-position: right 36% center;} /* .vis_inner .txt_box { top: 40%; transform: translateY(-50%); } */ .vis_inner{top: 18vw;} .vis_inner .txt_box em{font-size: 3.8vw;} .vis_inner .txt_box h2{margin-top:4vw; font-size: 6.6vw; line-height: 1.3;} .vis_inner .txt_box h2 span{font-size: 5.5vw;} .vis_inner .txt_box a.more{margin-top:8vw; border-radius: 4.3vw; height: 9vw; padding:0 6.00vw;} .vis_inner .txt_box a.more span{font-size: 3.50vw;} .vis_inner .txt_box a.more i{margin-left:1.5vw; width:5.5vw; height:1.6vw;} .visual-nav-list{display:none;} .vis_inner .txt_box .vis01_txt{width: 87.14vw;} .vis_inner .txt_box .vis01_txt.pc{display: none;} .vis_inner .txt_box .vis01_txt.mob{display: block;} .visual-con .list_m.bg01{background-image:url("https://www.human.or.kr/images/vis_new01_mob.jpg");} #visual .slick-dots { bottom: 10vw;} #visual .slick-dots li button:before{background-color:#fff;} #section01 {padding: 15vw 0 18vw;} .sec01_tit{margin-bottom: 6vw;} .sec01_tit div em {font-size: 5.4vw;} .sec01_tit div span {font-size: 3.6vw; margin-top: 1.75vw;} .sec01_tit a.more{position:absolute; top:0; right:0; } .section01-1 {padding: 15vw 0;} .section01-1::before {display: none;} .section01-1 ul {display: revert;} .section01-1 ul li {width: 100%; height: 50vw;} .section01-1 ul li + li {margin-top: 3.5vw;} .section01-1 ul li .tit {top: 6.13vw; left: 6.13vw;} .section01-1 ul li .tit h2 {font-size: 6vw;} .section01-1 ul li .tit p {margin-top: 1.5vw; font-size: 4.9vw;} .section01-1 ul li .plus {width: 10vw; height: 10vw;} #section02 {padding: 16vw 0 16vw;} #section02 .b_inner{padding:0 ;} #section02 .slide{} #section02 .slide02 { margin-top: 3.5vw;} #section02 .slider_tit{width: 43.23vw;height: 42.06vw; margin-right: 0vw;margin-left: 0vw;padding: 5.13vw 2.60vw;} #section02 .slide01 .slider_tit{margin-right: 6vw;} #section02 .slide02 .slider_tit{margin-left: 6vw;} #section02 .slider_tit strong{font-size: 4vw;line-height: 4.67vw;} #section02 .slider_tit p{margin-top:2.83vw; font-size: 3.2vw; line-height: 1.5; } #section02 .slider_tit a.more{width: 8vw; height: 8vw;} #section02 .slider_tit a.more i{width: 3vw; height: 3vw;} #section02 .slider_wrap .slick_slide {width: 43.23vw;} #section02 .slider_wrap .slick_slide .list_m{padding: 0;margin:0;} #section02 .slider_wrap .slick_slide .list_m .img_warp { height:42.06vw;} #section02 .slider_wrap .slick_slide .list_m .img_warp img{min-width:100%; } #section02 .slider_wrap02 .slick_slide .list_m {padding: 0;} #section02 .slick-counter{left:-43.5vw; display: flex !important;} #section02 .slider_wrap .slick_slide .list_m .txt_box {padding:3vw 4vw;} #section02 .slider_wrap .slick_slide .list_m .txt_box span{ font-size: 3.6vw; font-weight: 800; color: #fff;} #section02 .slider_tit .controls-box{margin-top:3.00vw;width:24vw;position: absolute; top: 21vw; left: 4.49vw;} #section02 .slider_tit .slick-arrow{padding:0.83vw;} #section02 .slider_tit .slick_prev_btn i.i_arrow{width: 2vw; height: 3vw; } #section02 .slider_tit .slick_next_btn i.i_arrow{width: 2vw; height: 3vw; } #section02 .slick-counter {top: 25vw;left: -44.92vw;width: 24vw;height: 3.17vw; display: flex !important} #section02 .slick-counter .bar { width: 3vw; height: 0.3vw; margin: 0 1.50vw; opacity: 0.5; } #section02 .slick-counter span{font-size: 2.6vw;line-height: 3.17vw; } #section02 .slide02 .slick-counter {left: auto;right: -34.51vw;} #section02 .slide02 .slick-counter2 {top: 25vw; left: auto;right: -34.51vw; width: 24vw; height: 3.17vw;} #section02 .slick-counter2 span { font-size: 2.6vw; line-height: 3.17vw;} #section02 .slick-counter2 .bar { width: 3vw; height: 0.3vw; margin: 0 1.50vw; } .sec03_tit a.more {right: 3%; bottom: auto; top: 0;} #section03 {padding: 15vw 0 17vw;} #section03 .sec03_tit {margin-bottom: 6vw;} #section03 .swiper {width: calc(100% + 30vw); position: static;transform: translateX(-15vw);} #section03 .swiper-slide.swiper-slide-active .txt_box {position: static; transform: translate(-15%);text-align: center;width: 140%;text-align: center;margin-top: 4vw;} #section03 .swiper-slide {padding-bottom:0;} #section03 .swiper-slide .img_warp {height: 65.38vw;} #section03 .swiper-slide .txt_box strong{margin-top:0;} #section03 .swiper-slide .txt_box strong {margin-top:6.77vw; display:block; font-size: 5.86vw; font-weight: 800; line-height: 1.33; color: #fff;} #section03 .swiper-slide .txt_box strong span {margin-left:1.04vw;display:inline-block; font-size: 3.91vw; font-weight: 500;} #section03 .swiper-slide .txt_box em {margin-top:3.91vw;/* display:block; */font-size: 3.26vw; font-weight: 800; line-height: 1; color: var(--water-blue);} #section03 .swiper-slide .txt_box p{margin-top:2.34vw; font-size: 3.6vw;max-height: 16.2vw;} #section03 .swiper-controll > div{top:37vw; width: 10vw; height: 10vw; margin-left: -39vw;} #section03 .swiper-controll > div::after{width: 3.5vw;height: 2.8vw;} #section03 .swiper-controll .swiper-button-next { margin-left: 39vw;} .sec04_tit div em {font-size: 5.4vw;} .sec04_tit div span {font-size: 3.6vw; margin-top: 1.75vw;} .sec04_tit a.more{position:absolute; top:0; right:0; } #section04{padding:15vw 0 19vw;} #section04::before{content:""; height:40vw;z-index:-2;} .section04_bgtext{display: none;} .sec04_tit{margin-bottom: 5vw; text-align: center;} .sec04_tit div{flex-wrap: wrap; align-items: flex-end; justify-content: center;} .sec04_tit div em {font-size: 6vw;} .sec04_tit div span {font-size: 3.6vw; margin-top: 1.75vw;} .sec04_tit div p{font-size: 4vw; margin: 0;} .sec04_tit a.more span{position:absolute; top:0; right:0; } #section04 .mySwiper {width:94%;overflow:hidden;} #section04 .swiper-slide .img_warp{width:100%; padding-top:57%;} #section04 .swiper-slide .img_warp img{position: absolute;top:50%; left:50%; transform:translate(-50%,-50%); max-width:100%; max-height:100%; } #section04 .swiper-slide .img_warp .play_btn{width: 9.64vw; height: 9.64vw;background-size: 2.93vw 3.21vw; background-repeat:no-repeat;} #section04 .swiper-slide .txt_box{margin-top:4vw; } #section04 .swiper-slide .txt_box strong{font-size: 4.6vw; } #section04 .swiper-slide .txt_box p{margin-top:1vw;font-size: 3.5vw;} #section04 .swiper-slide.swiper-slide-active {padding-top:0;} #section04 .swiper-slide.swiper-slide-active .img_warp { transform:scale(1);} #section04 .controls-box{top: auto;bottom: -14.4vw; right: 50%; width: 43vw; transform: translateX(50%);} #section04 .swiper-pagination-fraction {font-size: 4.00vw; height:10vw;} .swiper-button-prev1{width: 10vw; height: 10vw;} .swiper-button-prev1::before{ width: 2.6vw; height: 1.8vw;} .swiper-button-next1{width: 10vw; height: 10vw; } .swiper-button-next1::before{ width: 2.6vw; height: 1.8vw;} #section05{padding:11vw 0 30vw;} #section05 .sec05_tit{margin-bottom:7vw;text-align: center;} #section05 .sec05_tit > span{display:block; font-size: 3.5vw; } #section05 .sec05_tit strong{margin-top:2.34vw; display:inline-block;font-size: 6vw;} #section05 .sec05_tit strong span{font-size: 4.56vw; font-weight: 300;} .sec05_tit a.more{display:none;} #section05 .swiper-controll {position: absolute; bottom: -13vw; display: flex; justify-content: center; width: 100%;} #section05 .swiper-controll > div{position: relative; top: auto; bottom: auto; left: auto; margin-left: 0; margin-right: 1.30vw;width: 8vw; height: 8vw; box-shadow: 0.00vw 0.52vw 1.43vw 0 rgba(0, 0, 0, 0.22);} #section05 .swiper-controll .swiper-button-prev1::before{content:""; width: 2vw; height: 3vw;} #section05 .swiper-controll .swiper-button-next1{ margin-left: 1.30vw; } #section05 .swiper-controll .swiper-button-next1::before{content:""; width: 2vw;height: 3vw;} #section05 .swiper{margin:0 -2.34vw;} #section05 .swiper_box{padding: 0; width: calc(100% + 20vw); max-width: fit-content;transform:translateX(-10vw);} #section05 .swiper-slide{padding:4.56vw 2.34vw 0;} #section05 .swiper-slide.swiper-slide-active{padding-top:0; } #section05 .swiper-slide .card_inner{border-radius: 5.73vw;} #section05 .swiper-slide .txt_box{padding:8.46vw 5.73vw 7.55vw;} #section05 .swiper-slide .txt_box h2{ font-size: 4vw;max-height: 8.94vw;} #section05 .swiper-slide .txt_box p{margin-top:5.73vw;color: #7a7a7a;font-size: 3.5vw;line-height: 1.5; max-height: 20.67vw;} #section05 .swiper-slide .txt_box .txt_box_content {margin-top:5.73vw;color: #7a7a7a;font-size: 3.5vw;line-height: 1.5; max-height: 20.67vw;} #section05 .swiper-slide .txt_box span{margin-top:4.56vw; font-size: 2.34vw; } #section05 .swiper-slide a.more{display:none; width:100%; height: 9.11vw;font-size: 2.34vw; line-height: 9.11vw;} #section05 .swiper-slide.swiper-slide-active .txt_box{padding:9.11vw 5.73vw 6.90vw;} #section06{padding: 12vw 0 ;} #section06 .sec06_tit {position: static;} #section06 .sec06_tit span br{display:none;} #section06 .sec06_tit strong {margin-top: 1.5vw;font-size: 6vw;} #section06 .sec06-nav-list{display:none;} #section06 .sec06-con .list_inner {display: flex;align-items: center;padding-top: 0;flex-direction: column-reverse; align-items: flex-start;margin-top: 6vw;} #section06 .sec06-con .img_box {width: 67.97vw;height: 67.97vw; margin: 0 auto;} #section06 .sec06-con .txt_box{width:100%;margin-top:12vw;text-align:center;} #section06 .sec06-con .txt_box h2{font-size: 5.2vw; font-weight: 900; line-height: 1; color: var(--bright-sky-blue);} #section06 .sec06-con .txt_box p{margin:3.91vw 0 4.2vw; font-size: 3.5vw;line-height: 1.4; color: #4f4f4f;} #section06 .sec06-con .txt_box a.more{display:inline-flex;padding:0 5.21vw; height:8.6vw; border-radius:8.6vw; overflow: hidden;align-items:center;background-color: var(--bright-sky-blue);} #section06 .sec06-con .txt_box a.more span{font-size: 3.2vw; font-weight: 800; line-height: 1; color: #fff;} #section06 .sec06-con .txt_box a.more i{width: 4.9vw; height: 1.91vw;margin-left:1.60vw;} #section06 .sec06-con::before { content: "";top: 34%; right: -32%; width: 50.75vw; height: 50.75vw;} #section06 .slick-dots {bottom: 35vw;} #section06 .slick-dots li{width: 1.8vw;height: 1.8vw; margin: 0 1.8vw;} #section06 .slick-dots li button{width: 1.8vw;height: 1.8vw;} #section06 .slick-dots li button:before{width: 1.8vw;height: 1.8vw;opacity:1;background-color: #cecece;} #section06 .slick-dots li.slick-active button:before{background-color: var(--water-blue);} #section07{padding:13vw 0 15vw;} #section07 ul {margin-top: 5vw;display: flex;justify-content: center;flex-wrap: wrap;} #section07 ul li {width: 33%;text-align: center;} #section07 ul li:nth-child(n + 4) {margin-top: 6vw;} #section07 ul li a .img_icon {width: 22vw; height: 22vw;} #section07 ul li a .img_icon i {width: 8.6vw;height: 8.6vw;} #section07 ul li a span {margin-top: 3.4vw;font-size: 3.26vw;} #footer {padding: 12vw 0;} #footer h3 a img {width: 30.13vw;} #footer .sns_icon{margin-left:2vw} #footer .sns_icon img{width:5.21vw; height:5.21vw; margin-left:1.5vw} .f_wrap { margin-top: 6.63vw;} .f_info{flex-wrap: wrap; gap: 2vw; margin-top: 6vw;} .f_left address {font-size: 3vw;} .f_left dl {font-size: 3.2vw;} .f_left dl:nth-of-type(n + 2) dt {margin-left: 0;} .f_right{margin-top:7.03vw;} .f_right em{font-size: 3.2vw;} .f_right > strong { font-size: 5vw;margin-left: 2vw;} .f_right > p { margin-top: 4vw; font-size: 3.2vw;} .f_copy {margin-top: 6vw; font-size: 1.82vw;} .f_menu {margin-top: 4vw;} .f_menu span a {font-size: 3.2vw;} .f_menu span + span{margin-left:4vw;} .f_menu span + span::before {left: -2vw; height: 1.63vw;} .f_copy {margin-top: 2.34vw; font-size: 3.26vw;} .f_copy span {display: block; margin-bottom: 1.30vw;} .f_copy span + span {margin-left: 0;} .f_copy .dpunch_ic { width: 13.28vw; height: 1.82vw; } .section01-2 {padding: 15vw 0;} .section01-2 .pc {display: none;} .section01-2 .mob {display: block;} .section01-2 .tit span {font-size: 4vw; display: inline-block;} .section01-2 .tab_cont {margin-top: 3.91vw;} .section01-2 .tab_cont .cont {height: 101.04vw;} .section01-2 .tab_cont .cont .txt { top: 7.55vw; left: 0; padding: 0 7.16vw; width: 100%;} .section01-2 .tab_cont .cont .txt > span {font-size: 3.65vw; letter-spacing: -0.16vw;} .section01-2 .tab_cont .cont .txt h3 {margin-top: 2.60vw; font-size: 7.29vw; letter-spacing: -0.26vw;} .section01-2 .tab_cont .cont .txt p {margin-top: 2.60vw; font-size: 3.65vw; word-break: keep-all;} .section01-2 .tab_cont .cont .txt p br {display: none;} .section01-2 .tab_cont .cont .txt a {margin-top:3.91vw; border-radius: 6.51vw; gap: 1.60vw; width: 31.25vw; height: 8.6vw; font-size: 3.2vw;} .section01-2 .tab_cont .cont .txt a img {width: 4.9vw;} .section01-2 .tab li {width: calc(100%/3 + 0.13vw); line-height: 16.15vw; font-size: 3.4vw; letter-spacing: -0.26vw;} } /* 메인 아코디언 */ /* 아코디언 전체 레이아웃 */ .accordion-list-box{max-width:1600px;margin:0 auto;} .accordion-list-box .accordion-list{ display: table; width:100%; height: 754px; font-size:0;} .accordion-list .accordion-item{position:relative; min-width:160px; max-width: 920px;} .accordion-list .accordion-item .accordion-inner{display:block; position:relative; height:100%; margin:0; cursor:pointer; filter:grayscale(1); transition:all 0.3s; background-size: cover !important;} .accordion-list .accordion-item .accordion-inner:before{position: absolute; content:''; width:100%; height:100%; top:0; left:0; background:#000; opacity:0.3; transition:all 0.3s;} .accordion-list .accordion-item.active .accordion-inner{filter:grayscale(0);} .accordion-list .accordion-item.active .accordion-inner::before{opacity:0;} /* 아코디언 :: 타이틀 및 내용 */ .accordion-item .accordion-inner .accordion-tit{position: absolute; left: 50%;transform: translateX(-50%); top: 60px; z-index: 10; font-size: 40px; line-height: 1; color: #ffffff; font-weight: 800;/* writing-mode: vertical-rl; letter-spacing: -5.3px;*/} .accordion-item .accordion-inner .accordion-tit span{display:block} .accordion-item .accordion-inner .accordion-tit span.mgt-8px{margin-top:8px} .accordion-item .accordion-info-box{position:absolute; left:0; right:0; bottom:0px; width:80%;} .accordion-item .accordion-info-box dl{position:relative; z-index:1;padding:50px 80px 50px 50px; box-sizing:border-box;opacity:0;filter:Alpha(opacity=0);color:#000;-webkit-transition-delay:0s;-moz-transition-delay:0s; -o-transition-delay:0s; -ms-transition-delay:0s;transition-delay:0s;z-index:1;width:100%;background:#fff;} .accordion-item .accordion-info-box dl dt{position: relative;font-size: 30px;font-weight: 800; line-height: 1.33;color: #000;word-break: keep-all;opacity:0;} .accordion-item .accordion-info-box dl dd{position: relative;opacity:0;margin-top: 30px;font-size: 20px;line-height: 1.5;color: #000;} .accordion-item .accordion-info-box dl .accordion-info-txt{font-size:16px; color:#333; line-height:1.63;} .accordion-item .accordion-info-box .more-btn{position:absolute; bottom:0px; right:0px;display: flex; justify-content: center; align-items: center; position: absolute; bottom: 0; right: 0; width: 80px; height: 80px; background-color: var(--blue-blue); z-index: 1;opacity:0;visibility: hidden;} .accordion-item .accordion-info-box .more-btn::after{content:""; width: 25px; height: 25px; display: block; background: url(../images/sec01_plus_w.png)center no-repeat; background-size: contain; transition: 0.3s all; } /* 아코디언 :: 타이틀 및 내용 Active */ .accordion-item.active .accordion-inner:after{opacity:0;filter:Alpha(opacity=0); } .accordion-item.active .accordion-inner .accordion-tit{ opacity:0;filter:Alpha(opacity=0); transition:all 0s; } .accordion-item.active .accordion-inner dl{opacity:1;visibility:visible;} .accordion-item.active .accordion-inner dl, .accordion-item.active .accordion-inner dl dt, .accordion-item.active .accordion-inner dl dd{ opacity:1.0;filter:Alpha(opacity=100); -webkit-transition:all 0.3s 0.5s; -moz-transition:all 0.3s 0.5s; -o-transition:all0 0.3s 0.5s; -ms-transition:all 0.3s 0.5s; transition:all 0.3s 0.5s; width:100%; } .accordion-item.active .accordion-info-box .more-btn{ opacity:1.0;visibility:visible;filter:Alpha(opacity=100); -webkit-transition-delay:0.75s; -moz-transition-delay:0.75s; -o-transition-delay:0.75s; -ms-transition-delay:0.75s; transition-delay:0.75s } /* 아코디언 전체 레이아웃 */ @media all and (min-width:801px){ .accordion-item .accordion-info-box dl .accordion-info-txt{opacity:0; font-size:0; transition:all 0.3s 0.4s;box-sizing:border-box;} .accordion-item.active .accordion-info-box dl .accordion-info-txt{opacity:1; font-size:20px;} .accordion-item .accordion-inner .accordion-tit{font-size: 2.6vw;line-height:1; letter-spacing: -0.1vw;} .accordion-list-box .accordion-list{ display: table; width:100%; height: 44.94vw; font-size:0;} .accordion-list .accordion-item{width:180px; display:table-cell; height:100%; } .accordion-list .accordion-item .accordion-m-img{display:none;} } @media all and (min-width:1024px){ .accordion-list .accordion-item{min-width:13.67vw;} /* 접힌 li의 width */ } @media all and (min-width:1400px){ .accordion-list .accordion-item{min-width:170px;} /* 접힌 li의 width */ } @media all and (min-width:1600px){ .accordion-list-box .accordion-list{ height: 754px;} /* .accordion-item .accordion-inner .accordion-tit {font-size:40px;letter-spacing: -5.3px;} */ .accordion-item .accordion-inner .accordion-tit{font-size: 40px} } @media screen and (max-width:1920px){ /* 아코디언 */ .accordion-list-box{max-width:100.00vw;margin:0 auto;} .accordion-list .accordion-item{position:relative;max-width: 57.50vw;} .accordion-list .accordion-item .accordion-inner{display:block; position:relative; height:100%; margin:0; cursor:pointer; filter:grayscale(1); transition:all 0.3s; background-size: cover !important;} .accordion-list .accordion-item .accordion-inner:before{position: absolute; content:''; width:100%; height:100%; top:0; left:0; background:#000; opacity:0.3; transition:all 0.3s;} .accordion-list .accordion-item.active .accordion-inner{filter:grayscale(0);} .accordion-list .accordion-item.active .accordion-inner::before{opacity:0;} /* 아코디언 :: 타이틀 및 내용 */ .accordion-item .accordion-inner .accordion-tit{position: absolute; left: 50%;transform: translateX(-50%); top: 3.75vw; z-index: 10; font-size: 2.10vw; line-height: 1; color: #ffffff; font-weight: 800; /* letter-spacing: -0.33vw; */} .accordion-item .accordion-inner .accordion-tit .mgt-8px{display:block;margin-top:8px;} .accordion-item .accordion-info-box dl{ position:relative; z-index:1;padding:3.13vw 5.00vw 3.13vw 3.13vw; box-sizing:border-box;opacity:0;filter:Alpha(opacity=0);color:#000;-webkit-transition-delay:0s;-moz-transition-delay:0s; -o-transition-delay:0s; -ms-transition-delay:0s;transition-delay:0s;z-index:1;width:100%;background:#fff;} .accordion-item .accordion-info-box dl dt{position: relative;font-size: 1.88vw;font-weight: 800; line-height: 1.33;color: #000;word-break: keep-all;opacity:0;} .accordion-item .accordion-info-box dl dd{position: relative;opacity:0;margin-top: 1.88vw;font-size: 1.25vw;line-height: 1.5;color: #000;} .accordion-item .accordion-info-box dl .accordion-info-txt{font-size:1.00vw; letter-spacing:-0.025em;color:#333; line-height:1.63;} .accordion-item .accordion-info-box .more-btn{position:absolute; bottom:0.00vw; right:0.00vw;display: flex; justify-content: center; align-items: center; position: absolute; bottom: 0; right: 0; width: 5.00vw; height: 5.00vw; background-color: var(--blue-blue); z-index: 1;opacity:0;} .accordion-item .accordion-info-box .more-btn::after{content:""; width: 1.56vw; height: 1.56vw; display: block; background: url(../images/sec01_plus_w.png)center no-repeat; background-size: contain; transition: 0.3s all; } /* 아코디언 :: 타이틀 및 내용 Active */ .accordion-item.active .accordion-inner:after{opacity:0;filter:Alpha(opacity=0); } .accordion-item.active .accordion-inner .accordion-tit{ opacity:0;filter:Alpha(opacity=0); transition:all 0s; } .accordion-item.active .accordion-inner dl, .accordion-item.active .accordion-inner dl dt, .accordion-item.active .accordion-inner dl dd{ opacity:1.0;filter:Alpha(opacity=100); -webkit-transition:all 0.3s 0.5s; -moz-transition:all 0.3s 0.5s; -o-transition:all0 0.3s 0.5s; -ms-transition:all 0.3s 0.5s; transition:all 0.3s 0.5s; width:100%; } .accordion-item.active .accordion-info-box .more-btn{ opacity:1.0;filter:Alpha(opacity=100); -webkit-transition-delay:0.75s; -moz-transition-delay:0.75s; -o-transition-delay:0.75s; -ms-transition-delay:0.75s; transition-delay:0.75s } } @media screen and (max-width:1400px){ .accordion-item .accordion-info-box dl{padding:3.3vw 5.50vw 3.3vw 3.3vw} } .accordion-item .accordion-info-box dl dd{margin-top:1.5vw} @media screen and (max-width:1280px){ .accordion-list .accordion-item{min-width:110px;} /* 접힌 li의 width*/ .accordion-item .accordion-info-box {width: 100%;} .accordion-item .accordion-inner .more-btn{transform:none;width: 6vw; height: 6vw;} } @media screen and (max-width:1024px){ /* 아코디언 01 :: 타이틀 및 내용 */ .accordion-list .accordion-item{min-width:90px;} /* 접힌 li의 width*/ .accordion-item .accordion-info-box{width:100%; height: 0;} .accordion-item.active .accordion-info-box {height: auto;} .accordion-item .accordion-info-box:before{height:100%;} .accordion-item .accordion-info-box dl dt{font-size:2.6vw; margin-bottom:0;} .accordion-item .accordion-info-box dl dd{margin-top:1.5vw} .accordion-item .accordion-inner .more-btn{transform:none;width: 6vw; height: 6vw;} } @media screen and (max-width:800px){ .accordion-item .accordion-inner .accordion-tit span{display:inline;} .accordion-item .accordion-inner .accordion-tit br{display:none;} .accordion-item .accordion-inner .accordion-tit span.mgt-8px{display:inline-block;margin-top:0px;margin-left:8px;} .accordion-item .accordion-inner .more-btn{width: 10vw; height: 10vw;} .accordion-list-box .accordion-list{max-width:800px; margin:0px auto;} .accordion-list .accordion-item{height:auto; margin-top:10px; min-width:100%} .accordion-list .accordion-item:first-child{margin-top:0} .accordion-list .accordion-item .accordion-inner{background-image:none; margin-left:0 !important; margin-right:0 !important;} .accordion-list .accordion-item .accordion-m-img{height:0; padding-top:110px; background-size:cover !important; -webkit-transition:padding 0.3s; -moz-transition:padding 0.3s; -o-transition:padding 0.3s; -ms-transition:padding 0.3s; transition:padding 0.2s; } .accordion-list .accordion-item.active .accordion-inner{cursor:default;} .accordion-list .accordion-item.active .accordion-m-img{padding-top:100%} .accordion-list .accordion-item.active .accordion-m-img{padding-top:70%} .accordion-item .accordion-inner .accordion-tit{writing-mode: initial; top: 50%; transform: translate(-50%,-50%); padding: 0 2rem; line-height: 1; font-size: 6vw; width: 100%; text-align: center;letter-spacing: normal;} .accordion-item .accordion-info-box dl{padding: 6vw 3vw 6vw; padding-right: 14vw;} .accordion-item .accordion-info-box dl dt{font-size: 3.50vw; margin-bottom:0;} .accordion-item .accordion-info-box dl .accordion-info-txt{font-size: 3.13vw; padding:0;} .accordion-item .accordion-info-box dl .accordion-info-txt br{display: block;} .accordion-item.active .accordion-inner dl{transition:opacity 0.3s 0.2s;} .accordion-item.active .accordion-inner .more-btn{transition-delay:0.2s;} .accordion-item .accordion-inner .more-btn{right:0; } .accordion-item .accordion-info-box .more-btn::after { width: 3vw; height: 3vw;} } /* 추가 23.01.02 */ .head_all_bg {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 1500;} .head_all_bg.on {display: block;} .head_all_bg_inner {max-width: 1600px; margin: 0 auto; width: 100%;} .head_all_bg_tp {height: 100px; display: flex; align-items: center; justify-content: space-between;} .head_close {width: 40px; height: 40px; position: relative; cursor: pointer;} .head_close:before {content: ""; position: absolute; top: 0; left: 0; transform: rotate(45deg); background: #000; width: 2px; height: 40px;} .head_close:after {content: ""; position: absolute; top: 0; left: 0; transform: rotate(-45deg); background: #000; width: 2px; height: 40px;} .head_all_bg_mdd {display: flex; align-items: center; padding: 30px 0; border-bottom: 1px solid #e5e5e5; } .head_all_bg_mdd h3 {font-size: 20px; color: #000000; font-weight: 800; width: 200px;} .head_all_bg_mdd ul {display: flex; align-items: center; width: calc(100% - 200px);} .head_all_bg_mdd ul li a {position: relative; display: inline-block; font-size: 16px; color: #6a6a6a;} .head_all_bg_mdd ul li {margin-right: 50px;} .head_all_bg_mdd ul li:last-child {margin-right: 0;} .head_all_bg_mdd ul li a:hover {font-size: 16px; color: #15b8ff;} .head_all_bg_mdd ul li a:hover:before {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #15b8ff;} .head_all_bg_mdd.head_all_bg_mdd2 { align-items: flex-start; padding: 0; padding: 0 0 30px;} .head_all_bg_mdd.head_all_bg_mdd2:nth-child(1) {padding-top: 30px;} .head_all_bg_mdd.head_all_bg_mdd2 ul {display: block;} .head_all_bg_mdd.head_all_bg_mdd2 ul {position: relative; margin: -5px 0;} .head_all_bg_mdd.head_all_bg_mdd2 ul:aftert {content: ""; display: block; clear: both;} .head_all_bg_mdd.head_all_bg_mdd2 ul li {float: left; widtH: 50%; margin-right: 0; padding: 5px 0;} /* 추가 23.01.02 온라인상담부분 */ #apply_wrap {padding: 120px 0 110px; position: relative; z-index: 1;} #apply_wrap:before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 420px; background: #f1f3f5; z-index: -1;} .apply_menu {display: flex; align-items: flex-start; justify-content: space-between;} .apply_lt {width: 23.75%;} .apply_lt em {display: block; font-size: 22px; color: #15b8ff; font-weight: 800;} .apply_lt h2 {font-size: 45px; line-height: 1.2; color: #000000; font-weight: 800; margin-top: 15px;} .apply_lt h2 span {display: block; font-weight: 300;} .apply_rt {position: relative; width: 76.25%; padding-left: 150px; padding-top: 82px;} .apply_rt:before {content: ""; position: absolute; top: 0; left: 150px; width: 1067px; height: 82px; background: url("../images/main/apply_txt_bg.png") center no-repeat; background-size: 100%;} .apply_rt ul {position: relative; margin: 0 -10px;} .apply_rt ul:after {content: ""; display: block; clear: both;} .apply_rt ul li {float: left; width: 33.33%; padding: 0 10px;} .apply_rt ul li a {display: block; position: relative; padding: 35px 25px 80px 40px; z-index: 2; overflow: hidden; background: #fff;} .apply_rt ul li a:before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #cacaca; z-index: -1;} .apply_rt ul li .img_wrap.apply_ic1 {width: 72px; height: 72px; background: url("../images/main/apply_ic1.png") center no-repeat; background-size: 100%;} .apply_rt ul li .img_wrap.apply_ic2 {width: 66px; height: 72px; background: url("../images/main/apply_ic2.png") center no-repeat; background-size: 100%;} .apply_rt ul li .img_wrap.apply_ic3 {width: 72px; height: 72px; background: url("../images/main/apply_ic3.png") center no-repeat; background-size: 100%;} .apply_rt ul li h3 {font-size: 35px; line-height: 1; color: #1343be; font-weight: 800; margin-top: 25px;} .apply_rt ul li p {font-size: 20px; line-height: 1.4; color: #4f4f4f; margin-top: 30px; height: 85px;} .apply_rt ul li span.more_ic {position: absolute; bottom: 0; right: 0; width: 60px; height: 60px; background: #1343be url("../images/main/more_plus2.png") center no-repeat; background-size: 18px;} .apply_rt ul li a:hover {background: #1343be;} .apply_rt ul li a:hover h3 {color: #fff;} .apply_rt ul li a:hover p {color: #fff;} .apply_rt ul li a:hover span.more_ic {background: #fff url("https://www.human.or.kr/images/main/more_plus.png") center no-repeat; background-size: 18px; border: 1px solid #cacaca; } .apply_rt ul li a:hover .img_wrap.apply_ic1 {background: url("https://www.human.or.kr/images/main/apply_ic1_on.png") center no-repeat; background-size: 100%;} .apply_rt ul li a:hover .img_wrap.apply_ic2 {background: url("https://www.human.or.kr/images/main/apply_ic2_on.png") center no-repeat; background-size: 100%;} .apply_rt ul li a:hover .img_wrap.apply_ic3 {background: url("https://www.human.or.kr/images/main/apply_ic3_on.png") center no-repeat; background-size: 100%;} @media screen and (max-width: 1600px) { .head_all_bg_inner {max-width: 100%; padding: 0 3.13vw;} .head_all_bg_tp {height: 6.25vw;} .head_all_bg_tp .logo img {width: 12.50vw;} .head_close {width: 2.50vw; height: 2.50vw;} .head_close:before {height: 2.50vw;} .head_close:after {height: 2.50vw;} .head_all_bg_mdd {padding: 1.88vw 0; } .head_all_bg_mdd.head_all_bg_mdd2 {padding: 0; padding: 0 0 1.88vw;} .head_all_bg_mdd.head_all_bg_mdd2:nth-child(1) {padding-top: 1.88vw;} .head_all_bg_mdd h3 {font-size: 1.25vw; width: 12.50vw;} .head_all_bg_mdd ul { align-items: center; width: calc(100% - 12.50vw);} .head_all_bg_mdd ul li a { font-size: 1.00vw; } .head_all_bg_mdd ul li {margin-right: 3.13vw;} .head_all_bg_mdd ul li a:hover {font-size: 1.00vw; } .head_all_bg_mdd.head_all_bg_mdd2 ul { margin: -0.31vw 0;} .head_all_bg_mdd.head_all_bg_mdd2 ul li { margin-right: 0; padding: 0.31vw 0;} /* 추가 23.01.02 온라인상담부분 */ #apply_wrap {padding: 7.50vw 0 6.88vw; } #apply_wrap:before {height: 26.25vw; } .apply_lt em { font-size: 1.38vw; } .apply_lt h2 {font-size: 2.50vw; margin-top: 0.94vw;} .apply_rt {padding-left: 3.13vw; padding-top: 5.13vw;} .apply_rt:before {left: 3.13vw; width: 95%; height: 5.13vw;} .apply_rt ul { margin: 0 -0.63vw;} .apply_rt ul li { width: 33.33%; padding: 0 0.63vw;} .apply_rt ul li a { padding: 2.19vw 1.56vw 5.00vw 2.50vw; } .apply_rt ul li .img_wrap.apply_ic1 {width: 4.50vw; height: 4.50vw;} .apply_rt ul li .img_wrap.apply_ic2 {width: 4.13vw; height: 4.50vw;} .apply_rt ul li .img_wrap.apply_ic3 {width: 4.50vw; height: 4.50vw;} .apply_rt ul li h3 {font-size: 2.19vw; margin-top: 1.56vw;} .apply_rt ul li p {font-size: 1.25vw; margin-top: 1.88vw; height: 7.50vw; word-break: keep-all;} .apply_rt ul li p br {display: none;} .apply_rt ul li span.more_ic {width: 3.75vw; height: 3.75vw; background-size: 1.13vw;} .apply_rt ul li a:hover span.more_ic {background-size: 1.13vw;} } @media screen and (max-width: 1400px) { .head_all_bg_inner {max-width: 100%; padding: 0 3.57vw;} .head_all_bg_tp {height: 7.14vw;} .head_all_bg_tp .logo img {width: 14.29vw;} .head_close {width: 2.86vw; height: 2.86vw;} .head_close:before {height: 2.86vw;} .head_close:after {height: 2.86vw;} .head_all_bg_mdd {padding: 1.43vw 0; } .head_all_bg_mdd.head_all_bg_mdd2 {padding: 0; padding: 0 0 1.43vw;} .head_all_bg_mdd.head_all_bg_mdd2:nth-child(1) {padding-top: 1.43vw;} .head_all_bg_mdd h3 {font-size: 1.43vw; width: 14.29vw;} .head_all_bg_mdd ul { align-items: center; width: calc(100% - 14.29vw);} .head_all_bg_mdd ul li a { font-size: 1.14vw; } .head_all_bg_mdd ul li {margin-right: 3.57vw;} .head_all_bg_mdd ul li a:hover {font-size: 1.14vw; } .head_all_bg_mdd.head_all_bg_mdd2 ul { margin: -0.36vw 0;} .head_all_bg_mdd.head_all_bg_mdd2 ul li {width: 100%; margin-right: 0; padding: 0.36vw 0;} /* 추가 23.01.02 온라인상담부분 */ #apply_wrap {padding: 8.57vw 0 7.86vw; } #apply_wrap:before {height: 30.00vw; } .apply_lt {width: 28%;} .apply_lt em { font-size: 1.57vw; } .apply_lt h2 {font-size: 2.86vw; margin-top: 1.07vw;} .apply_rt {padding-left: 3.57vw; padding-top: 5.86vw; width: 72%;} .apply_rt:before {left: 3.57vw; width: 95%; height: 5.86vw;} .apply_rt ul { margin: 0 -0.71vw;} .apply_rt ul li { width: 33.33%; padding: 0 0.71vw;} .apply_rt ul li a { padding: 2.50vw 1.79vw 5.71vw 2.86vw; } .apply_rt ul li .img_wrap.apply_ic1 {width: 5.14vw; height: 5.14vw;} .apply_rt ul li .img_wrap.apply_ic2 {width: 4.71vw; height: 5.14vw;} .apply_rt ul li .img_wrap.apply_ic3 {width: 5.14vw; height: 5.14vw;} .apply_rt ul li h3 {font-size: 2.50vw; margin-top: 1.79vw;} .apply_rt ul li p {font-size: 1.43vw; margin-top: 2.14vw; height: 10.71vw; } .apply_rt ul li span.more_ic {width: 4.29vw; height: 4.29vw; background-size: 1.29vw;} .apply_rt ul li a:hover span.more_ic {background-size: 1.29vw;} } @media screen and (max-width: 1024px) { .head_all_bg_inner {padding: 0 3.91vw;} .head_all_bg_tp {height: 9.77vw;} .head_all_bg_tp .logo img {width: 19.53vw;} .head_close {width: 3.91vw; height: 3.91vw;} .head_close:before {height: 3.91vw;} .head_close:after {height: 3.91vw;} .head_all_bg_mdd {padding: 2.93vw 0; } .head_all_bg_mdd.head_all_bg_mdd2 {padding: 0; padding: 0 0 2.93vw;} .head_all_bg_mdd.head_all_bg_mdd2:nth-child(1) {padding-top: 2.93vw;} .head_all_bg_mdd h3 {font-size: 1.95vw; width: 19.53vw;} .head_all_bg_mdd ul { align-items: center; width: calc(100% - 19.53vw);} .head_all_bg_mdd ul li a { font-size: 1.56vw; } .head_all_bg_mdd ul li {margin-right: 4.88vw;} .head_all_bg_mdd ul li a:hover {font-size: 1.56vw; } .head_all_bg_mdd.head_all_bg_mdd2 ul { margin: -0.49vw 0;} .head_all_bg_mdd.head_all_bg_mdd2 ul li {width: 100%; margin-right: 0; padding: 0.49vw 0;} } @media screen and (max-width: 768px) { /* 추가 23.01.02 온라인상담부분 */ #apply_wrap {padding: 15.63vw 0 14.32vw; } #apply_wrap:before {height: 75.69vw; } .apply_menu {flex-wrap: wrap;} .apply_lt {width: 100%;} .apply_lt em { font-size: 3.26vw; } .apply_lt h2 {font-size: 5.86vw; margin-top: 1.95vw;} .apply_rt {padding-left: 0; padding-top: 10.68vw; width: 100%;} .apply_rt:before {left: 0; width: 100%; height: 10.68vw;} .apply_rt ul { margin: -1.30vw 0;} .apply_rt ul li { width: 100%; padding: 1.30vw 0;} .apply_rt ul li a { padding: 4.56vw 3.26vw 10.42vw 5.21vw; } .apply_rt ul li .img_wrap.apply_ic1 {width: 9.38vw; height: 9.38vw;} .apply_rt ul li .img_wrap.apply_ic2 {width: 8.59vw; height: 9.38vw;} .apply_rt ul li .img_wrap.apply_ic3 {width: 9.38vw; height: 9.38vw;} .apply_rt ul li h3 {font-size: 4.56vw; margin-top: 3.26vw;} .apply_rt ul li p {font-size: 3.26vw; margin-top: 3.91vw; height: auto; } .apply_rt ul li span.more_ic {width: 7.81vw; height: 7.81vw; background-size: 2.34vw;} .apply_rt ul li a:hover span.more_ic {background-size: 2.34vw;} }