#idx_wrapper {
    position: relative;
    height: 100vh;
    z-index: 4;
}

/* 메인슬라이더 */
#visual {
    position: relative;
    width: 630px;
    height: 100vh;
    float: left;
    overflow: hidden;
}

body.on #visual {
    position: fixed;
}

a {
    cursor: pointer
}

#visual .sliderbx {
    z-index: 1;
    width: 100% !important;
    height: 100vh;
    position: absolute;
}

#visual .sliderbx li {
    width: 100% !important;
    height: 100%;
    position: relative;
}

#visual .sliderbx li::after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    display: inline-block;
    background: #6E1C00;
    background: linear-gradient(to top, #6E1C00 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0.3;
    width: 100%;
    height: 100%;
}

#visual .sliderbx li.mv01 {
    background: url(../img/main/mvisual01.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#visual .sliderbx li.mv02 {
    background: url(../img/main/mvisual02.png);
    background-repeat: no-repeat;
    background-position: left;
    background-size: cover;
}

#visual .sliderbx li.mv03 {
    background: url(../img/main/mvisual03.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#visual .txt {
    position: absolute;
    left: 50%;
    bottom: 150px;
    z-index: 2;
    transform: translate(-50%, 0%);
    color: #fff;
    width: 90%;
}

#visual .txt > h3 {
    font-size: 1em;
    font-weight: 400;
    line-height: 1em;
}

#visual .txt > h2 {
    font-size: 2.5em;
    font-weight: 600;
    line-height: 1em;
    padding: 20px 0 0;
    line-height: 1.4;
}

#visual .txt > p {
    display: block;
    padding: 20px 0 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5em;
}

#visual .txt > p > span {
    position: relative;
    z-index: 1;
}

/*#visual .txt > p > span::after{ position: absolute; content: ''; top: -5px; left: -15px; width: calc(100% + 30px); height: calc(20px + 10px); background: #1b2d5a; z-index: -1; padding: 5px; border-radius: 30px;}*/

#visual .area_bn_wrap {
    position: absolute;
    width: 1400px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 14;
}

#visual .area_bn_wrap .area_bn {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    box-shadow: 4.589px 6.553px 22.75px 12.25px rgba(0, 0, 0, 0.3);
    z-index: 13;
    width: 560px;
}

#visual .area_bn_wrap .area_bn .area_img {
    width: 100%;
    height: auto;
}

#visual .area_bn_wrap .area_bn .area_img img {
    width: 100%;
    height: 100%;
}

#visual .area_bn_wrap .area_bn a {
    position: relative;
    display: block;
    padding: 27px 25px;
    box-sizing: border-box;
    background: #fff;
    font-size: 15px;
    font-weight: 400;
    color: #333;
}

#visual .area_bn_wrap .area_bn a > i {
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    width: 75px;
    height: 75px;
    background: #1C2D5A url(../img/main/icon_arrow.svg)no-repeat center;
    background-size: 7px 12px;
}

#visual .bx-controls {}

#visual div.bx-pager {
    z-index: 50;
    position: absolute;
    top: 50%;
    left: 50px;
    transform: translateY(-50%);
    display: none;
}

#visual div.bx-pager div {
    margin: 0 0 30px;
}

#visual div.bx-pager div:last-child {
    margin: 0;
}

#visual div.bx-pager div a {
    position: relative;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    transition: all 0.3s ease;
    opacity: 0.4;
}

#visual div.bx-pager div a.active {
    opacity: 1;
    font-weight: 600;
}

/*#visual div.bx-pager div a:after{content:''; position:absolute; left:50%; bottom:-25px; width:5px; height:5px; background:#fff; border-radius:50%; transform:translateX(-50%); opacity:0.4;}*/
#visual div.bx-pager div a:before {
    content: '0';
    display: inline;
    width: auto;
    height: auto;
}

#visual div.bx-pager div:last-child a:after {
    display: none;
}

#visual .bx-controls-direction {
    display: none;
}

.scrolldown {
    position: fixed;
    bottom: 0;
    right: 0;
    transform: translate(0px, -50px) rotate(90deg);
    z-index: 52;
    font-weight: 500;
    color: #222;
    text-align: center;
    -webkit-animation: floating 4s -1s ease-out infinite;
    animation: floating 4s -1s ease-out infinite;
    /*    z-index: 3;*/
}

@keyframes floating {
    50% {
        transform: translate(0px, -100px) rotate(90deg);
    }

    0,
    100% {
        transform: translate(0px, -50px) rotate(90deg);
    }
}

.scrolldown a {
    position: relative;
    display: block;
    position: relative;
    padding: 50px 0;
    box-sizing: border-box;
}

.scrolldown a > i {
    position: relative;
    font-style: normal;
    font-weight: 200;
    font-size: 14px;
    color: #222;
    display: flex;
    align-items: center;
    grid-gap: 5px;
    letter-spacing: 0;
}

.area_notice {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    background: #B84A25;
    color: #fff;
    width: 100%;
}


@media (max-width: 1600px) {
    .inr {
        width: 1050px;
    }

    #visual .area_bn_wrap {
        width: 1050px;
    }

    #visual .area_bn_wrap .area_bn {
        width: 560px;
        left: 50%;
        transform: translate(-50%, -10%);
        margin: 0 auto;
    }

    #visual .bx-controls {
        left: calc(50% - 500px);
        left: -webkit-calc(50% - 500px);
    }

    .scrolldown {}

    .line .left {
        left: calc(50% - 500px);
        left: -webkit-calc(50% - 500px);
    }

    .line .right {
        right: calc(50% - 500px);
        right: -webkit-calc(50% - 500px);
    }

}

@media (max-width: 1500px) {
    .inr {
        width: 90%;
    }

    #visual .area_bn_wrap {
        width: 90%;
    }

    #visual .bx-controls {
        left: calc(50% - 40%);
        left: -webkit-calc(50% - 40%);
    }

    .scrolldown {}

    .line .left {
        left: calc(50% - 40%);
        left: -webkit-calc(50% - 40%);
    }

    .line .right {
        right: calc(50% - 40%);
        right: -webkit-calc(50% - 40%);
    }

    #visual .txt {}
}

