@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;700;900&display=swap');

/* font-family: 'Noto Sans KR', sans-serif; */

*{margin:0;padding:0}
body{font-family:'Noto Sans KR', sans-serif;font-size:12px;font-weight: 400;font-style: normal;line-height: 1.2;color:#696969;-webkit-font-smoothing: antialiased;}
ul,li{list-style:none;}

/* 링크스타일 */
a{text-decoration:none;}
a:link , a:visited {color:#696969;}
a:hover{color:rgb(19,19,19);text-decoration:underline;cursor: pointer;}
a:active{color:#111;text-decoration:underline;}



#home_header{width:155px;padding:30px;position: fixed;top:0}
#mobile_header{display:none}
#gnb figure img{width:155px;}
.gnb_menu{padding:30px 0 ;}
.gnb_menu>li{display: block;
   position: relative;line-height: 15px;
   margin-bottom: 8px;overflow: hidden;}

.lnb_menu li{margin:0 0 8px 0}
.sub_menu{height:0px;transition:height 0.5s}
.sub_menu li{font-size:10px;margin:0 0 8px 5px;list-style:normal;}
.sub_menu li:first-child{padding-top:10px}
#gnb{border-right-color: rgb(207, 207, 207)}

#header_info{text-align:center;position:fixed;bottom:0;width:158px;padding:30px;}
#header_info figure{text-align:center;margin:16px 0}
#header_info figure img{width:18px;margin:0 10px}
#header_info p{text-align:center;line-height:22px;font-size:10px;}


main{width:calc(100% - 215px);background:black;display:flex;flex-wrap: wrap;margin:0 0 0 215px;overflow:hidden;box-sizing: border-box;}


article{width:20%;height:13.79vw;max-height: 15%;background:no-repeat center center;background-size:cover;overflow:hidden;transition: all 0.5s;}
article h1{width:200px;font-size:15px;line-height:26px;font-weight:700;display:block;color:#fff;letter-spacing: 1px;text-transform: uppercase;}
article h2{width:200px;font-size:9px;line-height:26px;font-weight:700;display:block;color:#fff;}
article a{display:block}
article a:hover{transition: all 0.5s;}




.post_text{width:100%;height:100%;box-sizing: border-box;/*padding:80% 0 0 30px;*/overflow:hidden;position: relative;}
.post_text:hover{/*padding:50% 0px 0 30px;*/text-decoration:none;}
.post_text_wrap{position: absolute;bottom:-300px;left:10px;height:50%;width:100%;transition:all 0.6s;}









#post_001{background:url(../img/front2.jpg);background-size:cover}
#post_001 a:hover{background:rgba(255,72, 31,0.95);}

#post_002{background:url(../img/GMF_front.gif);background-size:cover}
#post_002 a:hover{background:rgba(255, 221, 0, 0.95);}

#post_003{background:url(../img/alpha.jpg);background-size:cover}
#post_003 a:hover{background:rgba(204, 204, 204, 0.95)}

#post_004{background:url(../img/f1.jpg);background-size:cover}
#post_004 a:hover{background:rgba(242, 51, 51, 0.95)}

#post_005{background:url(../img/s-bear_front.jpg);background-size:cover}
#post_005 a:hover{background:rgba(53, 87, 143, 0.95)}

#post_006{background:url(../img/F-.jpg);background-size:cover}
#post_006 a:hover{background:rgba(74, 149, 230, 0.95);}

#post_007{background:url(../img/front.jpg);background-size:cover}
#post_007 a:hover{background:rgba(255, 95, 87, 0.95);}

#post_008{background:url(../img/f.jpg);background-size:cover}
#post_008 a:hover{background:rgba(18, 42, 120, 0.95);}

#post_009{background:url(../img/front-.jpg);background-size:cover}
#post_009 a:hover{background:rgba(17, 17, 17, 0.95);}

#post_010{background:url(../img/reebok.jpg);background-size:cover}
#post_010 a:hover{background:rgba(253, 255, 64, 0.95);}

#post_011{background:url(../img/baristar_front.jpg);background-size:cover}
#post_011 a:hover{background:rgba(241, 90, 34, 0.95);}

#post_012{background:url(../img/p38_re.jpg);background-size:cover}
#post_012 a:hover{background:rgba(161, 221, 73, 0.95);}

#post_013{background:url(../img/GMF_front041.gif);background-size:cover}
#post_013 a:hover{background:rgba(34, 194, 192, 0.95);}

#post_014{background:url(../img/p37_re.gif);background-size:cover}
#post_014 a:hover{background:rgba(255, 221, 0, 0.95);}

#post_015{background:url(../img/p36_re.gif);background-size:cover}
#post_015 a:hover{background:rgba(177, 245, 255, 0.95);}

#post_016{background:url(../img/p35_re.jpg);background-size:cover}
#post_016 a:hover{background:rgba(0, 160, 248, 0.95);}

#post_017{background:url(../img/pyl_front_re.gif);background-size:cover}
#post_017 a:hover{background:rgba(255, 93, 78, 0.95);}

#post_018{background:url(../img/bomb_front_re.gif);background-size:cover}
#post_018 a:hover{background:rgba(37, 56, 122, 0.95);}

#post_019{background:url(../img/p27_re.jpg);background-size:cover}
#post_019 a:hover{background:rgba(239, 102, 88, 0.95);}

#post_020{background:url(../img/p26_re.jpg);background-size:cover}
#post_020 a:hover{background:rgba(255, 241, 106, 0.95);}

#post_021{background:url(../img/lotte_front_re.gif);background-size:cover}
#post_021 a:hover{background:rgba(179, 208, 54, 0.95);}

#post_022{background:url(../img/myhero_front_re02.gif);background-size:cover}
#post_022 a:hover{background:rgba(254, 0, 0, 0.95);}

#post_023{background:url(../img/p26_re.jpg);background-size:cover}
#post_023 a:hover{background:rgba(92, 201, 206, 0.95);}

#post_024{background:url(../img/p25_re.gif);background-size:cover}
#post_024 a:hover{background:rgba(169, 219, 216, 0.95);}

#post_025{background:url(../img/reportn_front_re.jpg);background-size:cover}
#post_025 a:hover{background:rgba(250, 112, 119, 0.95);}

#post_026{background:url(../img/save_front02_re.gif);background-size:cover}
#post_026 a:hover{background:rgba(246, 28, 0, 0.95);}

#post_027{background:url(../img/oo_front_re.gif);background-size:cover}
#post_027 a:hover{background:rgba(255, 241, 0, 0.95);}

#post_028{background:url(../img/p39_re.gif);background-size:cover}
#post_028 a:hover{background:rgba(17, 17, 17, 0.95);}

#post_029{background:url(../img/k11_front_02_re.gif);background-size:cover}
#post_029 a:hover{background:rgba(218, 219, 203, 0.95);}

#post_030{background:url(../img/PPbysml_front_re.gif);background-size:cover}
#post_030 a:hover{background:rgba(17, 17, 17, 0.95);}

#post_031{background:url(../img/p30_re.jpg);background-size:cover}
#post_031 a:hover{background:rgba(17, 17, 17, 0.95)}

#post_032{background:url(../img/p23_re.jpg);background-size:cover}
#post_032 a:hover{background:rgba(0, 162, 130, 0.95)}

#post_033 {background:url(../img/pain_front_re.gif);background-size:cover}
#post_033 a:hover{background:rgba(214, 193, 148, 0.95)}


#post_034{background:url(../img/p22_re.jpg);background-size:cover}
#post_034 a:hover{background:rgba(236, 63, 63, 0.95)}

#post_035{background:url(../img/loner_front_re.gif);background-size:cover}
#post_035 a:hover{background: rgba(17, 17, 17, 0.95)}


/*
article{width:338px;height:261px;}

article h1{width:278px;font-size:15px;line-height:26px;font-weight:700;display:block;color:#fff;letter-spacing: 1px;text-transform: uppercase;opacity:1}

.post_wrap{width:338px;height:261px;position: relative;top:0;left:0}
.post_text{width:338px;height:261px;position: absolute;top:0;left:0;box-sizing: border-box;overflow:hidden;padding:261px 0 0 30px}

.post_text:hover{background:rgba(255,72, 31,0.95);padding:130px 0 0 30px;text-decoration:none;transition: all 0.8s;}


article h2{width:278px;font-size:9px;line-height:26px;font-weight:700;display:block;color:#fff;opacity:1}

article figure{width:338px;height:261px}
article figure img{width:338px;opacity:1;}
article figure img:hover{opacity:0.1}
article figure{width:338px;height:261px;background-size:338px 261px;background:url(../img/front2.jpg) center center} 
*/


/* 이상 ~ 1440이하 해상도 */

@media screen and (min-width:961px) and (max-width:1439px){

   article{width:25%;height:17.0vw;background:no-repeat center center;background-size:cover;overflow:hidden;transition: all 0.5s;}
   article h1{width:160px;font-size:13px;line-height:26px;font-weight:700;display:block;color:#fff;letter-spacing: 1px;text-transform: uppercase;}
   article h2{width:160px;font-size:8px;line-height:26px;font-weight:700;display:block;color:#fff;}
   .post_text_wrap{transform: scale(0.9);}

   /* .post_text{width:100%;height:100%;box-sizing: border-box;padding:300px 0 0 15px;overflow:hidden}

   .post_text:hover{padding:40px 0px 0 15px;text-decoration:none;} */




}

/* 768이상 960이하 태블릿대응*/
@media screen and (min-width:480px) and (max-width:960px){
   #home_header{display:none}
   #mobile_header{display:block;width:100%;box-sizing: border-box;overflow: hidden;}

   #header_info{display:none}
   main{width:100%;background:black;display:flex;flex-wrap: wrap;margin:0 0 0 0px;overflow:hidden;box-sizing: border-box;}

   #gnb_m{height:66px;display:flex;justify-content: space-between;align-items: center;padding:0 30px}
   #gnb_m figure img{width:66px;}
   #gnb_m figure{line-height:66px}


   article{width:33.3%;height:25.7vw;min-height:200px}
   article h1{width:160px;font-size:13px;line-height:26px;}
   article h2{width:160px;font-size:7px;line-height:26px;}

   /* .post_text{padding:300px 0 0 20px;}

   .post_text:hover{padding:60px 0px 0 20px;}   */
   .post_text_wrap{height:75%;transform: scale(0.8);}

   #gnb_m_menu{background:rgb(66,66,66);padding:0px 20px;height:0;overflow:hidden;transition:height 0.4s;}
   #gnb_m_menu li{border-bottom:1px solid rgba(221,221,221,0.1);line-height:44px}
   #gnb_m_menu li:last-child{border:none}


   #gnb_m_menu li a{color:rgb(221,221,221);cursor: pointer;line-height:44px;font-size:14px}
   #gnb_m_menu li a:hover{text-decoration: none;}
  #gnb_m_menu li p a{line-height:32px;padding-left:15px}
  #gnb_m_menu li p a:last-child{padding-bottom:15px}
  #certification{ padding-top: 0px;}
}



/* 0이상 479이하 모바일portraite*/
@media screen and (max-width:479px){


   #header_info{display:none}
   main{width:100%;background:black;display:flex;flex-wrap: wrap;margin:0 0 0 0px;overflow:hidden;box-sizing: border-box;}

   #gnb_m{height:66px;display:flex;justify-content: space-between;align-items: center;padding:0 30px}
   #gnb_m figure img{width:66px;}
   #gnb_m figure{line-height:66px}


   article{display:block;width:100%;padding-top:56.25%;background:no-repeat center center;background-size:cover;}
   article h1{width:160px;font-size:13px;line-height:26px;}
   article h2{width:160px;font-size:7px;line-height:26px;}

   .post_text_wrap{height:110%;}

   /* .post_text{padding:300px 0 0 20px;}

   .post_text:hover{padding:60px 0px 0 20px;}   */


   #home_header{display:none}
   #mobile_header{display:block;width:100%;box-sizing: border-box;overflow: hidden;}

   #header_info{display:none}
   #gnb_m_menu{background:rgb(66,66,66);padding:0px 20px;height:0;overflow:hidden;transition:height 0.4s;}
   #gnb_m_menu li{border-bottom:1px solid rgba(221,221,221,0.1);line-height:44px}
   #gnb_m_menu li:last-child{border:none}


   #gnb_m_menu li a{color:rgb(221,221,221);cursor: pointer;line-height:44px;font-size:14px}
   #gnb_m_menu li a:hover{text-decoration: none;}
  #gnb_m_menu li p a{line-height:32px;padding-left:15px}
  #gnb_m_menu li p a:last-child{padding-bottom:15px}
  


}