/* index */
/*#region*/

footer .wrap {
    margin: 0 auto;
    max-width: calc(100% - 100px * 2);
}

@media (min-width: 1680px) {
    .index .container {
        min-width: 85%;
    }

    .index .wrap {
        margin: 0 auto;
        width: 82%;
    }
}

@media (max-width: 767px) {
    footer .wrap {
        max-width: calc(100% - 15px * 2);
    }
}

/*#endregion*/

/* banner */
/*#region*/
.banner {
    padding: 80px 0;
}

.banner .text h2 {
    margin: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 130px;
    font-weight: 400;
    letter-spacing: 8px;
    color: #333;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
}

.banner .text p {
    margin: 10px 0 0;
    font-family: "Open Sans", sans-serif;
    font-size: 34px;
    font-weight: 500;
    line-height: 40px;
    color: #545454;
}

.banner .clip {
    overflow: hidden;
    width: 100%;
    clip-path: polygon(87.200% 12.600%, 89.100% 15.200%, 90.900% 18.000%, 92.600% 21.100%, 94.100% 24.400%, 95.500% 27.800%, 96.700% 31.300%, 97.700% 35.000%, 98.500% 38.700%, 99.200% 42.500%, 99.700% 46.300%, 100.000% 50.100%, 100.100% 53.800%, 99.900% 57.500%, 99.500% 61.100%, 98.900% 64.500%, 98.000% 67.800%, 96.900% 70.900%, 95.600% 73.800%, 94.100% 76.600%, 92.400% 79.200%, 90.500% 81.600%, 88.500% 83.800%, 86.300% 85.900%, 84.000% 87.800%, 81.600% 89.600%, 79.100% 91.200%, 76.600% 92.700%, 74.100% 94.000%, 71.500% 95.200%, 68.900% 96.200%, 66.400% 97.100%, 63.900% 97.900%, 61.500% 98.500%, 59.100% 99.000%, 56.800% 99.400%, 54.500% 99.700%, 52.300% 99.900%, 50.100% 100.000%, 47.900% 99.900%, 45.800% 99.700%, 43.700% 99.400%, 41.600% 99.000%, 39.500% 98.500%, 37.400% 97.900%, 35.300% 97.200%, 33.200% 96.500%, 31.000% 95.700%, 28.800% 94.800%, 26.600% 93.800%, 24.400% 92.700%, 22.200% 91.500%, 20.000% 90.200%, 17.800% 88.900%, 15.700% 87.500%, 13.600% 86.000%, 11.600% 84.400%, 9.700% 82.700%, 7.900% 80.900%, 6.300% 79.000%, 4.800% 77.000%, 3.500% 74.900%, 2.400% 72.700%, 1.500% 70.400%, 0.800% 68.000%, 0.400% 65.400%, 0.000% 62.700%, 0.000% 60.000%, 0.200% 57.200%, 0.600% 54.400%, 1.200% 51.500%, 2.000% 48.600%, 2.900% 45.700%, 4.000% 42.800%, 5.200% 39.900%, 6.500% 37.100%, 7.900% 34.300%, 9.400% 31.600%, 11.000% 29.000%, 12.600% 26.500%, 14.300% 24.100%, 16.000% 21.800%, 17.800% 19.600%, 19.600% 17.600%, 21.400% 15.700%, 23.300% 13.900%, 25.200% 12.200%, 27.200% 10.600%, 29.200% 9.200%, 31.300% 7.900%, 33.400% 6.700%, 35.600% 5.600%, 37.800% 4.600%, 40.100% 3.700%, 42.400% 2.900%, 44.800% 2.200%, 47.300% 1.600%, 49.900% 0.900%, 52.500% 0.500%, 55.100% 0.200%, 57.700% 0.000%, 60.400% 0.000%, 63.100% 0.100%, 65.800% 0.400%, 68.400% 0.900%, 71.000% 1.600%, 73.600% 2.500%, 76.100% 3.600%, 78.500% 4.900%, 80.900% 6.400%, 83.000% 8.200%, 85.200% 10.200%, 87.200% 12.600%);
}

.banner .img {
    background: no-repeat 50%/cover;
    width: 100%;
    height: 480px;
}