@media (max-width: 1400px) {
    .inr {
        width: 100%;
    }

    #visual .line {
        display: none;
    }

    .scrolldown {}

    #visual .bx-controls {
        left: 200px;
    }

    #visual div.bx-pager {
        top: unset;
        bottom: 100px;
        left: 80px;
        transform: unset;
    }

    #visual div.bx-pager div {
        margin: 0 25px 0 0;
        display: inline-block;
    }

}

@media (max-width: 1400px) {
    /*
	#visual .txt > h3{font-size:3.4em;}
	#visual .txt > h2{font-size:5.8em;}
*/
    /*	#visual .txt > p{font-size:16px;}*/

}

@media (max-width:1100px) {
    #visual .txt > h2 {
        font-size: 3em;
    }
}

@media (max-width: 1024px) {
    #visual .txt {
        min-width: 40%;
    }

    #visual .txt > h3 {
        font-size: 1.5em;
        line-height: 1.3em;
    }

    #visual .txt > h2 {}

    /*	#visual .txt > p{font-size:15px;}*/
}

@media (max-width:900px) {
    #visual .txt {
        min-width: 50%;
        padding: 0
    }

    #visual .area_bn_wrap .area_bn a {
        padding: 22px 20px;
    }

    #visual .area_bn_wrap .area_bn a > i {
        width: 67px;
        height: 67px;
    }

    .scrolldown a {
        padding: 32px 5px;
    }

    #visual .bx-controls {
        width: 150px;
        height: 86px;
    }

    #visual div.bx-pager div {
        margin: 0 27px 0 0;
        display: inline;
    }
}

@media (max-width:768px) {
    #visual {
        width: 100%;
    }

    body.on #visual {
        position: relative;
    }

    #visual .txt {
        left: 50px;
    }

    #visual div.bx-pager {
        left: 50px;
    }

    #visual .area_bn_wrap .area_bn {
        width: 560px;
        left: 50%;
        transform: translate(-50%, -10%);
        margin: 0 auto;
    }

    .scrolldown {
        width: 70px;
        height: 70px;
        transform: translate(0px, 0px) rotate(0deg);
    }


    @keyframes floating {
        50% {
            transform: translate(0px, -50px) rotate(0deg);
            opacity: 0.5
        }

        0,
        100% {
            transform: translate(0px, 0px) rotate(0deg);
            opacity: 0.6;
        }
    }

    .scrolldown a > i {
        display: none;
    }

    .scrolldown a {
        height: 100%;
        padding: 5px;
    }

    .scrolldown a:before {
        display: block;
        left: 50%;
        margin-left: -7px;
    }

    #visual .bx-controls {
        left: 70px;
        height: 70px;
    }

    #visual div.bx-pager div a {
        width: 6px;
        height: 6px;
    }

    #visual div.bx-pager div a:after {
        width: 26px;
        height: 26px;
        margin-top: -10px;
        margin-left: -10px;
    }

    #visual .sliderbx li::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #333;
        opacity: 0.4;
        content: '';
        transition: all 3s;
    }

    #visual .sliderbx li.mv01,
    #visual .sliderbx li.mv02,
    #visual .sliderbx li.mv03 {
        background-position: 80% top;
    }
}

@media (max-width:500px) {
    #visual .txt {
        min-width: 70%;
    }

    #visual .sliderbx li.mv01 {
        background-position: center;
        background-size: cover;
    }

    #visual .sliderbx li.mv02 {
        background-position: center;
        background-size: cover;
    }

    #visual .sliderbx li.mv03 {
        background-position: center;
        background-size: cover;
    }

    #visual .sliderbx li.mv04 {
        background-position: center;
        background-size: cover;
    }

    #visual .sliderbx li.mv05 {
        background-position: center;
        background-size: cover;
    }

    #visual .sliderbx li.mv06 {
        background-position: center;
        background-size: cover;
    }

    #visual .sliderbx li.mv07 {
        background-position: center;
        background-size: cover;
    }

    #visual .txt > h3 {
        font-size: 1.5em;
    }

    #visual .txt > h2 {
        font-size: 2em;
    }

    #visual .txt > p {
        word-break: keep-all;
        font-size: 15px;
    }

    #visual .area_bn_wrap .area_bn {
        width: 90%;
    }

    #visual .area_bn_wrap .area_bn a {
        padding: 19px;
    }

    #visual .area_bn_wrap .area_bn a > i {
        width: 59px;
        height: 59px;
    }

    .scrolldown {
        width: 60px;
        height: 60px;
        right: unset;
        left: 50%;
        transform: translate(-50%, 0px) rotate(0deg);
    }

    @keyframes floating {
        50% {
            transform: translate(-50%, -50px) rotate(0deg);
            opacity: 0.5
        }

        0,
        100% {
            transform: translate(-50%, 0px) rotate(0deg);
            opacity: 0.6;
        }
    }

    #visual .bx-controls {
        left: 60px;
        width: 100px;
        height: 60px;
    }

    #visual div.bx-pager {
        left: 50%;
        bottom: 20%;
        transform: translate(-50%, -50%);
    }

    #visual div.bx-pager div {
        margin: 0 20px 0 0;
    }

    #visual div.bx-pager div a {
        width: 5px;
        height: 5px;
    }

    #visual div.bx-pager div a:after {
        width: 24px;
        height: 24px;
        margin-top: -9px;
    }


}

