/* --------------------------------
	COMMON
------------------------------- */

a{ transition: 0.3s;}
a:hover{color: #000}
.logo{font-family: 'EniTabCE';}
/* --------------------------------
	HEADER
------------------------------- */
#header{position: fixed;top: 0;z-index: 9999;width: 100%;/* padding-bottom: 40px; */}
#header .header_wrap{width: 95vw;display: flex;justify-content: space-between;margin: 0 auto;align-items: center;/* padding-top: 25px; */}
#header .h-logo{
    height: 125px;
}
#header .h-logo a{font-size: 60px;color:#fff;line-height: 125px;}

#header .h-navi{}
#header .h-navi ul{ display: flex;}
#header .h-navi ul li{ margin: 0 10px;}
#header .h-navi > ul > li > a{color:#fff;font-family: 'EniTabBol';font-size: 23px;padding: 0 20px;line-height: 125px;}
#header .h-navi ul li:hover a{color: #ffde00;}

#header.open{ background-color: #fff;}
#header.open .h-logo a{color:#000;}
#header.open .h-navi ul > li > a{color:#000;}
#header.open .h-navi ul > li:hover > a{color: #ffde00;}
.nav-depth01 li .depth02{display: none;}
.nav-depth01 li.on .depth02{display: block;}

#header.h-sub{}
#header.h-sub .h-navi ul li a{color:#000;}

/* 모바일버전 */
#header.mobile.on .h-navi ul{border-color: #000;}
#header.mobile .h-navi ul li a{color:#fff;}

#header.mobile.on{background-color: #fff;}
#header.mobile.on .h-logo a{color:#000;}
#header.mobile.on .h-navi > ul > li > a{color:#000;}

/* business 하위링크 */
#header .depth02{position: absolute;width: 100%;top: 100%;left: 0;/* background-color: #fff; *//* padding-top: 125px; */}
#header .depth02 ul{
    justify-content: space-between;
    width: 100vw;
    margin: 0 auto;
    padding: 70px 2.5vw;
    border-top: 1px solid #959595;
    background-color: #fff;
}
#header .depth02 ul li{
    width: 30%;
    /* background-color: #eee; */
    margin: 0;
    min-height:350px;
    height:30vh;
    background-size: cover;
    background-position: center;
    position: relative;
}
#header .depth02 ul li:nth-child(1){background-image: url(../images/business_01.jpg);}
#header .depth02 ul li:nth-child(2){background-image: url(../images/business_02.jpg);}
#header .depth02 ul li:nth-child(3){background-image: url(../images/business_03.jpg);}

#header .depth02 ul li a{color: #fff;}
#header.open .depth02 ul li a{color:#fff;display: block;padding-top: 100px;padding-left: 80px;height: 100%;}
#header .depth02 .textBox{
    width: auto;
    display: inline-block;
    text-align: end;
}
#header .depth02 h4{font-family: 'EniTabBol';font-size: 50px;display: inline-flex;position: relative;}
#header .depth02 li:nth-child(3) h4{font-size: 40px;}
#header .depth02 h6::after{content:'';height: 6px;background-color:#fff;width: calc(100% + 80px);position: absolute;bottom: calc(100% + 5px);left: -80px;}
#header .depth02 li:hover h6::after{background-color:#ffde00;}
#header .depth02 h6{font-size:25px;margin-top: 15px;font-weight: 400;position: relative;}
#header .depth02 p{font-size:18px;margin-top: 5px;}




/* --------------------------------
	FOOTER
------------------------------- */
#footer{background-color: #000;color:#fff;min-height:300px;align-content: center;}
#footer .footer-wr{max-width: 1920px;margin: 0 auto;display:flex;justify-content: center;}
#footer .footer-wr > div{margin:0 70px}
#footer h2{font-size: 30px;}
#footer .btn{display: flex;justify-content: end;margin-top: 28px;position: relative;}
#footer .btn a{padding: 18px 56px 18px 28px;background-color: #ffde00;border-radius: 25px;font-size: 15px;color: #fff;font-weight: 800;position: relative;}
#footer .btn a:hover{background-color:#fff; color: #000;}
#footer .btn em{position: absolute; right: 28px; transition: 0.3s;}
#footer .btn:hover em{right: 18px;}
#footer dl{}
#footer dt{font-size: 15px;color:#afafaf;margin-bottom: 16px;}
#footer dd{color:#fff;font-size: 17px;line-height: 1.5em;}

