/* 공통 */
/* reset에서 기본적으로 pretendard 지정. 영문이나 섞여있는 부분에 대해 클래스 부여하여 별도로 스타일 지정.*/
.pretendard{font-family: 'Pretendard'}
.font_3m{font-family: '3MCircularTT';}
.red{color: #ff0000;}





/************************************* header start *************************************/
#header{position: fixed; width: 100%; height: 100px; z-index: 9990; left: 0; top: 0; height: 80px; border-bottom: 1px solid rgba(255,255,255,0.18); transition-duration: 0.3s;}
#header:hover{background-color: #151515;}
#header h1{position: absolute; left: 120px; top: 50%; transform: translateY(-50%); display: block; width: 192px; height: 35px; z-index: 5;}
#header h1 a{display: block; width: 100%; height: 100%; transition-duration: 0.3s; background: url(/img/logo_header.png) no-repeat; background-size: 100%;}
#header .gnb{width: 100%; position: absolute; left: 0; top: 0; height: 80px; z-index: 4;}
#header .gnb>.dep1{position: absolute; left: 370px; top: 0; display: flex; column-gap: 65px;}
#header .gnb>.dep1 li a{color: #FFF; display: inline-block; height: 80px; line-height: 80px; font-family: '3MCircularTT'; font-weight: 400; transition-duration: 0.3s;}
#header .gnb>.dep1 li.active a{color: #ff0000;}
#header .login{position: absolute; top: 50%; right: 120px; transform: translateY(-50%); display: flex; column-gap: 50px; z-index: 5;}
#header .login li{position: relative;}
#header .login li:not(:last-child)::after{content: ''; display: block; position: absolute; right: -25px; top: 50%; transform: translateY(-50%); width: 1px; height: 8px; background-color: rgba(255,255,255,0.4);}
#header .login li a span{color: #FFF; font-size: 14px; font-weight: 400; position: relative; top: -4px; transition-duration: 0.3s;}
#header .login li a i{margin-right: 9px; transition-duration: 0.3s; display: inline-block; width: 20px; height: 19px;}
#header .login li.home_btn a i{background: url(/img/icon_home.png) no-repeat; background-size: 100%;}
#header .login li.login_btn a i{background: url(/img/icon_login.png) no-repeat; background-size: 100%;}
#header .login li.logout_btn a i{background: url(/img/icon_logout.png) no-repeat; background-size: 100%;}
/* sub_header */
#header.sub_header{background-color: #151515;}


/* 메인페이지에서 페이지 배경에 따라 header 색 변경 */
.fp-viewing-thirdPage #header,
.fp-viewing-fifthPage #header,
.fp-viewing-sixthPage #header,
.fp-viewing-6 #header{border-bottom: 1px solid #efefef;}

.fp-viewing-thirdPage #header:hover,
.fp-viewing-fifthPage #header:hover,
.fp-viewing-sixthPage #header:hover,
.fp-viewing-6 #header:hover{background-color: #FFF;}

.fp-viewing-thirdPage #header h1 a,
.fp-viewing-fifthPage #header h1 a,
.fp-viewing-sixthPage #header h1 a,
.fp-viewing-6 #header h1 a{background: url(/img/logo_header_black.png) no-repeat; background-size: 100%;}

.fp-viewing-thirdPage #header .gnb ul li a,
.fp-viewing-fifthPage #header .gnb ul li a,
.fp-viewing-sixthPage #header .gnb ul li a,
.fp-viewing-6 #header .gnb ul li a{color: #000;}

.fp-viewing-thirdPage #header .login li a span,
.fp-viewing-fifthPage #header .login li a span,
.fp-viewing-sixthPage #header .login li a span,
.fp-viewing-6 #header .login li a span{color: #000;}

.fp-viewing-thirdPage #header .login li.home_btn a i,
.fp-viewing-fifthPage #header .login li.home_btn a i,
.fp-viewing-sixthPage #header .login li.home_btn a i,
.fp-viewing-6 #header .login li.home_btn a i{background: url(/img/icon_home_black.png)no-repeat; background-size: 100%;}

.fp-viewing-thirdPage #header .login li.login_btn a i,
.fp-viewing-fifthPage #header .login li.login_btn a i,
.fp-viewing-sixthPage #header .login li.login_btn a i,
.fp-viewing-6 #header .login li.login_btn a i{background: url(/img/icon_login_black.png)no-repeat; background-size: 100%;}


.fp-viewing-thirdPage #header .login li:not(:last-child)::after,
.fp-viewing-fifthPage #header .login li:not(:last-child)::after,
.fp-viewing-sixthPage #header .login li:not(:last-child)::after,
.fp-viewing-6 #header .login li:not(:last-child)::after{background-color:#dfdfdf;}


.mob_nav_btn{display: none;}
.mob_nav{display: none;}


.fp-viewing-thirdPage .mob_nav_btn>span,
.fp-viewing-fifthPage .mob_nav_btn>span,
.fp-viewing-sixthPage .mob_nav_btn>span,
.fp-viewing-6 .mob_nav_btn>span{background-color: #151515;}
/************************************* header end *************************************/






/************************************* 2deps start *************************************/
.gnb .dep2{position: fixed; width: 100%; height: 60px; top: 80px;  z-index: 9989; background-color: #151515;}
.gnb .dep2>div{position: absolute; width: 1440px; height: 100%; left: 50%; top: 50%; transform: translate(-50%,-50%);display: none;}
.gnb .dep2>div>ul{display: flex; column-gap: 40px;}
.gnb .dep2>div>ul>li a{display: block; color: #FFF; opacity: 0.5; height: 60px; line-height: 60px; transition-duration: 0.3s;}
.gnb .dep2>div>ul>li a:hover{opacity: 1; color: #ff0000;}
.gnb .dep2>div>ul>li.this_page a{ opacity: 1; color: #ff0000; }
/* main페이지 dep2 */
header.main_header .gnb .dep2{position: absolute; top: 80px; display: none;}
/* 메인페이지에서 페이지 배경에 따라 색 변경 */
.fp-viewing-thirdPage #header .gnb .dep2,
.fp-viewing-fifthPage #header .gnb .dep2,
.fp-viewing-sixthPage #header .gnb .dep2,
.fp-viewing-6 #header .gnb .dep2{background-color: #FFF;}

.fp-viewing-thirdPage #header .gnb .dep2>div>ul>li a,
.fp-viewing-fifthPage #header .gnb .dep2>div>ul>li a,
.fp-viewing-sixthPage #header .gnb .dep2>div>ul>li a,
.fp-viewing-6 #header .gnb .dep2>div>ul>li a{color: #151515;}

.fp-viewing-thirdPage #header .gnb .dep2>div>ul>li a:hover,
.fp-viewing-fifthPage #header .gnb .dep2>div>ul>li a:hover,
.fp-viewing-sixthPage #header .gnb .dep2>div>ul>li a:hover,
.fp-viewing-6 #header .gnb .dep2>div>ul>li a:hover{color: #ff0000;}
/************************************* 2deps start *************************************/






/************************************* sub_top start *************************************/
.sub_top_big{height: 820px; width: 100%; position: relative; margin-top: 140px;}
.sub_top_big::after{content:''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1;}
.sub_top_big .text_wrap{width: 1440px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5;}
.sub_top_big .text_wrap h2{font-size: 42px; color: #FFF; margin-bottom: 60px; position: relative; text-align: center; line-height: 1.4em;}
.sub_top_big .text_wrap h2::after{content:''; display: block; position: absolute; left: 50%; bottom: -25px; transform: translateX(-50%); width: 40px; height: 1px; background-color: #ff0000;}
.sub_top_big .text_wrap p{font-size: 20px; color: #DDD; line-height: 1.5em; font-weight: 200; text-align: center;}





.sub_top{height: 360px; width: 100%; position: relative; margin-top: 140px;}
.sub_top::after{content:''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background:linear-gradient(to right,#000, rgba(0,0,0,0)); z-index: 1;}
.sub_top .text_wrap{width: 1440px; position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%); z-index: 5;}
.sub_top .text_wrap h2{font-size: 42px; color: #FFF; margin-bottom: 60px; position: relative;}
.sub_top .text_wrap h2::after{content:''; display: block; position: absolute; left: 0; bottom: -25px; width: 40px; height: 1px; background-color: #ff0000;}
.sub_top .text_wrap p{font-size: 20px; color: #DDD; line-height: 1.5em; font-weight: 200;}
/************************************* sub_top start *************************************/






/************************************* footer start *************************************/
#footer{background-color: #151515; height: auto !important;}
#footer>div{padding-top: 40px;}
#footer .logo_wrap{width: 160px; margin-bottom: 25px;}
#footer .logo_wrap img{width: 100%;}
#footer .footer_top{display: flex; justify-content: space-between; border-bottom: 1px solid #555; padding-bottom: 40px;}
#footer .footer_top .top_left ul{display: flex; flex-wrap: wrap; column-gap: 40px; row-gap: 15px; width: 500px;}
#footer .footer_top .top_left ul li{color: #999; font-size: 14px; font-weight: 400;}
#footer .footer_top .top_right ul li {text-align: right;}
#footer .footer_top .top_right ul li.privacy{margin-bottom: 15px;} 
#footer .footer_top .top_right ul li a{font-size: 14px; font-weight: 400; color: #999; }
#footer .footer_top .top_right ul li.privacy a{color: #FFF;}

#footer .footer_bottom{padding-top: 25px; padding-bottom: 30px;}
#footer .footer_bottom p{font-size: 14px; font-weight: 400; color: #555;} 


#footer.main_footer{height: 245px !important;}
#footer.main_footer>div{padding-top: 40px; height: 100% !important;}

/************************************* footer end *************************************/







@media screen and (max-width: 1600px){
    #header h1{left: 60px;}
    #header .gnb>.dep1{left: 300px; column-gap: 30px;}
    #header .login{right: 60px;}
}




@media screen and (max-width: 1470px){
    #header h1{left: 20px;}
    #header .gnb>.dep1{left: 260px;}
    #header .login{right: 20px;}
    .gnb .dep2>div{width: 96%;}

    .sub_top_big .text_wrap{width: 96%;}
    .sub_top .text_wrap{width: 96%;}
}






@media screen and (max-width: 1280px){
    #header .gnb{display: none;}
    #header .login{display: none;}
    /* mob_nav_btn */
    .mob_nav_btn{display: block; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 40px; height: 25px;}
    .mob_nav_btn>span{position: absolute; left: 0; width: 100%; height: 2px; background-color: #FFF; transition-duration: 0.3s; opacity: 1;}
    .mob_nav_btn>span.bar1{top: 0;}
    .mob_nav_btn>span.bar2{top: 50%; transform: translateY(-50%);}
    .mob_nav_btn>span.bar3{bottom: 0;}
    .mob_nav_btn.active>span.bar1{top: 50%; transform: rotate(45deg) translateY(-50%);}
    .mob_nav_btn.active>span.bar2{top: 45%; transform: rotate(135deg) translateY(-50%);}
    .mob_nav_btn.active>span.bar3{bottom: 0; opacity: 0;}
    /* mob_nav */
    .mob_nav{left: 0; top: 0; position: fixed; width: 100%; height: 100svh; background-color: #151515; z-index: 9988;}
    .mob_nav .space{height: 80px; width: 100%; position: relative;}
    /* login */
    .mob_nav .login{position: relative; height: 60px; border-bottom: 1px solid #DDD; display: flex; justify-content: center; align-items: center; column-gap: 50px;}
    .mob_nav .login li{position: relative;}
    .mob_nav .login li:not(:last-child)::after{content: ''; display: block; position: absolute; right: -25px; top: 50%; transform: translateY(-50%); width: 1px; height: 8px; background-color: rgba(255,255,255,0.4);}
    .mob_nav .login li a span{color: #FFF; font-size: 14px; font-weight: 400; position: relative; top: -4px; transition-duration: 0.3s;}
    .mob_nav .login li a i{margin-right: 9px; transition-duration: 0.3s; display: inline-block; width: 20px; height: 19px;}
    .mob_nav .login li.home_btn a i{background: url(/img/icon_home.png) no-repeat; background-size: 100%;}
    .mob_nav .login li.login_btn a i{background: url(/img/icon_login.png) no-repeat; background-size: 100%;}
    /* dep1 */
    .mob_nav .dep1{position: relative; height: calc(100% - 140px); overflow-y: auto;}
    .mob_nav .dep1>ul>li{ border-bottom: 1px solid #DDD; }
    .mob_nav .dep1>ul>li>a{position: relative; display: block; height: 80px; line-height: 80px; color: #FFF; font-size: 32px; font-weight: 600; font-family: '3MCircularTT'; box-sizing: border-box; box-sizing: border-box; padding: 0 80px;}
    .mob_nav .dep1>ul>li>a span{font-family: 'Pretendard'; font-weight: 700;}
    .mob_nav .dep1>ul>li>a::after{content:''; display: block; position: absolute; right: 80px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 12px solid #FFF; border-left: 10px solid transparent; border-right: 10px solid transparent; transition-duration: 0.3s;}
    .mob_nav .dep1>ul>li.active>a::after{transform: translateY(-50%) rotate(180deg);}
    .mob_nav .dep1>ul>li>a.pretendard{font-weight: 700;}
    .mob_nav .dep1>ul>li>a.pretendard span{font-weight: 700;}
    .mob_nav .dep1>ul>li.this_page>a{color: #ff0000;}
    .mob_nav .dep1>ul>li.this_page>a span{color: #FFF;}
    /* dep2 */
    .mob_nav .dep2{display: none;}
    .mob_nav .dep2>ul{background-color: #f1f1f1; padding: 20px 0;}
    .mob_nav .dep2>ul>li>a{color: #555; font-size: 18px; display: block; width: 100%;padding: 15px 120px; font-weight: 300; transition-duration: 0.3s;}
    .mob_nav .dep2>ul>li.this_page>a{color: #ff0000;}
    /* sub_top */
    .sub_top_big{margin-top: 80px;}
    .sub_top{margin-top: 80px;}
}



@media screen and (max-width: 768px){
    #header{height: 60px; background-color: #151515;}
    .fp-viewing-thirdPage #header,
    .fp-viewing-fifthPage #header,
    .fp-viewing-sixthPage #header,
    .fp-viewing-6 #header{background-color: #FFF;}


    #header h1{width: 160px; height: 30px; }
    .mob_nav_btn{width: 35px; height: 20px;}
    
    .mob_nav .space{height: 60px;}
    .mob_nav .dep1>ul>li>a{font-size: 22px; height: 60px; line-height: 60px; padding: 0 40px;}
    .mob_nav .dep1>ul>li>a::after{right: 40px;  border-top: 10px solid #FFF; border-left: 8px solid transparent; border-right: 8px solid transparent;}
    .mob_nav .dep2>ul>li>a{font-size: 16px; padding: 15px 60px;}

    /* sub_top */
    .sub_top{margin-top: 60px; height: 260px;}
    .sub_top .text_wrap{width: 90%; bottom: 40px;}
    .sub_top .text_wrap h2{font-size: 32px;}
    .sub_top .text_wrap p{font-size: 16px;}
    .sub_top_big{margin-top: 60px; height: 580px;}
    .sub_top_big .text_wrap{width: 90%;}
    .sub_top_big .text_wrap h2{font-size: 32px;}
    .sub_top_big .text_wrap p{font-size: 16px; word-break: keep-all;}
    .sub_top_big .text_wrap p br{display: none;}

    #footer .footer_top{flex-direction: column; align-items: center;}
    #footer .logo_wrap{margin: 0 auto; position: relative; }
    #footer .footer_top .top_left ul{ width: 100%; justify-content: center; margin: 40px 0;}
    #footer .footer_top .top_left ul li{width: 100%; text-align: center;}
    #footer .footer_top .top_right ul{display: flex; column-gap: 30px}
    #footer .footer_bottom p{text-align: center; word-break: keep-all;}
}












@media screen and (max-width: 500px){
    .mob_nav .dep1{height: calc(100vh - 120px);}
    .mob_nav .dep1>ul>li>a{font-size: 18px; padding: 0 20px;}
    .mob_nav .dep2>ul>li>a{padding: 8px 30px; font-size: 14px;}
    .mob_nav .dep1>ul>li>a::after{right: 20px; border-top: 8px solid #FFF; border-left: 6px solid transparent; border-right: 6px solid transparent;}

    .sub_top{height: 240px;}
    .sub_top .text_wrap{bottom: 30px;}
    .sub_top .text_wrap h2{font-size: 24px; margin-bottom: 40px;}
    .sub_top .text_wrap h2::after{bottom: -15px;}
    .sub_top .text_wrap p{font-size: 14px;}
    .sub_top_big{height: 580px;}
    .sub_top_big .text_wrap h2{font-size: 24px; margin-bottom: 40px; }
    .sub_top_big .text_wrap h2::after{bottom: -15px;}
    .sub_top_big .text_wrap p{font-size: 14px;}

    #footer .footer_top{margin-bottom: 0px; padding-bottom: 30px;}
    #footer .footer_top .top_left ul{margin: 30px 0; row-gap: 10px; column-gap: 0;}

}