clearfix::before, .clearfix::after {
  content: ''
}

.clearfix::after {
  clear: both;
  display: block
}


.mobileShow {display: none !important;}
.mobileShowInline {display: none !important;}
.tabletShow {display: none !important;}
.tabletShowInline {display: none !important;}

.mainColorText{color: #EF3B2C !important;}
.mainColorBg{background-color: #EF3B2C !important;}
.mainColorBd{border-color: #EF3B2C !important;}

.scrollLock {overflow: hidden !important;}
#header{position: fixed;top: 0;left: 0;width: 100%;height: 120px;box-sizing: border-box;z-index: 99;transition: all 0.3s;}
#header .inner{display: flex;align-items: center;justify-content: space-between;flex-direction: row;flex-wrap: nowrap;width: 100%;height: 100%;padding: 0 50px;margin: 0 auto;box-sizing: border-box;}
#header .logo a{position: relative;display: block;}
#header .logo a img{transition: all 0.5s;vertical-align: bottom;}
#header .logo a:after{content: " ";position: absolute;top: 0;left: 0;width: 280px;height: 68px;background-image: url(../images/layout/logo_color.svg);background-size: 100% 100%;background-repeat: no-repeat;opacity: 0;transition: all 0.5s;}
#gnb {position: relative;display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;gap: 100px;}
#gnb > ul{display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;width: 720px;height: 120px;align-items: center;}
#gnb > ul > li{position: relative;box-sizing: border-box; }
#gnb > ul > li > a{display: flex;justify-content: center;align-items: center;height: 120px;color: #e8dfca;font-size: 23px;font-weight: 500;line-height: normal;letter-spacing: -0.2px;text-align: center; transition: all 0.3s;flex-direction: column}
    #gnb > ul > li.active > a { /*color: #EF3B2C !important;*/
        transform: scale(1.15);
        z-index: 10;
       /* box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
        background: rgba(255, 255, 255, 0.2);*/
    }
    #gnb > ul > li .chinese {
        font-size: 20px;
        display: inline-block;
        line-height: 30px;
    }
    #gnb > ul > li .english {
        font-size: 16px;
        display: inline-block;
        line-height: 30px;
    }
    
#gnb > ul > li > ul{display: none;position: absolute;top: 120px;left:-20px;width: auto;min-width: max-content;padding: 25px 20px;box-sizing: border-box;border-radius: 0px 0px 15px 0px;background: #141414;box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);text-align: center;}

#gnb > ul > li:nth-child(2) > ul{left: 0px;}


#gnb > ul > li > ul > li + li{margin-top: 16px;}
#gnb > ul > li > ul > li > a{color: #333;font-size: 17px;font-weight: 500;line-height: normal;letter-spacing: -0.4px; transition: all 0.3s;display: block}
#gnb > ul > li > ul > li > a:hover{color: #EF3B2C !important;font-weight: 500;text-decoration: underline;}

    #gnb > ul > li > ul > li .chinese {
        font-size: 17px;
        display: block;
        line-height: 20px;
    }
    #gnb > ul > li > ul > li .english {
        font-size: 16px;
        display: block;
        line-height: 20px;
    }
