/* µðÀÚÀÎ */
@import "/css/design.css";
@import "/css/over.css";



/*************** °øÅë ·¹À̾ƿô ***************/

.fwrap { width:calc(100% - 120px); margin-left:60px; margin-right:60px; }
.swrap { width:1520px; margin-left:auto; margin-right:auto; }
.swrap2 { width:1360px; margin-left:auto; margin-right:auto; }


/*************** TOP ¸Þ´º¿µ¿ª ***************/
#head #gnb, #head #gnb ul, #top_items { height: 90px; transition: height ease-in-out .4s; }


/* #head */

#head { z-index: 1000; width: 100%; position:fixed; top:0; left:0; }
#head.sub { background-color:#151f2a; }

#head #gnb { height: 100%; }
#head #gnb ul { margin-left:auto; margin-right:13%; display:flex; width:740px; justify-content:space-between; position: relative; z-index:1000; }

#head #gnb li a { display:block; position: relative; top: 50%; transform: translateY(-50%); color: #fff; font-family:'kanit', 'pretendard', sans-serif; font-size: 18px; font-weight:500; text-align:center; line-height:1.3; padding:20px; }




/* #items */
#top_items { position: fixed; width: 100%; top:0; left:0; z-index:999; }
#top_items .fwrap { position: relative; height:100%; }
#top_items .fwrap > * { position: absolute; height:100%; }

#top_items #logo { left:0; display:block; }
#top_items #logo img { position: relative; top: 50%; transform: translateY(-50%); transform-origin: left; }

#top_items #sub_items { right: 0; top: 0; height:100%; display:flex; }
#top_items #sub_items > li { height: 100%; }
#top_items #sub_items > li:nth-child(n+2) { margin-left: 30px; }


#top_items #sub_items > li #sitemap_btn { display:block; position: relative; top: 50%; transform: translateY(-50%); width: 32px; padding:10px 0;  cursor: pointer; }
#top_items #sub_items > li #sitemap_btn > div { width: 100%; height: 3px; background-color: #fff; transform-origin: center; transition: transform 0.4s; }
#top_items #sub_items > li #sitemap_btn > div:last-child { width: 70%; margin-top: 6px; }

.sitemap_on #top_items #sub_items > li #sitemap_btn { padding:20px 0; }
.sitemap_on #top_items #sub_items > li #sitemap_btn > div { position: absolute; background-color: #fff; }
.sitemap_on #top_items #sub_items > li #sitemap_btn > div:first-child { transform: rotateZ(45deg); }
.sitemap_on #top_items #sub_items > li #sitemap_btn > div:last-child { width: 100%; transform: rotateZ(-45deg); margin-top:0; }




/* resize or scroll */

#head.fix { background-color:#151f2a; }
#head.re_height #gnb, #head.re_height #gnb ul, #head.re_height #top_items { height: 70px; }
#head.re_height #top_items #logo img { transform: translateY(-50%) scale(.8); }


#head.re_mo, #head.re_mo #top_items { height: 56px; }
#head.re_mo #gnb { display: none; }
#head.re_mo #top_items #logo img { transform: translateY(-50%) scale(.7); }
.re_mo #top_items #sub_items > li #sitemap_btn { font-size: 12.5px; }
.re_mo #top_items #sub_items > li:nth-child(n+2) { margin-left:calc(10px + 0.7vw); }
.re_mo #top_items #sub_items > li #sitemap_btn { width: 24px; }
.re_mo #top_items #sub_items > li #sitemap_btn > div { margin-bottom: 5px; }





#head.sitemap_on #top_items { z-index:1100; }
#head.sitemap_on #top_items #sub_items > li a { color:#111; }
#head.sitemap_on #top_items #sub_items > li.lang img:nth-of-type(2) { display:inline; }
#head.sitemap_on #top_items #sub_items > li.lang img:nth-of-type(1) { display:none; }




/* sitemap */


#sitemap { z-index: 1050; opacity: 0; position: fixed; top:0; left: 100vw; width: 100%; height:100%; background-color: rgba(10, 20, 30, 0.94); transition: all .3s; backdrop-filter: blur(5px) grayscale(100%); }
.sitemap_on #sitemap { opacity: 1; left: 0; }

#sitemap .sitemap_wrap { height: 100%; width:100%; position:absolute; left:100vw; transition: all .6s; }
.sitemap_on #sitemap .sitemap_wrap { left:0; }

#sitemap .fwrap { position: relative; height: 100%; }

#sitemap .menus { position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); }

#sitemap .menus .menu a { color:#fff; font-family:'orbitron', 'pretendard', sans-serif; font-size:72px; font-weight:800; line-height:150%; }
#sitemap .center p:hover { opacity:1; }