.copyright{text-align: center;margin-top: 50px;}
.copyright p{font-size: 15px; color:#afafaf}

/* --------------------------------
	MAIN
------------------------------- */

#visual{background-image: url(../images/main-visual.jpg);background-size: cover;position: relative;}
#visual h1{font-family: 'Helvetica';font-weight: 900;font-size: 70px; font-style: italic; color:#fff;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;text-align: center;}



/* --------------------------------
	sub
------------------------------- */
.sub .wr{display: flex;}
.sub .wr > div{width: 50vw;height: 100vh;align-content: center;}
.sub .imgBox{}
.sub .imgBox img{object-fit: cover; height: 100%; width: 100%;}
.sub .textBox{padding: 0 3vw;}
.sub .textBox dt{color:#000; font-size: 63px;}
.sub .textBox dd {max-width: 600px;}
.sub .textBox dd h6{color: #000;font-size: 30px;margin-top: 40px;}
.sub .textBox dd p{color: #000;font-size: 18x;line-height:1.5em;font-weight:500;margin-top: 40px;}
.sub .textBox dd p b{margin: 20px 0;display: inline-block;}

/* about */
#about{}


/* media size setting start */
@media all and (max-width: 1680px) {
        
    /* header */
    #header{}
    #header.open .depth02 ul li a{padding-left: 40px;/* padding-top: 0; */}
    #header .depth02 h6::after{width: calc(100% + 40px); left: -40px;}

    /* FOOTER */
    #footer .footer-wr > div{margin: 0 40px;}
    
}



@media all and (max-width: 1240px) {
        
    /* header */
    #header{}
    #header .h-logo{height: 100px;}
    #header .h-logo a{font-size: 50px; line-height:100px;}

    #header .h-navi{}
    #header .h-navi > ul > li > a{font-size: 23px; padding: 0 10px; line-height: 100px;}

    #header .depth02 {}
    #header .depth02 ul {flex-wrap: wrap;padding: 2.5vw; gap: 2.5vw 0;}
    #header .depth02 ul li{width: 100%; height: 20vh;min-height: auto;}
    
    #header .depth02 .textBox{position: absolute;top: 25%;left: 40px;}


    /* MAIN */
    #visual h1{font-size:60px;}


    /* FOOTER */
    #footer{padding-top: 20px;}
    #footer .footer-wr{flex-wrap: wrap;}
    #footer .footer-wr > div{width: 100%; text-align: center; padding-top: 40px;}
    #footer h2{font-size: 30px;}
    #footer .btn{justify-content: center;}
    #footer .btn a{}
    #footer .btn em{}
    #footer dl{}
    #footer dt{}
    #footer dd{}

	.copyright{padding-bottom:60px;}


    .sub .wr{flex-wrap: wrap;}
    .sub .wr > div{width: 100%; height: auto;}
    .sub .wr > div.imgBox{height: 500px;}
    .sub .imgBox img{}
    .sub .textBox{}
	.sub .textBox dl{padding:40px 0 60px 0;text-align: center;}
    .sub .textBox dt{font-size: 45px;}
    .sub .textBox dd {margin: 0 auto;}
    .sub .textBox dd h6{font-size: 25px;}
    .sub .textBox dd p{font-size: 15px;line-height: 1.75em;}

}



@media all and (max-width: 1024px) {
        
    /* header */
    #header{}

}


@media all and (max-width: 840px) {
        
    /* header */
    #header{}
    #header .header_wrap{flex-wrap: wrap; text-align: center;}
    #header .h-logo{height: auto;width: 100%;}
    #header .h-logo a{font-size: 40px;line-height: 60px;}
    
    #header .h-navi{width: 100%;}
    #header .h-navi ul{justify-content: center; border-top: 1px solid #fff; /*border-bottom: 1px solid #fff;*/}
    #header .h-navi > ul > li{margin: 0 5px; }
    #header .h-navi > ul > li > a{font-size: 20px;line-height: 40px;}



    /* MAIN */
    #visual h1{font-size:50px; padding: 0 50px;}


    /* FOOTER */
    #footer{}
    #footer h2{font-size: 20px;}

    #footer dt{font-size: 12px;}
    #footer dd{font-size: 12px;}

}


@media all and (max-width: 640px) {
    
    /* header*/
    #header{}
    #header .h-logo a{font-size: 35px;}
    #header .h-navi > ul > li > a{font-size:16px;}
    #header .depth02 .textBox{top:20%;}
    #header .depth02 h4{font-size: 25px;}
    #header .depth02 li:nth-child(3) h4{font-size: 25px;}
    #header .depth02 h6{font-size: 20px;}
    #header .depth02 h6::after{height: 3px;}
    #header .depth02 p{font-size: 16px;}

    /* MAIN */
    #visual h1{font-size:40px; }
}


@media all and (max-width: 480px) {
    
    /* header*/
    #header{}

}
/* media size setting end */