@media (max-width:450px) {
    #visual .txt {
        min-width: 85%;
        text-align: center;
    }

    #visual .txt > p > span {
        display: table;
        margin: 15px auto 0;
    }

    /*
	#visual .txt > h3{font-size:1.2em;}
	#visual .txt > h2{font-size:2.5em;}
	#visual .txt > p{font-size:14px; padding:5px 0 0;}
*/
    /*	#visual .area_bn_wrap .area_bn{width:190px;}*/
    #visual .area_bn_wrap .area_bn a {
        padding: 15px;
        font-size: 14px;
    }

    #visual .area_bn_wrap .area_bn a > i {
        width: 51px;
        height: 51px;
    }

}

#content {
    clear: both;
    position: relative;
    background: #fff;
    z-index: 5;
}

/* 제품소개 */
#area_product {
    position: relative;
}

#area_product .inr {
    z-index: 1;
}

#area_product .list {}

#area_product .list li {
    float: left;
    width: calc(100% / 3);
    width: -webkit-calc(100% / 3);
    height: 390px;
    background: transparent;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

#area_product .list li > a {
    display: block;
    padding: 70px 50px;
    box-sizing: border-box;
}

#area_product .list li > a > em {
    font-style: normal;
    font-size: 14px;
    font-weight: bold;
    color: #1C2D5A;
    line-height: 1.5em;
    transition: all 0.3s ease;
}

#area_product .list li > a > h2 {
    display: block;
    padding: 1px 0 6px;
    font-size: 19px;
    font-weight: 500;
    color: #333;
    line-height: 1.5em;
    transition: all 0.3s ease;
}

#area_product .list li > a > .area_icon {
    width: 31px;
    height: 31px;
    transition: all 0.3s ease;
}

#area_product .list li:nth-child(1) > a > .area_icon {
    width: 31px;
    height: 31px;
    background: url(../img/main/icon_product01.svg)no-repeat center;
    background-size: cover;
}

#area_product .list li:nth-child(2) > a > .area_icon {
    width: 32px;
    height: 31px;
    background: url(../img/main/icon_product02.svg)no-repeat center;
    background-size: cover;
}

#area_product .list li:nth-child(3) > a > .area_icon {
    width: 39px;
    height: 29px;
    background: url(../img/main/icon_product03.svg)no-repeat center;
    background-size: cover;
}

#area_product .list li > a > span {
    display: block;
    padding: 120px 0 0;
    font-style: normal;
    font-size: 15px;
    font-weight: 400;
    color: #999;
    line-height: 1.5em;
    transition: all 0.3s ease;
}

#area_product .list li:hover {
    background: url(../img/main/product_on01.jpg)no-repeat center;
    background-size: cover;
}

#area_product .list li:hover > a > em {
    color: #fff;
}

#area_product .list li:hover > a > h2 {
    color: #fff;
}

#area_product .list li:hover > a > span {
    color: #fff;
}

#area_product .list li:hover:nth-child(1) > a > .area_icon {
    width: 31px;
    height: 31px;
    background: url(../img/main/icon_product01_on.svg)no-repeat center;
    background-size: cover;
}

#area_product .list li:hover:nth-child(2) > a > .area_icon {
    width: 32px;
    height: 31px;
    background: url(../img/main/icon_product02_on.svg)no-repeat center;
    background-size: cover;
}

#area_product .list li:hover:nth-child(3) > a > .area_icon {
    width: 39px;
    height: 29px;
    background: url(../img/main/icon_product03_on.svg)no-repeat center;
    background-size: cover;
}


@media (max-width: 1024px) {
    #area_product .list li {
        height: 320px;
    }

    #area_product .list li > a {
        padding: 50px;
    }

    #area_product .list li > a > span {
        padding: 80px 0 0;
    }
}

@media (max-width: 900px) {
    #area_product .list li > a {
        padding: 40px;
    }
}

@media (max-width: 768px) {
    #area_product .list li {
        width: 100%;
        height: auto;
        background: #fff;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
}

@media (max-width: 550px) {
    #area_product .list li > a {
        padding: 30px;
    }

    #area_product .list li > a > span {
        padding: 40px 0 0;
    }
}

@media (max-width: 400px) {
    #area_product .list li > a {
        padding: 20px;
    }
}

/*회사소개*/
#area_company {
    position: relative;
    float: right;
    width: calc(100% - 630px);
    height: auto;
    padding: 260px 160px 100px;
    text-align: left;
    top: 0;
    right: 0;
    background: #F7F4EF;
    box-sizing: border-box;
}

#area_company .area_txt {
    padding: 100px 65px;
    box-sizing: border-box;
    width: 1400px;
    color: #333;
    background: #fff;
    margin: 0 auto;
}

#area_company .area_txt > span {
    display: block;
    font-size: 20px;
    font-weight: 500;
    color: #333;
    text-align: center;
}

#area_company .area_txt > h3 {
    display: block;
    padding: 10px 0 25px;
    font-size: 40px;
    font-weight: bold;
    color: #333;
    text-align: center;
}

#area_company .area_txt p {
    font-size: 16px;
    font-weight: 400;
    color: #333;
    line-height: 1.7em;
    word-break: keep-all;
}

#area_company .area_btn {
    display: inline-block;
    padding: 27px 0px;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: 400;
    color: #333;
}

#area_company .area_btn > i {
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    width: 75px;
    height: 75px;
    background: #1C2D5A url(../img/main/icon_arrow.svg)no-repeat center;
    background-size: 7px 12px;
}


#area_company .lt_more {}

#area_company .lt_more a {}

/* tab  */
.tabs {
    margin: 40px auto 0;
    width: auto;
    display: table;
}

.tabs:after {
    content: '';
    display: block;
    clear: both;
}

.tabs li {
    float: left;
    margin: 0 10px 0 0;
    padding: 0 11px;
    height: 40px;
    line-height: 40px;
    background: #ddd;
    box-sizing: border-box;
    border-radius: 50px;
    transition: all 0.3s ease 0s;
    cursor: pointer;
    text-align: center;
}

.tabs li span {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.3em;
}

.tabs li.active {
    background: #EA5A4F;
    color: #fff;
    box-shadow: 0px 3px 7.36px 0.64px rgba(25, 36, 72, 0.32);
}

