@charset "utf-8";

#header {background: #fff; position: fixed; top: 0; width: 100%; z-index: 999;}
#header.on {border-bottom: 1px solid #e2e2e2; box-sizing: border-box;}
#header .head_box {display: flex; align-items: center; justify-content: space-between; max-width: 95.3%; margin-left: auto; height: 85px;}
#header .gnb_area {display:flex;}
#header #gnb {height: 86px; line-height: 86px;}
#header #gnb > ul {display: flex; height: 86px;}
#header #gnb > ul > li {font-size: 17px; font-weight: bold; padding: 0 60px; position: relative;}
#header #gnb > ul > li:last-child {padding: 0 90px 0 60px;}
#header #gnb > ul > li > a {display: block; width: 100%; height: 100%; position: relative;}
#header #gnb > ul > li.on > a {color: #972121;}
#header #gnb > ul > li.on > a::before {content: ''; position: absolute; top: 23px; right: -5px; width: 5px; height: 5px; background: #a50a18; border-radius: 100%;}
#header #gnb > ul > li:nth-child(2) .sub_menu li {line-height: 1.3;}
#header #gnb > ul > li.on .sub_menu li a {color: #222;}
#header .gnb_btn {height: 86px; line-height: 86px; font-size: 16px; background-color: #a50a18; font-weight: 600; transition: all .4s;}
#header .gnb_btn:hover {background: #c90000; transition: all .4s;}
#header .gnb_btn a {color: #fff; display: block; padding: 0 48px;}

#header .hd_bg {box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 0px 0px -30px; display: none; width: 100%; position: absolute; top: 85px; left: 0; height: 364px; background: #fff; z-index: 99; border-top: 1px solid #dcdde1;}
#header .hd_bg::before {content: ''; position: absolute; left: 0; bottom: 0; background: url('../images/common/header_bg_en.png') no-repeat; width: 349px; height: 296px;}
#header .sub_menu {display: none; position: absolute; top: 86px; padding-top: 27px; left: 50%; transform: translateX(-50%); z-index: 1000; line-height: 1.5; text-align: center; width: 100%;}
#header .sub_menu li {position: relative;}
#header .sub_menu li:nth-child(1) {margin-top: 0;}
#header .sub_menu li::before {content: ''; display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 170px; height: 45px; z-index: -1; background: #972121; border-radius: 50px;}
#header .sub_menu li.last::before {width: 179px; height: 52px;}
#header .sub_menu li:hover a {color: #fff !important;}
#header .sub_menu li:hover::before {display: block;}
#header .sub_menu a {font-size: 16px; font-weight: 500; color: #929292; display: block; padding: 10px;}

#header .language {display:block; height:86px; }
#header .language ul{display:flex; justify-content: center; align-items: center; height:100%;}
#header .language ul li{display:none; width:86px; height:100%; background:#111;}
#header .language ul li.on{display:block;}
#header .language ul li a{width:100%; height:100%; display:flex; justify-content: center; align-items: center; color:#fff; font-size:16px; font-weight:bold;}
#header .m.language{display:none; position:absolute; right:86px; height:86px;}
#header .m.language ul li{width:80px;}