@media (min-width: 768px) {
    .banner {
    }

    .banner .wrap {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .banner .image {
        flex: 0 0 45%;
        padding: 15px;
    }

    .banner .text {
        flex: 0 0 55%;
        padding: 15px;
        text-align: center;
    }
}

@media (max-width: 767px) {
    .banner {
        padding: 70px 0;
    }

    .banner .image {
        margin-top: 50px;
        padding: 0 40px;
    }

    .banner .text {
        min-height: 140px;
        text-align: center;
    }

    .banner .text h2 {
        font-size: 68px;
        letter-spacing: 8px;
    }

    .banner .text p {
        margin-top: 30px;
        font-size: 20px;
        line-height: 40px;
    }

    .banner .img {
        height: 100%;
    }

    .banner img {
        max-width: 90%;
    }
}

/*#endregion*/

/* index public */
/*#region*/
/**{border:1px solid #f30;}*/


.section-body ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.section-foot {
    padding-top: 30px;
    text-align: center;
}

.section-foot a {
    font-family: "work sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.section-foot span {
    display: inline-block;
    padding: 10px 30px;
    background: var(--another-blue);
    border-radius: 25px;
}

.section-product .item {
    background: #fff;
    border-radius: 25px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
}

.section-product .item .img {
    border-radius: 25px 25px 0 0;
    overflow: hidden;
}

.section-product .item .txt {
    text-align: left;
    margin-top: 20px;
    padding: 0 22px 25px;
}

.section-product .item .txt h3 {
    margin-bottom: 20px;
    font-size: 20px;
    color: #3c3d3f;
    font-weight: 400;
}

.section-product .item .txt ul li {
    line-height: 1.7;
    font-size: 20px;
    font-weight: 300;
}

.section-product .item .txt ul li:before {
    content: '';
    display: inline-block;
    margin-right: 12px;
    width: 9px;
    height: 9px;
    background: #565656;
    vertical-align: 3px;
}

@media (min-width: 768px) {

    .section-head p {
        width: 820px;
        margin: 0 auto 40px;
        font-family: "Work Sans", sans-serif;
    }

    .section-product .item {
        margin: 0 10px;
    }

    .section-product .grid:nth-of-type(4n) .item {
        margin-left: 0;
    }

    .section-product .grid:nth-of-type(4n+4) .item {
        margin-right: 0;
    }

    .section-product .item:hover {
        box-shadow: 0 0 30px 0 rgba(0, 0, 0, .15);
    }
}

@media (max-width: 767px) {

    .section-head h2 {
        font-size: 32px;
    }

    .section-head p {
        font-size: 15px;
    }

    .section-product .item .txt {
        margin-top: 15px;
        padding: 0 15px 15px;
    }

    .section-product .item .txt h3 {
        margin-bottom: 10px;
    }

    .section-product .item .txt ul li {
        font-size: 18px;
    }

    .section-product .item .txt ul li:before {
        width: 7px;
        height: 7px;
    }

    .section-product .grid {
        margin-bottom: 30px;
    }

    .section-product .grid:last-child {
        margin-bottom: 0;
    }
}

/*#endregion*/

/* section one : product */
/*#region*/
.section-01 {
    padding: 80px 0;
    background: #f7f7f7;
}

@media (max-width: 767px) {
    .section-01 {
        padding: 40px 0;
    }

    .section-01 .text {
        padding: 0 15px;
    }
}

/*#endregion*/

/* section two : product */
/*#region*/
.section-02 {
    padding: 80px 0;
    background: #fff;
}

@media (min-width: 768px) {

    .section-02 .lines {
        margin-left: 10px;
    }

    .section-02 .line {
        display: none;
        position: relative;
        border: 1px solid #bde8f3;
        border-radius: 6px;
    }

    .section-02 .line.active {
        display: block;
        opacity: 1;
        transition: all ease-in-out .2s;
    }

    .section-02 .line h4 {
        display: none;
        opacity: 0
    }

    .section-02 .line a {
        position: absolute;
        right: 20px;
        bottom: 40px;
    }
}

@media (max-width: 767px) {
    .section-02 {
        padding: 20px 0 40px;
    }

    .section-02 .section-head h2:after {
        margin-top: 15px;
    }

    .section-02 .section-foot {
        text-align: center;
    }

    .section-02 .line:not(:last-child) {
        margin-bottom: 20px;
    }

    .section-02 .line h4 {
        margin: 0 -15px;
        padding: 14px 30px;
        color: #fff;
        background: var(--main-green);
        font-size: 15px;
        font-weight: 700;
    }

    .section-02 .line .img {
        margin-left: -15px;
        margin-right: -15px;
    }

    .section-02 .txt {
        margin-top: 30px;
        padding: 0 15px;
    }

    .section-02 .txt h5 {
        font-size: 15px;
    }

    .section-02 .txt p {
        margin: 0;
    }

    .section-02 .line a {
        background: var(--another-blue);
        margin-top: 15px;
        display: inline-block;
    }
}

/*#endregion*/

/* section three : news */
/*#region*/
.section-03 {
    background: #f7f7f7;
    padding: 80px 0;
}

.section-03 .item {
    position: relative;
    background: #fff;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
}

.section-03 .item .img {
    border-radius: 25px 25px 0 0;
    overflow: hidden;
}

.section-03 .item .txt {
    padding: 20px 25px 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 400px;
    text-align: left;
}

.section-03 .item .txt h3 {
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: #3c3d3f;
}

.section-03 .item .txt h3 a {
    color: #5a5a5a;
}

.section-03 .item .txt .cate {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #867c61;
    margin: 20px;
    padding: .6em 1.2em;
    font-size: 12px;
    color: #fff;
    border-radius: 999px;
}

.section-03 .item .txt p {
    flex-grow: 1;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.7;
}

.section-03 .item .txt .more a {
    color: #5a5a5a;
}

@media (min-width: 768px) {

    .section-03 .item .txt .more a:hover {
        color: #108ad1;
    }

}

@media (max-width: 767px) {
    .section-03 {
        padding: 40px 0;
    }
}

/*#endregion*/

/* section four : about */
/*#region*/
.section-04 {
    padding: 80px 0;
}

.section-04 .section-head h2 {
    text-align: left;
}

.section-04 h5 {
    margin-top: 25px;
    color: var(--main-green);
}

.section-04 .text h3 {
    margin: 0 0 20px;
    font-size: 36px;
}

.section-04 .text p {
    text-align: justify;
    font-size: 20px;
    line-height: 36px;
    margin: 0 0 35px;
    font-weight: 300;
}

.section-04 .sign {
    margin: 25px 0;
    text-align: right;
    font-family: "Bad Script", sans-serif;
    font-weight: 600;
    font-size: 36px;
    letter-spacing: 6px;
}

.section-04 .image {
    flex: 0 0 700px;
    padding: 15px;
}

.section-04 .clip {
    overflow: hidden;
    width: 100%;
    clip-path: polygon(87.200% 12.600%, 89.100% 15.200%, 90.900% 18.000%, 92.600% 21.100%, 94.100% 24.400%, 95.500% 27.800%, 96.700% 31.300%, 97.700% 35.000%, 98.500% 38.700%, 99.200% 42.500%, 99.700% 46.300%, 100.000% 50.100%, 100.100% 53.800%, 99.900% 57.500%, 99.500% 61.100%, 98.900% 64.500%, 98.000% 67.800%, 96.900% 70.900%, 95.600% 73.800%, 94.100% 76.600%, 92.400% 79.200%, 90.500% 81.600%, 88.500% 83.800%, 86.300% 85.900%, 84.000% 87.800%, 81.600% 89.600%, 79.100% 91.200%, 76.600% 92.700%, 74.100% 94.000%, 71.500% 95.200%, 68.900% 96.200%, 66.400% 97.100%, 63.900% 97.900%, 61.500% 98.500%, 59.100% 99.000%, 56.800% 99.400%, 54.500% 99.700%, 52.300% 99.900%, 50.100% 100.000%, 47.900% 99.900%, 45.800% 99.700%, 43.700% 99.400%, 41.600% 99.000%, 39.500% 98.500%, 37.400% 97.900%, 35.300% 97.200%, 33.200% 96.500%, 31.000% 95.700%, 28.800% 94.800%, 26.600% 93.800%, 24.400% 92.700%, 22.200% 91.500%, 20.000% 90.200%, 17.800% 88.900%, 15.700% 87.500%, 13.600% 86.000%, 11.600% 84.400%, 9.700% 82.700%, 7.900% 80.900%, 6.300% 79.000%, 4.800% 77.000%, 3.500% 74.900%, 2.400% 72.700%, 1.500% 70.400%, 0.800% 68.000%, 0.400% 65.400%, 0.000% 62.700%, 0.000% 60.000%, 0.200% 57.200%, 0.600% 54.400%, 1.200% 51.500%, 2.000% 48.600%, 2.900% 45.700%, 4.000% 42.800%, 5.200% 39.900%, 6.500% 37.100%, 7.900% 34.300%, 9.400% 31.600%, 11.000% 29.000%, 12.600% 26.500%, 14.300% 24.100%, 16.000% 21.800%, 17.800% 19.600%, 19.600% 17.600%, 21.400% 15.700%, 23.300% 13.900%, 25.200% 12.200%, 27.200% 10.600%, 29.200% 9.200%, 31.300% 7.900%, 33.400% 6.700%, 35.600% 5.600%, 37.800% 4.600%, 40.100% 3.700%, 42.400% 2.900%, 44.800% 2.200%, 47.300% 1.600%, 49.900% 0.900%, 52.500% 0.500%, 55.100% 0.200%, 57.700% 0.000%, 60.400% 0.000%, 63.100% 0.100%, 65.800% 0.400%, 68.400% 0.900%, 71.000% 1.600%, 73.600% 2.500%, 76.100% 3.600%, 78.500% 4.900%, 80.900% 6.400%, 83.000% 8.200%, 85.200% 10.200%, 87.200% 12.600%);
}

.section-04 .img {
    background: no-repeat 50%/cover;
    width: 100%;
    height: 360px;
}

@media (min-width: 768px) {

    .section-04 .text {
        padding: 15px;
    }
}

@media (max-width: 767px) {
    .section-04 {
        padding: 40px 0;
        background-position-x: 25%;
        background-size: 400%;
    }

    .section-04 .section-body {
        padding: 0 5%;
    }

    .section-04 .text h3 {
        font-size: 24px;
        text-align: center;
    }

    .section-04 .img {
        height: 240px;
    }

    .section-04 .sign {
        font-size: 28px;
        text-align: center;
    }
}

/*#endregion*/