diff --git a/html/css/common.css b/html/css/common.css index 18810b3..b271f21 100644 --- a/html/css/common.css +++ b/html/css/common.css @@ -1,5 +1,5 @@ @charset "utf-8"; - +body,html{overflow-x: hidden;} /* 본문 바로가기 */ #skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden} #skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em} @@ -137,12 +137,18 @@ position:fixed;right:50px;bottom:20px;z-index:999;display:flex;justify-content:c .design-line{position:relative;margin:0 60px;} .design-line::before{content:'';display:block;width:4px;height:200px;background:#000;} .design-line::after{content:'';display:block;width:1px;height:200px;background:#000;} +.design-line.horizontal{width:100%;margin:60px 0;} +.design-line.horizontal::before{content:'';display:block;width:30%;height:2px;background:#333;} +.design-line.horizontal::after{content:'';display:block;width:100%;height:1px;background:#999;} .sub-cont{display:flex;padding:100px 0;} .point-txt{color:#2290c9} -.list-txt{color: #333;font-size: 16px;line-height: 2.5;margin-top:20px;} +.list-txt{margin-top:18px;color: #333;font-size: 1rem;line-height:1.5;} .list-txt > li {position: relative;} +.list-txt > li + li{margin-top:14px;} .list-txt > li:before {content: "";display: inline-block;position: absolute;top: 0;left: 0;} - +.list-txt > li b{margin-right:10px;font-size:1.125rem;} +.wh_txt{color:#fff;} +.border-gray{width:100%;height:1px;background:#ddd;margin:60px 0;} /*회사소개*/ .company .img{margin-right:60px;} .company .img img{width:450px;} @@ -152,10 +158,14 @@ position:fixed;right:50px;bottom:20px;z-index:999;display:flex;justify-content:c /*연혁*/ -.history{width:100%;padding-left:320px;margin:0px auto;} -.history .swiper-slide-active{max-width:1280px;opacity:1!important;} -.history .swiper-slide{opacity:0.5;} -.history .swiper-slide .test{width:1280px;height:200px;background:blue;width:500px;} -.history .swiper-button-next, .history .swiper-rtl .swiper-button-prev {right: auto;left: 1240px;} -.history-box{padding:0 100px;} -.history-box h6{font-size:4rem;} +.history{width:100%;margin:0px auto;} +.swiper-container-history{max-width:1000px;margin:0px auto;} +.swiper-container-history {overflow: visible!important;} +.swiper-container-history .swiper-slide-active{opacity:1!important; transition:opacity 0.3s;} +.swiper-container-history .swiper-slide{opacity:0.4; transition:opacity 0.3s;} +.swiper-container-history .swiper-button-next, .swiper-container-history .swiper-rtl .swiper-button-prev {right:0px;left: auto;color:#2290c9;} +.swiper-container-history .swiper-button-prev, .swiper-container-history .swiper-rtl .swiper-button-next {left:0px;right: auto;color:#2290c9;} +.swiper-container-history .swiper-button-prev:after, .swiper-container-history .swiper-rtl .swiper-button-next:after, +.swiper-container-history .swiper-button-next:after, .swiper-container-history .swiper-rtl .swiper-button-prev:after{font-size:30px;font-weight:bold;} +.history-box{margin:0px auto;padding:0 40px 0 100px;} +.history-box h6{font-size:3.5rem;} \ No newline at end of file diff --git a/html/history.html b/html/history.html index 5d5eda5..30746b3 100644 --- a/html/history.html +++ b/html/history.html @@ -77,38 +77,118 @@
-
2
+
+
2020
+ +
-
3
+
+
2019
+ +
+
+
+
2018
+ +
+
+
+
+
2017
+ +
+
+
+
2016
+ +
-
4
+
+
2015
+ +
+
+
+
2014
+ +
+ diff --git a/html/js/common.js b/html/js/common.js index ee9c308..2f1bce4 100644 --- a/html/js/common.js +++ b/html/js/common.js @@ -232,10 +232,15 @@ $(function(){ const swiper = new Swiper('.swiper-container-history', { //기본 셋팅 direction: 'horizontal', - slidesPerView: 3, - spaceBetween: 100, - slidesPerView:true, - centeredSlides: true, + slidesPerView: 1, // 슬라이드를 한번에 3개를 보여준다 + slidesPerGroup :1, // 그룹으로 묶을 수, slidesPerView 와 같은 값을 지정하는게 좋음 + spaceBetween: 100, // 슬라이드간 padding 값 30px 씩 떨어뜨려줌 + + // 그룹수가 맞지 않을 경우 빈칸으로 메우기 + // 3개가 나와야 되는데 1개만 있다면 2개는 빈칸으로 채워서 3개를 만듬 + loopFillGroupWithBlank : true, + + loop: true, autoplay: false, //방향표 navigation: {