.tabs li.active span {
    color: #fff;
}

.tabs li:hover {
    background: #EA5A4F;
    color: #fff;
}

.tab_content:after {
    content: '';
    display: block;
    clear: both;
}

@media (max-width: 1600px) {
    #area_company .area_img {
        width: calc(50% + 500px);
        width: -webkit-calc(50% + 500px);
    }

    #area_company .area_txt {
        width: calc(100% - 166px);
        width: -webkit-calc(100% - 166px);
    }

    #area_company .area_btn {
        width: calc(50% - 500px);
        width: -webkit-calc(50% - 500px);
    }
}

@media (max-width: 1500px) {
    #area_company .area_img {
        width: 95%;
    }

    #area_company .area_txt {
        width: calc(100% - 15%);
        width: -webkit-calc(100% - 15%);
        min-height: 355px;
        padding: 66px 50px;
    }

    #area_company .area_txt p br {
        display: none;
    }

    #area_company .area_btn {
        width: 240px;
        border-top: none;
    }
}

@media (max-width: 1400px) {

    #area_company {}

    #area_company .area_img {
        width: 100%;
    }

    #area_company .area_txt {
        padding: 66px 50px;
    }
}

@media (max-width: 1400px) {
    #area_company .area_tit {
        width: 90%;
    }

    #area_company .area_txt {
        width: 100%;
        padding: 53px 50px;
        position: relative;
    }
}

@media (max-width: 1100px) {
    #area_company {
        padding: 150px 50px;
    }
}

@media (max-width: 1024px) {
    #area_company .area_txt {
        padding: 50px 40px;
    }

    #area_company .area_btn {
        width: 22%;
        padding: 27px 20px;
        padding-left: 0;
    }
}

@media (max-width: 850px) {
    #area_company .area_txt {
        padding: 40px;
    }

    #area_company .area_txt h3 {
        font-size: 35px;
    }

    #area_company .area_btn {
        width: 33.33%;
    }
}

@media (max-width: 768px) {
    #area_company {
        width: 100%;
        padding: 100px 50px;
    }

    #area_company .area_img {
        height: 0;
        padding-bottom: 50%;
    }

    #area_company .area_txt {
        position: relative;
        width: 100%;
        padding: 50px 40px;
        min-height: auto;
    }

    #area_company .area_txt p {
        margin: 0 0 0;
    }

    #area_company .area_btn {
        width: 33.33%;
        top: unset;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    #area_company .area_txt p br {
        display: block;
    }

    #area_company .area_btn > i {
        bottom: -1px;
        height: 76px;
        border-bottom: 1px solid #1f2756;
    }
}

@media (max-width: 650px) {
    #area_company .area_btn {
        width: 200px;
        padding: 21px 20px 40px 0;
    }

    #area_company .area_btn > i {
        width: 64px;
        height: 64px;
    }

    #area_company .area_tit h3 {
        font-size: 33px;
    }
}

@media (max-width: 550px) {
    #area_company {}

    #area_company .area_txt {
        padding: 40px 30px;
    }

    #area_company .area_txt h3 {
        padding: 10px 0 15px;
        font-size: 30px;
    }

    #area_company .area_txt p {
        font-size: 15px;
    }

    #area_company .area_txt p br {
        display: none;
    }

    .tabs {
        width: 51%;
    }

    .tabs li {
        margin: 0 10px 20px 0;
    }

    .tabs li:nth-child(3n) {
        margin-right: 0;
    }
}

@media (max-width: 500px) {
    #area_company {
        padding: 80px 30px;
    }

    .area_location > h2 {
        font-size: 22px;
    }
}

@media (max-width: 450px) {
    #area_company .area_txt h3 {
        font-size: 28px;
    }
}

@media (max-width: 400px) {
    #area_company .area_txt {
        padding: 30px 20px;
    }

    #area_company .area_txt h3 {
        font-size: 25px;
    }

    .tabs {
        width: 61%;
    }

    .tabs li {
        margin: 0 8px 20px 0;
    }
}


.fa-angle-right {
    margin-left: 10px;
    font-size: 18px;
}


/* 제품소개 */
.tab_content .list {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    grid-gap: 250px;
}