.langsGroup{position: relative; display: none;}
.langsGroup button{display: block;width: 26px;height: 26px;background-image: url(../images/layout/icon_langs_white.svg);background-position: center;background-repeat: no-repeat;overflow: hidden;text-indent: -9999px;white-space: nowrap;}
.langsGroup ul{display: none;position: absolute;top: 41px;left: 50%;width: 70px;margin-left: -35px;padding: 7px 0;background: #222;box-sizing: border-box;}
.langsGroup ul li{margin: 7px 0;text-align: center;}
.langsGroup ul li a{display: inline-block;color: rgba(255, 255, 255, 0.30);font-size: 15px;font-weight: 600;line-height: 150%;text-align: center;}
.langsGroup ul li a.active{color: #FFF;text-decoration: underline;}
.langsGroup.active ul{display: block;}
.btnSitemapOpen{position: relative;width: 40px; height: 30px;}
.btnSitemapOpen span{
    display: block;
    overflow: hidden;
    text-indent: -9999px;
    white-space: nowrap;
    position: relative;
    top: 12px;
    display: inline-block;
    width: 40px;
    height: 3px;
    background: #fff;
    transition: all 0.5s;
    will-change: transform;
}
.btnSitemapOpen:before, .btnSitemapOpen:after, .btnSitemapOpen span{content: "";position: absolute;left: 0;width: 40px;height: 3px;background: #fff;transition: all 0.5s;will-change: transform;}
.btnSitemapOpen:before{top: -2px;}
.btnSitemapOpen:after{top: 26px;}

.sitemapWrap{
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    
    box-sizing: border-box;
    z-index: 101;
    /*background: rgba(0, 0, 0, 0.95);*/
    background-color: #000000d6;
    backdrop-filter: blur(7px);
    
}
.sitemapWrap.show{display: block;}
.sitemapHeader{position: relative;display: flex;align-items: center;justify-content: space-between;flex-direction: row;flex-wrap: nowrap;max-width: 100%;width: 100%;height: 120px;margin: 0 auto;padding: 0 55px 0 50px;box-sizing: border-box;}
.sitemapHeader .logo a{display: block;}
.sitemapHeader .logo a img{vertical-align: bottom;}
.sitemapHeader .langsGroup{display: none;position: absolute;right: 80px;flex-direction: row;flex-wrap: wrap;align-items: center;gap: 10px;}
.sitemapHeader .langsGroup a{color: rgba(0, 0, 0, 0.50);font-size: 15px;font-weight: 600;line-height: normal;}
.sitemapHeader .langsGroup a.active{color: #000;text-decoration: underline;}
.btnSitemapClose{position: relative;width: 30px;height: 30px;}

.btnSitemapClose span{position: relative;top: -4px;left: -4px;display: inline-block;width: 40px;height: 3px;background: #fff;transition: all 0.5s;will-change: transform;transform: rotate(45deg);overflow: hidden;text-indent: -9999px;white-space: nowrap;}

.btnSitemapClose:after{content: "";position: absolute;right: -6px;top: 14px;transform: rotate(315deg);width: 40px;height: 3px;background: #fff;transition: all 0.5s;will-change: transform;}

.sitemapBody{position: relative;width: 100%;max-width: 1600px;margin: 0 auto;height: calc(100% - 100px);display: flex;align-content: center;align-items: center;flex-direction: row;flex-wrap: wrap;}
.sitemapBody > ul{width: 100%;height: 100%;display: flex;flex-direction: row;flex-wrap: nowrap;align-items: flex-start;justify-content: center;}
.sitemapBody > ul > li{position: relative;display: flex;flex-direction: column;flex-wrap: wrap;align-items: center;align-content: center;flex: 1 auto;height: auto;margin-top: 10%;box-sizing: border-box;text-align: center;}
.sitemapBody > ul > li .chinese {
        font-size: 40px;
        display: block;
        line-height: 40px;
    }

.sitemapBody > ul > li .english {
        font-size: 28px;
        display: block;
        line-height: 40px;
    }
.sitemapBody > ul > li.active{}
.sitemapBody > ul > li:hover > a{color: #EF3B2C;}
.sitemapBody > ul > li:hover > a:before{
    content: "";
    position: absolute;
    
    transition: .3s;
    -webkit-transition: .3s;
    z-index: -1;
    /*opacity: 0; */   
    
   /* background: url(../images/layout/bi.svg) no-repeat center top / cover;*/
    width: 30px;
    height: 30px;
    left: -5px;
    top: -30px;
    
    /*background: #EF3B2C;
    border-radius: 100%;
    width: 12px;
    height: 12px;
    left: 0px;
    top: -10px;*/
}


.sitemapBody > ul > li > a{position: relative;display: inline-block;margin-bottom: 30px;box-sizing: border-box;font-size: 40px;color: #e8dfca;font-weight: 600;line-height: normal;letter-spacing: -0.6px;}




    .sitemapBody > ul > li > ul > li > a {
        position: relative;
        color: #e8dfca;
        font-size: 22px;
        font-weight: 400;
        line-height: 250%;
        transition: all 0.3s;
        letter-spacing: 0.2px;
    }
.sitemapBody > ul > li > ul > li > a:hover{color: #EF3B2C;font-weight: 500;text-decoration: underline;}

    .sitemapBody > ul > li > ul > li .chinese {
        font-size: 22px;
        display: block;
        line-height: 30px;
    }
    .sitemapBody > ul > li > ul > li .english {
        font-size: 16px;
        display: block;
        line-height: 30px;
    }

    .sitemapBody > ul > li.active > a:before {
        opacity: 1;
    }

#header.show {
    position: fixed;
    top: 0;
    background: #000;
    box-shadow: 0px 1px 10px 5px rgba(0, 0, 0, 0.5);
    opacity: 1;
    z-index: 100;
    /*   background: #000000d6;*/
    background: #3e2b1e;
    /*background: rgb(0, 0, 0, 0.6);*/
    backdrop-filter: blur(3px);
    transition: background-color .5s ease;
}
#header.show .logo a:after{opacity: 1;}
#header.show .logo a img{opacity: 0;}
#header.show #gnb > ul > li > a{color: #e8dfca;}
#header.show #gnb > ul > li > ul > li > a{color: #e8dfca;}
#header.show .langsGroup button{background-image: url(../images/layout/icon_langs_black.svg);}
#header.show .btnSitemapOpen:before, #header.show .btnSitemapOpen:after{background: #fff;}

#footer{position: relative;padding: 60px 0;background: #3e2b1e;box-sizing: border-box;}
br.mo{display: contents;}
#footer .footerInner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
.footerLogo a{display: block;}
.footerLogo img{vertical-align: bottom; width: 190px;}
.footerAddress {
    float: left;
        width: 70%;
}
.footerAddress ul li + li {
    margin-top: 33px;
}
.footerAddress ul li strong{display: block;color: #e8dfca;font-size: 20px;font-weight: 600;line-height: 150%;}
.footerAddress ul li p{margin-top: 8px;color: rgba(255, 255, 255, 0.80);font-size: 15px;font-weight: 400;line-height: 150%;}
.footerCopy{/*margin-top: 30px;*/color: rgba(255, 255, 255, 0.50);font-size: 13px;font-weight: 400;line-height: 100%;}
.footerAddress ul li p em{display: inline-block;}
.footerCopy span{color: #FFF;}
.familyGroup{position: relative;}
.familyGroup button{width: 220px;height: 46px;padding: 0 28px 0 18px;border: 1px solid rgba(255, 255, 255, 0.50);background-image: url(../images/layout/icon_down_white.svg);background-position: 92% center;background-repeat: no-repeat; box-sizing: border-box;color: rgba(255, 255, 255, 0.50);font-size: 14px;font-weight: 600;line-height: normal;letter-spacing: 0.2px;text-align: left;-webkit-transition: .3s;transition: .3s;}
.familyGroup button:hover{border: 1px solid #FFF;color: #FFF;}
.familyGroup ul{display: none;position: absolute;left: 0;top: 56px;width: 100%;max-height: 180px;overflow-y: auto;padding: 20px;background-color: rgba(255, 255, 255, 0.9);border-radius: 5px;box-sizing: border-box;}
.familyGroup ul li + li{margin-top: 10px;}
.familyGroup ul li a{font-size: 14px;color: #000;font-weight: 400;}
.familyGroup.active button{border: 1px solid #FFF;color: #FFF;}
.familyGroup.active ul{display: block;}

#btnTop{opacity: 0;position: fixed;bottom: 70px;right: 35px;width: 70px;height: 70px;background-color: #d4a574;border-radius: 100%;box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1);box-sizing: border-box;color: #FFF;font-size: 14px;font-weight: 700;line-height: normal;z-index: 99;transition: .5s;-webkit-transition: .5s;}
#btnTop.show{opacity: 1;}
#btnTop:before{content: " ";position: absolute;left: 0;top: 0;width: 70px;height: 70px;background-color: transparent;border-radius: 100%;z-index: 0;}
#btnTop:hover:before{animation: btnTopAni 1.8s infinite;-webkit-animation: btnTopAni 1.8s infinite;}

@media screen and (max-width: 1599px){
    /*#header .inner{padding: 0 20px;}
    .sitemapHeader{padding: 0 25px 0 20px;}
    .sitemapBody > ul > li > a{font-size: 32px;}
    .sitemapBody > ul > li > a:before{width: 26px;height: 26px;}
    .sitemapBody > ul > li > ul > li > a{font-size: 20px;}*/

}
@media screen and (max-width: 1399px){
    
    #header .logo a:after{width: 220px;height: 53px;}
    #gnb{gap: 30px;}
    #gnb > ul{width: 730px;}
    #gnb > ul > li > a{font-size: 20px;}
    #header .logo a img{width: 220px;height: 53px;}
    .sitemapHeader .logo a img{width: 220px;height: 53px;}

    .footerLogo img{width: 230px;height: 41px;}
    .footerAddress ul li strong{font-size: 18px;}
    .footerAddress ul li p{font-size: 16px;}
    .footerCopy{}
    #footer .footerInner{max-width: max-content; padding: 0 20px;}

}
@media screen and (max-width: 1199px){
    br.mo{display: block;}
    
    .tabletShow {display: block !important;}
	.tabletShowInline {display: inline-block !important;}
    .tabletHide{display: none !important;}

    #header{height: 90px;}
    #header .inner{padding: 0 20px;}
    #gnb > ul{display: none;}
    .sitemapHeader{height: 90px; padding: 0 20px;}
    .sitemapBody{max-width: 100%;padding: 50px 25px;height: calc(100vh - 80px);overflow-y: auto;box-sizing: border-box;}
    .sitemapBody > ul{        
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        flex-direction: column;
    }
    .sitemapBody > ul > li{align-items: flex-start;align-content: flex-start; flex: inherit;height: auto;margin-top: 0;text-align: left;}
    .sitemapBody > ul > li + li{margin-top: 50px;}
    .sitemapBody > ul > li > a{margin-bottom: 0;font-size: 30px;}
    .sitemapBody > ul > li > a:before{width: 25px;height: 25px; top: -20px;}
    .sitemapBody > ul > li > ul{display: none;width: 100%;padding: 10px 10px 0;box-sizing: border-box;}
    .sitemapBody > ul > li > ul > li > a{font-size: 20px;font-weight: 500;line-height: 220%;}
    .sitemapBody > ul > li.active > a:before{
        /*opacity: 0;*/ 
        width: 25px;height: 25px; top: -20px;
    }
    .sitemapBody > ul > li.on > a:before{opacity: 1;}

    #footer{padding: 50px 0;}
    #footer .footerInner{display: flex; /*flex-direction: column;*/}
    #footer .footerInner .footerLogo{}
    #footer .footerInner .footerAddress{width: 60%;}
    .footerLogo{margin-bottom: 20px;}
    .familyGroup button{margin-top: 40px;}
    .familyGroup ul{top: auto;bottom: 56px;}
    #btnTop{bottom: 50px;}
    
    
    .sitemapWrap{background-color: #000000b3; backdrop-filter: blur(10px);}

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

    .mobileShow {display: block !important;}
	.mobileShowInline {display: inline-block !important;}
    .mobileHide{display: none !important;}

    #header{height: 70px;}
    #header .inner {padding: 0 14px;}
    #header .logo a:after{width: 180px; height: 44px;}
    #header .logo a img{width: 180px; height: 44px;}
    .sitemapHeader .logo a img{width: 180px; height: 44px;}
    #gnb .langsGroup{display: none;}
    .sitemapHeader{height: 70px; padding: 0 14px;}
    .sitemapHeader .langsGroup{display: flex;}
    .sitemapBody{max-width: none;}
    .sitemapBody > ul > li > a{font-size: 24px;}
    .sitemapBody > ul > li:hover > a:before {
        width: 20px; height: 20px; top: -20px;
        /*width: 8px; height: 8px;*/
    }
    .sitemapBody > ul > li > ul > li > a{font-size: 16px;}
    .btnSitemapOpen{width: 30px; height: 28px;}
    .btnSitemapOpen:before, .btnSitemapOpen:after, .btnSitemapOpen span{width: 30px;}
    .btnSitemapOpen:before{top: 0;}
    .btnSitemapOpen span{}
    .btnSitemapOpen:after{top: 24px;}
    
    

    .footerLogo img{width: 150px;height: 36px;}
    .footerAddress ul li + li{margin-top: 20px;}
    .footerAddress ul li strong{font-size: 16px;}
    .footerAddress ul li p{font-size: 14px; }
    .footerCopy{margin-top: 20px;font-size: 13px;}
    #btnTop{right: 20px;width: 60px;height: 60px;}
    #btnTop:before{width: 60px;height: 60px;}
    
    #footer .footerInner{
        display: flex; 
        flex-direction: column; 
        align-items: flex-start; 
        align-items: center;
        text-align: center;
    }
    #footer .footerInner .footerLogo{}
    #footer .footerInner .footerAddress{width: 100%;}
    
    
}

@-webkit-keyframes btnTopAni {
    from {-webkit-box-shadow: 0 0 0 0 #EF3B2C;box-shadow: 0 0 0 0 #EF3B2C;}
    to {-webkit-box-shadow: 0 0 0 20px rgba(37, 72, 227, 0);box-shadow: 0 0 0 20px rgba(37, 72, 227, 0);}
}
@keyframes btnTopAni {
    from {-webkit-box-shadow: 0 0 0 0 #EF3B2C;box-shadow: 0 0 0 0 #EF3B2C;}
    to {-webkit-box-shadow: 0 0 0 20px rgba(37, 72, 227, 0);box-shadow: 0 0 0 20px rgba(37, 72, 227, 0);}
}