@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,form,fieldset,button,section,input { font-family: 'Pretendard'; font-style: normal; font-weight: 400; letter-spacing: -0.5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body,div,form,fieldset,button { margin:0;padding:0; }
img,fieldset{ border:0 none; }

.hunid {}
.hunid > .visual { position: relative; height: 957px; background:url('https://image.pkgen.co.kr/www/visual.png') no-repeat center; text-align:center; line-height:0; }
.hunid > .visual .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }


.hunid > .feature { position: relative; height: 927px; padding: 150px 0 0; background:url('https://image.pkgen.co.kr/www/feature.png') no-repeat center; text-align:center; line-height:0; }
.hunid > .feature h2 { margin:0; padding:0; font-weight: 500; font-size: 28.78px; line-height: 36px; color: #12346e; letter-spacing:0; text-align:center; }
.hunid > .feature h3 { margin:24px 0 0; padding:0; font-weight: 700; font-size: 48.7px; line-height: 52px; color: #12346e; letter-spacing:0; text-align:center;
    background: linear-gradient(to right, #2862bb, #003b9f);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}


.hunid > .difference { position: relative; height: 1332px; padding: 150px 0 0; background:url('https://image.pkgen.co.kr/www/difference.png') no-repeat center; text-align:center; line-height:0; }
.hunid > .difference h2 { margin:0; padding:0; font-weight: 500; font-size: 29.07px; line-height: 39px; color: #ffffff; letter-spacing:0; text-align:center; }
.hunid > .difference h3 { margin:20px 0 0; padding:0; font-weight: 700; font-size: 49.2px; line-height: 59px; color: #ffffff; letter-spacing:0; text-align:center; }
.hunid > .difference h3 strong { font-weight: 700; font-size: 49.2px; line-height: 59px; color: #afe7ff; letter-spacing:0; text-align:center; }


.hunid > .booster { position: relative; height: 877px; background:url('https://image.pkgen.co.kr/www/booster.png') no-repeat center; text-align:center; line-height:0; }
.hunid > .booster .booster_area { display: flex; flex-direction: column; width:1600px; margin:0 auto; padding:210px 0 0 110px; }
.hunid > .booster .booster_area .info { font-weight: 500; font-size: 28.5px; line-height: 28px; color: #12346e; letter-spacing:0; text-align:left; }
.hunid > .booster .booster_area .info_title { margin: 23px 0 0; font-weight: 700; font-size: 48.22px; line-height: 48px; color: #12346e; letter-spacing:0; text-align:left;
    background: linear-gradient(to right, #2254a4, #0b3f95);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.hunid > .booster .booster_area h2 { margin: 28px 0 0; padding: 0; line-height: 0; text-align:left; }
.hunid > .booster .booster_area p { margin: 68px 0 0 0; padding: 0; font-weight: 200; font-size: 24.11px; line-height: 28px; color: #283241; letter-spacing:0; text-align:left; }
.hunid > .booster .booster_area p.v1 { margin: 12px 0 0 0; padding: 0; font-weight: 700; font-size: 28.5px; line-height: 39.45px; color: #12346e; letter-spacing:0; text-align:left; }


.hunid > .mega { position: relative; height: 1087px; padding: 150px 0 0; background:url('https://image.pkgen.co.kr/www/mega.png') no-repeat center; text-align:center; line-height:0; }
.hunid > .mega h2 { margin:0; padding:0; font-weight: 500; font-size: 28.42px; line-height: 28px; color: #0d1b3b; letter-spacing:0; text-align:center; }
.hunid > .mega h2 strong { font-weight: 700; font-size: 28.42px; line-height: 28px; color: #0d1b3b; letter-spacing:0; text-align:center; }
.hunid > .mega h3 { margin:30px 0 0; padding:0; font-weight: 700; font-size: 61.21px; line-height: 62px; color: #12346e; letter-spacing:0; text-align:center;
    background: linear-gradient(to right, #0b3f95, #2254a4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.hunid > .mega .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }


.hunid > .ecm { position: relative; height: 1180px; padding: 142px 0 0; background:url('https://image.pkgen.co.kr/www/ecm.png') no-repeat center; text-align:center; line-height:0; }
.hunid > .ecm h2 { margin:0; padding:0; font-weight: 500; font-size: 28.37px; line-height: 28px; color: #0d1b3b; letter-spacing:0; text-align:center; }
.hunid > .ecm h3 { margin:26px 0 0; padding:0; font-weight: 700; font-size: 48px; line-height: 50px; color: #0d1b3b; letter-spacing:0; text-align:center;
    background: linear-gradient(to right, #0b3f95, #2254a4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.hunid > .ecm p { margin:29px 0 0; padding:0; font-weight: 200; font-size: 20.89px; line-height: 22px; color: #283241; letter-spacing:0; text-align:center; }


.hunid > .detail { position: relative; height: 1210px; padding: 45px 0 0; background:url('https://image.pkgen.co.kr/www/detail.png') no-repeat center; text-align:center; line-height:0; }
.hunid > .detail h2 { margin:0; padding:0; font-weight: 400; font-size: 48px; line-height: 65.5px; color: #002748; letter-spacing:0; text-align:center;
    background: linear-gradient(to right, #0b3f95, #2254a4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.hunid > .detail h2 strong { font-weight: 700; font-size: 48px; line-height: 65.5px; color: #002748; letter-spacing:0; text-align:center;
    background: linear-gradient(to right, #0b3f95, #2254a4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.hunid > .detail .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }


.hunid > .recommend { position: relative; height: 1069px; background:url('https://image.pkgen.co.kr/www/recommend.png') no-repeat center; text-align:center; line-height:0; }
.hunid > .recommend .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }




@media screen and (max-width:1600px){
    
    .hunid > .visual { height: 59.813vw; background-size:cover; }


    .hunid > .feature { height: 57.938vw; padding: 9.375vw 0 0; background-size:cover; }
    .hunid > .feature h2 { font-size: 1.799vw; line-height: 2.250vw; }
    .hunid > .feature h3 { margin:1.5vw 0 0; font-size: 3.044vw; line-height: 3.25vw; }


    .hunid > .difference { height: 83.25vw; padding: 9.375vw 0 0; background-size:cover; }
    .hunid > .difference h2 { font-size: 1.817vw; line-height: 2.438vw; }
    .hunid > .difference h3 { margin:1.25vw 0 0; font-size: 3.075vw; line-height: 3.688vw; }
    .hunid > .difference h3 strong { font-size: 3.075vw; line-height: 3.688vw; }


    .hunid > .booster { height: 54.813vw; background-size:cover; }
    .hunid > .booster .booster_area { width:100%; padding:13.125vw 0 0 6.875vw; }
    .hunid > .booster .booster_area .info { font-size: 1.781vw; line-height: 1.75vw; }
    .hunid > .booster .booster_area .info_title { margin: 1.438vw 0 0; font-size: 3.014vw; line-height: 3vw; }
    .hunid > .booster .booster_area h2 { margin: 1.75vw 0 0; }
    .hunid > .booster .booster_area h2 img { height:7.875vw; }
    .hunid > .booster .booster_area p { margin: 4.25vw 0 0 0; font-size: 1.507vw; line-height: 1.75vw; }
    .hunid > .booster .booster_area p.v1 { margin: 0.75vw 0 0 0; font-size: 1.781vw; line-height: 2.466vw; }


    .hunid > .mega { height: 67.938vw; padding: 9.375vw 0 0; background-size:cover; }
    .hunid > .mega h2 { font-size: 1.776vw; line-height: 1.75vw; }
    .hunid > .mega h2 strong { font-size: 1.776vw; line-height: 1.75vw; }
    .hunid > .mega h3 { margin:1.875vw 0 0; font-size: 3.826vw; line-height: 3.875vw; }


    .hunid > .ecm { height: 73.750vw; padding: 8.875vw 0 0; background-size:cover; }
    .hunid > .ecm h2 { font-size: 1.773vw; line-height: 1.75vw; }
    .hunid > .ecm h3 { margin:1.625vw 0 0; font-size: 3vw; line-height: 3.125vw; }
    .hunid > .ecm p { margin:1.812vw 0 0; font-size: 1.306vw; line-height: 1.375vw; }


    .hunid > .detail { height: 75.625vw; padding: 2.813vw 0 0; background-size:cover; }
    .hunid > .detail h2 { font-size: 3vw; line-height: 4.094vw; }
    .hunid > .detail h2 strong { font-size: 3vw; line-height: 4.094vw; }


    .hunid > .recommend { height: 66.813vw; background-size:cover; }

}



@media screen and (max-width:720px){
    
    .hunid > .visual { height: 169.028vw; background:url('https://image.pkgen.co.kr/www/visual_m.png') no-repeat center; background-size:cover; }


    .hunid > .feature { height: 76.944vw; padding: 8.056vw 0 0; background:url('https://image.pkgen.co.kr/www/feature_m.png') no-repeat center; background-size:cover; }
    .hunid > .feature h2 { font-size: 2.804vw; line-height: 3.056vw; }
    .hunid > .feature h3 { margin:2.222vw 0 0; font-size: 4.746vw; line-height: 5vw; }


    .hunid > .difference { height: 228.750vw; padding: 14.583vw 0 0; background:url('https://image.pkgen.co.kr/www/difference_m.png') no-repeat center; background-size:cover; }
    .hunid > .difference h2 { font-size: 2.797vw; line-height: 3.889vw; }
    .hunid > .difference h3 { margin:2.083vw 0 0; font-size: 4.735vw; line-height: 4.8vw; }
    .hunid > .difference h3 strong { font-size: 4.735vw; line-height: 4.8vw; }


    .hunid > .booster { height: 148.611vw; background:url('https://image.pkgen.co.kr/www/booster_m.png') no-repeat center; background-size:cover; }
    .hunid > .booster .booster_area { align-items: center; width:auto; padding:14.583vw 0 0; }
    .hunid > .booster .booster_area .info { font-size: 2.790vw; line-height: 2.790vw; }
    .hunid > .booster .booster_area .info_title { margin: 2.083vw 0 0; font-size: 4.722vw; line-height: 4.722vw; }
    .hunid > .booster .booster_area h2 { margin: 2.5vw 0 0; }
    .hunid > .booster .booster_area h2 img { height: 12.222vw; }
    .hunid > .booster .booster_area p { margin: 6.111vw 0 0 0; font-size: 2.361vw; line-height: 2.361vw; }
    .hunid > .booster .booster_area p.v1 { margin: 1.389vw 0 0 0; font-size: 2.790vw; line-height: 3.862vw; text-align:center; }


    .hunid > .mega { height: 124.167vw; padding: 13.889vw 0 0; background:url('https://image.pkgen.co.kr/www/mega_m.png') no-repeat center; background-size:cover; }
    .hunid > .mega h2 { font-size: 2.803vw; line-height: 2.803vw; }
    .hunid > .mega h2 strong { font-size: 2.803vw; line-height: 2.803vw; }
    .hunid > .mega h3 { margin:2.778vw 0 0; font-size: 6.037vw; line-height: 6.037vw; }


    .hunid > .ecm { height: 113.611vw; padding: 14.306vw 0 0; background:url('https://image.pkgen.co.kr/www/ecm_m.png') no-repeat center; background-size:cover; }
    .hunid > .ecm h2 { font-size: 2.797vw; line-height: 2.797vw; }
    .hunid > .ecm h3 { margin:2.778vw 0 0; font-size: 4.733vw; line-height: 4.733vw; }
    .hunid > .ecm p { margin:2.778vw 0 0; font-size: 2.060vw; line-height: 2.060vw; }


    .hunid > .detail { height: 177.361vw; padding: 0; background:url('https://image.pkgen.co.kr/www/detail_m.png') no-repeat center; background-size:cover; }
    .hunid > .detail h2 { font-size: 4.733vw; line-height: 6.456vw; }
    .hunid > .detail h2 strong { font-size: 4.733vw; line-height: 6.456vw; }


    .hunid > .recommend { height: 176.250vw; background:url('https://image.pkgen.co.kr/www/recommend_m.png') no-repeat center; background-size:cover; }

}


.gnb_wrap{background-color: #313131;width: 100%;height: 100px;box-sizing: border-box;font-family:'Noto Sans KR';font-weight: 400;letter-spacing: -0.5px;position: fixed;z-index: 9999;padding: 0 80px;}
.gnb_contents{position: relative;display: flex;align-items: center;height: 100%;}
.gnb_wrap .logo{flex-shrink: 0;}
.gnb_wrap .logo a{display: block;width: 131px;box-sizing: border-box;}
.gnb_wrap .logo a img{width: 100%;display: block;}
.gnb_wrap .gnb_list{flex: 1 1 auto;min-width: 0;box-sizing: border-box;height: 100px;padding:40px 0 0;display: flex;justify-content: space-between;align-items: flex-start;}
.gnb_wrap .gnb_list > li{flex: 1 1 0;display: inline-block;vertical-align: top;position: relative;text-align: center;margin: 0;height: 100%;}
.gnb_wrap .gnb_list > li > a {color:#fff;font-size: 22px;}
.gnb_wrap .gnb_list > li > a.orange {color:#fc5900;}
.gnb_wrap .gnb_list > li > a.blue {color:#00b4ff;}
.gnb_wrap .gnb_list > li:hover > a{font-weight: bold;transition: all 0.3s;}
.gnb_wrap .gnb_list > li > ul{position: absolute;top: 60px;left: 0;background-color:rgba(255,255,255,0.85);min-width: 225px;padding: 15px 0 20px 15px;box-sizing: border-box;display: none;text-align: left;}
.gnb_wrap .gnb_list > li > ul li{line-height: 1;padding-bottom: 24px;}
.gnb_wrap .gnb_list > li > ul li:last-child{padding-bottom: 0;}
.gnb_wrap .gnb_list > li > ul li a{display: block;color:#313131;font-size: 14px;font-weight: 500;}
.gnb_wrap .gnb_list > li > ul li:hover a{font-weight: bold;}

/*.gnb_wrap .gnb_list > li > ul li a br{display: none;}*/

.language{flex-shrink: 0;margin-left: 40px;}
.language a{font-size: 20px;color:#fff;font-weight: 500;display: block;}
.language a::before{content: '';display: inline-block;vertical-align: middle;background: url(https://pkgen.co.kr/img/language_icon.png) no-repeat center;background-size: cover;width: 19px;height: 19px;box-sizing: border-box;margin: -5px 5px 0 0;}
.language a::after{content: '';display: inline-block;vertical-align: middle;background: url(https://pkgen.co.kr/img/language_arrow.png) no-repeat center;background-size: cover;width: 8px;height: 13px;box-sizing: border-box;margin: -5px 0 0 5px;}

@media screen and (max-width:1600px){
    .gnb_wrap{padding: 0 40px;}
}


@media screen and (max-width:1280px){
    .gnb_wrap{padding: 0 3%;}
    .gnb_wrap .gnb_list > li > a{font-size: 18px;}
    .gnb_wrap .gnb_list > li > ul{width: 100px;}
    
    .language a{font-size: 18px;}
    
}


@media screen and (max-width:1024px){
    .gnb_wrap .gnb_list > li a{font-size: 16px;}
    .gnb_wrap .gnb_list > li > ul > li{text-align: left;}
    .language a{font-size: 16px;}
    
}


@media screen and (max-width:720px){
    .gnb_wrap{height: 26.4vw;letter-spacing: -0.1vw;padding: 0;}
    .gnb_contents{display: block;height: auto;}
    .gnb_wrap .logo {width: 100%;position: static;margin: 0;text-align: center;padding: 4.5vw 0 2vw;}
    .gnb_wrap .logo a{width: 27.9vw;margin: 0 auto;}
    .gnb_wrap .gnb_list {display: block;width: 100%;position: static;margin: 0;padding: 0;height: 7.6vw;line-height: 7.6vw;text-align: center;font-size: 0;white-space: normal;}
    .gnb_wrap .gnb_list > li {width: auto;margin: 0;text-align: center;padding: 0 1.25vw;}
    .gnb_wrap .gnb_list > li > a{font-size: 2.78vw;}
    .gnb_wrap .gnb_list > li > ul {width: 48vw;min-width: auto;top: 7.6vw;padding: 1vw 0 2vw;left: 3vw;text-align: left;}
    .gnb_wrap .gnb_list > li > ul li {padding-bottom: 0;}
    .gnb_wrap .gnb_list > li > ul li a{font-size: 3vw;padding: 3vw 0 3vw 2vw;line-height: 1.15;font-weight: bold;}
    
    .gnb_wrap .gnb_list > li:nth-child(4) > ul {padding-left: 0;width: 33vw;left: 2vw;}
    
    /*.gnb_wrap .gnb_list > li > ul li a br{display: block;}*/
    
    .language {position: absolute;margin: 0;top: 10vw;right: 3vw;}
    .language a{font-size: 3.4vw;}
    .language a::before{width: 3.2vw;height: 3.2vw;margin: -0.5vw 0.7vw 0 0;}
    .language a::after{width: 1.11vw;height: 2.5vw;margin: -0.6vw 0 0 0.8vw;}
    
    
}

.quick_wrap{position: fixed;right: 55px;bottom: 40px;z-index: 999;}

.quick_click_btn{position: absolute;bottom: 0;right: 0;animation: bounce 0.8s cubic-bezier(0, 0, 0.20, 0.50) infinite alternate;cursor: pointer;}
.quick_click_btn img{display: none;}
.quick_click_btn .quick_click_active{display: block;}

.quick_list{position: absolute;bottom: 85px;right: -30px;animation: bounce 0.8s cubic-bezier(0, 0, 0.20, 0.50) infinite alternate;opacity: 0;}
.quick_list.quick_list_active{opacity: 1;transition: all 0.5s;}
.quick_list li{}



    

@keyframes bounce{
    to{
        transform: translateY(-20px);
    }
}





@media screen and (max-width:1600px){
    .quick_wrap{bottom: 9vw;}

}


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


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


@media screen and (max-width:720px){
    .quick_wrap img{width: 100%;}
    .quick_wrap{bottom: 5vw;right: 10vw;}
    
    .quick_click_btn{width: 12.222vw;height: 12.222vw;}
    
    .quick_list{bottom: 14.5vw;right: -7.5vw;}
    .quick_list li{width: 26.8vw;}
    
    @keyframes bounce{
    to{
        transform: translateY(-3vw);
    }
}
    
}
/* BOTTOM */
#wholebg{position:absolute;top:0;left:0;width:100%;height:10px;z-index:9;background:rgba(0,0,0,0.5);filter:alpha(opacity=80);opacity:0.8;-moz-opacity:0.8;display:none}
.footer_wrap{background-color: #313131;padding: 145px 0 165px;text-align: center;color:#fff;letter-spacing: -1px;font-family:'Noto Sans KR';}
.footer_wrap a{color:#fff;text-decoration: none;}
.footer_wrap > ul{}
.footer_wrap > ul li{margin-bottom: 20px;}
.footer_wrap > ul li p{font-size: 20px;font-weight: 300;display: inline-block;vertical-align: top;}
.footer_wrap > ul li p strong{font-weight: 500;margin-left: 25px;}
.footer_btn{margin-top: 55px;}
.footer_btn a{display: inline-block;vertical-align: top;font-size: 20px;color:#fff;font-weight: 500;margin: 0 30px;}


@media all and (max-width:1600px){
    
}


@media all and (max-width:1280px){
    .footer_wrap > ul li p{font-size: 18px;}
}


@media all and (max-width:1024px){
    .footer_wrap{padding: 100px 0;}
    .footer_wrap > ul li p{display: block;}
    .footer_wrap > ul li p strong{margin: 0;}
    .footer_wrap > ul li p strong:nth-of-type(2){margin-left: 25px;}
    .footer_wrap > ul li p.number{margin-top: 20px;}
}


@media all and (max-width:720px){
    .footer_wrap{padding: 10vw 0 8vw;letter-spacing: -0.1vw;}
    .footer_wrap > ul li {margin-bottom: 2vw;}
    .footer_wrap > ul li p{font-size: 2.3vw;}
    .footer_wrap > ul li p strong:nth-of-type(2){margin-left: 3vw;}
    .footer_wrap > ul li p.number{margin-top: 2vw;}
    .footer_btn {margin-top: 6vw;}
    .footer_btn a {font-size: 2.3vw;margin: 0 4vw;}
    
}

.content_wrap{padding-top: 100px;}



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


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


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

@media screen and (max-width:720px){
    .content_wrap{padding-top: 26.4vw;}
    
}