.tab_content .list li {
    display: grid;
    margin: 0;
    background: transparent;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.tab_content .list li > a {
    display: grid;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    transform: translateY(0);
    transition: all 1s;
}

.tab_content .list li:hover > a {
/*
    transform: translateY(-15px);
    transition: all 1s;
*/
}

.tab_content .list li:nth-child(1) > a {

    grid-template-columns: 1fr 480px;
}

.tab_content .list li:nth-child(2) > a {
    grid-template-columns: 480px 1fr;
}


.tab_content .list li .img_wrap {
    height: auto;
    overflow: hidden;
}

.tab_content .list li img {
    width: 100%;
    height: auto;
    transition: all 1s;
    opacity: 0.6;
}

.tab_content .list li:hover img {}

.tab_content .list li em {
    display: block;
    padding: 15px 0 0;
    line-height: 1em;
    font-style: normal;
    font-size: 1.2em;
    font-weight: 400;
    color: #222;
    font-family: 'TTLaundryGothicB';
}

.tab_content .list li h2 {
    font-size: 2.2em;
    font-weight: 300;
    font-family: 'TTLaundryGothicB';
    color: #B84A25;
}

.tab_content .list li h2 > span {
    font-weight: 400;
}

.tab_content .list li .txt_wrap > p {
    display: block;
    margin: 20px 0;
    font-size: 1.2em;
    font-weight: 500;
    position: relative;
    left: 60px;
}

.tab_content .list li .txt_wrap > .btn-mv {
    font-size: 1.2em;
    font-weight: 500;
    color: #888;
    display: flex;
    align-items: center;
    grid-gap: 8px;
    position: relative;
    left: 60px;
}

/*
.tab_content .list li:nth-child(1) > a > .area_icon{width:31px; height:31px; background:url(../img/main/icon_product01.svg)no-repeat center; background-size:cover;}
.tab_content .list li:nth-child(2) > a > .area_icon{width:32px; height:31px; background:url(../img/main/icon_product02.svg)no-repeat center; background-size:cover;}
.tab_content .list li:nth-child(3) > a > .area_icon{width:39px; height:29px; background:url(../img/main/icon_product03.svg)no-repeat center; background-size:cover;}
*/

.tab_content .list li .img_wrap {
    overflow: visible;
}

.tab_content .list li .img_wrap img {
    width: auto;
    opacity: inherit;
}

.tab_content .list li .img_wrap .pattern {
    position: absolute;
    z-index: -1;
}

.tab_content .list li .img_wrap img:nth-child(2) {
    position: relative;
    z-index: 1;
}

.tab_content .list li:nth-child(1) .img_wrap .pattern {
    width: 327px;
    aspect-ratio: 1/1;
    background: url(../img/main/pattern01.png) no-repeat center/contain;
    right: 0px;
    transform: translateX(0px);
    transition: all 1s;
}
.tab_content .list li:nth-child(1):hover .img_wrap .pattern {
    transform: translateX(50px);
    transition: all 1s;
}

.tab_content .list li:nth-child(1) .img_wrap img:nth-child(2) {}

.tab_content .list li:nth-child(2) .img_wrap {
    position: relative;
}

.tab_content .list li:nth-child(2) .img_wrap::before {
    content: '';
    display: inline-block;
    position: absolute;
    top: -50px;
    /*
    left: 50%;
    transform: translateX(-50%);
*/
    left: -50px;
    background: url(../img/main/pattern02.png) no-repeat center/contain;
    width: 429px;
    height: 248.5px;
    z-index: 2;
    transform: translateX(0px);
    transition: all 1s;
}
.tab_content .list li:nth-child(2):hover .img_wrap::before{
    
    transform: translateX(50px);
    transition: all 1s;
}

.tab_content .list li:nth-child(2) .img_wrap .pattern {
    width: 327px;
    aspect-ratio: 1/1;
    background: #EED4A1;
    border-radius: 50%;
    top: -150px;
}

.tab_content .list li:nth-child(2) .img_wrap img:nth-child(2) {
}
.tab_content .list li:nth-child(2) .txt_wrap{
    position: relative;
    top: -75px;
}

/*.tab_content .list li:hover{background:url(../img/main/product_on01.jpg)no-repeat center; background-size:cover;}*/
/*
.tab_content .list li:hover > a > em{color:#fff;padding:40px 0 0;}
.tab_content .list li:hover > a > h2{color:#fff;}
.tab_content .list li:hover > a > span{color:#fff;}
*/
/*
.tab_content .list li:hover:nth-child(1) > a > .area_icon{width:31px; height:31px; background:url(../img/main/icon_product01_on.svg)no-repeat center; background-size:cover;}
.tab_content .list li:hover:nth-child(2) > a > .area_icon{width:32px; height:31px; background:url(../img/main/icon_product02_on.svg)no-repeat center; background-size:cover;}
.tab_content .list li:hover:nth-child(3) > a > .area_icon{width:39px; height:29px; background:url(../img/main/icon_product03_on.svg)no-repeat center; background-size:cover;}
*/
@media (max-width:1400px) {
    .tab_content .list li h2 {
        font-size: 15px;
        padding: 20px 0;
    }
}

@media (max-width: 1100px) {
    .tab_content .list li {
        width: calc(100%/2 - 10px);
        margin: 0 20px 20px 0;
    }
}

@media (max-width: 1024px) {
    .tab_content .list li {}

    .tab_content .list li > a {}

    .tab_content .list li > a > span {
        padding: 30px 0 0;
    }

    .tab_content .list li > a > img {
        opacity: 1;
    }
}

@media (max-width: 900px) {
    .tab_content .list li > a {
        padding: 0;
    }
}

@media (max-width: 768px) {
    .tab_content .list li {
        width: calc(50% - 10px);
        height: auto;
    }

    .tab_content .list li > a > span {
        padding: 30px 0;
    }

    .tab_content .list li h2 {
        font-size: 18px;
    }

    .tab_content .list li img {
        opacity: 1;
    }
}

@media (max-width: 550px) {
    .tab_content .list li {}

    .tab_content .list li > a {
        padding: 0;
    }

    .tab_content .list li > a > span {
        padding: 20px 0 30px;
    }

}

@media (max-widtH: 500px) {
    .tab_content .list li h2 {
        font-size: 15px;
        padding: 20px 0 0;
    }

}

@media (max-width: 400px) {
    .tab_content .list {
        /*        margin: 0 auto;*/
    }

    .tab_content .list li {}

    .tab_content .list li > a {
        padding: 0;
    }
}


#gall_board {
    width: 100%;
    padding: 100px 0;
    background: #ebebed;
    overflow: hidden;
}

.area_gall {
    width: 100%;
}

#area_board {
    width: 100%;
    padding: 100px 0;
    background: #fff;
}

#area_board .line.gray {
    z-index: 0;
}

#area_board .line.gray i:first-child {
    border-right: none;
}

.area_board:after {
    content: '';
    display: block;
    clear: both;
}

#area_board .area_btn {
    border: 1px solid #eee;
    padding: 15px 30px;
    border-radius: 30px;
    margin: 40px 0 0;
    display: inline-block;
    color: #999;
}

#area_board .area_btn:hover {
    font-weight: 600;
    color: #444
}

#area_board .img_wrap img {
    width: 100%;
    height: auto;
}

.area_location {
    color: #fff;
}

.greet {
    text-align: center;
}

.greet > em {
    color: #aaa;
    display: block;
    font-size: 20px;
    font-weight: 500;
    font-style: normal;
}

.greet > h2 {
    color: #444;
    padding: 0;
    display: block;
    font-size: 29px;
    font-weight: bold;
    line-height: 1.5em;
}

