/***** 디자인 폰트 *****/

@font-face {
    font-family: 'NEXEN_TIRE_B';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/NEXEN_TIRE_Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'NEXEN_TIRE_R';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/NEXEN_TIRE_Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}




/*************** 공통 레이아웃 ***************/

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

#head { position:absolute; width:100%; top:0; left:0; z-index:2000; }

#top_items { position:absolute; width:100%; }
#top_items div { position:absolute; height:100%; z-index:10; }
#logo { left:40px; }
#logo a { display:block; position:relative; top:50%; transform:translateY(-50%); }

#mmenu { right:0; width:90px; cursor:pointer; text-align:center; border-top:1px solid rgba(255,255,255,.3); background:#003aac url('../images/mmenu.gif') center no-repeat; }

#top_items #lang { right:120px; }
#top_items #lang:after { clear:both; visibility:hidden; display:block; content:''; }
#top_items #lang p { float:left; }
#top_items #lang p a { display:block; font-size:13px; font-family:'Roboto', sans-serif; font-weight:500; padding:7px 18px; border-radius:50px; background-color:#f1f1f1; letter-spacing:0; }
#top_items #lang p.on a { background-color:#003aac; color:#fff; }
#top_items #lang p:last-child { margin-left:6px; }



/*** ALL GNB ***/

#top_items > div, #all_gnb:before, #gnb ul li, #gnb ul li strong { height:90px; }
#submenu_bg, #gnb .menu_line { top:90px; }
#all_gnb:before { position:absolute; width:100%; height:90px; display:block; content:''; background:#fff; z-index:-1; border-bottom:1px solid #ddd; }

#submenu_bg { position:absolute; background:#003aac; width:100%; height:0; left:0; transition:all .3s; z-index:-1; }

#gnb { text-align:center; padding-left:40px; }
#gnb ul { display:inline-block; }
#gnb ul:after { clear:both; visibility:hidden; display:block; content:''; }
#gnb ul li { float:left; width:220px; position:relative; transition:all .3s; }
#gnb ul li strong { display:block; text-align:center; cursor:pointer; }
#gnb ul li strong a { display:block; color:#111; font-family:'Pretendard', sans-serif; font-size:18px; font-weight:600; line-height:120%; position:relative; top:50%; transform:translateY(-50%); padding-top:2px; }
#gnb ul li:hover strong a { color:#003aac; }
#gnb ul li:hover .submenu { background:#003192; }
#gnb ul:hover .submenu { display:block; opacity:1; }

.eng #gnb ul li strong a { font-size:17px; }

