@charset "utf-8";

	header{}
	header #header{padding : 40px 0px 45px; text-align: center; border-bottom : solid 1px #d8d8d8;}
	header #header .inner{position: relative;}
	header #header .left { left: 0; position: absolute; top : 0px; display: flex; align-items: center;}
	header #header .left p {text-align: left; color : #705C69; line-height: 20px; font-weight: 100; }
	header #header .right {right: 0;  position: absolute;   top : 10px; display: flex; }
	header #header .right>li{transform : skew(-0.1deg);}
	header #header .right>li>a{color : #999; margin-left : 22px; font-size : 14px;}
	header #header .right>li>a:after{content:''; position: absolute; width : 1px; height: 70%; top : 15%; right : -11px; background-color: #e1e1e1;}
	header #header .right>li:last-child>a:after{display: none;}
	header #header .right>li>a>i{color : #e2a7a9; margin-right : 8px; cursor: pointer; display: inline-block;}
	
	header #header .mobile_btn{display: none;}
	header #header .mobile_btn{width : 30px; height: 30px; position: absolute; right : 20px; top : 5px; }
	header #header .mobile_btn span {width : 80%; height: 3px; margin :  5px auto; background-color: #315eab; display: block; transition : 0.3s ease-out;}
	header #header .mobile_btn.active span:nth-child(1) {-webkit-transform: translateY(11px) rotate(-45deg);transform: translateY(11px) rotate(-45deg);}
	header #header .mobile_btn.active span:nth-child(2) {width : 0%; transition : 0.1s ease-out; opacity: 0;}
	header #header .mobile_btn.active span:nth-child(3) {-webkit-transform: translateY(-5px) rotate(47deg);transform: translateY(-5px) rotate(47deg);}
	
	
	
	

	header nav{background-color: #fff; position: relative; }
	header nav .gnb_wrapper{}
	header nav .gnb_wrapper>ul{display: flex; }
	header nav .gnb_wrapper>ul>li{width : 25%; text-align: center;padding : 40px 0px 30px; border-right : solid 1px #fff; position: relative; line-height: 1;}
	header nav .gnb_wrapper>ul>li:first-child{border-left: solid 1px #fff;}
	header nav .gnb_wrapper>ul>li>a{color : #705C69; font-size : 19px;}
	header nav .gnb_wrapper>ul>li>a.active{font-weight: 500; color : #000;}
	header nav .gnb_wrapper>ul>li>ul{position: absolute; width : calc(100% + 1px); left : 0; top : 89px; z-index: 99999; transition : 0.3s ease-out; opacity: 0; visibility: hidden;}
	header nav .gnb_wrapper>ul>li>ul>li{margin : 30px 0px;}
	header nav .gnb_wrapper>ul>li>ul>li>a{color : #717171; }
	header nav .gnb_wrapper>ul>li>ul>li>a:hover{color : #000; font-weight: bold;}
	header nav .gnb_wrapper>ul>li:hover>a{color :#de5c4a;}
	header nav .gnb_wrapper>ul>li:hover>ul{background-color: #fefefe; visibility: visible; opacity: 1;}
	

	header .menu_btn{display: none;}
	header nav.mobile_gnb{display: none;}
	

	.title_img_container{height: 270px; background-repeat: no-repeat; background-position: center; background-size: cover; color : #fff; z-index: 99999; margin-bottom : 33px;}
	.title_img_container .inner {position: relative; text-align: center; height: 100%;}
	.title_img_container .inner>h2{font-size : 45px;margin : 0 auto; display: flex; align-items: center; justify-content: center; height: 100%; position: relative;} 
	.title_img_container .inner>h2 span {position:absolute; display: block; transition : 0.5s ease;} 
	.title_img_container .inner>h2 .parent{transform : scale(0.6); top:80px; text-transform: uppercase;  padding-top : 20px;} 
	.title_img_container .inner>h2 .parent.active{transform : scale(0.5); padding-bottom : 10px; top : 40px; padding-top : 10px;} 
	.title_img_container .inner>h2 .child{opacity: 0; visibility: hidden; transition-delay : 0.4s; padding-top : 20px;} 
	.title_img_container .inner>h2 .child.active{opacity: 1; visibility: visible; padding-top : 0px;} 
	.title_img_container .inner>div{position: absolute; margin : 0 auto; width : 100%; background-color: #fff; color : #000; top : 238px; left : 0; right : 0; z-index : 99999;}
	.title_img_container .inner>div .location {display: flex; height: 65px; border : solid 1px #e1e1e1;}
	.title_img_container .inner>div .location>a{width : 20%; color : #000; display: flex; align-items: center; justify-content: center; border-right : solid 1px #e1e1e1;}
	.title_img_container .inner>div .location>a:hover{background-color: #f8f8f8;}
	.title_img_container .inner>div .location>span{width : 40%;}
	.title_img_container .inner>div .location>span>button{ height: 100%; display: flex; align-items: center; justify-content: center;  position: relative; background-color: transparent; border: none;margin : 0; width : 100%; justify-content: flex-start; padding : 0px 0px 0px 40px; border-right : solid 1px #e1e1e1;}
	.title_img_container .inner>div .location>span>button:hover{background-color: #f8f8f8;}
	.title_img_container .inner>div .location>span>button>i{position:absolute; height: 100%; display: flex; align-items: center; right : 20px; font-size : 1.1em; top : 0;}
	.title_img_container .inner>div .location>span>ul{ display: none; background-color: #fff;}
	.title_img_container .inner>div .location>span>ul>li{ height: 65px;  position: relative; border : solid 1px #e1e1e1; border-top-width : 0px;}
	.title_img_container .inner>div .location>span>ul>li:hover{background-color: #f8f8f8;}
	.title_img_container .inner>div .location>span>ul>li:first-child{border-top-width : 1px;}
	.title_img_container .inner>div .location>span>ul>li>a{width : 100%; height: 100%; padding :  0px 70px 0px 40px; display: flex; align-items: center; justify-content: flex-start; }
	.title_img_container .inner>div .location>span:last-child>button{border-right : none;}
	
@media all and (max-width:1280px){
	header #header .left{padding-left : 20px;}
	header #header .right{padding-right : 20px;}

}
@media all and (max-width:980px){
	
	header{position: relative;}
	
	header #header{padding : 10px 0px; height: 60px; position: relative; background-color: #fff;}
	header #header .inner {text-align: left;}
	header #header .inner>a{display: inline-block;}
	header #header .inner>a>img{width : 191px;}
	header #header .left{display: none;}
	header #header .right{display: none;}

	header #header .menu_btn{display: block;}
	header .menu_btn {display:block; position: absolute; top : 17px; right : 15px;}
	header .menu_btn .bars{width : 30px;padding-top : 3px;}
	header .menu_btn .bars span { width : 90%; height: 2px; margin :  4px auto; background-color: #de5a48; display: block; transition : 0.3s ease-out; border-radius: 5px;}
	header .menu_btn.active .bars span {} 
	header .menu_btn.active .bars span:nth-child(1) {transform: translateY(7px) rotate(-45deg);}
	header .menu_btn.active .bars span:nth-child(2) {width : 0%; transition : 0.1s ease-out; opacity: 0;}
	header .menu_btn.active .bars span:nth-child(3) {transform: translateY(-5px) rotate(45deg);}
	
	header nav.gnb{display: none;}
	header nav.mobile_gnb{display: block;}
	header nav.active .gnb_back{display: none;}
	
	.mobile_gnb{position: absolute; width : 300px; right : -300px; z-index: 99999; top : 60px; transition : 0.5s ease;}
	.mobile_gnb .inner {padding : 0;}
	.mobile_gnb_wrapper{position: relative; z-index: 99999; background-color: #fff; height: 100vh; overflow-y: auto;}
	.mobile_gnb_bg{position: absolute; z-index: 99998; top : 60px; right : 0; width : 100%; background-color: rgba(0,0,0,0.75); height: 100vh; opacity: 0; visibility: hidden; transition : 0.5s ease;}	

	.mobile_gnb.active{right : 0px;}
	.mobile_gnb_bg.active{opacity: 1; visibility: visible;}	
	
	.mobile_gnb_wrapper{}
	.mobile_gnb_wrapper>ul{}
	.mobile_gnb_wrapper>ul>li{ }
	.mobile_gnb_wrapper>ul>li>a{padding : 14px 10px 14px 20px; display: block; font-weight: bold; transform : skew(-0.1deg); border-bottom : solid 1px #e2e2e2;}
	.mobile_gnb_wrapper>ul>li>ul{height: 100%; max-height: 0px; overflow: hidden; background-color: #f7f7f7; transition : 0.5s ease-out;}
	.mobile_gnb_wrapper>ul>li.active>ul{max-height: 500px;border-bottom : solid 1px #e4e4e4;}
	.mobile_gnb_wrapper>ul>li>ul>li{padding-left : 10px;}
	.mobile_gnb_wrapper>ul>li>ul>li>a{display: block; padding : 14px 10px 14px 20px; position: relative; color : #222; transform : skew(-0.1deg);}
	.mobile_gnb_wrapper>ul>li>ul>li>a:after{position: absolute; content:''; width : 3px; height: 3px; border-radius: 100%; background-color: #adadad; top : 21px; left : 8px;}
	.mobile_gnb_wrapper .member_box {background-color: #315eab; padding : 17px 20px;  text-align: center;}
	.mobile_gnb_wrapper .member_box a{padding : 3px 5px; border : solid 1px #f1f1f1; color : #f1f1f1; display: inline-block; width : 83px; text-align: center;}
	.mobile_gnb_wrapper .customer_box {margin : 20px; padding : 10px 7px; border : solid 1px #ccc; text-align: center; margin-bottom : 200px;}
	.mobile_gnb_wrapper .customer_box p{font-size : 15px; margin-bottom : 8px; color : #a2a2a2; font-weight: 600;}
	.mobile_gnb_wrapper .customer_box a{font-size : 22px; color : #315eab; font-weight: 900;}
	.mobile_gnb_wrapper .customer_box ul{text-align: left; font-size : 13px;margin-top : 7px; transform : skew(-0.1deg); color : #000;}
	.mobile_gnb_wrapper .customer_box ul li{margin-top : 3px;}
	


	.title_img_container{height: 300px;}
	.title_img_container .inner>h2{font-size : 30px;}
	.title_img_container .inner>div {top : auto; bottom : 0px;}
	.title_img_container .inner>div .location>span{min-width : auto; width : calc(50% - 45px);}
	.title_img_container .inner>div .location>span>button{padding : 0px 0px 0px 20px;}
	.title_img_container .inner>div .location>span>ul>li{padding : 0px 0px 0px 40px;}
	
}

@media all and (max-width:600px){
	.title_img_container{height: 180px;}
	.title_img_container .inner>h2{font-size : 20px; top : 50px;}
	.title_img_container .inner>div .location{height: 50px}
	.title_img_container .inner>div .location>span>ul>li{height: 50px;}
	.title_img_container .inner>div .location>a{padding : 0; width : 0; overflow: hidden;}
	.title_img_container .inner>div .location>span{width : 50%;}
	.title_img_container .inner>div .location>span>ul>li{padding : 0px 15px; font-size : 13px; transform:skew(-0.1deg);}
	.title_img_container .inner>div .location>span>button {font-size : 13px; padding : 0 0 0 15px; letter-spacing: -1px;}
	.title_img_container .inner>div .location>span>button>i {right : 15px;}
	

}