.greet > .img_wrap {
    margin: 40px 0 0;
}

.greet > .area_icon {
    color: #444;
}

.greet .info_location span {
    color: #444;
}

.area_location .info_location em,
.area_location .info_location b {
    color: #444;
}

@media (max-width: 1600px) {
    .area_location {
        margin: 80px 0 0;
        height: auto;
    }

    .area_location > a {
        padding: 34px 40px;
    }
}

@media (max-width: 1500px) {

    .area_location {
        margin: 80px 0 0;
    }

    .area_location > a {
        padding: 60px 40px;
    }
}

@media (max-width: 1400px) {
    #gall_board {
        padding: 53px 50px;
    }
}

@media (max-width: 1400px) {
    #area_board {
        padding: 53px 0;
    }

    #gall_board {
        margin: 0;
    }

}

@media (max-width:850px) {}

@media (max-width: 768px) {
    .area_notice {
        width: 100%;
    }

    .area_notice .area_btn > i {
        width: 75px;
        height: 74px;
    }

    .news_text {
        width: 100%;
    }
}

@media (max-width: 650px) {
    .area_notice .area_btn > i {
        width: 64px;
        height: 64px;
    }
}

@media (max-width: 550px) {
    .greet > h2 {
        font-size: 20px;
        padding: 0 0 20px;
    }

    .greet > em {
        font-size: 20px;
        line-height: 1.3em;
    }

    .greet > .img_wrap {
        margin: 40px 0;
    }
}

@media (max-width:500px) {}

@media (max-width: 400px) {}


#contants_wrap {
    width: 100%;
    height: auto;
    background: url(../img/main/livil_bi2.svg) no-repeat 90% top/35%, #fff;
    padding: 200px 0 160px;
    transition: all 3s;
    -webkit-animation: floating2 8s -1s ease-out infinite;
    animation: floating2 8s -1s ease-out infinite;
}

#contants_wrap .hd_title {
    font-family: 'TTLaundryGothicB';
    display: flex;
    flex-direction: column;
    grid-gap: 10px;
}

#contants_wrap .hd_title p {
    font-size: 1.2em;
}

#contants_wrap .hd_title h3 {
    color: #B84A25;
    font-size: 2em;
}

@keyframes floating2 {
    50% {
        background-position: 90% center;
    }

    0,
    100% {
        background-position: 90% top;
    }
}

.bg_wrap {
    position: relative;
    width: 100%;
    height: auto;
    background: url(../img/main/contacts_bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.bg_wrap::after {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #333;
    opacity: 0.6;
}

#contants_wrap h2 {
    color: #444;
    font-size: 40px;
    line-height: 1.5em;
    display: block;
    margin: 0 0 40px;
}

#contants_wrap .txt p {
    color: #888;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5em;
    display: block;
    font-style: normal;
}

#contants_wrap em.sub_tit {
    margin: 0 0 40px;
    color: #2a62ff;
}

#contants_wrap b {
    color: #2a62ff;
    font-weight: 600;
}

#contants_wrap .color_point {
    color: #666;
}

#contants_wrap .lt_more {
    margin: 40px 0 0;
    display: table;
    float: right;
}

#contants_wrap .lt_more a {
    color: #888;
}

#contants_wrap .txt .ic_call{
    width: 100%;
    aspect-ratio:1/1;
    background: #888;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.6em;
}

#contants_wrap .rt_box .txt{
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-gap: 20px;
}

#contants_wrap .rt_box .txt dt{
    font-size: 1.2em;
    font-weight: 600;
    color: #888;
}
#contants_wrap .rt_box .txt dd{
    font-size: 1.6em;
    font-weight: 500;
    display: flex;
    align-items: center;
    grid-gap: 15px;
}
#contants_wrap .rt_box .txt dd .round{
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #222;
    overflow: hidden;
}

@media (max-width:1400px) {
    #contants_wrap {
        padding: 160px 80px;
        box-sizing: border-box;
    }
}

@media (max-width:1100px) {
    #contants_wrap {
        padding: 150px 80px;
    }

    #contants_wrap h2 {
        font-size: 35px;
    }
}

@media (max-width:768px) {
    #contants_wrap {
        padding: 100px 50px;
        background: url(../img/main/livil_bi2.svg) no-repeat 90% top/50%, #fff;
    }
}

@media (max-width:500px) {
    #contants_wrap {
        padding: 80px 30px;
        background: url(../img/main/livil_bi2.svg) no-repeat 100% top/60%, #fff;
    }

    #contants_wrap h2 {
        font-size: 30px;
    }

    #contants_wrap em {
        word-break: break-all;
    }
}

/*서비스*/
.area_location {
    position: relative;
    margin: 0 0 0;
    float: left;
    width: 100%;
    transition: all 0.3s ease;
    text-align: left;
}

.area_location em {
    font-style: normal;
    font-size: 15px;
    font-weight: 300;
    transition: all 0.3s ease;
}

.area_location h2 {
    display: block;
    padding: 20px 0 0;
    font-size: 28px;
    font-weight: 400;
    color: #fff;
    line-height: 1.5em;
    transition: all 0.3s ease;
}

.area_location .area_icon {
    font-size: 31px;
    transition: all 0.3s ease;
}

.area_location .info_location {
    padding: 40px 0 0;
    text-align: left;
    overflow: hidden;
}

