@font-face {
    font-family: 'Optima Bold';
    font-style: normal;
    font-weight: normal;
    src: url('/assets/fonts/OPTIMA_B.woff') format('woff');
    }
*{
    margin : 0;
    padding : 0;
    box-sizing: border-box;
    font-family: Noto Sans KR;
    /* font-weight: 500; */
}
li{
    list-style: none;
}
a{
    text-decoration: none;
    color : inherit;
}
img{
    display: block;
    max-width: 100%;
}
/**/
.moView{
    display : none;
}
.pcView{
    display : block;
}
/**/
.header{
    position : fixed;
    width : 100%;
    padding-top : 54px;
    left : 0;
    top : 0;
    z-index: 1000;
    transition : background .5s;
}
.header.sub{
    position : absolute;
}
.header.on{
    background : #f8f8f8;
}
.header::after{
    position : absolute;
    content : '';
    width : 100%;
    min-height : 0;
    height : 0;
    transition : height .7s, opacity .5s;
    background : #f8f8f8;
    left : 0;
    top : 100%;
    opacity : 0;
    z-index: -1;
}
.header.on::after{
    opacity : 1;
    /* height : 135px; */
	height : 135px;
}
.m-header{
    display: none;
}
.m-header-nav{
    display: none;
}
.header-inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width : 1731px;
    width : 100%;
	width : 1731px;
    margin : 0 auto;
}
.main-logo{
    width : 300px;
    height : 50px;
    background : url(/assets/images/common/main-logo.png)no-repeat;
    background-size: contain;
    transition : background .5s;
}
.white .main-logo{
    background : url(/assets/images/common/main-logo-white.png)no-repeat;
    background-size: contain;
}
.header.on .main-logo{
    background : url(/assets/images/common/main-logo.png)no-repeat;
    background-size: contain;
}
.main-logo > a{
    display: block;
    width : 100%;
    height : 100%;
    font-size: 0;
    line-height: 0;
    color : transparent;
}
.header-nav{
    position : relative;
}
.header-nav > ul{
    display: flex;
    background : #F8F8F8;
    border-radius: 100px;
}
.header-nav > ul > li{
    position : relative;
    transition : left .3s, opacity .5s;
    z-index: 1;
}
.header-nav > ul > li.header-nav-btn{
    position : absolute;
    width : 0;
    height : 51px;
    border-radius: 100px;
    /* background : #333; */
    background : linear-gradient(to right, #CA76AC,#608CC2,#3CB1B2);
    z-index : 0;
    pointer-events: none;
    opacity: 0;
}
.header-nav > ul > li.header-nav-btn.on{
    opacity: 1;
}
.header-nav > ul > li > a{
    display: flex;
    align-items: center;
    /* padding : 0 30px; */
	padding : 0 40px;
    height : 51px;
    font-size: 18px;
    font-weight: 500;
    /* color : #A2A2A2; */
	color : #777;
    transition : color .3s;
	white-space : nowrap;
}
.header-nav > ul > li:hover > a{
    color : #F8F8F8;
}
.header-nav > ul > li > ul{
    text-align: center;
    position : absolute;
    width : 100%;
    top : 100%;
    padding : 8px 0;
    opacity : 0;
    pointer-events: none;
    transition : opacity .5s;
}
.header.on .header-nav > ul > li > ul{
    opacity : 1;
    pointer-events: all;
}
.header-nav > ul > li > ul > li > a{
    display: block;
    padding : 8px 0;
    font-weight: 500;
    /* color : #A2A2A2; */
	color : #777;
}
.header-nav > ul > li > ul > li > a:hover{
    color : #333;
}
.header-right{
    display: flex;
    gap : 34px;
}
.header-customer{
    display: flex;
    align-items: center;
    gap : 10px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.06em;
    color : #1D1D1D;
    transition : color .5s;
	white-space : nowrap;
}
.white .header-customer{
    color : #FFFFFF
}
.header.on .header-customer{
    color : #1d1d1d;
}

.header-customer-icon{
    width : 36px;
    height : 35px;
    background : url(/assets/images/common/header-customer-icon.png)no-repeat;
    background-size: contain;
}
.header-tel{
    display: flex;
    align-items: center;
    gap : 10px;
    font-size: 33px;
    font-family: Optima Bold;
    letter-spacing: -0.04em;
    color : #050505;
    transition : color .5s;
}
.white .header-tel{
    color : #fff;
}
.header.on .header-tel{
    color : #050505;
}
.header-tel-icon{
    width : 25px;
    height : 25px;
    background : url(/assets/images/common/header-tel-icon.png)no-repeat;
    background-size: contain;
    transition : background .5s;
}
.white .header-tel-icon{
    background : url(/assets/images/common/header-tel-icon-white.png)no-repeat;
    background-size: contain;
}
.header.on .header-tel-icon{
    background : url(/assets/images/common/header-tel-icon.png)no-repeat;
    background-size: contain;
}
/**/
.right-quick{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    gap : 25px;
    width : 100px;
    height : 100%;
    padding-bottom : 31px;
    position : fixed;
    right : 27px;
    z-index: 1;
}
.right-quick > span{
    width : 1px;
    /* height : 100%; */
    height : 0;
    /* background : rgba(255,255,255,0.24); */
    position : absolute;
    top : 0;
    transition : height 2s linear;
}
.right-quick.on > span{
    height : 100%;
}
.right-quick > .quick-open{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width : 108px;
    height : 108px;
    background : linear-gradient(135deg, #E072A8, #9589C0, #268CCD);
    font-weight: 500;
    border-radius: 50%;
    color : #fff;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
    position :relative;

    opacity: 0;
    transition : opacity 1s;
}
.right-quick.on > .quick-open{
    opacity: 1;
    transition-delay : 2s;
}
.right-quick > .quick-open > p{
    font-size: 21px;
    letter-spacing: -0.06em;
    line-height: 23px;
}
.right-quick > .quick-open > p > span{
    font-family: futura-pt;
    font-size: 21px;
    letter-spacing: -0.06em;
}
.right-quick > .quick-open > p:nth-child(3){
    font-size: 16px;
}
.right-quick > .quick-customer{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap : 8.4px;
    /* width : 82px; */
	width : 108px;
    /* height : 82px; */
	height : 108px;
    border-radius: 50%;
    background : #fff;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
    /* font-size: 12px; */
	font-size : 14px;
    font-weight: 500;
    font-family: futura-pt;
    position :relative;

    opacity: 0;
    transition : opacity 1s;
}
.right-quick.on > .quick-customer{
    opacity: 1;
    transition-delay: 2s;
}
/**/
.footer{
    width : 100%;
    background : #222222;
}
.footer-inner{
    display: flex;
    gap : 36px;
    max-width : 1761px;
    width : 100%;
    height : 100%;
    margin : 0 auto;
    position : relative;
}
.footer-logo{
    display: flex;
    align-items: center;
}
.footer-right{
    padding : 114px 0 90px;
}
.footer-p{
    display: flex;
    gap : 20px;
    font-size: 18px;
    color : #fff;
    letter-spacing: -0.06em;
    font-weight: 500;
    margin-bottom : 17px;
}
.footer-p > span{
    display: flex;
    align-items: center;
    padding-right : 20px;
    position : relative;
}
.footer-p > span:not(:last-child)::after{
    position : absolute;
    content: '';
    right : 0;
    width : 1px;
    height : 12px;
    background : rgba(255,255,255,0.5);
}
.footer-info{
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.06em;
    color : rgba(255,255,255,0.5);
    line-height: 20px;
    margin-bottom : 17px;
}
.footer-copy{
    font-size: 12px;
    font-weight: 700;
    color : rgba(255,255,255,0.5);
    letter-spacing: -0.021em;
}
.footer-ul{
    display: flex;
    gap : 27px;
    color : rgba(255,255,255,0.5);
    font-size: 12px;
    letter-spacing: -0.06em;
    font-weight: 500;
    position : absolute;
    right : 0;
    top : 48px;
}
.footer-ul > li{
    display: flex;
    align-items: center;
    gap: 11px;
}
.footer-ul > li > img:not(:last-child){
    margin-right : 10px;
}
@media (max-width : 991px){
    .header{
        display : none;
    }
    .right-quick{
        display: none !important;
    }
    .moView{
        display : block;
    }
    .pcView{
        display : none;
    }
    /**/
    .m-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width : 100%;
        height : 70px;
        padding : 0 7.2vw;
        position : fixed;
        left : 0;
        top : 0;
        z-index: 1000;
        background : #fff;
        box-shadow: 0 0 10px rgba(0,0,0,0.16);

        transition : background .5s;
    }
    .m-header.sub{
        background : none;
        box-shadow : none;
    }
    .m-header.on{
        background : #fff;
    }
    .m-header .main-logo{
        width : 40.0960vw;
        background-position : center;
    }
    
    .header-right{
        align-items : center;
        gap : 2.6667vw;
    }
    .header-tel{
        width : 6.6667vw;
        max-width: 50px;
        height : 6.6667vw;
        max-height: 50px;
        background : url(/m/assets/images/common/m_header-tel.png)no-repeat;
        background-size: contain;
        background-position: center;
    }
    .hamburger{
        width : 4.6667vw;
        max-width : 35px;
        height : 4.2667vw;
        max-height : 32px;
        background : url(/m/assets/images/common/hamburger.png)no-repeat;
        background-size: contain;
        background-position: center;
        transition : background .5s;
    }
    .m-header.on .hamburger{
        background : url(/m/assets/images/common/hamburger-x.png)no-repeat;
        background-size: contain;
        background-position: center;
    }
    .m-header-nav{
        display: flex;
        align-items: center;
        position : fixed;
        left : 0;
        top : 70px;
        z-index: 1;
        width : 100%;
        height : calc(100% - 70px);
        background : #f9f9f9;
        background : url(/m/assets/images/main/m_environment-bg.jpg)no-repeat;
        background-size: cover;
        background-position : center;
        letter-spacing: -0.04em;
        padding : 0 7.2vw;
        padding-bottom : 70px;
        font-weight: 500;
        color : #333;

        transform: translateX(-100%);
        transition : transform 1s;
    }
    .m-header.on .m-header-nav{
        transform: translateX(0);
    }
    .m-header-nav > ul{
        display: flex;
        width : 100%;
        flex-direction: column;
        gap : 5vw;
        align-items: center;
    }
    .m-header-nav > ul > li{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .m-header-nav > ul > li > a{
        font-size: 6vw;
        padding : 3px 15px;
        border-radius: 100px;
        transition : background .5s, color .5s;
    }
    .m-header-nav > ul > li:hover > a{
        background : linear-gradient(to right, #CA76AC,#608CC2,#3CB1B2);
        color : #fff;
    }
    .m-header-nav > ul > li > ul{
        display: flex;
        flex-wrap : wrap;
        padding-top : 10px;
        font-size : 15px;

        height : auto;
        max-height : 0;
        overflow : hidden;
        transition : 1s;
    }
    .m-header-nav > ul > li > ul.on{
        max-height : 80px;
    }
    .m-header-nav > ul > li > ul > li > a{
        display: block;
        padding : 0 15px;
    }
    .m-header-nav > ul > li > ul > li:not(:last-child){
        border-right : 1px solid rgba(0,0,0,0.3);
    }
    /**/
    .footer{
        width : 100%;
        background : #222222;
    }
    .footer-inner{
        display: flex;
        flex-direction: column;
        gap : 3vw;
        max-width : 1761px;
        width : 100%;
        height : 100%;
        margin : 0 auto;
        padding : 7.2vw 7.2vw 18vw;
        position : relative;
    }
    .footer-logo{
        display: flex;
        align-items: center;
    }
    .footer-logo > img{
        width : 50vw;
        max-width : 301px;
    }
    .footer-right{
        padding : 0;
    }
    .footer-p{
        display: flex;
        flex-wrap: wrap;
        gap : 2vw;
        font-size: 2.5vw;
        font-weight: 500;
        margin-bottom : 2.5vw;
    }
    .footer-p > span{
        display: flex;
        align-items: center;
        padding-right : 2.5vw;
        position : relative;
    }
    .footer-p > span:not(:last-child)::after{
        height : 2.5vw;
    }
    .footer-info{
        font-size: 2.1vw;
        font-weight: 500;
        letter-spacing: -0.06em;
        color : rgba(255,255,255,0.5);
        line-height: 3.2vw;
        margin-bottom : 3vw;
    }
    .footer-copy{
        font-size: 2.5vw;
        font-weight: 700;
        color : rgba(255,255,255,0.5);
        letter-spacing: -0.021em;
    }
    .footer-ul{
        display: flex;
        flex-wrap: wrap;
        gap : 0vw 2vw;
        color : rgba(255,255,255,0.5);
        font-size: 2.5vw;
        letter-spacing: -0.06em;
        font-weight: 500;
        position : absolute;
        right : 0;
        top : auto;
        bottom : 7.2vw;
        left : 7.2vw;
        /* opacity: 0; */
    }
    .footer-ul > li{
        display: flex;
        align-items: center;
        gap: 2vw;
    }
    .footer-ul > li > img:not(:last-child){
        margin-right : 2vw;
    }
    .footer-ul > li > img{
        height : 3vw;
    }
}