@charset "utf-8";

.yj {font-family: "yj_obang";}
.jg {font-family: 'JalnanGothic';}
.mo {display: none;}


@keyframes text-top {
    0% {
        transform: translateY(70px); opacity: 0;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes text-right {
    0% {
        transform: translateX(-50px); opacity: 0;
    }
    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes text-left {
    0% {
        transform: translateX(50px); opacity: 0;
    }
    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

/* fullpage nav */
#fp-nav {position: fixed; top: 50%; right: 50px; transform: translateY(-50%); margin-top: 0 !important;}
#fp-nav li ~ li {margin-top: 18px;} 
#fp-nav li a {position: relative; display: block; width: 22px; height: 35px; background: #fff; transition: all 0.4s; clip-path: polygon(50% 1%, 100% 0%, 50% 100%, 0 100%);}
.fp-viewing-NOTICE #fp-nav li a {background-color: #5d5d5d;}
#fp-nav li a.active {background: #ff6600;}
#fp-nav li:last-child {display: none;}

.fp-viewing-FOOTER #fp-nav {display: none;}


/* m-visual */
.m-visual {padding: 0 !important;}
.m-visual .visual {width: 100%; height: 940px; position: relative; }
.m-visual .visual .swiper-wrapper {transition-timing-function: ease-out;}
.m-visual .visual .swiper-wrapper .swiper-slide .backdrop {width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; transition: all 2s ease;}
.m-visual .visual .swiper-wrapper .slide01 .backdrop {background-image: url(../images/main/m-visual01.jpg);}
.m-visual .visual .swiper-wrapper .slide02 .backdrop {background-image: url(../images/main/m-visual02.jpg);}
.m-visual .visual .swiper-wrapper .slide03 .backdrop {background-image: url(../images/main/m-visual03.jpg);} 
.m-visual .visual .swiper-wrapper .swiper-slide-active .backdrop {transform: scale(1.1);}
.m-visual .visual .swiper-wrapper .swiper-slide .container {width: 100%; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {position: absolute; top: 480px; left: 15px; font-size: 63px; line-height: 1.238; color: #fff; font-weight: 400;  width: 100%; opacity: 0; transition: all 1.2s ease .1s; text-shadow: 5px 4px 5px rgba(32, 25, 24, .8);}
.m-visual .visual .swiper-wrapper .swiper-slide .container h3 > span {color: #ff8a01;}
.m-visual .visual .swiper-wrapper .swiper-slide .container p {position: absolute; top: 660px; left: 15px; font-size: 28px; line-height: 1.2; color: #fff; font-weight: 500; width: 100%; opacity: 0; transition: all 1.2s ease .5s; padding-bottom: 55px; text-shadow: 5px 4px 5px rgba(32, 25, 24, .6);}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container h3 {top: 520px; opacity: 1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 700px; opacity: 1;}

.controls {max-width: 1475px; width: 100%; position: absolute; top: 770px; left: 50%; transform: translateX(-50%); z-index: 5; padding: 0 15px;}
.controls .visual-pagination {width: 100%; max-width: 285px; display: flex; justify-content: space-between; margin-left: 5px;}
.swiper-pagination-bullets {align-items: center; display: flex; justify-content: space-between;}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 !important;}
.controls .swiper-pagination-bullet {position: relative; width: 85px; height: 6px; border-radius: 0; background-color: #fff; opacity: 1; margin: 0;}
.controls .swiper-pagination-bullet::after {position: absolute; content:''; width: 0%; height: 100%; top: 0; left: 0; background-color: #ff8a01;}
.controls .swiper-pagination-bullet.swiper-pagination-bullet-active::after {animation: bar 5.5s ease-out forwards;}

@keyframes bar {
	0% {width: 0%;}
	100% {width: 100%;}
}

.section-header h3 {font-size: 75px; color: #000; font-family: 'yj_obang'; font-weight: 400;}
.section-header p {font-size: 18px; color: #000; padding-top: 35px;}


/* sec2 */
.sec2 {width: 100%; background: url(../images/main/bg_sec2.png) 50% 50% no-repeat; background-size: cover;}
.sec2 .company {width: 100%; margin-top: 105px;}
.sec2 .company ul {width: calc(100% + 30px); margin: 0 -15px; display: flex;}
.sec2 .company ul li {width: 16.6666%; padding: 0 15px; min-height: 275px;}
.sec2 .company ul li a {display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100%; background-color: rgba(255,255,255, .95); transition: all .2s linear;}
.sec2 .company ul li a .ico {max-width: 89px; width: 100%; height: 89px; background: url() 50% 50% no-repeat; background-size: auto; transition: all .2s linear;}
.sec2 .company ul li:nth-of-type(1) a .ico {background-image: url(../images/main/ico_sec201.png);}
.sec2 .company ul li:nth-of-type(2) a .ico {background-image: url(../images/main/ico_sec202.png);}
.sec2 .company ul li:nth-of-type(3) a .ico {background-image: url(../images/main/ico_sec203.png);}
.sec2 .company ul li:nth-of-type(4) a .ico {background-image: url(../images/main/ico_sec204.png);}
.sec2 .company ul li:nth-of-type(5) a .ico {background-image: url(../images/main/ico_sec205.png);}
.sec2 .company ul li:nth-of-type(6) a .ico {background-image: url(../images/main/ico_sec206.png);}
.sec2 .company ul li a h5 {font-size: 19px; text-align: center; color: #2e2e2e; margin-top: 25px; font-weight: 600; transition: all .2s linear;}

.sec2 .company ul li a:hover {background-color: rgba(255,102,0, .8);}
.sec2 .company ul li:nth-of-type(1) a:hover .ico {background-image: url(../images/main/ico_sec201_on.png);}
.sec2 .company ul li:nth-of-type(2) a:hover .ico {background-image: url(../images/main/ico_sec202_on.png);}
.sec2 .company ul li:nth-of-type(3) a:hover .ico {background-image: url(../images/main/ico_sec203_on.png);}
.sec2 .company ul li:nth-of-type(4) a:hover .ico {background-image: url(../images/main/ico_sec204_on.png);}
.sec2 .company ul li:nth-of-type(5) a:hover .ico {background-image: url(../images/main/ico_sec205_on.png);}
.sec2 .company ul li:nth-of-type(6) a:hover .ico {background-image: url(../images/main/ico_sec206_on.png);}

.sec2 .company ul li a:hover h5 {color: #fff;}

.sec2.on .section-header h3 {animation: text-right 1.5s both .5s;}
.sec2.on .section-header p {animation: text-right 1.5s both .7s;}
.sec2.on .company ul li:nth-of-type(1) {animation: text-right 1.5s both .5s;}
.sec2.on .company ul li:nth-of-type(2) {animation: text-right 1.5s both .7s;}
.sec2.on .company ul li:nth-of-type(3) {animation: text-right 1.5s both .9s;}
.sec2.on .company ul li:nth-of-type(4) {animation: text-right 1.5s both 1.2s;}
.sec2.on .company ul li:nth-of-type(5) {animation: text-right 1.5s both 1.5s;}
.sec2.on .company ul li:nth-of-type(6) {animation: text-right 1.5s both 1.7s;}

/* sec3 */
.sec3 {width: 100%;}
.sec3 .product {width: 100%; height: 100%; display: flex;}
.sec3 .tit {text-align: center; color: #fff;}
.sec3 .tit h3 {font-size: 43px; font-weight: 400;}
.sec3 .tit p {font-size: 24px; margin-top: 24px; font-weight: 400;}
.sec3 .product > a {display: block; width: 50%; height: 100%; background: url() 50% 50% no-repeat; background-size: cover; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.sec3 .product > a.outline {background-image: url(../images/main/bg_sec301.jpg);}
.sec3 .product > a.process {background-image: url(../images/main/bg_sec302.jpg);}

.sec3.on .tit h3 {animation: text-top 1.5s both .5s;}
.sec3.on .tit p {animation: text-top 1.5s both .7s;}

/* sec4 */
.sec4 {width: 100%; background: url(../images/main/bg_sec401.jpg) 50% 50% no-repeat; background-size: cover; transition: all .3s linear;}
.sec4.on1 {background-image: url(../images/main/bg_sec401.jpg);}
.sec4.on2 {background-image: url(../images/main/bg_sec402.jpg);}
.sec4.on3 {background-image: url(../images/main/bg_sec403.jpg);}
.sec4.on4 {background-image: url(../images/main/bg_sec404.jpg);}

.sec4 .container {height: 100%;}
.sec4 .management {width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.sec4 .management ul {width: 100%; display: flex; height: 100%; }
.sec4 .management ul li {position: relative; width: 25%; z-index: 1; height: 100%; display: flex; align-items: center; justify-content: center;}
.sec4 .management ul li::before {position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0, .2); z-index: 0; opacity: 0; transition: all .2s linear;}
.sec4 .management ul li a {position: relative; min-height: 255px; display: block; width: 100%; z-index: 2;}
.sec4 .management ul li a dl {width: 100%;}
.sec4 .management ul li:not(:last-child) a {border-right: 1px solid #fff;}
.sec4 .management ul li a dl dt {max-width: 119px; width: 100%; margin: 0 auto;}
.sec4 .management ul li a dl dt img {display: block; max-width: 100%; margin: 0 auto;}
.sec4 .management ul li a dl dd {font-size: 27px; font-weight: 600; text-align: center; margin-top: 35px; color: #fff;}
.sec4 .management ul li a span {display: block; width: 40px; height: 40px; border-radius: 50%; background: url(../images/main/ico_plus.png) 50% 50% no-repeat; background-size: auto; transition: all .2s linear; margin: 30px auto 0;}
.sec4 .management ul li:hover a span {background-image: url(../images/main/ico_plus_on.png);}
.sec4 .management ul li:hover::before {opacity: 1;}

.sec4.on .management ul li:nth-of-type(1) {animation: text-right 1.5s both .5s;}
.sec4.on .management ul li:nth-of-type(2) {animation: text-right 1.5s both .7s;}
.sec4.on .management ul li:nth-of-type(3) {animation: text-right 1.5s both .9s;}
.sec4.on .management ul li:nth-of-type(4) {animation: text-right 1.5s both 1.2s;}


/* sec5 */
.sec5 {background-color: #f2f2f2; width: 100%;}
.sec5 .section-header {position: relative;}
.sec5 .section-header > a {position: absolute; display: inline-block; font-size: 18px; color: #737373; font-weight: 600; bottom: 0; right: 0; transition: all .2s linear;}
.sec5 .section-header > a span {display: inline-block; padding-right: 20px;}
.sec5 .section-header > a:hover {color: #ff8a01;}

.sec5 .notice {width: 100%; margin-top: 80px;}
.sec5 .notice ul {display: flex; width: 100%; box-shadow: 0px 0px 18px 0px rgba(32, 25, 24, 0.04);}
.sec5 .notice ul li {width: 33.3333%; padding: 50px 0 55px; background-color: #fff; transition: all .2s linear;}
.sec5 .notice ul li a {display: block; width: 100%; padding: 0 50px;}
.sec5 .notice ul li a * {transition: all .2s linear;}
.sec5 .notice ul li:not(:last-child) a {border-right: 1px solid #eaeaea;}
.sec5 .notice ul li a small {display: block; font-size: 16px; font-weight: 800; color: #ff6600;}
.sec5 .notice ul li a h5 {line-height: 1.25; font-size: 22px; font-weight: 700; color: #343434; display: -webkit-box; word-wrap:break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; margin-top: 40px; height: 53px;}
.sec5 .notice ul li a p {line-height: 1.47; font-size: 17px; font-weight: 300; color: #828282; display: -webkit-box; word-wrap:break-word; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; margin-top: 35px; height: 75px;}
.sec5 .notice ul li a span { display: block; font-size: 14px; font-weight: 300; color: #828282; margin-top: 25px;}
.sec5 .notice ul li:hover {background-color: #ff6600;}
.sec5 .notice ul li:hover a * {color: #fff;}

.sec5.on .section-header h3 {animation: text-right 1.5s both .5s;}
.sec5.on .section-header p {animation: text-right 1.5s both .7s;}
.sec5.on .section-header a {animation: text-right 1.5s both .7s;}

.sec5.on .notice {animation: text-right 1.5s both .9s;}