.mlanguage{display:none; position:absolute; top:50%; right:67px; transform:translateY(-50%);}
.mlanguage ul{display:flex; justify-content: center; align-items: center;}
.mlanguage ul li{display:none; background:#111; height:28px;}
.mlanguage ul li.on{display:block;}
.mlanguage ul li a{display:block; padding:4px 8px; color:#fff; font-size:14px; font-weight:600; box-sizing:border-box;}

/* header 수정 */
#header #gnb > ul > li > a.listitem {font-family: 'Noto Sans KR',sans-serif;}


/* mobile */
#header .mgnb_wrap {display: none;}
#header .mgnb_area {display: none; width: 380px; height: 100vh; z-index: 100; position: absolute; top: 0; right: 0; background: #fff;}
#header .mgnb_area::before {content: ''; position: absolute; top: 29px; left: 15px; background: url('../images/common/logo.png') no-repeat; background-size: contain; width: 200px; height: 20px;}
#header .mgnb_area #gnb > ul {display: unset; position: absolute; top: 23%; left: 15px; height: unset; line-height: unset;}
#header .mgnb_area #gnb > ul > li {font-size: 24px; font-weight: 400; padding: 0; margin-top: 15px;}
#header .mgnb_area #gnb > ul > li:nth-child(1) {margin-top: 0;}
#header .mgnb_area #gnb > ul > li:last-child {padding: 0;}
#header .mgnb_area #gnb > ul > li > a {height: 60px;}
#header .mgnb_area .gnb_btn {position: absolute; bottom: 0; width: 100%; text-align: center;}
#header .mgnb_area .sub_menu {position: unset; transform: none; padding-top: 0; line-height: 1.3; text-align: left;}
#header .mgnb_area .sub_menu li {margin-top: 8px;}
#header .mgnb_area .sub_menu li:hover::before {display: none;}
#header .mgnb_area .sub_menu li:hover a {color: unset !important;}
#header .hd_bg_m {display: none; width: 100%; height: 100vh; position: absolute; top: 0; left: 0; background: rgba(0,0,0,.8);}

/* bugerMenu */
.burger_menu {width:86px; height:86px; background-color:#a50a18; z-index: 999; position: absolute; top:0; right:0;}
.burger_menu .line {position:absolute; top:50%; left:50%; width: 34px; height: 2px; background-color: #fff; display: block; transform:translate(-50%, -50%); -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.burger_menu .line:nth-child(1){margin-top:-9px;}
.burger_menu .line:nth-child(3){margin-top:9px;}
.burger_menu.active .line:nth-child(1),
.burger_menu.active .line:nth-child(3){margin-top:0;}
.burger_menu.active .line:nth-child(2) {
	opacity: 0;
}
.burger_menu.active .line:nth-child(1) {
	-webkit-transform: translate(-50%, -50%) rotate(45deg);
	-ms-transform: translate(-50%, -50%) rotate(45deg);
	-o-transform: translate(-50%, -50%) rotate(45deg);
	transform:translate(-50%, -50%) rotate(45deg);
}
.burger_menu.active .line:nth-child(3) {
	-webkit-transform: translate(-50%, -50%) rotate(-45deg);
	-ms-transform: translate(-50%, -50%) rotate(-45deg);
	-o-transform: translate(-50%, -50%) rotate(-45deg);
	transform: translate(-50%, -50%) rotate(-45deg);
}

#footer .inr {max-width: 1400px; margin: 74px auto 120px;}
#footer .link_top {display: flex; justify-content: space-between; align-items: center;}
#footer .link_top ul {display: flex;}
#footer .link_top ul li {font-size: 15px; position: relative;}
#footer .link_top ul li:nth-child(n+2) {margin-left: 40px;}
#footer .link_top ul li:nth-child(n+2)::before {content: ''; position: absolute; top: 50%; left: -24px; transform: translateY(-50%); width: 4px; height: 4px; background: #ddd;}
#footer .link_top ul li a {color: #222;}
#footer .link_top ul li.link2 a {color: #a6101e;}
#footer address {padding-top: 64px; margin-top: 48px; border-top: 1px solid #eee;}
#footer address span {font-size: 15px; color: #888; position: relative; font-weight: 500;}
#footer address span:nth-of-type(n+2) {margin-left: 34px;}
#footer address span.line::before {content: ''; position: absolute; top: 50%; right: -20px; transform: translateY(-50%); width: 1px; height: 14px; background: #ddd;}
#footer address span em {color: #444; display: inline-block; padding-right: 6px; font-weight: bold;}
#footer .copy {font-size: 14px; color: #888; padding-top: 16px; font-weight: 500; opacity: .7;}

@media all and (max-width:1600px) {
    #header h1.logo img {width: 280px;}
    #header #gnb > ul > li {padding: 0 52px;}
    #header #gnb > ul > li:last-child {padding: 0 52px;}
}
@media all and (max-width:1500px) {
    #header .gnb_area {display: none;}
    #header .mgnb_wrap {display: block;}
	#header .m.language{display:block;}
}
@media all and (max-width:1400px) {
    #footer .inr {padding: 0 30px;}
    #header #gnb > ul > li {padding: 0 40px}
}
@media all and (max-width:1300px) {
	
    #header #gnb > ul > li {padding: 0 25px}
}
@media all and (max-width:1200px) {
    #header .head_box {max-width: unset; height: 79px; padding: 0 15px;}
    #header .head_box .logo img {width: 250px;}

    #footer .inr {margin: 65px auto;}
    #footer .f_logo img {width: 120px;}

    .burger_menu {width: 80px; height: 80px;}
    #header .m.language {right: 80px; height: 80px;}
}
@media all and (max-width:680px) {
    #header .head_box {height: 57px;}
    #header .head_box .logo {padding-top: 6px;}
    #header .head_box .logo img {width: 150px;}
    #header .mgnb_area {width: 100%;}
    #header .mgnb_area::before {width: 172px; height: 17px; top: 24px;}
    #header .mgnb_area #gnb > ul {top: 11%;}
    #header .mgnb_area #gnb > ul > li {font-size: 22px;}
	#header .m.language{right:58px; height:58px;}
	#header .m.language ul li{width:58px;}

    .burger_menu {width:58px; height:58px;}
    .burger_menu .line {width: 28px;}
    
    #footer .f_logo img {width: 88px;}
    #footer address {padding-top: 40px; margin-top: 40px;}
    #footer address span {display: block; margin-left: 0 !important; margin-top: 5px;}
    #footer address span.line::before {display: none;}
}
@media all and (max-width:550px) {
    #footer .inr {margin: 50px auto; padding: 0 15px;}
    #footer .link_top {flex-direction: column;}
    #footer .link_top ul {margin-top: 30px; flex-direction: column; text-align: center;}
    #footer .link_top ul li:nth-child(n+2) {margin-left: 0; margin-top: 5px;}
    #footer .link_top ul li:nth-child(n+2)::before {display: none;}
}
@media all and (max-width:380px) {
    #footer .link_top ul li {text-align: center; font-size: 14px;}
    #footer .link_top ul li::before {display: none !important;}
    #footer .link_top ul li:nth-child(n+2) {margin-left: 14px;}
    #footer address {padding-top: 25px; margin-top: 25px;}
    #footer address span {font-size: 14px;}
}