#main{position:relative;} #main .section-area{padding: 100px 30px;} @media screen and (max-width:1500px){ #main .section-area{padding: 80px 30px;} } @media screen and (max-width:1400px){ #main .section-area{padding: 60px 30px;} } @media screen and (max-width:1200px){ #main .section-area{padding: 40px 30px;} } @media screen and (max-width:1024px){ #main .section-area{padding: 40px 20px;} } @media screen and (max-width:850px){ #main .section-area{padding: 40px 20px 0;} } #main .content-area{padding: 0 30px} @media screen and (max-width:1024px){ #main .content-area{padding: 40px 20px;} } /*------------------------------------------------------------------- 분류그룹 : 메인 > 비주얼 슬라이더 (메인 비주얼) -------------------------------------------------------------------*/ #main .section01{} #main .section01 #visual-wrap{overflow: hidden;position:absolute;top:0; left: 0; width: 100%;} #main .section01 #visual-wrap .slide-box{} #main .section01 #visual-wrap .slide-box .visual-slide{} #main .section01 #visual-wrap .slide-box .visual-slide .swiper-wrapper{} #main .section01 #visual-wrap .slide-box .visual-slide .swiper-wrapper .slide-img{overflow:hidden;width:100%;height:600px;background-position: center;background-size: cover;background-repeat: no-repeat;} #main .section01 #visual-wrap .slide-box .visual-slide .swiper-wrapper .slide-img.v1{background-image:url(../images/main/visual_01.png);} #main .section01 #visual-wrap .slide-box .visual-slide .swiper-wrapper .slide-img.v2{background-image:url(../images/main/visual_02.png);} #main .section01 #visual-wrap .slide-box .visual-slide .swiper-wrapper .slide-img.v3{background-image:url(../images/main/visual_03.png);} #main .section01 #visual-wrap .slide-box .visual-slide .swiper-wrapper .swiper-slide{position: relative;overflow:hidden;} #main .section01 #visual-wrap .scroll-text{position:absolute;left:50%;bottom:105px;z-index:50;text-align: center; transform: translateX(-50%);} #main .section01 #visual-wrap .scroll-text .img-con{animation: mouse 2s;animation-iteration-count: infinite;} #main .section01 #visual-wrap .scroll-text strong{display:block;margin-top:15px;font-size:15px;color:#fff;} @keyframes mouse { 50%{transform: translateY(-10px);-webkit-transform: translateY(-10px);} } @-webkit-keyframes heart3 { 50%{transform: translateY(-10px);-webkit-transform: translateY(-10px);} } #main .section01 #visual-wrap .box-wrap{position: absolute; z-index: 50; top:50%; width: 100%; padding-left: 130px; transform: translateY(-50%);} #main .section01 #visual-wrap .box-wrap .main-tit .tit{display: inline-block; position: relative; z-index: 1; color: #fff; font-size: 5rem; font-weight: 400; font-family: 'BebasNeue';} #main .section01 #visual-wrap .box-wrap .main-tit .tit::after{content: ""; position: absolute; bottom: -3px; left: -3px; width: 100%; height: 50px; padding: 0 3px; background-color: rgba(255,255,255,0.3);} @media screen and (max-width:1600px){ #main .section01 #visual-wrap .box-wrap{padding-left: 80px;} } @media screen and (max-width:1200px){ #main .section01 #visual-wrap .slide-box .visual-slide .swiper-wrapper .slide-img{height:750px;} #main .section01 #visual-wrap .box-wrap{padding-left: 40px;} } @media screen and (max-width:1024px){ #main .section01{display: flex; flex-wrap: wrap;} #main .section01 #visual-wrap .slide-box .visual-slide .swiper-wrapper .slide-img{height: 750px;} } @media screen and (max-width:800px){ #main .section01 #visual-wrap .box-wrap{padding-left: 25px;} #main .section01 #visual-wrap .box-wrap .main-tit .tit{font-size: 4rem;} #main .section01 #visual-wrap .box-wrap .main-tit .tit::after{bottom: 0; height: 40px;} #main .section01 #visual-wrap .box-wrap .main-tit .tit{font-size: 4rem;} #main .section01 #visual-wrap .box-wrap .main-tit .tit::after{bottom: 0; height: 40px;} } @media screen and (max-width:600px){ #main .section01 #visual-wrap .box-wrap{padding-left: 15px;} #main .section01 #visual-wrap .visual-slide .swiper-wrapper .slide-img{height: 600px;} #main .section01 #visual-wrap .slide-box .visual-slide .swiper-wrapper .slide-img{height:1100px;} #main .section01 #visual-wrap .scroll-text strong{display: none;} #main .section01 #visual-wrap .box-wrap .main-tit .tit{font-size: 3.5rem;} } @media screen and (max-width:500px){ #main .section01 #visual-wrap .slide-box .visual-slide .swiper-wrapper .slide-img{height:950px;} } @media screen and (max-width:400px){ #main .section01 #visual-wrap .slide-box .visual-slide .swiper-wrapper .slide-img{height:1250px;} } /*main title*/ #main .h-tit{} #main .h-tit .title{font-size: 1.875rem; font-weight: 300; color: #000000;} #main .h-tit .title .tbold{font-weight: 700;} #main .h-tit .txt{font-size: 1rem; color:#8B94A3; font-weight: 500;} #main .h-tit.v2{display: flex; align-items: baseline; flex-wrap: wrap;} #main .h-tit.v2 .title{margin-right: 20px;} @media screen and (max-width:1280px){ #main .h-tit .title{font-size: 1.75rem;} } @media screen and (max-width:800px){ #main .h-tit .title{width:100%;} } @media screen and (max-width:450px){ #main .h-tit.v2{padding-right:15px;} } /*main page controller*/ #main .con-head{display: flex; width: 100%; justify-content: space-between; align-items: center;} #main .slide-nav{display: flex; margin-right: 20px;} #main .slide-nav .btn-nav{display: block; width: 30px; height: 15px; background-color: transparent; background-position: center; background-repeat: no-repeat; transition: background .3s;} #main .slide-nav .btn-nav > span{position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);} #main .slide-nav .btn-nav.prev{position: relative; background-image: url(../images/main/i_prev.svg);} #main .slide-nav .btn-nav.prev::after{content: "";position: absolute; right: 0; top: 0; display: block; width: 1px; height: 100%; background-color: #CFCFE2;} #main .slide-nav .btn-nav.next{ background-image: url(../images/main/i_next.svg);} #main .slide-nav .btn-nav.prev:hover, #main .slide-nav .btn-nav.prev:focus{ background-image: url(../images/main/i_prev_on.svg);} #main .slide-nav .btn-nav.next:hover, #main .slide-nav .btn-nav.next:focus{ background-image: url(../images/main/i_next_on.svg);} #main .btn-wrap{display: flex; align-items: center;} #main .btn-wrap .btn-more{display: block; position: relative; width: 36px; height: 36px; border-radius: 5px; background-color: #1F589C; } #main .btn-wrap .btn-more.v2{background-color:#3E529E;} #main .btn-wrap .btn-more::after{content: ""; position: absolute; top:50%; left: 50%; width: 24px; height: 24px; background-image: url(../images/main/i_more.svg); background-position: center; background-repeat: no-repeat; transform: translate(-50%, -50%) rotate(-180deg); transition: transform .3s;} #main .btn-wrap .btn-more .txt{position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);} #main .btn-wrap .btn-more:hover::after, #main .btn-wrap .btn-more:focus::after{transform:translate(-50%, -50%) rotate(0);} @media screen and (max-width:600px){ #main .slide-nav{margin-right: 10px;} #main .btn-wrap .btn-more{width: 30px; height: 30px;} } @media screen and (max-width:400px){ #main .section02 .con-wrap .con-body .tab-box-con .tab-con .btn-wrap{justify-content: flex-end;} } /*컨텐츠 슬라이더*/ #main .section01 .top-wrap{display: flex; position: relative; z-index: 1; max-width: 1500px; width: 100%; height: 600px; margin: 0 auto; align-items: center; justify-content: space-between;} #main .section01 .top-wrap .conWrap {display:flex; width:100%; justify-content:center; transition:.3s;} #main .section01 .top-wrap .l-con{position: relative; width: 100%; margin-right: 70px; flex-grow:1; transition:.3s;} #main .section01 .top-wrap .l-con .downList {display:flex; margin:0 -7.5px; transition:.3s;} #main .section01 .top-wrap .l-con .downList > li {display:flex; width:20%; padding:0 7.5px; transition:.3s;} #main .section01 .top-wrap .l-con .downList > li .downBtn {display:flex; width:100%; padding:20px 7px; background-color:rgba(255,255,255,0.1); border-radius:10px; border:1px solid rgba(255,255,255,0.05); backdrop-filter: blur(4px); flex-direction:column; transition:.3s;} #main .section01 .top-wrap .l-con .downList > li .downBtn .img {display:block; padding:0 10px; transition:.3s;} #main .section01 .top-wrap .l-con .downList > li .downBtn .text {display:block; padding-top:15px; font:400 0.9375rem pretendard; color:#fff; transition:.3s;} #main .section01 .top-wrap .l-con #slide-wrap{} #main .section01 .top-wrap .l-con #slide-wrap .top-slide {display: block; overflow: hidden; border-radius: 50px; background-color: rgba(255,255,255,0.2); backdrop-filter: blur(4px);} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide {height: 400px; padding: 20px;} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner {height: 100%; background-image: url(../images/main/img_slide01.png); background-size:360px; background-repeat: no-repeat; background-position: right bottom;} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner.v1{background-image: url(../images/main/img_slide01.png);} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner.v2{background-image: url(../images/main/img_slide02.png);} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner.v3{background-image: url(../images/main/img_slide03.png);} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner.v4{background-image: url(../images/main/img_slide04.png);} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner .t-wrap{padding-top: 30px; padding-left: 30px;} #main .section01 .top-wrap .l-con .tit{display: flex; margin-bottom: 30px; font-size: 1.875rem; font-weight: 400; color: #ffffff; font-family: 'MapoDDP';text-shadow: 0px 1px 2px rgba(0,0,0,0.3); align-items: center;} #main .section01 .top-wrap .l-con .txt{display:-webkit-box; overflow:hidden; -webkit-line-clamp:5; min-height: 80px; margin-bottom: 30px; font-size: 1rem; font-weight: 400; -webkit-box-orient:vertical; text-overflow:ellipsis; color: #ffffff; text-shadow: 0px 1px 2px rgba(0,0,0,0.3);} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner .t-wrap .txt-list{min-height:170px; margin-bottom:20px} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner .t-wrap .txt-list > li{margin-bottom:3px;} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner .t-wrap .txt-list > li:last-child{margin-bottom:0px;} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner .t-wrap .btn{border: none; background-color: #3E529E;} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner .t-wrap .btn > .btn-txt{display: inline-block; padding-right: 30px; color:#fff; font-weight: 700; font-size: 1rem; background-image: url(../images/sub/btn_arr.svg); background-position: center right; background-repeat: no-repeat;} #main .section01 .top-wrap .l-con #slide-wrap .slide-controller{display: flex; position:absolute; left:calc(50% + 15px); bottom:-30px; z-index:8; transform: translateX(-50%);} #main .section01 .top-wrap .l-con #slide-wrap .slide-controller .swiper-nav{ display: flex; position: absolute; top: calc(0.56875rem - 12px); left: -50px;} #main .section01 .top-wrap .l-con #slide-wrap .slide-controller .swiper-nav .slide-btn{display: block; width: 24px; height: 24px; font-size: 0; background-repeat: no-repeat; background-position: center; cursor: pointer;} #main .section01 .top-wrap .l-con #slide-wrap .slide-controller .swiper-nav .slide-btn.swiper-pause{background-image:url(../images/main/btn_pause.png) } #main .section01 .top-wrap .l-con #slide-wrap .slide-controller .swiper-nav .swiper-nav-btn {display: flex; width: 360px; justify-content: space-between;} #main .section01 .top-wrap .l-con #slide-wrap .slide-controller .swiper-nav .swiper-nav-btn .slide-btn.swiper-prev{background-image:url(../images/main/btn_prev.png) ;} #main .section01 .top-wrap .l-con #slide-wrap .slide-controller .swiper-nav .swiper-nav-btn .slide-btn.swiper-next{background-image:url(../images/main/btn_next.png) } #main .section01 .top-wrap .l-con #slide-wrap .slide-controller .slide-count{display: flex; margin-right: 10px; justify-content: center; align-items: center;} #main .section01 .top-wrap .l-con #slide-wrap .slide-controller .slide-count .now{display: block; min-width: 20px; font-weight: 700; color:white; font-size:0.875rem;} #main .section01 .top-wrap .l-con #slide-wrap .slide-controller .slide-count .total{display: block; min-width: 20px; color:white; font-size:0.875rem; font-weight: 700;} #main .section01 .top-wrap .l-con #slide-wrap .slide-controller .slide-count{display: flex;justify-content: center; align-items: center;} #main .section01 .top-wrap .l-con #slide-wrap .slide-controller .slide-count .swiper-pagination-progressbar{display: block; position: relative; width: 250px; height: 3px; margin: 0 10px; background-color: rgba(255,255,255,0.2);} #main .section01 .top-wrap .l-con #slide-wrap .slide-controller .slide-count .swiper-pagination-progressbar-fill{background-color: #ffffff;} /* #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner {transition: opacity 0.4s 0.4s;} */ #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner {opacity: 0;} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide.swiper-slide-active .slide-inner {opacity: 1;} #main .section01 .top-wrap .r-con{max-width: 500px; width: 100%; transition:.3s;} #main .section01 .top-wrap .r-con .tit-wrap{margin-bottom: 30px;} #main .section01 .top-wrap .r-con .tit-wrap .title{font-size: 1.875rem; font-weight: 700; color: #ffffff;} #main .section01 .top-wrap .r-con .quick-list{margin: 0 -15px;} #main .section01 .top-wrap .r-con .quick-list::after{content:""; display: block; clear: both;} #main .section01 .top-wrap .r-con .quick-list > li{display: block; float: left; width: 25%; padding: 0 15px; margin-bottom: 30px;} #main .section01 .top-wrap .r-con .quick-list > li .quick-item{display: flex; flex-direction: column; align-items: center; } #main .section01 .top-wrap .r-con .quick-list > li .quick-item .icon{width: 100%; height: 100px; margin-bottom: 10px; border-radius: 10px; background-color: rgba(255,255,255,0.2); background-size:40px; background-position: center; background-repeat: no-repeat; transition: background 0.3s; backdrop-filter: blur(4px);} #main .section01 .top-wrap .r-con .quick-list > li .quick-item .icon.v1{background-image: url(../images/main/i_quick01.svg);} #main .section01 .top-wrap .r-con .quick-list > li .quick-item .icon.v2{background-image: url(../images/main/i_quick02.svg);} #main .section01 .top-wrap .r-con .quick-list > li .quick-item .icon.v3{background-image: url(../images/main/i_quick03.svg);} #main .section01 .top-wrap .r-con .quick-list > li .quick-item .icon.v4{background-image: url(../images/main/i_quick04.svg);} #main .section01 .top-wrap .r-con .quick-list > li .quick-item .icon.v5{background-image: url(../images/main/i_quick05.svg);} #main .section01 .top-wrap .r-con .quick-list > li .quick-item .icon.v6{background-image: url(../images/main/i_quick06.svg);} #main .section01 .top-wrap .r-con .quick-list > li .quick-item .icon.v7{background-image: url(../images/main/i_quick07.svg);} #main .section01 .top-wrap .r-con .quick-list > li .quick-item .icon.v8{background-image: url(../images/main/i_quick08.svg); background-size:52px} #main .section01 .top-wrap .r-con .quick-list > li .quick-item .txt{font-size: 1rem; font-weight: 500; text-align:center; color: #fff;} #main .section01 .top-wrap .r-con .quick-list > li .quick-item:hover .icon, #main .section01 .top-wrap .r-con .quick-list > li .quick-item:focus .icon{background-color: rgba(42,31,106,0.3);} /*background-color: rgba(42,31,106,0.2); background-color: rgba(255,255,255,0.5);*/ @media screen and (max-width:1500px){ #main .section01 .top-wrap .conWrap {padding: 0 30px;} #main .section01 .top-wrap .l-con{margin-right: 30px;} #main .section01 .top-wrap .l-con .downList {margin:0 -7.5px;} #main .section01 .top-wrap .l-con .downList > li {width:20%; padding:0 7.5px;} #main .section01 .top-wrap .l-con .downList > li .downBtn {padding:20px 7px;} #main .section01 .top-wrap .l-con .downList > li .downBtn .img {padding:0 10px;} #main .section01 .top-wrap .l-con .downList > li .downBtn .text {padding-top:15px; font:400 0.9375rem pretendard;} } @media screen and (max-width:1400px){ #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide{height: 380px;} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner{background-size: 280px;} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner .t-wrap{padding-top: 30px; padding-left: 30px;} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner .t-wrap .txt-list{min-height:160px;} #main .section01 .top-wrap .l-con .downList > li .downBtn .img {padding:0 5px;} #main .section01 .top-wrap .r-con{max-width: 450px;} #main .section01 .top-wrap .r-con .quick-list{margin: 0 -10px;} #main .section01 .top-wrap .r-con .quick-list > li{margin-bottom: 20px; padding: 0 10px;} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner.v1{background-size:300px;} } @media screen and (max-width:1300px){ #main .section01 .top-wrap{padding: 0 30px;} #main .section01 .top-wrap .conWrap {padding:0;} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide{height: 350px;} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner .t-wrap{padding-top: 15px; padding-left: 15px;} #main .section01 .top-wrap .l-con .downList {margin:0 -5px;} #main .section01 .top-wrap .l-con .downList > li {padding:0 5px;} #main .section01 .top-wrap .l-con .downList > li .downBtn .text {font-size:0.875rem; word-break:break-all;} } @media screen and (max-width:1200px){ #main .section01 .top-wrap{height:750px; padding: 0 30px;} #main .section01 .top-wrap .conWrap {display:block;} #main .section01 .top-wrap .l-con{max-width:100%; margin-right: 20px;} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner{background-size:230px;} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner .t-wrap .txt-list{min-height:130px;} #main .section01 .top-wrap .l-con .tit{font-size: 1.75rem; margin-bottom:20px;} #main .section01 .top-wrap .l-con .downList {margin:0 -10px;} #main .section01 .top-wrap .l-con .downList > li {padding:0 10px;} #main .section01 .top-wrap .l-con .downList > li .downBtn .img {padding:0 10px;} #main .section01 .top-wrap .r-con {max-width:100%; margin-top:30px;} #main .section01 .top-wrap .r-con .tit-wrap {margin-bottom:20px;} #main .section01 .top-wrap .r-con .quick-list{margin: 0 -10px;} #main .section01 .top-wrap .r-con .quick-list > li{width:12.5%; padding: 0 10px; margin-bottom:0;} #main .section01 .top-wrap .r-con .quick-list > li .quick-item .icon{height: 85px;} } @media screen and (max-width:1080px){ #main .section01 .top-wrap .l-con .downList > li {padding:0 5px;} #main .section01 .top-wrap .l-con .downList > li .downBtn .img {padding:0 5px;} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner{background-size:260px;} #main .section01 .top-wrap .r-con .quick-list{margin: 0 -5px;} #main .section01 .top-wrap .r-con .quick-list > li{padding: 0 5px;} } @media screen and (max-width:1024px){ #main .section01 .top-wrap{display: flex; height: 750px; padding: 0 20px; flex-wrap: wrap;} #main .section01 .top-wrap .l-con{max-width: unset; margin-right:0;} #main .section01 .top-wrap .r-con{max-width: unset;} #main .section01 .top-wrap .r-con .quick-list > li{width:25%;; margin-bottom:20px;} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide{height: 300px;} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner .t-wrap{padding-top: 10px; padding-left: 20px;} } @media screen and (max-width:800px){ #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner{background-size: 230px;} } @media screen and (max-width:600px){ #main .section01 .top-wrap{height:1100px;} #main .section01 .top-wrap .l-con .downList {flex-wrap:wrap; margin:0 -7.5px;} #main .section01 .top-wrap .l-con .downList > li {width:33.333%; padding:0 7.5px;} #main .section01 .top-wrap .l-con .downList > li:nth-child(n+4){margin-top:20px;} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide{height: auto;} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner{background-size: 200px;} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner .t-wrap .btn{padding: 4px 15px;} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner .t-wrap .txt-list{min-height:120px;} #main .section01 .top-wrap .l-con #slide-wrap .slide-controller .swiper-nav .swiper-nav-btn{width: 300px;} #main .section01 .top-wrap .l-con #slide-wrap .slide-controller .slide-count .swiper-pagination-progressbar{width: 190px;} #main .section01 .top-wrap .r-con .quick-list {margin:0 -7.5px;} #main .section01 .top-wrap .r-con .quick-list > li{padding: 0 7.5px;} } @media screen and (max-width:500px){ #main .section01 .top-wrap{height:950px;} #main .section01 .top-wrap .r-con{margin-top:15px;} } @media screen and (max-width:450px){ #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner.v1, #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner.v2, #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner.v3, #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner.v4{background-image:none;} } @media screen and (max-width:400px){ #main .section01 .top-wrap{height:1250px;} #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner .t-wrap{padding-left: 0px;} /* #main .section01 .top-wrap .l-con #slide-wrap .top-slide .swiper-wrapper .swiper-slide .slide-inner .t-wrap .tit{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; height:40px; overflow:hidden; text-overflow:ellipsis;}*/ #main .section01 .top-wrap .l-con .txt{min-height: 50px; -webkit-line-clamp:3; } #main .section01 .top-wrap .l-con .downList {flex-wrap:wrap; margin:0 -5px;} #main .section01 .top-wrap .l-con .downList > li {width:50%; padding:0 5px;} #main .section01 .top-wrap .l-con .downList > li:nth-child(n+3){margin-top:15px;} #main .section01 .top-wrap .r-con {margin-top:20px;} #main .section01 .top-wrap .l-con #slide-wrap .slide-controller .swiper-nav .swiper-nav-btn{width:160px} #main .section01 .top-wrap .l-con #slide-wrap .slide-controller .slide-count .swiper-pagination-progressbar{width: 50px;} #main .section01 .top-wrap .r-con .quick-list > li{width:33.333%} #main .section01 .top-wrap .r-con .quick-list > li .quick-item .txt{font-size:13px;} } /*section02*/ #main .section02{position: relative; z-index: 3;} #main .section02::after{content: ""; position: absolute;width: 610px; height: 1000px; top: 0; right: 0; z-index: -1; background-image: url(../images/main/bg_icon01.png); background-position: center; background-repeat: no-repeat;background-size: cover;} #main .section02 .h-tit{margin-bottom: 60px;} #main .section02 .con-wrap{position: relative;} #main .section02 .con-wrap .con-head{} #main .section02 .con-wrap .con-head .tab-box{overflow-x: hidden; margin-bottom: 0;} #main .section02 .con-wrap .con-head .tab-box .list-wrap{margin: 0 -10px;} #main .section02 .con-wrap .con-head .tab-box .list-wrap > li{padding: 0 10px;} #main .section02 .con-wrap .con-head .tab-box .list-wrap > li .btn-tab{padding: 3px 10px; border: none; background: none;} #main .section02 .con-wrap .con-head .tab-box .list-wrap > li .btn-tab .txt-wrap{display: inline-block; position: relative;} #main .section02 .con-wrap .con-head .tab-box .list-wrap > li .btn-tab .txt-wrap::before{content: "";position: absolute; top:-5px; left: -10px; width: 20px; height: 20px; border-radius: 5px; background-color: #1F589C; transform:scale(0); transition: transform .3s;} #main .section02 .con-wrap .con-head .tab-box .list-wrap > li .btn-tab .txt-wrap .txt{display: inline-block; position: relative; z-index: 1; color:#8B94A3; font-weight: 700; font-size: 1.125rem; transition: color .4s;} #main .section02 .con-wrap .con-body{overflow: hidden;} #main .section02 .con-wrap .con-body .tab-box-con{} #main .section02 .con-wrap .con-body .tab-box-con .tab-con{} #main .section02 .con-wrap .con-body .tab-box-con .tab-con .btn-wrap{position: absolute; top: 0; right: 0;} #main .section02 .con-wrap .con-body .tab-box-con .tab-con .swiper{position: relative; padding:20px 10px;} #main .section02 .con-wrap .con-body .tab-box-con .tab-con .swiper .swiper-wrapper{} #main .section02 .con-wrap .con-body .tab-box-con .tab-con .swiper .swiper-wrapper .swiper-slide{} #main .section02 .con-wrap .con-body .tab-box-con .tab-con .swiper .swiper-wrapper .swiper-slide .item{display: block; position: relative; overflow: hidden; padding: 30px; border-radius: 10px; background-color: #ffffff; background-image: url(../images/main/i_more.svg); background-position: bottom -50px right 25px; background-repeat: no-repeat; box-shadow: 0px 0px 15px rgba(24,32,54,0.1); transition: background .3s;} #main .section02 .con-wrap .con-body .tab-box-con .tab-con .swiper .swiper-wrapper .swiper-slide .item .tit{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:45px; margin-bottom: 30px; color: #000000; transition: color .3s;text-overflow:ellipsis;} #main .section02 .con-wrap .con-body .tab-box-con .tab-con .swiper .swiper-wrapper .swiper-slide .item .txt-box{min-height: 85px; margin-bottom: 25px;} #main .section02 .con-wrap .con-body .tab-box-con .tab-con .swiper .swiper-wrapper .swiper-slide .item .txt-box .txt{display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; color: #8B94A3; font-weight: 400; font-size: 1rem; transition: color .3s; text-overflow:ellipsis;} #main .section02 .con-wrap .con-body .tab-box-con .tab-con .swiper .swiper-wrapper .swiper-slide .item .date{color: #8B94A3; font-weight: 400; font-size: 0.875rem; transition: color .3s;} /*interaction*/ #main .section02 .con-wrap .con-head .tab-box .list-wrap > li .btn-tab.active{} #main .section02 .con-wrap .con-head .tab-box .list-wrap > li .btn-tab:hover .txt-wrap::before, #main .section02 .con-wrap .con-head .tab-box .list-wrap > li .btn-tab.active .txt-wrap::before{transform: scale(1);} #main .section02 .con-wrap .con-head .tab-box .list-wrap > li .btn-tab:hover .txt-wrap .txt, #main .section02 .con-wrap .con-head .tab-box .list-wrap > li .btn-tab.active .txt-wrap .txt{color:#000000} #main .section02 .con-wrap .con-body .tab-box-con .tab-con .swiper .swiper-wrapper .swiper-slide .item:hover, #main .section02 .con-wrap .con-body .tab-box-con .tab-con .swiper .swiper-wrapper .swiper-slide .item:focus{background-position: bottom 25px right 25px; background-color: #1F589C;} #main .section02 .con-wrap .con-body .tab-box-con .tab-con .swiper .swiper-wrapper .swiper-slide .item:hover .tit, #main .section02 .con-wrap .con-body .tab-box-con .tab-con .swiper .swiper-wrapper .swiper-slide .item:focus .tit{color: #ffffff;} #main .section02 .con-wrap .con-body .tab-box-con .tab-con .swiper .swiper-wrapper .swiper-slide .item:hover .txt-box .txt, #main .section02 .con-wrap .con-body .tab-box-con .tab-con .swiper .swiper-wrapper .swiper-slide .item:focus .txt-box .txt{color: #ffffff;} #main .section02 .con-wrap .con-body .tab-box-con .tab-con .swiper .swiper-wrapper .swiper-slide .item:hover .date, #main .section02 .con-wrap .con-body .tab-box-con .tab-con .swiper .swiper-wrapper .swiper-slide .item:focus .date{color: #ffffff;} @media screen and (max-width:1200px){ #main .section02::after{width: 580px; height: 800px;} #main .section02 .h-tit{margin-bottom: 30px;} #main .section02 .con-wrap .con-body .tab-box-con .tab-con .swiper .swiper-wrapper .swiper-slide .item{padding: 25px;} #main .section02 .con-wrap .con-body .tab-box-con .tab-con .swiper .swiper-wrapper .swiper-slide .item .tit{min-height:40px; margin-bottom: 20px;} #main .section02 .con-wrap .con-body .tab-box-con .tab-con .swiper .swiper-wrapper .swiper-slide .item .txt-box{margin-bottom: 15px;} } @media screen and (max-width:1024px){ #main .section02::after{width: 500px;} } @media screen and (max-width:600px){ #main .section02::after{width:500px; height:600px;} #main .section02 .con-wrap .con-head .tab-box .list-wrap{margin: 0 -5px;} #main .section02 .con-wrap .con-head .tab-box .list-wrap > li{padding: 0 5px;} #main .section02 .con-wrap .con-head .tab-box .list-wrap > li .btn-tab{padding: 3px 5px;} #main .section02 .con-wrap .con-head .tab-box .list-wrap > li .btn-tab .txt-wrap::before{width: 15px; height: 15px; left: -5px;} #main .section02 .con-wrap .con-body .tab-box-con .tab-con .swiper .swiper-wrapper .swiper-slide .item .tit{min-height:unset;} } @media screen and (max-width:400px){ #main .section01 .top-wrap .r-con .tit-wrap{margin-bottom:20px;} #main .section01 .top-wrap .r-con .quick-list > li .quick-item .icon{height:55px;} #main .section02 .con-wrap .con-body .tab-box-con .tab-con .btn-wrap{position: relative;} } /*section03*/ #main .section03{position: relative; z-index: 3;} #main .section03::after{content: ""; position: absolute; width: 50%; height: 320px; top: 0; left: 0; z-index: -1; background-color: #EBF1F9;} #main .section03 .con-head{margin-bottom: 30px;} #main .section03 .con-wrap {display: flex;} #main .section03 .con-wrap .l-wrap{overflow: hidden; margin-right: 30px; flex-grow: 1;} #main .section03 .con-wrap .l-wrap #equip-slide{} #main .section03 .con-wrap .l-wrap #equip-slide .equip-list{} #main .section03 .con-wrap .l-wrap #equip-slide .equip-list::after{content: ""; display: block; clear: both;} #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide .item{display: block; overflow: hidden; position: relative; width: 100%; height: 310px; border-radius: 10px; border:1px solid #e9e9e9;} #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide .item::after{content: ""; top: 100%; opacity: ;} #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide .item .img-box{display:block; position: relative; overflow: hidden; height: 100%; padding-top: 108.69565217391305%; background-color: #fff;} #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide .item .img-box > img{position: absolute; top:0; left:50%; height:100%; max-width: unset; transform:translateX(-50%);} #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide .item .title-box{position: absolute; left: 0;; bottom:0; width: 100%; height: 40px; padding:0 15px; background-color: rgba(62, 82, 158, 0.5); text-align: center;} #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide .item .title-box .tit{display:inline-block; overflow:hidden; width: 100%; white-space: nowrap; color: #fff; font-size: 1.0625rem; font-weight: 700; line-height: 40px; text-overflow:ellipsis;} #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide .item .txt-wrap{display: flex; position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background-color: rgba(62, 82, 158, 0.9); justify-content: center; align-items: center;} #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide .item .txt-wrap .txt-con{min-height: 120px; padding:0 15px 25px; background-repeat: no-repeat; background-position: center bottom; background-image: url(../images/main/i_more.svg);text-align: center;} #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide .item .txt-wrap .txt-con .tit{margin-bottom: 10px; color: #fff; font-size: 18px; font-weight: 700;} #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide .item .txt-wrap .txt-con .txt{display: block;color: #fff; font-size: 13px; font-weight: 700;} /*interaction*/ #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide .item .title-box{opacity: 1; visibility: visible; transition: opacity 0.2s 0.4s, visibility 0s 0.4s;} #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide .item .txt-wrap { transition: top 0.4s;} #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide .item .txt-wrap .txt-con {opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0s 0.4s;} #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide .item:hover .title-box {opacity: 0; visibility: hidden; transition: opacity 0s 0s, visibility 0s 0s;} #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide .item:focus .txt-wrap, #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide .item:hover .txt-wrap {top: 0;} #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide .item:hover .txt-wrap .txt-con{opacity: 1; visibility: visible; transition: opacity 0.6s, visibility 0s 0s;} @media screen and (max-width:1600px){ #main .section03::after{height: 280px;} #main .section03 .con-wrap .l-wrap{margin-right: 20px;} #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide .item{height: 280px;} } @media screen and (max-width:1400px){ #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide .item{height: 250px;} } @media screen and (max-width:1200px){ #main .section03 .con-wrap .l-wrap{margin-bottom: 20px; margin-right: 0;} #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide .item{height:auto;} #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide .item .img-box{padding-top:70.224%;} } @media screen and (max-width:1024px){ #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide .item .img-box{padding-top:103.333%;} } @media screen and (max-width:850px){ #main .section03 .con-wrap .l-wrap{margin-bottom: 20px; padding: 0 20px;} } @media screen and (max-width:800px){ #main .section03::after{width:60%; height:210px;} #main .section03 .con-wrap .l-wrap {margin-bottom: 40px;} #main .section03 .con-wrap .l-wrap .equip-list{display: flex; overflow-x: auto; margin: 0 -10px; padding:0 0 20px;} #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide{flex-shrink: 0;} #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide .item .title-box .tit{font-size: 1rem;} #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide .item .txt-wrap .txt-con .tit{font-size: 1rem;} } @media screen and (max-width:600px){ #main .section03::after{height:200px;} #main .section03 .con-wrap .l-wrap{margin-bottom: 20px;} #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide .item .title-box{height:45px;} #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide .item .title-box .tit{line-height:45px;} } @media screen and (max-width:450px){ #main .section03::after{width:80%; height:200px;} #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide .item .title-box{height:35px;} #main .section03 .con-wrap .l-wrap #equip-slide .equip-list > .swiper-slide .item .title-box .tit{line-height:35px;} } /*section03*/ #main .section03 .con-wrap .r-wrap{overflow: hidden; max-width: 500px; width: 100%;} #main .section03 .con-wrap .r-wrap .top-con{margin-bottom: 30px;} #main .section03 .con-wrap .r-wrap .top-con .con-head{position: relative;} #main .section03 .con-wrap .r-wrap .top-con .con-head .slide-nav{margin-right: 0;} #main .section03 .con-wrap .r-wrap .top-con .con-head .slide-nav .popup-count .swiper-pagination-fraction{width: auto; left:auto; right:75px; font-weight: 600; font-size: 0.875rem;} #main .section03 .con-wrap .r-wrap .top-con .con-head .slide-nav .popup-count .swiper-pagination-fraction .swiper-pagination-current{} #main .section03 .con-wrap .r-wrap .top-con .con-head .slide-nav .popup-count .swiper-pagination-fraction .swiper-pagination-total{color: #B3B3B3;} #main .section03 .con-wrap .r-wrap .top-con .con-body{} #main .section03 .con-wrap .r-wrap .top-con .con-body #popup-slide{ overflow: hidden; width: 100%; border-radius: 10px; background-color: #8B94A3;} #main .section03 .con-wrap .r-wrap .top-con .con-body #popup-slide .swiper-slide{text-align:center;} #main .section03 .con-wrap .r-wrap .top-con .con-body #popup-slide .swiper-slide .slide-item{display: block; height: 100%;} #main .section03 .con-wrap .r-wrap .top-con .con-body #popup-slide .swiper-slide .slide-item .img-box{display:block; position: relative; overflow: hidden; height: 100%; padding-top: 62%; background-color: #e9e9e9;} #main .section03 .con-wrap .r-wrap .top-con .con-body #popup-slide .swiper-slide .slide-item .img-box > img{position: absolute; top:0; left:50%; width: 100%; max-width: unset; transform:translate(-50%);} /* #main .section03 .con-wrap .r-wrap .top-con .con-body #popup-slide .swiper-slide .slide-item img{width: 100%; height: 100%;} */ #main .section03 .con-wrap .r-wrap .bottom-con{} #main .section03 .con-wrap .r-wrap .bottom-con .con-head{} #main .section03 .con-wrap .r-wrap .bottom-con .con-head .h-tit{} #main .section03 .con-wrap .r-wrap .bottom-con .con-head .h-tit .title{margin-bottom: 10px;} #main .section03 .con-wrap .r-wrap .bottom-con .con-body{} #main .section03 .con-wrap .r-wrap .bottom-con .con-body .organ-list{display: flex; margin: 0 -10px; flex-wrap: wrap;} #main .section03 .con-wrap .r-wrap .bottom-con .con-body .organ-list > li{width: 50%; margin-bottom: 20px; padding: 0 10px; } #main .section03 .con-wrap .r-wrap .bottom-con .con-body .slide-item{display: flex; width: 100%; height: 100px; margin-bottom: 10px; padding: 0 20px; border-radius: 10px; border:1px solid #e9e9e9; background-color: white; align-items: center; justify-content:center; transition: border 0.3s, box-shadow 0.3s;} #main .section03 .con-wrap .r-wrap .bottom-con .con-body .slide-item:last-child{margin-bottom: 0;} /* #main .section03 .con-wrap .r-wrap .bottom-con .con-body #organ-slide .swiper-wrapper .swiper-slide .slide-item .tit{display: block; width: 100%; padding-right:30px; background-image: url(../images/sub/i_share.png); background-repeat: no-repeat; background-position: center right; color: #fff; font-weight: 700; font-size: 1.25rem;} */ #main .section03 .con-wrap .r-wrap .bottom-con .con-body .slide-item:hover{border:1px solid #1F589C; box-shadow:0px 0px 15px rgb(0 0 0 / 10%);} @media screen and (max-width:1600px){ #main .section03 .con-head{margin-bottom: 20px;} #main .section03 .con-wrap .r-wrap{max-width: 450px;} #main .section03 .con-wrap .r-wrap .top-con{margin-bottom: 20px;} #main .section03 .con-wrap .r-wrap .bottom-con .con-body .slide-item{height: 90px;} } @media screen and (max-width:1400px){ #main .section03 .con-wrap .r-wrap {max-width: 400px;} #main .section03 .con-wrap .r-wrap .top-con{margin-bottom: 15px;} #main .section03 .con-wrap .r-wrap .bottom-con .con-head .h-tit .title{margin-bottom: 5px;} #main .section03 .con-wrap .r-wrap .bottom-con .con-body .slide-item{height: 80px;} #main .section03 .con-wrap .r-wrap .bottom-con .con-body .slide-item .tit{font-size: 18px;} } @media screen and (max-width:1200px){ #main .section03 .con-wrap{display: block;} #main .section03 .con-wrap .r-wrap{display: flex; max-width: unset;} #main .section03 .con-wrap .r-wrap .top-con{width: 50%; margin-bottom: 0; padding-right: 20px; flex-grow: 1;} #main .section03 .con-wrap .r-wrap .top-con .con-body #popup-slide .swiper-slide .slide-item .img-box{height:280px; padding-top:0;} #main .section03 .con-wrap .r-wrap .bottom-con{width: 50%; flex-grow: 1;} #main .section03 .con-wrap .r-wrap .bottom-con .con-head .h-tit .title{margin-bottom: 0;} #main .section03 .con-wrap .r-wrap .bottom-con .con-body .slide-item{height: 120px; margin-bottom: 20px;} #main .section03 .con-wrap .r-wrap .bottom-con .con-body .swiper-slide .slide-item{} } @media screen and (max-width:1024px){ #main .section03 .con-wrap .r-wrap .top-con .con-head .slide-nav .popup-count .swiper-pagination-fraction{right:85px;} #main .section03 .con-wrap .r-wrap .bottom-con .con-body .slide-item{height: 100px; margin-bottom: 10px;} #main .section03 .con-wrap .r-wrap .top-con .con-body #popup-slide .swiper-slide .slide-item .img-box{height:240px;} } @media screen and (max-width:850px){ #main .section03.section-area{padding: 40px 0;} #main .section03 .con-wrap .r-wrap{display: block;} #main .section03 .con-wrap .r-wrap .top-con{margin-bottom: 40px;} #main .section03 .con-wrap .r-wrap .top-con {display: flex; width: 100%; padding-right: 0; flex-wrap: wrap; justify-content: center;} #main .section03 .con-wrap .r-wrap .top-con .con-head{width: 100%; padding: 0 20px;} #main .section03 .con-wrap .r-wrap .top-con .con-body{display: flex; width: 100%; padding: 30px 20px; background-color: #EBF1F9; justify-content: center;} #main .section03 .con-wrap .r-wrap .top-con .con-body #popup-slide{max-width: 500px;} #main .section03 .con-wrap .r-wrap .top-con .con-body #popup-slide .swiper-slide .slide-item .img-box{height:auto; padding-top:62%;} #main .section03 .con-wrap .r-wrap .bottom-con{width: 100%; padding: 0 20px;} } @media screen and (max-width:600px){ #main .section03 .con-wrap .r-wrap .top-con{margin-bottom: 20px;} } @media screen and (max-width:580px){ #main .section03 .con-wrap .r-wrap .top-con .con-body{padding: 30px 15px;} #main .section03 .con-wrap .r-wrap .bottom-con .con-body .slide-item{height:80px;} #main .section03 .con-wrap .r-wrap .bottom-con .con-body .slide-item{padding:20px;} #main .section03 .con-wrap .r-wrap .bottom-con .con-body .slide-item .tit{font-size:1.125rem;} #main .section03 .con-wrap .r-wrap .bottom-con .con-body .slide-item .img-box > img{display:block; height:30px;} } @media screen and (max-width:430px){ #main .section03 .con-wrap .r-wrap .top-con .con-body{padding: 20px 15px;} #main .section03 .con-wrap .r-wrap .bottom-con .con-body .organ-list{margin:0;} #main .section03 .con-wrap .r-wrap .bottom-con .con-body .organ-list > li{width: 100%; margin-bottom: 10px; padding: 0px; } } @media screen and (max-width:380px){ #main .section03 .con-wrap .r-wrap .bottom-con .con-body .slide-item{padding:10px;} #main .section03 .con-wrap .r-wrap .bottom-con .con-body .slide-item .img-box > img{height:25px;} }