.submenu { position:relative; top:0; padding:20px 12px; visibility:hidden; border-right:1px solid rgba(255,255,255,.2); transition:opacity .5s; opacity:0; }
#gnb ul li:first-child .submenu { border-left:1px solid rgba(255,255,255,.2); }
.submenu a { display:block; color:#fff; font-family:'Roboto', 'Pretendard', sans-serif; font-size:14.5px; font-weight:400; text-align:center; padding:7px 0; line-height:120%; }

.submenu a.skybon_menu { font-size:13px; padding:5px 0; opacity:.7; }
.submenu i { display:block; border-top:1px dashed rgba(255,255,255,.3); margin:8px 0; }

#gnb .menu_line { position:absolute; left:50%; width:0; height:3px; background:#fff; z-index:100; transition:all .4s; margin-top:-1px;}
#gnb ul li:hover .menu_line { width:100%; margin-left:-50%; }

#head.cnt7 #gnb ul li { width:160px; }
#head.cnt7.global #gnb { padding-left:80px; }

#gnb ul:hover .submenu { visibility:visible; }
#gnb ul:hover .submenu, #gnb ul:hover li { height:auto; }

#head.gnb_fix { position:fixed; top:0; }
#head.gnb_fix #logo img { height:37px; }

#head.gnb_fix #top_items > div, #head.gnb_fix #all_gnb:before, #head.gnb_fix #gnb ul li, #head.gnb_fix #gnb ul li strong { height:70px; }
#head.gnb_fix #submenu_bg, #head.gnb_fix #gnb ul li .menu_line { top:70px; }




.menu_bg { position:fixed; z-index:-1; }
@keyframes menu_bg {
	0% { width:0; height:0; top:80px; right:80px; border-radius:50%; }
	70% { width:3000px; height:3000px; top:-1500px; right:-1000px; border-radius:50%; }
	100% { width:100%; height:100%; top:0; right:0; border-radius:0; }
}
.mclose { z-index:20000; position:fixed; left:0; top:40px; width:100%; }
.mclose > div { text-align:right; }
.mclose img { cursor:pointer; }




/*** BASIC Site Map ***/

#site_map .vm > ul { display:flex; flex-wrap:wrap; }
#site_map .vm > ul > li { width:27.33%; position:relative; opacity:0; transition:opacity 1.4s; margin-right:9%; }

#site_map .vm > ul.cnt7 > li, #site_map .vm > ul.cnt4 > li { width:22%; margin-right:4%; }

#site_map .vm > ul.cnt5 > li:nth-child(3n), #site_map .vm > ul.cnt6 > li:nth-child(3n), #site_map .vm > ul.cnt4 > li:nth-child(4n), #site_map .vm > ul.cnt7 > li:nth-child(4n)
{ margin-right:0; }
#site_map .vm > ul.cnt5 > li:nth-child(n+4), #site_map .vm > ul.cnt6 > li:nth-child(n+4),
#site_map .vm > ul.cnt7 > li:nth-child(n+5) { margin-top:100px; }

#site_map.smap_view .vm > ul > li { opacity:1; }
#site_map .smap_gnb p { color:#fff; font-size:24px; font-weight:400; font-family:'NEXEN_TIRE_R', 'Pretendard', sans-serif; letter-spacing:0; line-height:120%; }
#site_map .smap_gnb i { display:block; border-top:2px solid #fff; margin:25px 0 10px; }

#site_map .smap_snb a { display:block; color:#fff; font-size:18px; font-weight:500; font-family:'Pretendard', sans-serif; line-height:120%; padding:8px; }

#site_map .smap_snb a.skybon_menu { font-size:14px; font-weight:400; padding:5px; opacity:.7; }
#site_map .smap_snb em { display:block; border-top:1px dashed rgba(255,255,255,.4); margin:10px 0; }

#site_map #smap_line { display:flex; position:absolute; width:100%; height:100%; left:0; top:0; opacity:.2; }
#site_map #smap_line li { width:100%; border-left:1px solid #fff; }
#site_map #smap_line li:first-child { border-left:0; }





/*** BASIC Mobil GNB ***/

#mgnb_back { position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:.9; display:none; z-index:19999; transition:none !important; }

#mobile_menu, #site_map { position:fixed; width:0; height:0; left:0; top:0; overflow-y:auto; z-index:20000; opacity:0; visibility:hidden; }

#mobile_menu.mmenu_view, #site_map.smap_view { width:100%; height:100%; opacity:1; visibility:visible; }
#mobile_menu.mmenu_view .menu_bg, #site_map.smap_view .menu_bg { animation-name:menu_bg; animation-duration: 1s; animation-fill-mode:forwards; }


#mobile_menu.mid .mmenu { display:table; height:100%; }
#mobile_menu.mid .mmenu > div { display:table-cell; vertical-align:middle; }
#mobile_menu.top .mmenu { padding-top:60px; }
#mobile_menu .m_gnb { padding:26px 0; cursor:pointer; font-size:24px; font-weight:700; font-family:'Roboto', 'Pretendard'; color:#fff; opacity:0; transition:all 2s; border-bottom:2px solid #fff; text-align:left; }

#mobile_menu.mmenu_view .m_gnb { opacity:1; }

#mobile_menu .m_snb { transition:none !important; margin-top:20px; }
#mobile_menu .m_snb:after { clear:both; visibility:hidden; display:block; content:''; }

#mobile_menu .m_snb li a { display:block; font-weight:500; font-family:'Roboto', 'Pretendard'; font-size:15px; color:#fff; padding:10px 0 10px 20px; text-align:left; }
#mobile_menu .m_snb.skybon_menu li:first-child { width:100%; }
#mobile_menu .skybon_list { margin-bottom:20px; }
#mobile_menu .m_snb li a + .skybon_list a { display:block; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.2); padding:15px; font-size:13.5px;  margin-top:10px; text-align:left; }





/***** 하단 *****/

#footer * { letter-spacing:0; }
#footer { padding: 70px 0; background-color: #2b2b2b; }

#footer .f_top::after{ clear:both; visibility:hidden; display:block; content:''; }
#footer .f_top li{ float: left; color: #fff; font-size: 16.5px; }
#footer .f_top li:nth-child(n+2){ margin-left: 35px;}
.eng #footer .f_top li { font-size: 15px; }

#footer .line{ border-top: 1px solid#4f4f4f;}

#footer .f_bottom li{ font-size: 15.3px; display: inline-block; color: #969696;  line-height: 170%; margin-right: 30px;}
#footer .f_bottom li span{ color: #c8c8c8; font-weight: 500; margin-right: 5px; }
#footer .f_bottom li:last-child{ margin-right: 0;}

#footer .copy{ font-size: 12.5px; font-weight: 400; color: #969696; }
#footer .sns img{ opacity: .6; }

#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; }


/* footer_light */

#footer.light{ background-color: #f5f5f5; }
#footer.light .line{ border-top: 1px solid#dadada; }
#footer.light .f_top li{ color: #222;}
#footer.light .f_bottom li{ color: #666; }
#footer.light .f_bottom li span { color: #888; }
#footer.light .sns img{ opacity: .8; }
#footer.light #page_top { border:0; background:#fff; }
#footer.light #page_top:before { background-image:url('/images/ptop_arrow_b.png'); opacity:.4; }
#footer.light #page_top:hover { background-color:#444; }
#footer.light #page_top:hover:before { background-image:url('/images/ptop_arrow.png'); opacity:1; }