@charset "utf-8";

@font-face{
	font-family: "Noto Sans CJK KR";
	src: url("/font/NotoSans-Regular.eot");
	src: url("/font/NotoSans-Regular.eot?#iefix")	format("embedded-opentype"),
		 url("/font/NotoSansKR-Regular.woff")		format("woff");
}

html{overflow-x: hidden;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display: block;}
body{line-height: 1; color: #222; font-family: "Noto Sans CJK KR";}
ol, ul{list-style: none;}
a{text-decoration: none; color: #222;}
button, button:focus, button:hover{border: none; outline: 0; background: none; cursor: pointer;}
blockquote, q{quotes: none;}
blockquote:before, blockquote:after, q:before, q:after{content: ''; content: none;}
table{border-collapse: collapse; border-spacing: 0;}
input, textarea{border: none; outline: none; box-shadow: none;}

.sound_only { font-size:0; text-indent:-9999; opacity:0; }
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */

/* header */
.header_wrap{position: absolute; top: 0; left: 0; z-index: 999; width: 100%; height: 110px; border-bottom: 1px solid rgba(255, 255, 255, 0.4); box-sizing: border-box; transition: all 0.3s;
	box-sizing: border-box; -webkit-box-sizing: border-box; background: linear-gradient(180deg, rgba(0,0,0,0.5), transparent); background-size: 100% 100%; }
.header_bg{position: absolute; top: 110px; left: 0; z-index: 888; width: 100%; height: 0; background: #fff; transition: all 0.3s;}
.header{display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1200px; height: 100%; margin: 0 auto; }
.header .logo{width: 224px; height: 58px; background:url('/img/lknike_logo_w.png') no-repeat center center; font-size:0; text-indent:-999; }
.header .logo a{ display:block; width:100%; height:100%; }
.header .menu_wrap{display: flex; position: relative; width: 57%; height: 100%;}
.header .menu_wrap *{box-sizing: border-box;}
.header .menu_wrap li{width: 20%; height: 100%; text-align: center; line-height: 110px;}
.header .menu_wrap li a{display: block; width: 100%; height: 100%; color: #fff; font-size: 18px;}
.header .menu_wrap>li>a:hover, .header .menu_wrap>li>a.on{color: #131022; border-bottom: 2px solid #131022;}

.header .menu_wrap .sub_menu{position: absolute; top: 110px; z-index: 999; width: 20%; height: 0; padding: 30px 0 0; opacity: 0; overflow: hidden; transition: all 0.3s;}
.header .menu_wrap .sub_menu li{width: 100%; height: auto; line-height: 1.2em; margin-top: 15px;}
.header .menu_wrap .sub_menu li:first-child{margin-top: 0;}
.header .menu_wrap .sub_menu li a{height: 100%; color: #666; font-size: 16px;}
.header .menu_wrap .sub_menu li a:hover{color: #131022;}

.header .contact_wrap, .header .contact_cont_wrap{display: none;}
.main_wrap .contact_wrap{display: block; position: fixed; top: 0; right: 0;}
.main_wrap .contact_but{display: block; position: fixed; top: 208px; right: 0; width: 100px; height: 100px; background: #131022; color: #fff; text-align: center; line-height: 100px; font-size: 1.1em; font-weight: 600; cursor: pointer;}
.header .contact_cont_wrap{display: block;}
/* .header .contact_cont_wrap{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6);} */
.header .contact_cont_wrap *{box-sizing: border-box;}
.header .contact_cont{position: fixed; top: 208px; right: -600px; width: 520px; height: 380px; padding: 40px; background: #fff;  box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 5px rgb(0 0 0 / 24%); transition: all 0.3s cubic-bezier(.25,.8,.25,1);}
.header .contact_cont .close{display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 0; left: -50px; width: 50px; height: 50px; background-color: #193d00; cursor: pointer;}
.header .contact_cont .close span{display: block; position: absolute; width: 26px; height: 1px; background: #fff;}
.header .contact_cont .close span:nth-child(1){transform: rotate(45deg);}
.header .contact_cont .close span:nth-child(2){transform: rotate(-45deg);}
.header .contact_cont_wrap.on .contact_cont{right: 0;}

.contact_cont .cont .cons_title { color:#000; font-weight:600; font-size:1.5em; }
.contact_cont .cont .cons_title_sub { color:#888; font-size:0.90em; margin-top:10px; }
.contact_cont .cont .input_wrap { margin:18px 0 20px 0;}
.contact_cont .cont .input_wrap .cons_input { display:block; width:100%; padding:10px 0 10px 10px; border-bottom:2px solid #ddd; margin-bottom:20px; transition:all 0.1s;}
.contact_cont .cont .input_wrap .cons_input:focus { border-bottom:2px solid #222; }
.contact_cont .cont .ck_wrap { margin-bottom:18px; font-size:0.8em; }
.contact_cont .cont .ck_wrap #ck {  -webkit-appearance: none;  width: 10px; height: 8px; background-image: url(/img/arrow_check.png); background-repeat: no-repeat; background-size: cover; -webkit-appearance: none; opacity: 0.5; margin-right:5px;}
.contact_cont .cont .ck_wrap a { display:inline-block; margin-left:10px; background:#eee; color:#555; padding:0 3px; }
.contact_cont .cont .ck_wrap label { display:inline-block; padding:0px 3px; }
.contact_cont .cont .ck_wrap label:after { }
.contact_cont .cont .ck_wrap.ckd label { color:#000 !important; font-weight:600; background:#f1f1f1; }
.contact_cont .cont .ck_wrap.ckd #ck { opacity:1;  background-image: url(/img/arrow_check_on.png); }
.contact_cont .cont .ck_wrap.ckd a { color:#000;  }
.contact_cont .cont .cons_submit { display:block; width:100%; height:58px; background:#131022; color:#fff; font-weight:600; }
.contact_cont .cont .tel_info { position:absolute; bottom:0; left:0; width:100%;  color:#000; background:#fff; padding:10px 20px; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing:border-box;  text-align:center;}
.contact_cont .cont .tel_info span.tel_title { display:inline-block; margin-right:20px; }
.contact_cont .cont .tel_info span.tel_num { display:inline-block; font-size:1em; margin:0 20px; font-weight:600; color:#222;}
.contact_cont .cont .tel_info em { display:inline-block; position:absolute; width:1px; height:10px; margin-top:5px; background:#ddd;}

.header_wrap.fixed{position: fixed; border-bottom: 1px solid #ddd; background: #fff;}
.header_wrap.fixed .header .logo, .header_wrap.hover .header .logo{ background:url('/img/lknike_logo.png') no-repeat center center; }
.header_wrap.hover{border-bottom: 1px solid #ddd; background: #fff;}
.header_wrap.hover .header_bg{height: 250px;}
.header_wrap.fixed .menu_wrap li a, .header_wrap.hover .menu_wrap li a{color: #222;}
.header_wrap.hover .sub_menu{height: 250px; opacity: 1;}
.header_wrap.fixed .hamburger .line{background: #222;}
.header_wrap.fixed .hamburger.is-active .line{background: #fff;}

/* hamburger_btn style */
.hamburger .line{
    display: block;
    width: 20px; height: 2px;
    background-color: #fff;
    margin: 5px 0;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.hamburger:hover{cursor: pointer;}
.hamburger{
	position: relative; z-index: 888; width: 20px; /* border-radius: 50px; background: #fff; */ box-sizing: border-box;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.hamburger.is-active{background: none; animation: smallbig 0.6s forwards;}
@keyframes smallbig{
    0%, 100%{
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    50%{
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
    }
}
.hamburger.is-active .line{background: #fff;}
#ui_head.fixed .hamburger.is-active .line{background: #fff;}
.hamburger.is-active .line:nth-child(1),
.hamburger.is-active .line:nth-child(2),
.hamburger.is-active .line:nth-child(3){
    -webkit-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
.hamburger.is-active .line:nth-child(1){
    -webkit-transform: translateY(7px) rotate(45deg);
    -ms-transform: translateY(7px) rotate(45deg);
    -o-transform: translateY(7px) rotate(45deg);
    transform: translateY(7px) rotate(45deg);
}
.hamburger.is-active .line:nth-child(2){opacity: 0;}
.hamburger.is-active .line:nth-child(3){
    -webkit-transform: translateY(-7px) rotate(-45deg);
    -ms-transform: translateY(-7px) rotate(-45deg);
    -o-transform: translateY(-7px) rotate(-45deg);
    transform: translateY(-7px) rotate(-45deg);
}
/* mobile menu */
.m_header{display: none;}
.m_header .m_manu_bg{position: fixed; top: 0px; right: 0; z-index: 777; width: 100%; height: 100%;}
.m_header .menu_box_wrap{position:absolute; top:0; right: -70%; width:100%; height: 100%; background: rgba(0,0,0,.8);}
.m_header .menu_box{position: absolute; top: 12%; left: 50%; transform: translateX(-50%);} 
.m_header .menu_box .m_menu{margin: 50px auto; text-align: center;}
.m_header .menu_box .m_menu>li{margin-bottom: 25px;}
.m_header .menu_box .m_menu>li:last-child{margin-bottom: 0;}
.m_header .menu_box .m_menu>li>a{font-size: 1.4em; font-weight: bold; color: #fff;}
.m_header .menu_box .m_menu>li>a.active{color: #fff; border-bottom: 2px solid #fff;}

.m_header .menu_box .m_sub_menu{display: none; margin-top: 15px;}
.m_header .menu_box .m_sub_menu>li{margin-bottom: 15px; box-sizing: border-box;}
.m_header .menu_box .m_sub_menu>li>a{font-size: 15px; color: #fff; font-weight: 400; opacity: 0.8;}
.m_header .menu_box .m_sub_menu>li>a:hover{color: #fff; border-bottom: 1px solid #fff;}

.m_header .menu_box .m_menu>li>a{color: #fff;}


/* footer */
.footer_wrap{width: 100%; height: 185px; background: #222; }
.footer_wrap *{color: #bbb; font-size: 14px; box-sizing: border-box;}
.footer{display: flex; align-items: flex-start; justify-content: space-between; position: relative; width: 100%; max-width: 1200px; height: auto; margin: 0 auto; padding: 40px 0;}
.footer .f_left{display: flex;}
.footer .f_logo{width: 140px; height: auto; margin-right: 30px; }
.footer .f_logo img { width:100%;}
.footer .copyright p{margin-bottom: 5px;}
.footer .copyright .company{margin-bottom: 15px; font-weight: 600;}
.footer .fnb{display: flex;/*  position: absolute; right: 0; */}
.footer .fnb li{position: relative; margin-right: 10px; padding-right: 10px;}
.footer .fnb li:after{display: block; position: absolute; top: 50%; right: 0; transform: translateY(-50%); content: ''; width: 1px; height: 12px; background: #bbb;}
.footer .fnb li:last-child{margin-right: 0; padding-right: 0;}
.footer .fnb li:last-child:after{content: none;}

#hd_pop { position:absolute; float:left; box-sizing:border-box; z-index:1000; }
#hd_pop .hd_pops { position:absolute; z-index:1000; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; }
#hd_pop .hd_pops .hd_pops_footer { background:#131022; color:#fff; padding:10px 20px; }
#hd_pop .hd_pops .hd_pops_footer a , #hd_pop .hd_pops .hd_pops_footer button { color:#fff; }
#hd_pop .hd_pops .hd_pops_footer .hd_pops_close  { float:right; right:0; }

/* media */
@media screen and (max-width: 1300px){
	.header_wrap *, .footer_wrap *{box-sizing: border-box;}
	.header{padding: 0 5%;}
}
@media screen and (max-width: 1200px){
	.header .menu_wrap{width: 55%;}
	.footer{padding: 40px 5%;}
	.footer .fnb{right: 5%;}
}
@media screen and (max-width: 1024px){
	.header_wrap, .header_wrap.fixed{height: 70px;}
	.header{position: relative;}
	.header .logo{}
	.header .menu_wrap{display: none;}
	.m_header{display: block;}
	.header .logo, .header_wrap.fixed .header .logo{height: 40px; background-size: auto 40px; background-position: left center;}
	
	
	.main_wrap .contact_but{bottom: 0; top: auto; right: 5%;}
	.header .contact_cont_wrap{}
	.header .contact_cont{top: 50%; transform: translate(50%, -50%);}
	.header .contact_cont_wrap{transition: all 0.3s;}
	.header .contact_cont_wrap.on{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6);}
	.header .contact_cont_wrap.on .contact_cont{right: 50%;}
	.header .contact_cont .close{top: -50px; left: auto; right: 0;}
}
@media screen and (max-width: 980px){
	.footer_wrap{height: auto;}
	.footer{flex-direction: column-reverse;}
	.footer .f_logo{position: absolute; left: 3%; top: 40px;}
	.footer .copyright{margin-top: 40px;}
	.footer .fnb{position: absolute; top: 40px; right: 3%; }
	
	#hd_pop .hd_pops { top:10px !Important; left:10px !Important;  }
}
@media screen and (max-width: 768px){

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

}
@media screen and (max-width: 600px){
	.header .contact_cont{width: 90%;}
	.contact_cont .cont .cons_title_sub{line-height: 1.2em;}
}
@media screen and (max-width: 500px){
	.main_wrap .contact_but{width: 80px; height: 80px; line-height: 80px; font-size: 0.95em;}
	
	.footer .f_left{flex-direction: column;}
	.footer .f_logo{position: relative; left: auto; top: auto;}
	.footer .fnb{position: relative; top: auto; right: auto; margin-bottom: 15px;}
}
@media screen and (max-width: 350px){
	.main_wrap .contact_but{width: 75px; height: 75px; line-height: 75px;}
}