@charset "utf-8";

@import url('../../css/common/pretendard.css');

/*-------------------------------------------------
title       : 영문
Author      : lhj
Create date : 2024 - 04
-------------------------------------------------*/
html{font-family:'pretendard';}
em,i{font-style:normal}
.img img{max-width:100%;}
/* header */
#header{width:100%;max-width:100%;position:fixed;left:50%;top:0;transform:translateX(-50%);transition:top .4s;z-index:10;}
#header::before{display:block;content:'';clear:both;width:100vw;height:9.3rem;position:absolute;left:50%;top:auto;transform:translateX(-50%);transition:all .2s;z-index:-1;background:rgba(0,0,0,.13);border-bottom:1px solid rgba(255,255,255,.25);}
#header .header_wrap{width:140rem;max-width:calc(100% - 4rem);margin:auto;height:9.3rem;display:flex;justify-content: space-between;align-items: center;}
#logo{float:left;margin:2.8rem 0;width:19.7rem;}
#gnb1 > ul{text-align:center;}
#gnb1 > ul > li{display:inline-block;}
#gnb1 > ul > li > a{position:relative;;padding:3.6rem 0;font-size:2.2rem;line-height:2.2rem;font-weight:600;color:#fff;display:block;transition:all .3s;}
#gnb1 > ul > li > a::before{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:0;height:.4rem;background:#FF6108;opacity:0;visibility:hidden;transition:all .3s;}
#gnb1 > ul > li:hover > a::before, #gnb1 > ul > li:focus > a::before{opacity:1;visibility:visible;width:100%;}
#gnb1 > ul > li:hover > a, #gnb1 > ul > li:focus > a{color:#FF6108;}
#gnb1 > ul > li + li{margin-left:7.5rem;}
#hnb a{display:inline-block;border-radius:50rem;border:1px solid rgba(255,255,255,.5);color:#fff;font-size:1.6rem;font-weight:400;height:3.7rem;line-height:3.6rem;padding:0 2rem;transition:all .2s;}
#hnb i{display:inline-block;margin-right:.5rem;transition:all .2s;}
#hnb a:hover, #hnb a:focus{border-color:#F75726;color:#F75726}
#hnb a:hover i, #hnb a:focus i{color:#F75726}
#header.on{transition:top 4s;}
#header.on::before {background:#fff;box-shadow:0 .2rem 1rem rgba(0,0,0,.2);}
#header.on #gnb1 > ul > li > a{color:#333;}
#header.on #gnb1 > ul > li:hover > a, #header.on #gnb1 > ul > li:focus > a{color:#FF6108;}
#header.on #hnb a{color:#333;border-color:#333;}
#header.on #hnb a:hover, #header.on #hnb a:focus{border-color:#F75726;color:#F75726}
#header.on #hnb a:hover i, #header.on #hnb a:focus i{color:#F75726}
/* main */
.main_wrap{width:140rem;max-width:calc(100% - 4rem);margin-left:auto !important;margin-right:auto !important;}
#visual{position:relative;width:100%;height:60rem;}
#visual::before{content:'';position:absolute;height:100%;width:100vw;top:0;left:50%;transform:translateX(-50%);z-index:-1;background: url(../../../images/hpn/eng/layout/sub01.jpg) center / cover no-repeat;}
#visual.visual02::before{background: url(../../../images/hpn/eng/layout/sub02.jpg) center / cover no-repeat;}
#visual.visual03::before{background: url(../../../images/hpn/eng/layout/sub03.jpg) center / cover no-repeat;}
#visual.visual04::before{background: url(../../../images/hpn/eng/layout/sub04.jpg) center / cover no-repeat;}
#visual::after{content:'';display:block;;width:100vw;height:19rem;position:absolute;left:50%;bottom:0;transform:translateX(-50%);background: linear-gradient(0deg, rgba(0, 17, 32, 0.58) 0%, rgba(0, 17, 32, 0.00) 100%);z-index:-1;}
#visual .title{position:absolute;bottom:0;left:0;width:100%;padding-bottom:6.9rem;display:flex;flex-direction:row;justify-content:space-between;align-items: flex-end;}
#visual strong{font-size:2rem;font-weight:600;color:#FF6B00;}
#visual h2{font-size:6.6rem;font-weight:300;color:#fff;text-transform:uppercase;}
#visual .link_btn{display:flex;}
#visual .link_btn a{font-size:2.5rem;font-weight:400;width:6.9rem;height:6.9rem;display:inline-block;text-align:center;line-height:6.9rem;color:#fff;border:1px solid #fff;border-radius:1.8rem;transition:all .3s;}
#visual .link_btn {padding-left:2rem;}
#visual .link_btn a + a{margin-left:1rem;}
#visual .link_btn a:hover, #visual .link_btn a:focus{border-color:#F75726;background:#F75726;}

/* footer */
#footer{background:#202226;padding:5.6rem 0;}
#footer .footer_wrap{width:140rem;max-width:calc(100% - 4rem);margin:0 auto;position:relative;}
#footer #siteinfo{display:flex;}
#footer .logo{margin-right:9rem;}
#footer address{margin-top:0;font-size:1.6rem;font-weight:500;color:#fff;}
#footer p{font-size:1.6rem;font-weight:400;color:rgba(255,255,255,.3);margin-top:.5rem}
#footer .btn_top{position:absolute;right:0;top:-7rem;width:6.5rem;height:5.8rem;line-height:5.8rem;background:#F06517;color:#fff;font-size:1.6rem;font-weight:500;text-align:center;}


/* 반응형 */
@media all and (max-width:1024px){
    html{font-size:9px}
}
@media all and (max-width:768px){
    html{font-size:8px}
}
@media (max-width:920px){
    #gnb1 > ul > li + li{margin-left:5rem;}
}
@media (max-width:840px){
    #gnb1 > ul{display:none;}
    #visual h2{margin-top:1rem;}
}
@media (max-width:640px){
    #visual h2{font-size:5rem;}
}
@media (max-width:480px){
    #visual h2{font-size:4rem;}
    #visual .title{flex-direction:column;align-items:flex-start;padding-bottom:5rem;}
    #visual .link_btn{padding-left:0;margin-top:2rem;}
}