@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Nunito:wght@200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300;400;700&family=Nanum+Pen+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');

/* font-family: 'Nunito', 'Noto Sans KR', sans-serif; */
/* font-family: 'Nunito', sans-serif; */
/* font-family: 'Nanum Pen Script', cursive; */
/* font-family: 'Dongle', sans-serif; */
/* font-family: 'Gowun Batang', serif; */
/* font-family: 'Montserrat', sans-serif; */
/* font-family: 'Raleway', sans-serif; */
/* font-family: 'Poppins', sans-serif; */
/* font-family: 'Kalam', cursive; */
/* font-family: 'Courgette', cursive; */

/* 스크롤 바 */
html::-webkit-scrollbar{width:10px;}
html::-webkit-scrollbar-thumb{height:10%; background:#111; border-radius:10px; border:1px solid #fff;}
html::-webkit-scrollbar-track{background:rgba(33, 122, 244, .1);}

*{padding:0; margin:0;}
ul,ol{list-style:none;}
a{text-decoration:none; color:#111;}
html,body{width:100%; font-family:'Poppins','Noto Sans KR', sans-serif;}
.wrap{overflow:hidden;}
.displaynone{display:none !important;}
.hidden{overflow:hidden;}
.clear:after{content:''; display:block; clear:both;}
.center{max-width:1280px; margin:auto; width:100%; height:100%; position:relative;}
.main_title{padding-bottom:50px;}
.main_title h3{font-size:32px; position:relative; padding-left:15px; color:#fff; font-weight:600;}
.main_title h3::before{position:absolute; left:0; top:50%; transform:translateY(-50%); width:4px; height:60%; content:''; background:#fff;}
.main_title p{font-size:18px; font-weight:600; color:#888; padding-top:15px;}

header{position:fixed; z-index:5; width:100%; transition:all 0.2s; z-index:8; overflow:hidden; background:none;}
header .center{position:static;}
header .container{display:flex; justify-content:space-between; align-items:baseline; height:80px;}
header .logo{width:147px; z-index:1;}
header .logo img{width:100%;}
header .category{display:flex; padding-top:30px; align-items:center;}
header .category>li{padding:0 20px 25px 20px; text-align:center; position:relative; display:flex; justify-content:center;}
header .category>li>a{font-weight:700; font-size:18px; font-family: 'Raleway', sans-serif; transition:all 0.4s; color:#fff;}
header.scrolltop{background:rgba(0,0,0,0.1);}

/* header .category>li:hover>a{font-weight:700;} */
header .category .sub_category{padding:15px 0 20px 0; position:absolute; opacity:0; transition:all 0.2s; margin-top:50px; z-index:2;}
header .category .sub_category>li{padding:5px 0; white-space:nowrap;}
header .category .sub_category>li>a{font-size:14px; color:#848484; font-weight:400; display:block;}
header .category .sub_category>li:hover>a{color:#fff;}
header .category .sub_category.cat_business>li>a>i{padding-right:6px; font-size:16px;}
header .category .sub_category.cat_business>li:nth-child(1)>a{font-weight:600;}
header .category .sub_category.cat_product>li:nth-child(1)>a{font-weight:600;}
header .category>li::after{position:absolute; content:''; width:0; height:2px; background:#fff; bottom:0; left:50%; transition:all 0.4s; transform:translateX(-50%);}
header .category>li:hover::after{width:85%;}
header .category>li:hover .sub_category{opacity:1;}

header.scroll{box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px; padding-bottom:0;}
header.scroll .category>li{}
header.scroll .sub_category>li>a{font-size:14px; font-weight:400; color:#848484;}
header.scroll .sub_category>li:hover>a{color:#fff;}
header.scroll .category>li:hover .sub_category li{_background:#fff; opacity:1;}
header.scroll .category>li::after{background:#fff;}
header.scroll .category>li:hover::after{width:60%;} 

header .container .m_category{width:34px; height:28px; z-index:9; cursor:pointer;}
header .container .m_category span{width:100%; height:5px; background:#fff; display:block; border-radius:30px; transition:all 0.4s;}
/* header.scroll .container .m_category span{background:#111;} */
header .container .m_category span:nth-child(1){}
header .container .m_category span:nth-child(2){margin:7px 0;}
header .container .m_category span:nth-child(3){}
header .container .m_category.on span:nth-child(1){transform: rotate(45deg) translate(7px, 10px);}
header .container .m_category.on span:nth-child(2){opacity:0;}
header .container .m_category.on span:nth-child(3){transform: rotate(-45deg) translate(7px, -10px);}

header .top_bg{position:absolute; width:100%; height:80px; left:0; top:0; background:rgba(0,0,0,1); transition:all 0.4s;}
header.scrolltop .top_bg{background:rgba(0,0,0,0.5);}
header.scroll .top_bg{background:rgba(0,0,0,1);}
header .bottom_bg{position:absolute; width:100%; height:320px; left:0; top:80px; background:rgba(0,0,0,0.65); z-index:1;}

.sidebar{width:100%; height:100vh; background:#090909; position:fixed; right:-100%; z-index:7; transition:all 0.4s;}
.sidebar.on{right:0;}
.sidebar .category{padding:80px 20px 0 20px;}
.sidebar .category>li{padding:5px 0; position:relative; height:30px; overflow:hidden; transition:all 0.4s;}
.sidebar .category>li:nth-child(1)>a:after{display:none;}
.sidebar .category>li:nth-child(3)>a:after{display:none;}
.sidebar .category>li.on{height:auto;}
.sidebar .category>li>i{position:absolute; right:0; top:2px; font-size:25px;}
.sidebar .category>li>a{font-size:17px; font-weight:600; display:block; position:relative; color:#fff;}
.sidebar .category>li>a:after{content:''; position:absolute; width:24px; height:24px; overflow:hidden; background:url(../assets/img/bullet_gnb_w.png) no-repeat; background-size:24px 100px; right:0px; top:1px; z-index:9999;}
.sidebar .category>li.on>a:after{background-position-y:-76px;}
.sidebar .category .sub_category{padding:10px;}
.sidebar .category .sub_category>li{padding:5px 0;}
.sidebar .category .sub_category>li>a{font-size:14px; color:#888;}
.sidebar .category .sub_category.cat_business>li:nth-child(2) i{font-size:16px; padding-right:5px;}
.sidebar .category .sub_category.cat_business>li:nth-child(2) a{font-weight:600; color:#ccc;}
.sidebar .category .sub_category.cat_product>li:nth-child(2) a{font-weight:600; color:#ccc;}

/* footer page */
footer{width:100%; background:#000; box-sizing:border-box; padding:50px 0; border-top:1px solid #333;}
footer .footer_top{display:flex; justify-content:space-between;} 
footer .footer_top .logo{width:40%;} 
footer .footer_top .logo img{width:240px; position:relative; left:-30px;} 
footer .footer_top .logo p{color:#fff; padding:10px 0px; font-weight:600; font-size:15px;}
footer .footer_top ul{width:100%; display:flex; padding-top:10px;}
footer .footer_top ul li{display:inline-block; text-align:left; margin-right:60px;}
footer .footer_top ul li a{color:#888; display:block; font-size:18px; transition:all 0.4s; font-weight:600;}
footer .footer_top ul li a:hover{color:#fff;}
footer .footer_top .family{width:50%; display:flex; justify-content:end; align-items:baseline; flex-flow:wrap;}
footer .footer_top .family h5{font-size:18px; width:100%; font-weight:500; color:#fff; padding-top:15px;}
footer .footer_middle{border-bottom:1px solid #555; padding:0 0 30px 0; display:flex; justify-content:space-between;}
footer .footer_middle>ul{width:100%;}
footer .footer_middle>ul li{padding-bottom:5px;}
footer .footer_middle>ul li p{color:#fff; font-size:18px; font-weight:500;}
footer .footer_middle>ul li span{font-size:13px; font-weight:400; color:#888;}
footer .footer_middle>ul li p.tel{font-size:14px; color:#555;}
footer .footer_middle .family ul li a{font-size:14px; color:#fff; padding:10px 20px; border:1px solid #fff; border-radius:5px; margin:0 10px; transition:all 0.2s;}
footer .footer_middle .family ul li:hover a{background:#fff; border:1px solid #000; color:#000;}
footer .footer_bottom{padding-top:20px;}
footer .footer_bottom .copy{text-align:left;}
footer .footer_bottom .copy p{font-size:18px; font-weight:500; color:#777;}

.section_bn{position:relative; width:100%; height:400px;}
.section_bn .bn_title{position:absolute; top:60%; left:0; transform:translateY(-50%);  animation:fadeOnly 2.5s ease; transition:all 0.4s;}
.section_bn .bn_title p{font-size:44px; color:#fff; font-weight:700;}
.section_bn .bn_title p:after{content:''; position:absolute; bottom:-10px; left:0; height:2px; background:#fff; transition:all 0.4s; animation:widthLeft 1.5s ease; width:60%;}

@keyframes fadeOnly{
  100%{opacity:1;}
  0%{opacity:0;}
}

@keyframes widthLeft{
  100%{width:60%;}
  0%{width:0%;}
}