#sitemap .opt_menu { display:flex; }
#sitemap .opt_menu li { }
#sitemap .opt_menu li:nth-of-type(n+2) { margin-left:15px; }
#sitemap .opt_menu li a { display:block; text-align:center; padding:20px; border:2px solid #fff; opacity:.7; font-family:'orbitron', 'pretendard', sans-serif; color:#fff; font-size:13px; transition:all .4s; font-weight:600; }
#sitemap .opt_menu li a:hover { opacity:1; background:#fff; color:#19283a; }

@media (max-width: 1660px){
	#sitemap .opt_menu li:nth-of-type(n+2) { margin-left:12px; }
	#sitemap .opt_menu li a { padding:16px 12px; }
}
@media (max-width: 767px){
	#sitemap .menus .menu a { line-height:180%; }
	#sitemap .opt_menu li:nth-of-type(n+2) { margin-left:10px; }
	#sitemap .opt_menu li a { padding:14px 10px; }
}




/***** ÇÏ´Ü *****/

#footer { position:relative; padding: 70px 0; background-color: #151f2a; margin-top:140px; }
#footer.mt0 { margin-top:0 !important; }

#footer .f_top::after{ clear:both; visibility:hidden; display:block; content:''; }
#footer .f_top li { float: left; color: #fff; font-size: 16px; font-weight: 500; font-family:'kanit', 'pretendard', sans-serif; }
#footer .f_top li:nth-child(n+2){ margin-left: 35px;}

#footer .partners { position:absolute; right:60px; margin-top:-35px; wwww}
#footer .partners select { font-size:13px; font-weight:500; color:#ccc; border-color:#888; background:#2b2b2b; }

#footer .line { border-top: 1px solid rgba(255,255,255, .2); }

#footer #info { float:left; width:54%; }
#footer .company_info > div { font-size: 15px; font-weight: 300; display: inline-block; color:rgba(255,255,255, .7); line-height: 200%; margin-right: 30px;}
#footer .company_info > div span { color: #eee; font-weight: 500; margin-right: 5px; }
#footer #info li:last-child{ margin-right: 0;}

#footer #cs_center { float:left; width:46%; }
#footer .info_wrap strong { display:block; font-family:'kanit', 'pretendard', sans-serif; font-size:15px; color:#ccc; font-weight:500; }

#footer #cs_center p { font-family:'gong_g', 'pretendard', sans-serif; font-size:26px; color:#fff; font-weight:400; }
#footer .copy { font-size: 12.5px; font-weight: 400; color: #969696; }
#footer .sns img { opacity:.5; }

#footer .fwrap { position:relative; }
#footer #page_top { width:81px; height:81px; bottom:0; position:absolute; right:0; border:1px solid rgba(255,255,255,.5); cursor:pointer; }
#footer #page_top:before { display:block; content:''; position:absolute; background:url('/images/ptop_arrow.png') center no-repeat; width:100%; height:100%; opacity:.7; }
#footer #page_top:hover { background-color:#fff; border:0; }
#footer #page_top:hover:before { background-image:url('/images/ptop_arrow_b.png'); opacity:1; }




@media (max-width: 1660px){
	#head .sub_menu { min-width:calc(82px + 4vw); }
	.fwrap, .swrap, .swrap2 { width:calc(100% - 80px); margin-left:auto; margin-right:auto; }
	#top_items #sub_items > li:nth-child(n+2) { margin-left: 20px; }
	#top_items #sub_items .top_log a { font-size:11px; }
	#head #gnb ul { width:calc(360px + 20vw); }
	#footer #page_top { width:calc(33px + 3vw); height:calc(33px + 3vw); }
	#footer #page_top:before { background-size:calc(7px + 0.5vw); }
}


@media screen and (max-width:1200px) {
	.fwrap, .swrap, .swrap2 { width:92%; }
}

@media screen and (max-width:1000px) {
	#head #gnb ul { margin-right:11%; }
	#head #gnb li a { padding:20px 15px; }
	#sitemap .visual { display:block; }
	#sitemap .visual .left { width:100%; }
	#sitemap .visual .address { display:none; }
	#sitemap .maps { width: 100%; margin-top:40px; }
}

@media screen and (max-width:820px) {
	#head #gnb ul { width:480px; }
	#head #gnb li a { padding:20px 10px; }
	#footer .f_top li:nth-child(n+2) { margin-left: 20px; }
	#footer .company_info > div { margin-right: 20px;}
	#footer .sns img{ width: 160px;}
	#footer #info, #footer #cs_center { width:100%; }
	#footer #cs_center { margin-top:calc(10px + 2vw); }
}

