@charset "UTF8";

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

/* 기본작업 */
body{ font-size: 16px; min-width: 320px; font-family: 'Poppins','Noto Sans KR','Noto Sans SC', sans-serif; }
*{ padding:0; margin:0; word-break: keep-all; box-sizing: border-box; }
li{ list-style: none; }
a{ color: inherit; text-decoration: none; }
.nexen_reg { font-family: 'NEXEN_TIRE_Regular'; font-weight: normal; }
.nexen_bold { font-family: 'NEXEN_TIRE_Bold'; font-weight: normal; }
.brTablet{ display: none; }
.mainColor{ color:#9b856e; }
.br-m{ display: none; }
img {max-width: 100%;}
.m-img{ display: none; }
.KR_light{ font-family: 'Noto Sans KR','sans-serif'; font-weight: 300; }
.KR_reg{ font-family: 'Noto Sans KR','sans-serif'; font-weight: 400; }
.KR_bold{ font-family: 'Noto Sans KR','sans-serif'; font-weight: 700; }
.poppins{ font-family: 'Poppins','sans-serif'; }
.t_br{ display: none; }
.m_br{ display: none; }



.header_m{ display: none; }
.header_pc {transition: 0.3s;}
.header_pc.gnb_active {background-color: #000;}
header{ position: fixed; top: 0; left:0; z-index:500; width:100%; height: 90px; background-color: rgba(0,0,0,0.5); display:flex; justify-content:space-between; }
header.header_sub {background-color: #000;}
header .logo > a{ display:block; width: 280px; line-height: 90px; padding-left:20px; transition: 0.3s; }
header .logo > a > img{ width:100%; vertical-align: middle; }

header .tNav{ width:10.156%; height:90px; display:flex; justify-content: center; padding-top:25px; }
header .tNav a{ display: block; width: 47px; height: 47px; text-align: center; line-height: 47px; font-size:14px; color:#fff; color: #fff; border: 1px solid #fff; margin-right: 5px; }
header .tNav a.active{ background-color: #fff; color: #000; font-weight: bold; }



/* gnb */
.gnb{ width: 100%; height: 90px; line-height: 90px; padding-top: 25px; display: flex; justify-content: space-between; }
.gnb > ul{ height:50px; display: flex; justify-content: space-around; align-items: center; padding: 0; margin:0 auto; }
.menu02{ position:relative; display: block; color:#fff; padding: 0 30px 40px; box-sizing: border-box; margin-top:30px; font-size: 16px; line-height: 16px; font-weight: 600;  transition: 0.3s; }
.gnb > ul > li > a{ height: 50px; transition: 0.3s; }
.gnb > ul > li > a::before {display: block; content: ""; width: 100%; height: 4px; background-color: #0e73b9; position: absolute; bottom: 0; left: 0; opacity: 0; transition: opacity 0.3s;}
.gnb > ul > li.active > a {color: #0e73b9;}
.gnb > ul > li.active > a::before {opacity: 1;}
.gnb > ul > li > ul{ position:absolute; left:35%; z-index:600; transition: 0.3s; border-right: 1px solid #e1e1e1; }
@media screen and (max-width:1850px){
    .gnb > ul > li > ul{ left:34%; }
}
@media screen and (max-width:1450px){
    .gnb > ul > li > ul{ left:32%; }
}
@media screen and (max-width:1300px){
    .gnb > ul > li > ul{ left:30%; }
}
.gnb > ul > li > ul{ display: none!important; height: 275px; margin-top:32px; padding-top: 20px; }
.gnb > ul > li > ul > li{ position:relative; line-height: 35px; }
.gnb .menu03{ padding-right: 70px; position:relative; color: #595857; display: block; text-transform: capitalize; font-size: 19px; font-weight: 600; }
.gnb .menu03:active{ color: #9b856e; }
.gnb .menu03:active .menu03:after{ position:absolute; top:50%; right:0; content:''; width: 5px; height: 5px; display: block; border-right: 2px solid #9b856e; border-top:2px solid #9b856e; transform: rotate(45deg) translateY(-50%); }
.gnb .menu03 li{ height: 35px; line-height: 35px; }
.gnb .menu03 li a{ margin-left:100px; color: #595857; font-weight: 300; font-size: 17px; }
.gnb > ul > li > a::after{ position:absolute; top:0; right:0; content:''; width: 1px; height: 14px; background-color: #fff; display: block; }
.gnb > ul > li:last-child > a::after{ display: none; }
.gnb > ul > li > a.menu02:active{ color: #0e73b9; border-bottom: 3px solid #0e73b9; }
@media screen and (max-width:1300px){
    header .logo > a{ width: 260px; line-height: 90px; padding-left:15px; transition: 0.3s; }
    .menu02{ padding:0 20px 40px; font-size: 15px; }
    .gnb > ul > li > a::after{ height: 12px; margin-top: 2px;}
}
.menu04{ display:none; position:absolute; top:0; right:-300px; }
.menu04 a{ color: #595857; }
.menu04 a:active{ color: #9b856e; }
.menu05{ display: none; }




/* 서브메뉴 */
.submenu_container { position: absolute; top: 100%; left: 0; width: 100%; background-color: #fff; display: none;}
.gnb > ul > li.active .submenu_container {display: flex;}


/* 서브메뉴 Type1 */
.submenu_container.type1 > ul {display: flex; justify-content: center; width: 100%;}
.submenu_container.type1 > ul > li > a {font-size: 17px; color: #595857; padding: 10px 20px;}
.submenu_container.type1 > ul > li > a:hover {color: #9b856e;}



/* 서브메뉴 Type 2 */
.submenu_container.type2 {min-height: 340px;}
.submenu_container.type2 .titlebox { display: flex; width: 640px; background: url(../images/gnb_bg.png) no-repeat right bottom / auto; background-color: #f4f4f3;}
.submenu_container.type2 .titlebox .wrapper {width: 275px; margin: 0 0 0 auto; padding: 60px 60px 60px 0;}
.submenu_container.type2 .titlebox .wrapper .title {display: block; font-family: "Poppins"; font-size: 28px; text-transform: uppercase; line-height: 140%; margin-bottom: 25px;}
.submenu_container.type2 .titlebox .wrapper .desc {display: block; font-family: "Noto Sans KR"; font-size: 16px; line-height: 150%; color: #7f7f7f;}
.submenu_container.type2 .submenu_wrapper {padding: 35px 0;}
.submenu_container.type2 .submenu_wrapper ul {width: 280px;}
.submenu_container.type2 .submenu {position: relative;}
.submenu_container.type2 .submenu a { color: #595857; text-transform: capitalize; display: flex; padding: 5px; line-height: 150%;}
.submenu_container.type2 .submenu li.active > a,
.submenu_container.type2 .submenu li:hover > a { color: #9b856e; }
.submenu_container.type2 .submenu ul {position: absolute; top: 0; left: 100%; height: 100%; border-left: 1px solid #e1e1e1; padding: 25px 0; display: none;}
.submenu_container.type2 .submenu li.active > ul {display: block;}
.submenu_container.type2 .submenu ul li {padding: 0 45px;}
.submenu_container.type2 .submenu ul li > a {font-size: 17px;}
.submenu_container.type2 .submenu_wrapper .depth1 {height: 100%; padding: 25px 0 25px 35px;}
.submenu_container.type2 .submenu_wrapper .depth1 > li {padding: 0 20px 0 0; }
.submenu_container.type2 .submenu_wrapper .depth1 > li > a { font-size: 19px;  font-weight: 600; }
.submenu_container.type2 .submenu_wrapper .depth1 > li > a > span {margin-right: auto; line-height: 22px;}
.submenu_container.type2 .submenu_wrapper .depth1 > li .arrow {display: block; width: 12px; height: 12px; border: 3px solid #9b856e; border-left: none; border-bottom: none; transform: rotate(45deg); margin: 0.5em 0 0 60px; opacity: 0;}
.submenu_container.type2 .submenu_wrapper .depth1 > li.active > a > .arrow,
.submenu_container.type2 .submenu_wrapper .depth1 > li:hover > a > .arrow {opacity: 1;}
footer .part01{ padding-bottom: 90px; }
footer .part01 a{ display: block; width: 230px; height: 70px; overflow: hidden; margin-bottom: 25px;}
footer .part01 a img{ width: 100%; height: 100%; }
footer .part01 .address{ font-size: 14px; line-height: 20px; color: #585858; margin-bottom: 15px; }
footer .part01 .phone li{ font-size: 14px; color:#585858; }
footer .part01 .phone li:first-child{ margin-right: 10px; }
footer .part01 .phone li:first-child b{ letter-spacing: 2px; }
footer .part01 .phone .letterSpace{ display: inline-block; width: 3px; }
footer{ position:relative; width: 100%; background-color: #e2e2e2; padding-top:30px; padding-bottom: 50px; }
footer > .wrap{ display: flex; justify-content: space-between; }
footer > .wrap div{ width: calc(100%/3); }
footer h2{ color: #2c64ae; font-size: 20px; font-weight: 600; line-height: 50px; }
footer h2 span{ display:inline-block; border-color:transparent transparent transparent #2c64ae; border-style:solid solid solid solid; border-width:7px 0 7px 12px; margin-right: 5px; line-height: 50px; }
footer > .wrap div.part02,footer > .wrap div.part03{ padding-left: 50px; }
footer > .wrap > .part02 li,footer > .wrap > .part03 li{ height:32px; display:flex; border-bottom: 1px solid #a9a9a9; }
footer > .wrap div li a{ display:block; width:100%; color: #313131; font-size: 14px; line-height: 32px; margin-right: auto; font-weight: 500; }
footer > .wrap div li a span{ float:right; font-size: 14px; margin-left: auto; font-weight: 300;}
footer > .wrap div a.inquiry{ display:block; width:100%; height: 45px; font-size: 15px; color: #898989; background-color: #fff; text-align: center; line-height: 45px; margin-top: 20px; }
footer > .wrap div a.inquiry span{ float:right; width: 65px; height: 100%; line-height: 45px; text-align: center; color: #fff; background-color: #2c64ae; font-weight: 500; }
footer .copyRight{ position:absolute; left:0; bottom:0; width: 100%; background-color: #434343; }
footer .copyRight p{ font-size: 14px; color: #d9d9d9; text-align: center; line-height: 100%; padding: 20px 0; font-weight: 300; }











/* Tablet */ 
@media screen and (max-width:1200px) { /* 1023 */
    .t_br{ display: block; }
    .m_br{ display: none; }
    .header_pc{ display: none; }
    .header_m{ display: block; width:100%; height:60px; border-bottom: 1px solid #adaeb7; box-sizing: border-box; }
    .header_mInner{ display: flex; justify-content: space-between;  align-items: center; height: 60px;} 
    .header_m .gnbT{ display: block; width: 50px; height: 40px; margin-right: 40px; }
    header .logo > a{ display:block; width: 245px; line-height: 90PX; padding-left:20px;  transition: 0.3s;}
    header .logo > a > img{ width:100%; vertical-align: middle; }
    .header_m .gnbT{ width: 25px; height: 20px; margin-right: 20px; }
    .header_m .gnbT > img{ width: 100%; }
    .header_m .logo > a{ display:block; width: 210px; line-height: 60px; }
    .header_m .logo > a > img{ width: 100%; }

    .m_menu {position: relative; width: 100%; height: calc(100vh - 60px); display: none;}
    .m_menu__dim {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5);}
    .m_menu__container {position: relative; z-index: 10; display: flex; flex-direction: column; max-height: 100%; background-color: #fff; padding-bottom: 90px;}
    .m_menu__lang {display: flex; padding: 20px 24px;}
    .m_menu__lang > a {display: flex; align-items: center; font-size: 18px; color: #595757; text-transform: uppercase;}
    .m_menu__lang > a::after {display: block; content: ""; width: 2px; height: 0.8em; background-color: #b5b5b6; margin: 0 10px;}
    .m_menu__lang > a:last-child:after {display: none;}
    .m_menu__lang > a.active {color: #0077c1;}
    .m_gnb {height: 100%; overflow-y: auto;}
    .m_gnb a {display: flex; width: 100%; justify-content: space-between; align-items: center;}
    .m_gnb > li > a {font-size: 22px; text-transform: uppercase; color: #000; font-weight: 600; padding: 15px 24px; border-bottom: 1px solid #e5e5e5;}
    .m_gnb > li > a > .plus {position: relative; display: block; width: 20px; height: 20px; margin-left: 20px;}
    .m_gnb > li > a > .plus::before,
    .m_gnb > li > a > .plus::after {display: block; content: ""; background-color: #666666; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
    .m_gnb > li > a > .plus::before {width: 100%; height: 2px;}
    .m_gnb > li > a > .plus::after {width: 2px; height: 100%;}
    .m_gnb__depth2 {background-color: #f1f1f1; padding: 15px 0 30px 0; display: none;}
    .m_gnb__depth2 > li {padding: 0 24px 0 30px;}
    .m_gnb__depth2 > li > a {font-size: 20px; color: #727171; font-weight: 500; text-transform: uppercase; padding: 10px 0;}
    .m_gnb__depth2 > li > a > .arrow {display: block; width: 14px; height: 14px; border: 3px solid #959595; border-left: none; border-bottom: none; transform: rotate(135deg); margin: -5px 3px 0 20px;}
    .m_gnb__depth3 {padding: 15px 0; background-color: #fff; border-bottom: 1px solid #d7d7d7; display: none;}
    .m_gnb__depth3 > li > a {font-size: 14px; color: #000; text-transform: capitalize; padding: 10px 30px;}
    


/* 4depth 추가부분 */
    .m_gnb__depth4 { background-color: #fff;  }
    .m_gnb__depth4 > li {padding: 0 24px 0 30px; line-height: 22px; }
    .m_gnb__depth4 > li > a {font-size: 14px; font-weight: 500; display: block; color:#595757; }
    .m_gnb__depth4 > li > a > span{ background-color: #15a5bb; display: inline-block; width: 4px; height: 4px;  border-radius: 50%; color: #15a5bb; margin-right: 8px; margin-bottom: 2px; }
    .m_gnb__depth4 li:last-child{ margin-bottom: 10px; }
    /* 4depth 추가부분 */



    .header_m .gnbT .open,
    .header_m .logo .white {display: block;}
    .header_m .gnbT .close,
    .header_m .logo .color {display: none;}
    .header_m.menu_active {background-color: #fff;}
    .header_m.menu_active .gnbT .open,
    .header_m.menu_active .logo .white {display: none;}
    .header_m.menu_active .gnbT .close,
    .header_m.menu_active .logo .color {display: block;}
    .header_m.menu_active .m_menu {display: block;}
    .m_gnb > li.active > a {color: #134f9f!important;}
    li.active > .m_gnb__depth2,
    li.active > .m_gnb__depth3 {display: block;}
    li.active .plus::after {display: none!important;}
    li.active > a > .arrow {transform: rotate(-45deg)!important; margin-top: 5px!important;}


    
    footer .pc_br{ display: none; }
    footer .part01{ padding-bottom: 20px; }
    footer .part02,footer .part03{ display: none; }
    footer .part01{ width:100%!important; margin: 0 auto; }
    footer .part01 a{ width: 115px; height: 38px; }
    footer .part01 a img{ width: 100%; height: 100%; }
    footer .part01 p{ font-size: 12px; }
    footer .part01 .address{ margin-bottom: 0; }
    footer .part01 .address ul li{ border:none; }
    footer .copyRight p{ font-size: 12px; padding: 10px 0; }
    footer .part01 .phone li:first-child b{ letter-spacing: 0; }
    footer .part01 .phone{ display: flex; }
    


    


} 

/* Mobile */  
@media screen and (max-width:767px) {
    .pc_br{ display: none; } 
    .t_br{ display: none; }
    .m_br{ display: block; }
    footer .part01 .address, footer .part01 .phone{ font-size: 12px; }
    footer .copyRight{ padding:8px 0; }
    footer .copyRight p{ line-height:100%; }
    footer .part01 .phone li{ font-size: 12px; }


}