.area_location .info_location span {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.area_location .info_location em {
    display: block;
    padding: 5px 0 0;
    font-style: normal;
    font-size: 15px;
    font-weight: 400;
    color: #555;
}

.area_location {
    color: #fff;
}

.area_location > em {
    color: #89c4f7;
    display: block;
    font-size: 16px;
    font-weight: 500;
}

.area_location > h2 {
    color: #fff;
    padding: 20px 0;
}

.area_location > .area_icon {
    color: #fff;
}

.area_location .info_location span {
    color: #fff;
}

.area_location .info_location em,
.area_location .info_location b {
    color: #fff;
}

.area_location .info_location > ul > li {
    width: calc(100%/3);
    float: left;
    text-align: center;
    display: table;
    height: 250px;
}

.area_location .info_location > ul > li:last-child {
    margin: 0 0 0;
}

.area_location .info_location > ul > li > img {
    height: 95px;
    margin: 2.5px;
    transform: scale(1);
    transition: all 1s;
}

.area_location .info_location > ul > li:hover > img {
    transform: scale(1.05);
    transition: all 1s;
}

.area_location .info_location > ul > li:nth-child(1) > img,
.area_location .info_location > ul > li:nth-child(3) > img {
    width: 95px;
    height: auto;
}

.area_location .info_location > ul > li > em {
    display: block;
    padding: 5px 0 0;
    line-height: 1.4em;
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    color: #E0E6F5;
}

.area_location .info_location > ul > li > b {
    display: block;
    font-size: 25px;
    font-weight: 600;
    color: #444;
}

.area_location .info_location > ul > li > h2 {
    color: #444;
    font-size: 17px;
    font-weight: 500;
}


@media (max-width:850px) {
    .area_location > h2 {
        font-size: 20px;
    }
}

@media (max-width: 768px) {

    .area_location > h2 {
        font-size: 32px;
    }

    .area_location {
        margin: 0;
        width: 100%;
        height: auto;
    }

    .area_location .area_icon {}


    .area_location .info_location {
        padding: 40px 40px 0;
    }

    .area_location .info_location > ul > li {
        width: calc(100%/2);
        height: 250px;
        display: inline-block;
    }
}

@media (max-width: 650px) {}

@media (max-width: 550px) {

    .area_location > a {
        padding: 50px 30px;
    }

    .area_location > a .info_location {
        padding: 60px 0 0;
    }
}

@media (max-width:500px) {
    .area_location > h2 {
        padding: 40px 0 0;
        font-size: 30px;
    }

    .area_location .info_location {
        padding: 40px 30px 0;
    }
}

@media (max-width: 400px) {
    .area_location > a {
        padding: 40px 20px;
    }
}


/*hoverBOX*/
.block_over {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.9;
    z-index: 2;
}

.block_over .drawborder {
    display: block;
    background: #2a62ff;
    position: absolute;
}

.block_over .drawborder-top {
    width: 0%;
    height: 10px;
    left: 0;
    top: 0;
    transition-delay: 0s;
}

.block_over .drawborder-left {
    width: 10px;
    height: 0%;
    top: 0;
    right: 0;
    transition-delay: 0s;
}

.block_over .drawborder-bottom {
    width: 0%;
    height: 10px;
    right: 0;
    bottom: 0;
    transition-delay: 0s;
}

.block_over .drawborder-right {
    width: 10px;
    height: 0;
    left: 0;
    bottom: 0;
    transition-delay: 0s;
}

.block_over:hover .drawborder {
    transition: all 0.25s;
}

.block_over:hover .drawborder-top {
    width: 100%;
    transition-delay: 0s;
}

.block_over:hover .drawborder-left {
    height: 100%;
    transition-delay: 0.1s;
}

.block_over:hover .drawborder-bottom {
    width: 100%;
    transition-delay: 0.2s;
}

.block_over:hover .drawborder-right {
    height: 100%;
    transition-delay: 0.3s;
}



.area_overview .swiper-slide img {
    width: 100%;
}

.area_overview .swiper-slide {
    height: 350px;
}

.area_overview .inr {
    display: flex;
}

.area_overview .inr > div {
    width: 50%;
}

.area_overview .inr > div .txt {
    font-size: 1.1em;
    line-height: 2em;
}

.area_overview .inr > div .txt strong {
    font-size: 1.6em;
    line-height: 1.2em;
    font-weight: 400;
    opacity: 0.8;
}

.area_overview .lt_box {
    position: relative;
    padding-right: 35px;
}

.area_overview .lt_box::after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: #e3e3e3;
}

.area_overview .rt_box {
    padding-left: 35px;
}