@media (max-width: 767px){
	.sitemap_on { overflow:hidden; }
	#sitemap .sitemap_wrap { overflow:auto; }
	#sitemap .visual { top:6%; transform:translateY(0); }
	#sitemap .visual p.tit { display: none; }
	#sitemap  .address { display:none; }
	#sitemap .maps { float: none; display: block; width: 100%; margin: 0; }
	#sitemap .maps > li { margin: calc(26px + 1.5vw) 0; width: 100%; padding: 0; cursor: pointer; }

	#sitemap .maps > li .box > p { padding-bottom:0; }
	#sitemap .maps > li .box .bar { display:none; }

	#sitemap .maps > li .box .sub { display:none; padding-top:calc(7px + 1vw); }
	#sitemap .maps > li .box .sub a { opacity: 1; padding:calc(6px + 0.3vw) calc(10px + 0.3vw); border-radius:4px; background:rgba(255,255,255,.15); margin-top:4px; }
	#sitemap .maps > li .box .sub a.pro_cate { padding:0 0 calc(4px + 0.3vw); background:none; }
	#sitemap .maps > li .box .sub.product li { width:48%; }
	#sitemap .maps > li .box .sub.product li:last-of-type { margin-left:4%; }
	#sitemap .maps > li .box .sub.product li:nth-of-type(n+2) { padding-left:0; }
}




/***** ÇÏ´Ü °í°´¼¾ÅÍ *****/

#cs_center > ul { display:flex; flex-wrap:wrap; }
#cs_center .cs_info { width:40%; margin-right:5%; }
#cs_center .cs_map { width:55%; }

#cs_center .cs_info h2 { font-size:44px; font-family:'NEXEN_TIRE_B', 'Pretendard', sans-serif; text-align:left; }
#cs_center .cs_info h2:after { display:none; }
#cs_center .cs_info .biz { font-size:18px; font-weight:600; }
#cs_center .cs_info .tel { font-size:32px; font-family:'NEXEN_TIRE_B', 'Pretendard', sans-serif; }
#cs_center .cs_info .tel * { vertical-align:middle; }
#cs_center .cs_info .tel i { font-size:22px; transform:translateY(-2px); }

#cs_center dl { display:flex; flex-wrap:wrap; }
#cs_center dl > * { border-bottom:1px solid #ddd; padding:15px 0; line-height:1.3; font-size:16px; }
#cs_center dt { width:26%; padding-right:3%; color:#333; font-weight:500; }
#cs_center dd { width:74%; color:#444; font-weight:300; }

#cs_center .sns_btns a { display:inline-block; width:60px; height:60px; background-position:center; background-repeat:no-repeat; background-color:#d1d1d1; border-radius:50%; transition:background-color .3s; }
#cs_center .sns_btns a:nth-of-type(n+2) { margin-left:14px; }
#cs_center .sns_btns a:nth-of-type(1) { background-image:url('/images/sns_ytb.png'); }
#cs_center .sns_btns a:nth-of-type(2) { background-image:url('/images/sns_blog.png'); }
#cs_center .sns_btns a:nth-of-type(3) { background-image:url('/images/sns_insta.png'); }
#cs_center .sns_btns a:hover { background-color:#ff3b4b; }

#cs_center .cs_map .location_map, #cs_center .cs_map .wrap_map { width:100%; height:100% !important; }


@media (max-width: 1660px){
	#cs_center dl > * { padding:calc(7px + 0.5vw) 0; }
	#cs_center .sns_btns a { width:calc(40px + 1vw); height:calc(40px + 1vw); background-size:calc(22px + 0.5vw); }
}
@media (max-width: 900px){
	#cs_center .cs_info .tel i { transform:translateY(-1px); }
}

@media (max-width: 680px){
	#cs_center .cs_info { width:100%; margin-right:0; }
	#cs_center .cs_map { width:100%; margin-top:calc(20px + 3vw); }
	#cs_center .cs_map .location_map { height:calc(200px + 20vw) !important; }
}
@media (max-width: 500px){
	#cs_center .cs_info .tel i { transform:translateY(0); }
}







/***** ÇÁ·ÎÁ§Æ® ¸®½ºÆ® *****/

.m_pf li { width:47%; }
.m_pf li.pf_r { float:right; }

.m_pf .vdo video { width:100%; height:auto; }

.m_pf li dl:nth-of-type(n+2) { margin-top:calc(20px + 10%); }

.m_pf dt h4 { font-size:25px; }
.m_pf dt p { font-size:16px; line-height:180%; color:#777;  }


@media (max-width:1660px) {
	.m_pf .ver img { width:33vw; }
}
@media (max-width:767px) {
	.m_pf li, #etc_project ul li { width:48%; }
	.m_pf dt p { display:none; }
}