.area_overview .con_box {
    margin: 25px 0;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.area_overview .con_box img {}

.area_overview p.icon {
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    background: rgba(203, 160, 122, 1);
    color: #ffffff85;
    text-align: center;
    font-size: 2em
}

.area_overview .inr > div ul {
    margin: 45px 0 0;
}

.area_overview .inr > div ul li {
    display: flex;
}

.area_overview .inr > div ul li a {
    display: flex;
}

.area_overview .inr > div ul li > div {
    flex: 2;
}

.area_overview .inr > div ul li > div:nth-of-type(1) {
    display: flex;
    /* align-items:center; */
    padding-right: 0px;
    position: relative;
}

/*.area_overview .inr > div ul li > div:nth-of-type(1)::after{content:""; display:block; position:absolute; right:0; top:0; width:1px; height:150px; background:#e3e3e3;}*/
.area_overview .inr > div ul li > div:nth-of-type(1) img {
    width: 60px;
    height: 60px;
}

.area_overview .inr > div ul li > div:nth-of-type(1) h3 {
    padding-left: 15px;
    font-size: 1.5em;
    line-height: 1.4em;
}

.area_overview .inr > div ul li > div:nth-of-type(1) h3 span {
    font-weight: 400;
}

.area_overview .inr > div ul li > div:nth-of-type(2) {
    flex: 3;
    padding-left: 35px;
}

.area_overview .inr > div ul li > div:nth-of-type(2) p {
    font-size: 1.1em;
    line-height: 32px;
}

.area_overview .inr > div ul li > div:nth-of-type(2) p span {
    margin-left: 15px;
    font-weight: 700;
}

.area_overview .inr > div ul li > div:nth-of-type(2) p span:nth-of-type(5) {
    margin-left: 0;
}

.area_overview .inr > div ul li > div:nth-of-type(2) p strong {
    font-size: 1.3em;
    color: #e5ae58;
}


/*.area_overview .inr > div:nth-of-type(2) ul li > div:nth-of-type(1)::after{content:""; display:block; position:absolute; right:0; top:0; width:1px; height:110px; background:#e3e3e3;}*/
.area_overview .inr > div:nth-of-type(2) ul li p strong.l_txt1 {
    font-size: 1.35em !important;
    color: #000 !important;
    font-family: 'Noto Sans KR' !important;
}

.area_overview .inr > div:nth-of-type(2) ul li p strong.l_txt2 {
    font-size: 1.1em !important;
    color: #222 !important;
    font-family: 'Noto Sans KR' !important;
    font-weight: 400;
    margin-top: -6px;
    display: block;
}

.area_overview .inr > div:nth-of-type(2) ul li h2 {
    font-weight: 900;
    font-size: 2.2em;
}


@media screen and (max-width:1024px) {
    .area_business .main_point {
        grid-template-columns: 1fr 1fr;
    }


    .area_overview .inr {
        display: block;
    }

    .area_overview .inr > div {
        width: 100%;
        padding: 0px;
    }

    .area_overview .lt_box::after {
        content: "";
        position: relative;
        display: block;
        border: 1px dashed #e3e3e3;
        width: 100%;
        height: 1px;
        margin: 35px 0;
    }
}

@media screen and (max-width:768px) {
    #container_index .area_business .inr {
        padding-left: 10px;
        padding-right: 10px;
    }

    .area_overview .inr > div ul li > div:nth-of-type(1) {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .area_overview .inr > div:nth-of-type(2) ul li p strong.l_txt1 {
        font-size: 1.2em !important;
    }

    .area_overview .inr > div:nth-of-type(2) ul li p strong.l_txt2 {
        font-size: 1em !important;
        margin-bottom: 10px;
    }
}

@media screen and (max-width:550px) {

    #container_index .area_business .hd_title > h3,
    #container_index .area_products .hd_title > h3 {
        font-size: 2em;
    }

    .area_business .main_point {
        grid-template-columns: 1fr;
    }


    .area_overview .swiper-slide {
        height: 150px;
    }

    .area_overview .inr > div .txt strong {
        font-size: 1.2em;
        font-weight: 600;
    }

    .area_overview .inr > div ul li {
        display: block;
    }

    .area_overview .inr > div ul li > div:nth-of-type(1)::after,
    .area_overview .inr > div:nth-of-type(2) ul li > div:nth-of-type(1)::after {
        display: none;
    }

    .area_overview .inr > div ul li > div:nth-of-type(2) {
        padding-left: 0;
    }
}















@media(max-width:1650px){
    #area_company{
        padding: 260px 5% 100px;
    }
}

@media(max-width:1450px){
    #visual .txt{
/*        font-size: .7em;*/
    }
    
    .tab_content .list li:nth-child(1) > a{
        grid-template-columns: 1fr 300px;
    }
    .tab_content .list li:nth-child(1) .img_wrap .pattern{
        width: 200px;
    }
    .tab_content .list li .img_wrap img:nth-child(2){
        width: 200px;
        left: 100px;
    }
    .tab_content .list li:nth-child(2) > a{
        grid-template-columns: 300px 1fr;
    }
    .tab_content .list li:nth-child(2) .img_wrap .pattern{
        width: 200px;
        top: -50%;
    }
}

@media(max-width:1200px){
    #idx_wrapper{
        height: auto;
        display: flex;
        flex-direction: column;
    }
    body.on #visual{
        position: relative;
        width: 100%;
        height: auto;
    }
    #area_company{
        width: 100%;
        padding: 80px 5%;
    }
    .tab_content .list li{
        width: 100%;
    }
}
@media(max-width:768px){
    
    #area_company{
        padding: 80px 5%;
    }
    .tab_content .list{
        grid-gap: 80px;
    }
    .tab_content .list li{
        margin: 0;
    }
    .tab_content .list li > a{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .tab_content .list li h2{
        font-size: 1.8em;
    }
    .tab_content .list li .txt_wrap > p,
    .tab_content .list li .txt_wrap > .btn-mv{
        left: 0;
    }
    .tab_content .list li .txt_wrap > p{
        margin: 15px 0;
    }
    .tab_content .list li .txt_wrap > .btn-mv{
        font-size: 1em;
    }
    .tab_content .list li:nth-child(2) > a{
        flex-direction: column-reverse;
    }
    .tab_content .list li .img_wrap{
        margin: 40px 0 0;
    }
    .tab_content .list li .img_wrap img:nth-child(2){
/*
        position: absolute;
        right: 100px;
*/
    }
    .tab_content .list li:nth-child(2) .img_wrap .pattern{
        position: relative;
        top: 0;
    }
    .tab_content .list li:nth-child(2) .img_wrap img:nth-child(2){
        position: absolute;
        right: unset;
        top: 0;
        left: 100px;
    }
    .tab_content .list li:nth-child(2) .txt_wrap{
        top: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: end;
        text-align: right;
    }
    .tab_content .list li:nth-child(2) .img_wrap::before{
        width: 300px;
    }
    
    #contants_wrap .hd_title h3{
        font-size: 1.8em;
        line-height: 1.4;
    }
    .area_overview .con_box img{
        width: 100%;
    }
    .area_overview .inr > div .txt{
        font-size: 1em;
        line-height: 1.6;
    }
    #contants_wrap .rt_box .txt{
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        grid-gap: 15px;
    }
    #contants_wrap .txt .ic_call{
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    #contants_wrap .txt p{
        font-size: 1.2em;
    }
    #contants_wrap .rt_box .txt dt{
        font-size: 1em;
    }
    #contants_wrap .rt_box .txt dd{
/*
        flex-direction: column;
        align-items: flex-start;
*/
        font-size: 1.3em;
        grid-gap: 10px;
    }
    #contants_wrap .rt_box .txt dd .round{
        width: 2px;
        height: 2px;
    }
    
}