@charset "utf-8";

@import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css');

@font-face {
    font-family: 'RiaSans-ExtraBold';
    src: url('https://cdn.jsdelivr.net/gh/fontbee/font@main/LOTTE/RiaSans-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'RiaSans-Bold';
    src: url('https://cdn.jsdelivr.net/gh/fontbee/font@main/LOTTE/RiaSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'RiaSans-Regular';
    src: url('https://cdn.jsdelivr.net/gh/fontbee/font@main/LOTTE/RiaSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('//cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('//cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('//cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('//cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('//cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('//cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('//cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}

html{}
html,body { font-family:'Pretendard','Noto Sans KR', "Apple SD Gothic Neo", "Malgun Gothic", Sans-serif; }
body {overflow-y:visible;overflow-x:auto;}
#doc {position:relative;min-width:360px; overflow:hidden;opacity:0; z-index:2000;-webkit-transition: opacity 0.4s ease-out;-moz-transition: opacity 0.4s ease-out;-o-transition: opacity 0.4s ease-out;transition: opacity 0.4s ease-out;}
#doc.show{ transition-delay:0s; opacity:1;}
	@media only screen and (max-width:1200px){
		
	}
	@media only screen and (max-width:999px) {
		html.has-scroll-smooth{backface-visibility: hidden; /* transform: translateZ(0); */}
	}
	@media only screen and (max-width:680px){
		
	}
	@media only screen and (max-width:480px){
		
	}	
	

/*=======================================================
  css default
=========================================================*/
.div-cont {position:relative;text-align:left;margin:0 auto 0px auto; max-width:1520px; padding:0 20px; box-sizing:border-box;}
.sub .div-cont {position:relative;text-align:left;margin:0 auto 0px auto; max-width:1280px; padding:0 20px; box-sizing:border-box;}
.div-cont:after {clear:both;content:"";display:block;}
	@media only screen and (max-width:1240px){
		
	}
	@media only screen and (max-width:999px){
		
	}
	@media only screen and (max-width:680px){
		.div-cont{padding:0 15px;}
	}
	@media only screen and (max-width:480px){
		
	}

.body-slide-wr{position:relative;width:100%;transition:margin 0.3s ease;}
.body-slider-ovclick{position:fixed;z-index:2600;width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,0.65);cursor:pointer }
.header-dim{position:fixed;z-index:600;width:100%;height:calc(100% - 100px);left:0;top:100px;background:rgba(0,0,0,0.15);cursor:pointer }
.header-slider-ovclick{position:fixed;z-index:2010;width:100%;height:100%;/* height:calc(100% - 60px) */;left:0;top:0;background:rgba(0,0,0,0.65);cursor:pointer }
	@media only screen and (min-width:1201px){
		.header-slider-ovclick{display:none !important}
	}


/*=======================================================
    z-index default
=========================================================*/
#header-wrap{position:fixed;z-index:5505;}
#container-wrap{position:relative;z-index:1005;}
#footer-wrap{position:relative;z-index:1007; }


/*=======================================================
    #header-wrap 
=========================================================*/
#header-wrap {left:0; width:100%; top:0px; min-width:360px; -webkit-transition: top 1s ease-in-out;-moz-transition: top 1s ease-in-out;-o-transition: top 1s ease-in-out;transition: top 1s ease-in-out}
.show #header-wrap{top:0;}
#header-wrap:after{position:absolute;left:50%; top:0; width:20000px;background:#fff;margin-left:-10000px;height:100%; box-sizing:border-box;z-index:605;border-bottom:0px solid #e5e5e5;display:none; content:"";-webkit-transition:box-shadow 0.5s ease-in-outt;-moz-transition:box-shadow 0.5s ease-in-out;-o-transition:box-shadow 0.5s ease-in-out;transition: box-shadow 0.5s ease-in-out;}
#header-wrap.fix:after{-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.04);-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.04);box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.04);}

#header{position:relative; z-index:5001; min-width:360px;  position:relative; margin:0 auto; padding:0 20px; box-sizing:border-box; height:100px;}

#logo{position:absolute; left:70px; top:36px; width:270px; height:25px; z-index:2009;}
#logo a{display:block; height:25px;background:url(../img/logo.png) no-repeat left center; background-size:100% auto}
	@media only screen and (max-width:1520px) {	
		
		#logo{width:180px;}
	}
	@media only screen and (max-width:1380px) {	
		
		#logo{width:160px;}
	}
	@media only screen and (max-width:1185px) {
		#header-wrap:after{display:block;-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.04);-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.04);box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.04);}
		#header{height:65px;}
		#header .bt-mnall{display:block;}
		#header .bt-allmenu{display:none;}

		#logo{width:270px; height:25px; top:20px; left:20px; }
		#logo a{height:25px;}
	}
	@media only screen and (max-width:999px) {
		#logo{width:200px;}
	}
	@media only screen and (max-width:680px) {
		#logo{left:15px}		
	}


#header .bt-mnall{position:absolute;z-index:2599; width:30px; height:30px; top:50%;margin-top:-15px; right:17px; display:none;}
#header .bt-mnall .bar{position:absolute;left:3px;width:24px;height:1px;background:#111}
#header .bt-mnall .bar.no1{top:6px}
#header .bt-mnall .bar.no2{top:14px}
#header .bt-mnall .bar.no3{top:22px}
#header .bt-mnall .bar.no1, #header .bt-mnall .bar.no3{transition:transform .3s ease;-webkit-transition:transform .3s ease}
#header .bt-mnall .bar.no2{transition:left .3s ease, opacity .3s;-webkit-transition:left .3s ease, opacity .3s}
#header .bt-mnall.active .bar.no1{left:3px;transform:translateY(8px) rotate(45deg);-webkit-transform:translateY(8px) rotate(45deg)}
#header .bt-mnall.active .bar.no2{left:-10px;opacity:0;filter:alpha(opacity=0)}
#header .bt-mnall.active .bar.no3{left:3px;transform:translateY(-8px) rotate(-45deg);-webkit-transform:translateY(-8px) rotate(-45deg)}

#header .bt-mnall:hover .bar.no1 {-webkit-animation: line-animate .6s forwards;animation: line-animate .6s forwards}
#header .bt-mnall:hover .bar.no2 {-webkit-animation: line-animate .6s .2s forwards; animation: line-animate .6s .2s forwards}
#header .bt-mnall:hover .bar.no3 {-webkit-animation: line-animate .6s .4s forwards; animation: line-animate .6s .4s forwards}

#header .bt-mnclose {position:absolute;display:none;z-index:2599; width:65px; height:65px; background:url(../img/layout/bt-mnclosew.png) no-repeat center center #343434; background-size:22px auto;right:0; top:0;}

#header .bt-allmenu{position:absolute;z-index:2599; width:30px; height:30px; top:50%;margin-top:-15px; right:25px;}
#header .bt-allmenu .bar{position:absolute;left:3px;width:24px;height:1px;background:#111;}
#header .bt-allmenu .bar.no1{top:6px}
#header .bt-allmenu .bar.no2{top:14px}
#header .bt-allmenu .bar.no3{top:22px}
#header .bt-allmenu .bar.no1, #header .bt-allmenu .bar.no3{transition:transform .3s ease;-webkit-transition:transform .3s ease}
#header .bt-allmenu .bar.no2{transition:left .3s ease, opacity .3s;-webkit-transition:left .3s ease, opacity .3s}
#header .bt-allmenu.active .bar.no1{left:3px;transform:translateY(8px) rotate(45deg);-webkit-transform:translateY(8px) rotate(45deg)}
#header .bt-allmenu.active .bar.no2{left:-10px;opacity:0;filter:alpha(opacity=0)}
#header .bt-allmenu.active .bar.no3{left:3px;transform:translateY(-8px) rotate(-45deg);-webkit-transform:translateY(-8px) rotate(-45deg)}

#header .bt-allmenu:hover .bar:before{left:0;}
#header .bt-allmenu:hover .bar:after{left:100%;}

#header .bt-allmenu:hover .bar.no1 {-webkit-animation: line-animate .6s forwards;animation: line-animate .6s forwards}
#header .bt-allmenu:hover .bar.no2 {-webkit-animation: line-animate .6s .2s forwards; animation: line-animate .6s .2s forwards}
#header .bt-allmenu:hover .bar.no3 {-webkit-animation: line-animate .6s .4s forwards; animation: line-animate .6s .4s forwards}
	@media only screen and (max-width:1520px) {	
		
		
	}
	@media only screen and (min-width:1185px) and (max-width:1400px){
		
	}
	@media only screen and (max-width:1185px) {
		#header .bt-mnall{display:block;}
		#header .bt-allmenu{display:none;}
	}
	@media only screen and (max-width:999px) {
	
		
		
	}
	@media only screen and (max-width:680px) {
		#header .bt-mnall{right:15px}
	}
	@media only screen and (max-width:480px) {
		
	}


#header .member {position:absolute;z-index:2599; right:90px; top:40px; height:30px; }
#header .member ul{}
#header .member ul:after{display:block; content:"";clear:both}
#header .member li{float:left;}
#header .member li:nth-child(n+2){margin-left:25px;}
#header .member li a{ color:#111;  font-weight:400; font-size:14px; text-transform:uppercase; display:block; position:relative;}
#header .member li a:after {content:'';position:absolute;bottom:-3px;left:0;width:100%;height:0;border-bottom:1px solid #23b57c;opacity:0;-webkit-transform:scaleX(0);-moz-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:100% 50%;-moz-transform-origin:100% 50%;transform-origin:100% 50%;-webkit-transition:-webkit-transform .3s cubic-bezier(.77,0,.175,1),opacity .5s;-moz-transition:-moz-transform .3s cubic-bezier(.77,0,.175,1),opacity .5s;transition:transform .3s cubic-bezier(.77,0,.175,1),opacity .5s}
#header .member li a:hover:after {color:#23b57c;  opacity:1;-webkit-transform-origin:0 50%;-moz-transform-origin:0 50%;transform-origin:0 50%;-webkit-transform:scaleX(1);-moz-transform:scaleX(1); transform:scaleX(1);-webkit-transition:-webkit-transform .3s cubic-bezier(.77,0,.175,1),opacity .3s; -moz-transition:-moz-transform .3s cubic-bezier(.77,0,.175,1),opacity .3s;transition:transform .3s cubic-bezier(.77,0,.175,1),opacity .3s}
	
.fix #header .member li a,.isOver #header .member li a{color:#111}
	@media only screen and (max-width:1640px) {	
		#header .member {right:85px;}
		#header .member li:nth-child(n+2){margin-left:20px;}
		#header .member li a{ font-size:13px;}
	}
	@media only screen and (max-width:1480px) {
		
	}
	@media only screen and (max-width:1280px) {
		
	}
	@media only screen and (max-width:1185px) {
		#header .member {display:none;}
	}
	@media only screen and (max-width:999px) {
		
	}
	@media only screen and (max-width:680px) {
		
	}
	@media only screen and (max-width:480px) {
		
	}

	
#allmenu-wrap{position:fixed; top:0;left:0;overflow:hidden; display:none; z-index:3005; padding-right:80px; width:100%;height:100%; min-width:1200px; box-sizing:border-box; background:rgba(255,255,255,0.97)}	
#allmenu-wrap:after{display:block; content:"";clear:both;}

#allmenu-wrap .close{position: absolute;top: 40px;right: 30px;width: 36px;height: 36px;display: block;z-index: 100;}
#allmenu-wrap .close:before,
#allmenu-wrap .close:after{display:block;content:"";position: absolute;top: -6px;left: 17px;width: 1px;height: 48px;transform: rotate(45deg);background: #fff;}
#allmenu-wrap .close:after{transform: rotate(-45deg);}

#allmenu-wrap .allmenu{width:71.875%; position:absolute; left:0; top:0; height:100%;  display:flex;align-items: center; justify-content: center;}
#allmenu-wrap .allmenu .cont{ width:100%; box-sizing:border-box; padding:0 7%}
#allmenu-wrap .rinfo{ width:28.125%; position:absolute;right:0; top:0; height:100%; box-sizing:border-box; padding:230px 70px;background:url(../img/layout/allmenu-bg.jpg) no-repeat center center; background-size:cover;}

#allmenu-wrap .allmenu ul{position:relative;display:flex;display:-webkit-flex;  flex-wrap:wrap;  -webkit-flex-wrap:wrap;}
#allmenu-wrap .allmenu ul:after{display:block; content:"";clear:both;}
#allmenu-wrap .allmenu li.mn_l1{position:relative; box-sizing:Border-box; width:33.33333%; padding-left:180px;float:left;display:flex; display:-webkit-flex;}
#allmenu-wrap .allmenu li.mn_l1:nth-child(3){padding-left:180px;}
#allmenu-wrap .allmenu li.mn_l1:nth-child(n+4){margin-top:80px;}
#allmenu-wrap .allmenu li .vc{width:100%; box-sizing:border-box; padding:0 0 0 0;}
#allmenu-wrap .allmenu li .mn_a1 {display:block;font-size:26px;font-weight:600; text-transform:uppercase; line-height:1.3em; color:#000; letter-spacing:-0.02em;padding:0; position:Absolute; left:0; top:0; width:130px;}
#allmenu-wrap .allmenu li .mn_a1 span{display:inline-block;vertical-align:top; position:relative;}


#allmenu-wrap .allmenu li .depth2-wrap{}
#allmenu-wrap .allmenu li .depth2{padding:0; display:block;}
#allmenu-wrap .allmenu li.mn_l2:nth-child(n+2){margin-top:10px;}
#allmenu-wrap .allmenu li .mn_a2{display:block;font-size:17px;font-weight:300; text-transform:uppercase;line-height:1.2em; color:#111; letter-spacing:-0.02em; padding:5px 0 5px 0; position:relative;}
#allmenu-wrap .allmenu li .mn_a2:hover{color:#23b57c; text-decoration:underline}

#allmenu-wrap .rinfo ul{}
#allmenu-wrap .rinfo li{color:#fff; opacity:0;-webkit-transform: translateY(10%); -moz-transform: translateY(10%);-ms-transform: translateY(10%); -o-transform:  translateY(10%);transform: translateY(10%);-webkit-transition: transform 0.5s ease-in-out ,  opacity 0.5s ease-in-out;-moz-transition: transform 0.5s ease-in-out ,  opacity 0.5s ease-in-out;-o-transition: transform 0.5s ease-in-out ,  opacity 0.5s ease-in-out;transition: transform 0.5s ease-in-out ,  opacity 0.5s ease-in-out;}
#allmenu-wrap .rinfo li:nth-child(n+2){margin-top:55px;}
#allmenu-wrap .rinfo li .btxt{font-size:19px; font-weight:600; letter-spacing:-0.03em; line-height:1.3em;}
#allmenu-wrap .rinfo li .stxt{font-size:18px; font-weight:300; letter-spacing:0; line-height:1.5em; margin-top:15px;}

#allmenu-wrap.open .rinfo.ani li{opacity:1;-webkit-transform: translateY(0); -moz-transform: translateY(0);-ms-transform: translateY(0); -o-transform:  translateY(0);transform: translateY(0);}
#allmenu-wrap.open .rinfo.ani li:nth-child(1){transition-delay: 0.3s;}
#allmenu-wrap.open .rinfo.ani li:nth-child(2){transition-delay: 0.6s;}
#allmenu-wrap.open .rinfo.ani li:nth-child(3){transition-delay: 0.9s;}
	@media only screen and (max-width:1520px) {	
		#allmenu-wrap .close{width:30px; height:30px; right:30px; top:35px;}
		#allmenu-wrap .close:before, #allmenu-wrap .close:after{height:42px}

		#allmenu-wrap .allmenu .cont{padding:0 6%}
		#allmenu-wrap .allmenu li.mn_l1{padding-left:170px;}
		#allmenu-wrap .allmenu li.mn_l1:nth-child(3){padding-left:210px;}
		#allmenu-wrap .allmenu li.mn_l1:nth-child(n+4){margin-top:60px;}
		#allmenu-wrap .allmenu li.mn_l2:nth-child(n+2){margin-top:7px;}
		#allmenu-wrap .allmenu li .mn_a1{font-size:23px}
		#allmenu-wrap .allmenu li .mn_a2{font-size:15px;}
		
		#allmenu-wrap .rinfo{ padding:130px 60px}
		#allmenu-wrap .rinfo li:nth-child(n+2){margin-top:45px;}
		#allmenu-wrap .rinfo li .btxt{font-size:17px;}
		#allmenu-wrap .rinfo li .stxt{font-size:16px; margin-top:12px;}
	}
	@media only screen and (max-width:1400px) {
		#allmenu-wrap .close{width:26px; height:26px; right:30px; top:30px;}
		#allmenu-wrap .close:before, #allmenu-wrap .close:after{height:38px}

		#allmenu-wrap .allmenu li.mn_l1{width:55%;}
		#allmenu-wrap .allmenu li.mn_l1:nth-child(3){padding-left:170px;}
		#allmenu-wrap .allmenu li.mn_l1:nth-child(even){width:45%;}
		#allmenu-wrap .allmenu li.mn_l1:nth-child(n+3){margin-top:40px;}
		#allmenu-wrap .allmenu li .mn_a1{font-size:20px}
		#allmenu-wrap .allmenu li .mn_a2{font-size:15px;}
		
		#allmenu-wrap .rinfo{ padding:130px 50px}
		#allmenu-wrap .rinfo li:nth-child(n+2){margin-top:35px;}
		#allmenu-wrap .rinfo li .btxt{font-size:16px;}
		#allmenu-wrap .rinfo li .stxt{font-size:15px;}
	}
	@media only screen and (max-width:1280px) {
		
	}
	@media only screen and (max-width:1185px) {
		#allmenu-wrap{display:none !Important;}
	}
	@media only screen and (max-width:999px) {
		
	}
	@media only screen and (max-width:680px) {
		
	}
	@media only screen and (max-width:480px) {
		
	}

	/*=======================================================
		#mainNavi-wrap 
	=========================================================*/
	@media only screen and (min-width:1185px){
		#header .bt-mnall, #header .bt-mnclose{display:none !important;}
		#header .bt-mnall{display:none;}
		#mainNavi-wrap {height:100px;overflow:hidden;position:absolute;left:0;top:0;width:100%;display:block;z-index:2007; text-align:center;}

		#mainNavi-wrap .tmn-tit {display:none;}

		#mainNav {position:relative;}
		.tm-top{display:none}
		
		.topmenu {display:inline-block;position:relative;text-align:center;vertical-align:top; font-size:0;}
		.topmenu:after {display:block;content:"";clear:both;}
		.topmenu .tgl-btn {display:none;}
		.topmenu .mn_l1 {display:inline-block;vertical-align:top;position:relative;}
		.topmenu .mn_a1 {font-size:20px;line-height:100px;display:block;color:#242424; padding-right:120px;text-align:left;font-weight:700; letter-spacing:-0.05em; /*text-transform:uppercase;*/ position:relative; z-index:14;box-sizing:border-box;}
		.topmenu .mn_a1 span:before{width:0;left:0; height:3px; background:#23b57c; display:block; content:""; position:absolute; bottom:17px;-webkit-transition: width 1s ease-in-out;-moz-transition:width 1s ease-in-out;-o-transition: width 1s ease-in-out;transition: width 1s ease-in-out;} 
		.topmenu .mn_a1 span{position:relative;display: inline-block; transition: transform 1s ease ;}
		
		.topmenu .mn_a1:hover span:before{width:100%;}
		.topmenu .mn_l1:first-child{margin-left:120px;}
		.topmenu .mn_l1:last-child .mn_a1{padding-right:0;}
		.topmenu .is-open .mn_a1, .topmenu .is-over .mn_a1, .topmenu .over .mn_a1{color:#23b57c}

		.topmenu .mn_l1:nth-child(1) .mn_a1 span{transform: translateX(45px);}
		.topmenu .mn_l1:nth-child(2) .mn_a1 span{transform: translateX(20px);}
		.topmenu .mn_l1:nth-child(3) .mn_a1 span{transform: translateX(-15px);}
		.topmenu .mn_l1:nth-child(4) .mn_a1 span{transform: translateX(-45px);}
		.topmenu .mn_l1:nth-child(5) .mn_a1 span{transform: translateX(-65px);}
		.topmenu .mn_l1:nth-child(6) .mn_a1 span{transform: translateX(-85px);}
		
		.isOver .topmenu .mn_a1 span{transform: translateX(0) !important;}

		.topmenu .mn_l1.is-open .depth2-wrap{}
		.topmenu .depth2-wrap {position:absolute;top:90px;display:none;visibility:hidden;padding:0;  min-width:150px;width:100% !important;visibility: visible !important; opacity: 1 !important; display: block !important;}
		.topmenu .depth2 {position:relative;height:auto;padding:10px 0px;min-height:200px; box-sizing:border-box; z-index:2;}
		.topmenu .depth2 li{}
		.topmenu .depth2 .mn_l2 {text-align:left;}
		.topmenu .depth2 .mn_a2 {line-height:1.2em;padding:5px 0 5px 0; display:block;}
		.topmenu .depth2 .mn_a2 span {display:inline-block;line-height:1.2em ; padding:2px 2px;text-transform:uppercase; position:relative;font-weight:400; font-size:16px;letter-spacing:-0.03em;color:#414a4f; position:relative; -webkit-transition: color 0.4s ease-in-out;-moz-transition: color 0.4s ease-in-out;-o-transition: color 0.4s ease-in-out;transition: color 0.4s ease-in-out;}
		.topmenu .depth2 .mn_a2:hover span {color:#23b57c !important; }


		#mainNavi-wrap .ovbar {position:absolute;height:2px;top:93px;overflow:hidden; opacity:0; display:none !Important;}
		#mainNavi-wrap .ovbar:after {position:absolute;bottom:0;left:0;background:#23b57c; height:2px;content:"";display:block;z-index:200; width:100%;-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
		#header-wrap.isOver #mainNavi-wrap .ovbar, #header-wrap.fix #mainNavi-wrap .ovbar{opacity:1}
		#header-wrap.over #mainNavi-wrap .ovbar{opacity:1}

		.tm-language, .tm-link{display:none;}
		
		.mn-bar{position:absolute;left:50%; top:0; width:20000px;background:#fff;margin-left:-10000px;height:100px; box-sizing:border-box;z-index:605;border-bottom:0px solid #e5e5e5;-webkit-transition:box-shadow 0.5s ease-in-out;-moz-transition:box-shadow 0.5s ease-in-out;-o-transition:box-shadow 0.5s ease-in-out;transition: box-shadow 0.5s ease-in-out;display:block; content:"";}
		.isOver .mn-bar{-webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.04);-moz-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.04);box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.04);}
		
	}

	@media only screen and (min-width:1320px) and (max-width:1520px){
		.topmenu .mn_a1 {font-size:18px; padding-right:85px;}
		.topmenu .depth2 .mn_a2 span{font-size:15px;}
		.topmenu .depth2 {min-height:190px;}
	}
	@media only screen and (min-width:1185px) and (max-width:1320px){	
		.topmenu .mn_a1 {font-size:17px; padding-right:80px;}
		.topmenu .depth2 .mn_a2 span{font-size:14px;}
		.topmenu .depth2 {min-height:180px;}
	}
	

	@media only screen and (max-width:1185px) {
		#header-wrap .mn-bg {display:none;}
		#mainNavi-wrap{position:relative; z-index:4300; text-align:left; height:0 !Important}
		#mainNavi {position:fixed;background:#fff;transition:right 0.3s ease;z-index:7000;right:-290px;min-width:290px;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;top:0;width:290px;height:100%; padding-bottom:60px; min-height:480px;-webkit-transition: right 0.3s ease-out;-moz-transition: right 0.3s ease-out;-o-transition: right 0.3s ease-out;	transition: right 0.3s ease-out;}
		#mainNavi.mn-h-open {right:0;}

		.tm-top{ height:65px; background:url(../img/logo.png) no-repeat 20px center #f5f5f5; background-size:170px auto;box-sizing:border-box; border-bottom:1px solid #dedede }
	
		.topmenu {width:100%;display:block;position:absolute; left:0; top:65px; height:calc(100% - 65px);overflow-y:auto;z-index:141;padding:20px; box-sizing:border-box;}
		.topmenu:after {display:block;content:"";clear:both;}
		.topmenu li {line-height:1.3em;position:relative;text-transform:uppercase}
		.topmenu .mn_l1:first-child{margin-left:0;}
		.topmenu a {position:relative;}
		.topmenu .mn-txt{display:none;}

		.topmenu .has-sub .tgl-btn {padding:0;display:block;width:20px;height:20px;position:absolute;right:5px;top:8px;border:0;z-index:102;text-indent:-9999em;background:transparent;}
		.topmenu .has-sub .tgl-btn:before {content:'';position:absolute;left:0;top:50%;width:11px;height:1px;background:#555;transform: rotate(45deg);-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
		.topmenu .has-sub .tgl-btn:after {content:'';position:absolute;right:0;top:50%;width:12px;height:1px;background:#555;transform: rotate(-45deg);-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
		.topmenu .mn_l1 > .tgl-btn {right:12px;top:16px;}
		.topmenu .mn_l1.is-open > .tgl-btn:before, .topmenu .mn_l1.over > .tgl-btn:before{background:#555;left:0;transform: rotate(-45deg);}
		.topmenu .mn_l1.is-open > .tgl-btn:after, .topmenu .mn_l1.over > .tgl-btn:after{background:#555;right:0;transform: rotate(45deg);}
	
		.topmenu .mn_l2 > .tgl-btn {width:16px;height:16px;right:12px;top:16px;}
		.topmenu .mn_l2 > .tgl-btn:before, .topmenu .mn_l2 > .tgl-btn:after {height:1px;}
		.topmenu .mn_l2.is-open > .tgl-btn:before, .topmenu .mn_l2.over > .tgl-btn:before {transform: rotate(0);}
		.topmenu .mn_l2.is-open > .tgl-btn:after, .topmenu .mn_l2.over > .tgl-btn:after {transform: rotate(0);}

		.topmenu .mn_a1 {position:relative;display:block;padding:17px 30px 17px 10px;overflow:hidden;font-size:17px;font-weight:600;letter-spacing:-0.02em;white-space:normal;cursor:pointer;color:#000; z-index:101}
		.topmenu .over .mn_a1, .topmenu .is-open .mn_a1{color:#23b57c;}


		.topmenu li > div {display:none; opacity:0;}
		.topmenu .depth2-wrap {position:relative; width:auto !important}
		.topmenu .depth2 {position:relative;background:#f7f7f7;padding:15px 0;border-bottom:1px solid #ededed;border-top:1px solid #ededed;}
		.topmenu .depth2:after {clear:both;content:"";display:block}
		.topmenu .depth2 a {font-size:14px;line-height:1.3em;display:block;}
		.topmenu .depth2 .mn_l2:last-child{border-bottom:none}
		.topmenu .depth2 .mn_a2 {display:block;padding:5px 30px 5px 32px; position:relative;}
		.topmenu .depth2 .mn_a2:before{width:5px;height:0; position:Absolute; left:20px; top:14px; border-bottom:1px solid #666; display:block; content:""}
		.topmenu .depth2 .mn_a2 span.img{display:none;}
		.topmenu .depth2 .mn_a2 span {font-size:16px;font-weight:500;cursor:pointer;color:#000;}
		.topmenu .depth2 .mn_a2:hover span{color:#111} 
		
		.mn-bar {display:none;}
	}
	@media only screen and (max-width:680px){
		
	}
	
	

/* ======================================================
   #container-wrap 
=========================================================*/
#container-wrap{margin-top:100px;}
#container-wrap #contents{padding-top:0px; padding-bottom:0px;}
.sub #container-wrap #contents {padding-top:0px; padding-bottom:100px;}
	@media only screen and (max-width:1520px) {	
	
	}
	@media only screen and (max-width:1400px) {
		#container-wrap #contents{padding-top:30px;}
	}
	@media only screen and (max-width:1280px) {
		
	}
	@media only screen and (max-width:1185px) {
		#container-wrap #contents{padding-top:25px;}
		#container-wrap{margin-top:65px;}
	}
	@media only screen and (max-width:999px) {
		
	}
	@media only screen and (max-width:680px) {
		#container-wrap #contents{padding-top:20px; padding-bottom:30px;}
	}
	@media only screen and (max-width:480px) {
		
	}


/* ======================================================
   #top-vis
=========================================================*/

#top-vis{ position:relative; z-index:42; padding:0 70px;}
#top-vis .img{position:relative;overflow:hidden; z-index:1; border-radius: 30px;}
#top-vis .img .desktop{}
#top-vis .img .mobile{display:none;}

#top-vis .img img{width:100%; height:280px; object-fit:cover; /*transform:scale(1.35, 1.35); -webkit-transform:scale(1.3, 1.3); -moz-transform:scale(1.3, 1.3); -ms-transform:scale(1.3, 1.3);-webkit-transition: transform 3s ease-in-out;-moz-transition: transform 3s ease-in-out;-o-transition: transform 3s ease-in-out;transition: transform 3s ease-in-out;*/}
#top-vis.ani .img img{/*transform:scale(1,1); -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1);*/}
#top-vis .txt{position:absolute; bottom:110px; width:100%;max-width:1400px;text-align:center;box-sizing:border-box; padding:0 40px; z-index:12;left:50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%);-ms-transform: translateX(-50%); -o-transform:  translateX(-50%);transform: translateX(-50%);}
#top-vis .txt h2{font-size:40px; font-weight:700; letter-spacing:-0.03em ;line-height:1.2em; color:#fff;overflow:hidden;  font-family: 'RiaSans-Regular';}
#top-vis .txt p{font-size:18px; font-weight:400; letter-spacing:-0.03em ;line-height:1.2em; color:#fff;margin-top:10px;overflow:hidden; }

#top-vis .txt h2 span, #top-vis .txt p span{display:block;opacity:0; position:relative;-webkit-transform:translateY(100%);-moz-transform:translateY(100%); -ms-transform:translateY(100%);-o-transform:translateY(100%);-webkit-transition: opacity 0.5s ease-in-out, transform 1s ease-in-out;-moz-transition:opacity 0.5s ease-in-out, transform 1s ease-in-out;;-o-transition: opacity 0.5s ease-in-out, transform 1s ease-in-out;;transition: opacity 0.5s ease-in-out, transform 1s ease-in-out;}
#top-vis.ani .txt h2 span{transition-delay:0.3s; opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0); -ms-transform:translateY(0);-o-transform:translateY(0);}
#top-vis.ani .txt p span{transition-delay:0.6s; opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0); -ms-transform:translateY(0);-o-transform:translateY(0);}
	@media only screen and (max-width:1400px){
		#top-vis .txt{bottom:50px}
		#top-vis .txt h2{font-size:30px;}
		#top-vis .txt p{font-size:17px;}
		#top-vis .img img{height:200px}
	}
	@media only screen and (max-width:1200px){
		#top-vis{ padding:0 0px;}
		#top-vis .img{position:relative;overflow:hidden; z-index:1; border-radius: 0px;}
	}
	@media only screen and (max-width:999px){
		#top-vis .txt{text-align:center; padding: 0 20px; top:50%; margin-top:10px; bottom:auto; left:0;-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);-ms-transform: translateY(-50%); -o-transform:  translateY(-50%);transform: translateY(-50%);}
		#top-vis .txt h2{font-size:30px;}
		#top-vis .txt p{font-size:17px; margin-top:10px;}
		
		#top-vis .img img{height:200px}
		#top-vis .img:after{position:Absolute; left:0; top:0; width:100%;height:100%; background:rgba(0,0,0,0);display:block; content:""}
	}
	@media only screen and (max-width:680px){
		#top-vis .txt h2{font-size:30px;}
		#top-vis .txt p{font-size:14px;}

		#top-vis .img img{height:180px}
		#top-vis .img .desktop{display:none;}
		#top-vis .img .mobile{display:block;}

		#top-vis{padding:0 0px;}
		#top-vis .img{border-radius: 0px 0px 0px 0px;}
	}
	@media only screen and (max-width:480px){
		#top-vis .txt h2{font-size:24px;}
		#top-vis .img img{height:150px}

	}


/* ======================================================
    #snbNavi-wrap 
=========================================================*/
#snbNavi-wrap{ position:relative;z-index:1005;max-width:1100px; margin:0 auto;}	
#snbNavi-wrap.ani .snbNavi.desktop{transition-delay:0.2s;opacity:1;margin-left:0;}
#snbNavi-wrap.fix .snbNavi.desktop{top:0;}
#snbNavi-wrap.fix .snbNavi.desktop:before{width:1100px;}

#snbNavi-wrap.fix .snbNavi.desktop:after{width:10000px;height:100%;background:rgba(0,174,163,1); position:absolute;left:100px; top:0; display:block;content:"";z-index:-1;}
#snbNavi-wrap.fix .snbNavi.desktop:before{width:100%;height:100%; background:rgba(0,174,163,1); position:absolute;right:calc(100% - 100px); top:0; display:block;content:"";z-index:-1; border-top-left-radius:20px; -webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}


#snbNavi-wrap .snbNavi.desktop{position:absolute;left:50%; margin-left:-50px; top:-60px; max-width:1000px;width:100%; box-sizing:border-box; padding-left:0px;box-sizing:border-box; opacity:0; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%);-ms-transform: translateX(-50%); -o-transform:  translateX(-50%);transform: translateX(-50%);-webkit-transition: opacity 0.5s ease-in-out, margin-left 1s ease-in-out;-moz-transition:opacity 0.5s ease-in-out, margin-left 1s ease-in-out;;-o-transition: opacity 0.5s ease-in-out, margin-left 1s ease-in-out;;transition: opacity 0.5s ease-in-out, margin-left 1s ease-in-out;}
/*#snbNavi-wrap .snbNavi.desktop:after{width:10000px;height:100%;background:rgba(20,63,145,1); position:absolute;left:100px; top:0; display:block;content:"";z-index:-1;}
#snbNavi-wrap .snbNavi.desktop:before{width:100px;height:100%; background:rgba(20,63,145,1); position:absolute;right:calc(100% - 100px); top:0; display:block;content:"";z-index:-1; border-top-left-radius:20px; -webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}*/
#snbNavi-wrap .snbNavi.desktop .snb-slide{}
#snbNavi-wrap .snbNavi.desktop ul{}
#snbNavi-wrap .snbNavi.desktop li{float:left;width:25%;}
#snbNavi-wrap .snbNavi.desktop li a{display:block; font-size:17px; letter-spacing:-0.03em;color:#fff; position:Relative; line-height:60px;text-align:center; box-sizing:border-box; padding:0 5px; border-radius: 30px 30px 0 0; background:rgba(0,174,163,0.9);}
#snbNavi-wrap .snbNavi.desktop li.active a{background:#fff; color:#00aea3; font-weight:700;}
#snbNavi-wrap .snbNavi.desktop li a:after{background:#00aea3; position:Absolute; left:0 ;bottom:0 ;display:block;content:""; border-radius: 30px 30px 0 0; width:100%; height:0;}
#snbNavi-wrap .snbNavi.desktop li a:hover:after{ height:60px; z-index:-2;}
#snbNavi-wrap .snbNavi.desktop li a:hover{background:#cdf7f4; color:#00aea3;}

#snbNavi-wrap .snbNavi.desktop.w2p li {width:50%;}
#snbNavi-wrap .snbNavi.desktop.w3p li {width:33.33%;}
#snbNavi-wrap .snbNavi.desktop.w4p li {width:25%;}
#snbNavi-wrap .snbNavi.desktop.w5p li {width:20%;}

#snbNavi-wrap .snbNavi.mobile{display:none;position:relative; padding-left:60px; box-sizing:border-box;height:60px;}
#snbNavi-wrap .snbNavi.mobile:before{position:absolute;width:20000px; left:50%;margin-left:-10000px; top:0;height:100%; box-sizing:border-box; border-bottom:1px solid #dbdbdb; display:block;content:"";z-index:-1;}
#snbNavi-wrap .snbNavi.mobile:after{display:block; content:"";clear:both;}
#snbNavi-wrap .snbNavi.mobile .home{width:60px;height:60px;position:absolute; left:0;top:0;border-left:1px solid #dbdbdb;background:url(../img/sub/left-home.png) no-repeat center center;}
#snbNavi-wrap .snbNavi.mobile dl{min-width:250px; float:left; position:relative;}
#snbNavi-wrap .snbNavi.mobile dl:nth-child(n+2):before{width:1px;height:100%; position:absolute; left:-1px; top:0; display:block; content:"";background:#dbdbdb;}
#snbNavi-wrap .snbNavi.mobile dl:last-child:after{width:1px;height:100%; position:absolute; right:0; top:0; display:block; content:"";background:#dbdbdb;}
#snbNavi-wrap .snbNavi.mobile dt{}
#snbNavi-wrap .snbNavi.mobile dt a{display:block; line-height:58px;height:60px; padding-left:27px; color:#353535; font-size:16px; position:relative;}
#snbNavi-wrap .snbNavi.mobile dt a:after{width:14px;height:8px; position:absolute;right:20px; top:50%;margin-top:-4px; background:url(../img/sub/left-depth.png) no-repeat center center; display:block; content:""}
#snbNavi-wrap .snbNavi.mobile dt.active a:after{background-image:url(../img/sub/left-deptho.png);}
#snbNavi-wrap .snbNavi.mobile dd{position:absolute;display:none; left:-1px; top:60px; width:calc(100% + 1px);background:#fff;box-sizing:border-box; border:1px solid #dbdbdb;border-top:0;}
#snbNavi-wrap .snbNavi.mobile dd ul{}
#snbNavi-wrap .snbNavi.mobile dd li{}
#snbNavi-wrap .snbNavi.mobile dd li a{line-height:50px; font-size:15px; color:#555;letter-spacing:-0.02em; padding:0 25px; display:block;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#snbNavi-wrap .snbNavi.mobile dd li a:hover{background:#f4f4f4}
#snbNavi-wrap .snbNavi.mobile dd li:nth-child(n+2){/* border-top:1px solid #dbdbdb; */}	
#snbNavi-wrap .snbNavi.mobile dd li.active a{background:#f0f0f0; font-weight:700; color:#111;}

	@media only screen and (max-width:1400px){
		#snbNavi-wrap .snbNavi.desktop li a{font-size:17px; }
		#snbNavi-wrap.fix .fix{height:65px;}
		#snbNavi-wrap .snbNavi.desktop {top:-65px;}
		#snbNavi-wrap .snbNavi.desktop li a{line-height:65px;}
	}
	@media only screen and (min-width:1201px){
		#snbNavi-wrap.fix .fix{position:fixed; left:0; top:100px; display:block; width:100%;  content:""; height:70px;}
	}
	@media only screen and (max-width:1200px){
		#snbNavi-wrap .snbNavi.desktop{display:none;}
		#snbNavi-wrap .snbNavi.mobile {display:block;padding-left:55px;}
		#snbNavi-wrap .snbNavi.mobile .home{width:53px;}

		
	}
	@media only screen and (max-width:1184px){
		
	}
	@media only screen and (max-width:999px){
		
		#snbNavi-wrap .snbNavi.mobile{height:50px;padding-left:53px; background:#fff; z-index:9999} 
		#snbNavi-wrap .snbNavi.mobile .home{width:52px;height:50px;}

		#snbNavi-wrap .snbNavi.mobile dl{min-width:auto; width:50%;}
		#snbNavi-wrap .snbNavi.mobile dl:nth-child(4){display:none;}
		
		#snbNavi-wrap .snbNavi.mobile dt a{padding-left:17px; font-size:15px; padding-right:30px; height:50px; line-height:49px;}
		#snbNavi-wrap .snbNavi.mobile dt a:after{right:15px; width:11px;}
		#snbNavi-wrap .snbNavi.mobile dd{top:50px; min-width:150px;}
		#snbNavi-wrap .snbNavi.mobile dd li a{padding:0 17px; font-size:14px;}
	}
	@media only screen and (max-width:680px){

	}
	@media only screen and (max-width:480px){
		#snbNavi-wrap .snbNavi.mobile dt a{padding-left:12px; font-size:15px; font-weight:500;}
		#snbNavi-wrap .snbNavi.mobile dt a:after{right:12px; width:9px; right:12px;}
		#snbNavi-wrap .snbNavi.mobile dd li a{padding:0 12px;font-size:14px;line-height:40px;font-weight:500;}
	}




/* ======================================================
    cont-top & top-btn 
=========================================================*/
.cont-top{text-align:center; margin-top:70px; margin-bottom:50px; position:relative; z-index:14;}
.cont-top h2{font-size:36px; font-weight:700;letter-spacing:-0.03em; line-height:1.1em; color:#111; position:relative; font-family: 'RiaSans-Regular';}	
.cont-top h4{font-size:34px; font-weight:700;letter-spacing:-0.03em; line-height:1.1em; color:#555; position:relative; }
.cont-top p{margin-top:10px;font-size:18px; color:#666; font-weight:300; letter-spacing:-0.05em; line-height:1.25em;}

.top-btn{ z-index:2004;right:-50px;width:43px;height:43px;background:url(../img/layout/top-btn.png) no-repeat center center;background-size:100% auto; bottom:30px; position:fixed;-webkit-transition: right 0.3s ease-out;-moz-transition: right 0.3s ease-out;-o-transition: right 0.3s ease-out;transition: right 0.3s ease-out; }

	@media only screen and (max-width:1300px){
		
	}
	@media only screen and (max-width:1200px){
		.cont-top h2{font-size:30px;}
		.cont-top h4{font-size:30px;}
		.cont-top p{font-size:17px;}
	}

	@media only screen and (min-width:1000px){
		.top-btn.over{right:15px; }
	}
	@media only screen and (max-width:999px){
		.cont-top{}
		.cont-top h2{font-size:28px;}
		.cont-top h4{font-size:24px;}
		.cont-top p{margin-top:10px;font-size:16px;word-break: keep-all; }
		
		.top-btn{width:35px;height:35px; bottom:15px;}
		.top-btn.mover{right:15px;}
		.top-btn.vover{right:15px;}
	}
	@media only screen and (max-width:680px){
		.cont-top{margin-bottom:30px; margin-top:50px; }
		.cont-top.mc{text-align:center;}
		.cont-top h2{font-size:24px;}
		.cont-top h4{font-size:20px;}
		.cont-top p{font-size:16px;}
		
		.top-btn{width:30px;height:30px;bottom:10px; border-radius:100%;}
		.top-btn.mover{right:10px;}
		.top-btn.vover{right:10px;}
	}
	@media only screen and (max-width:480px){
		.cont-top h2{font-size:22px;}

		.cont-top p{font-size:14px;}
	}






/* ======================================================
   #top-btn & quick-menu 
=========================================================*/
.quick-menu{position:fixed;right:-120px; top:220px; width:120px; -webkit-transition: right 0.5s ease-in-out;-moz-transition: right 0.5s ease-in-out;-o-transition: right 0.5s ease-in-out;transition: right 0.5s ease-in-out;}
.quick-menu.ani{right:0;}
.quick-menu:before{width:100%;height:60px; position:absolute; left:0; top:0; display:block; background:url(../img/layout/quick-bg.png) no-repeat center bottom; display:block; content:"";z-index:-1; -webkit-transition: top 0.5s ease-in-out;-moz-transition: top 0.5s ease-in-out;-o-transition: top 0.5s ease-in-out;transition: top 0.5s ease-in-out;}
.quick-menu.ani:before{transition-delay: 0.5s;top:-45px;}
.quick-menu a{background:#74d3c6; border-top-left-radius:25px; border-bottom-left-radius:25px; z-index:3;  font-size:14px; color:#fff; padding:22px 24px 0 24px; letter-spacing:-0.03em; line-height:1.5em; display:block; height:105px; position:relative;}
.quick-menu a:after{width:21px;height:21px; position:absolute; left:24px; bottom:24px;background:url(../img/layout/quick-more.png) no-repeat center center; display:block; content:""}

.top-btn{position: fixed;right: -50px;bottom: 20px; z-index:5999;cursor: pointer;background:url(../img/layout/top-btn.png) no-repeat center center rgba(0,0,0,0.3);  background-size:100% auto;width:44px;height:44px; border-radius:100%;display: flex;flex-wrap: wrap;align-items: center;transition:0.5s;box-sizing: border-box;}
.top-btn.over{right:20px;}
	@media only screen and (max-width:1800px) {	
		.quick-menu{width:90px;}
		.quick-menu:before{background-size:auto 30px; height:30px; }
		.quick-menu.ani:before{top:-30px;}
		.quick-menu a{padding:20px 15px 0 10px; font-size:12px; height:85px; border-top-left-radius:15px; border-bottom-left-radius:15px;}
		.quick-menu a:after{left:15px; width:16px;height:16px; background-size:100% auto;}
	}
	@media only screen and (max-width:1520px) {	
	
	}
	@media only screen and (max-width:1400px) {
		.quick-menu{top:130px;}
	}
	@media only screen and (max-width:1280px) {
		.quick-menu{right:-120px !important}
	}
	@media only screen and (max-width:999px) {
		
	}
	@media only screen and (max-width:680px) {
		.top-btn{width:36px;height:36px;}
		.top-btn.over{right:15px; bottom:15px;}
	}
	@media only screen and (max-width:480px) {
		.top-btn{width:30px;height:30px;}
	}


/* ======================================================
    #footer-wrap 
=========================================================*/
#footer-wrap {display:block; position:relative; padding:60px 20px 100px; border-top:1px solid #e5e5e5; background:#f9f9f9; margin-top:30px;}
#footer{position:relative;text-align:left; max-width:1480px; margin:0 auto;}

.f-info{padding-left:240px; padding-top:0px; position:relative;}
.f-info:before{width:200px;height:19px; position:absolute; left:0; top:0; background:url(../img/f-logo.png) no-repeat; background-size:100% auto; display:block; content:""}

.f-link{}
.f-link ul{}
.f-link ul:after{display:block ;content:"";clear:both}
.f-link li{float:left}
.f-link li:nth-child(n+2){margin-left:20px}
.f-link li a{display:block; line-height:20px;font-size:17px; font-weight:700; color:#111; letter-spacing:-0.03em;}

.f-txt{line-height:1.2em; position:relative; margin-top:15px; font-size:0;}
.f-txt p{font-size:17px; font-weight:400; color:#555; letter-spacing:-0.03em; line-height:1.3em;}
.f-txt p:nth-child(n+2){margin-top:7px;}
.f-txt p:nth-child(2), .f-txt p:nth-child(3), .f-txt p:nth-child(4){display:inline-block;vertical-align:top}
.f-txt p:nth-child(3), .f-txt p:nth-child(4){margin-left:20px}

.f-cs{position:absolute; right:265px; top:10px;}
.f-cs .btxt{font-size:17px; font-weight:700; line-height:1.3em; letter-spacing:-0.03em;}
.f-cs .btxt span{display:block ; font-size:30px; margin-top:4px;line-height:1em; font-weight:700; color:#23b57c;letter-spacing:-0.01em;}
.f-cs .stxt{font-size:14px;font-weight:600; color:#999; line-height:1.3em; margin-top:7px;letter-spacing:-0.03em;}

.f-abr{position:absolute;right:20px; top:10px;}

.f-sns{}
.f-sns ul{text-align:right;padding-right:10px;}
.f-sns ul:after{display:block ;content:"";clear:both}
.f-sns li{font-size:0;display:inline-block;vertical-align:top}
.f-sns li:nth-child(n+2){margin-left:17px}
.f-sns li a{display:block; height:22px}
.f-sns li:nth-child(1) a{width:62px;background:url(../img/layout/f-sns02.png) no-repeat}
.f-sns li:nth-child(2) a{width:31px;background:url(../img/layout/f-sns01.png) no-repeat}

.f-family{margin-top:30px;width:172px;}
.f-family .sel{display:block; position:relative;line-height:40px; padding:0 10px 0 17px; font-size:13px;border:1px solid #d8d8d8; color:#111; height:40px; box-sizing:border-box;background:#fff; border-radius:5px;}
.f-family .sel:after{width:12px;height:12px; position:absolute;right:14px; top:50%; margin-top:-6px; background:url(../img/layout/f-arrow.jpg) no-repeat center center; display:block; content:"";}
.f-family.active .sel:after{transform: scale(1,1) rotate(180deg)skew(0,0) translate(0,0);-webkit-transform: scale(1,1) rotate(180deg)skew(0,0) translate(0,0); -moz-transform: scale(1,1) rotate(180deg)skew(0,0) translate(0,0); }
.f-family ul{position:absolute; right:0; bottom:44px; width:100%;max-height:119px; overflow-y:auto;background:#fff; border:1px solid #d8d8d8;padding:15px 17px;box-sizing:border-box; display:none ;border-radius:5px;}
.f-family li{}
.f-family li:nth-child(n+2){margin-top:5px;}
.f-family li a{font-size:13px; color:#666; line-height:1.3em;}
.f-family li a:hover{color:#111;}
	@media only screen and (max-width:1520px) {	
		.f-link li a{font-size:14px; font-weight:600;}
		
		.f-info{padding-left:290px; padding-top:5px;}
		.f-info:before{width:230px;}

		.f-txt p{font-size:14px;}
		.f-txt p:nth-child(3){margin-left:25px}

		.f-cs{right:255px;top:5px;}
		.f-cs .btxt{font-size:14px;}
		.f-cs .btxt span{font-size:22px;}
		.f-cs .stxt{font-size:13px;}
		
		.f-abr{top:5px;}

		.f-sns li:nth-child(n+2){margin-left:14px}
		.f-sns li a{height:20px; background-size:auto 100% !important;}

		.f-family{margin-top:25px;}
		.f-family .sel{padding-left:15px;line-height:38px; height:38px}
		.f-family .sel:after{background-size:10px auto; right:12px;}
		.f-family ul{bottom:42px;}
	}
	@media only screen and (max-width:1400px) {
		#footer-wrap{margin-top:40px;}
		.f-info{padding-left:250px; }
		.f-info:before{width:200px;}

		.f-cs{right:240px;}
	}
	@media only screen and (max-width:1185px) {
		.f-info{padding-left:0; padding-top:60px; }
		.f-cs{right:230px;}
	}
	@media only screen and (max-width:999px) {
		.f-txt p:nth-child(3){margin-left:20px}

		.f-cs{right:auto; top:auto; position:relative; margin-top:20px;}
		.f-abr{top:auto; bottom:0;}
		
		.f-family{width:160px;margin-top:20px;}
		
		.f-sns{}
		.f-sns li:nth-child(n+2){margin-left:10px}
		.f-sns li a{height:18px;}
	}
	@media only screen and (max-width:680px) {
		#footer-wrap{margin-top:0px;}
		#footer-wrap {display:block; position:relative; padding:40px 20px 80px;} 
		.f-info{padding-top:50px;}
		.f-info:before{width:200px;}

		.f-link li a{font-size:17px;}

		.f-abr{right:0px;}

		.f-txt p{font-size:16px;}
		.f-txt p:nth-child(3){margin-left:15px}

		.f-cs .btxt{font-size:16px;}
		.f-cs .btxt span{font-size:24px;}
		.f-cs .stxt{font-size:15px;}
		
		.f-family{margin-top:15px;width:170px;}
		.f-family .sel{line-height:35px; height:35px}
	}
	@media only screen and (max-width:480px) {
		.f-family{margin-top:10px;}
		.f-txt p:nth-child(4){margin-left:0px}
	}


/* ======================================================
    fbanner
=========================================================*/
#fbanner{position:relative; padding:30px 0 0px; background:#fff; }
#fbanner .owl-prev{cursor:pointer;width:22px;height:30px;text-indent:-9999em; position:Absolute; display:none !important; left:0; top:50%;margin-top:-15px;background:url(../img/layout/fb-prev.jpg) no-repeat center center;background-size:12px auto;-webkit-transition: padding 0.3s ease-out, margin 0.3s ease-out;-moz-transition: padding 0.3s ease-out, margin 0.3s ease-out;-o-transition: padding 0.3s ease-out, margin 0.3s ease-out;transition: padding 0.3s ease-out, margin 0.3s ease-out;}
#fbanner .owl-next{cursor:pointer;width:22px;height:30px;text-indent:-9999em; position:Absolute; display:none !important;right:0;  top:50%;margin-top:-15px;background:url(../img/layout/fb-next.jpg) no-repeat center center;background-size:12px auto;-webkit-transition: padding 0.3s ease-out, margin 0.3s ease-out;-moz-transition: padding 0.3s ease-out, margin 0.3s ease-out;-o-transition: padding 0.3s ease-out, margin 0.3s ease-out;transition: padding 0.3s ease-out, margin 0.3s ease-out;}
#fbanner .item a{display:block;text-align:center; display:flex;align-items: center; justify-content:center;height:70px;}
#fbanner .item img{/*max-width:159px;*/ max-width:300px;}
	@media only screen and (max-width:1320px){
		#fbanner{position:relative; padding:30px 70px}
		#fbanner .owl-prev{background-size:9px auto; left:15px; width:30px;height:30px;border:1px solid #dedede; display:block !important;border-radius:100%;}
		#fbanner .owl-next{background-size:9px auto; right:15px;  width:30px;height:30px;border:1px solid #dedede;display:block !important; border-radius:100%;}

		#fbanner .item img{height:35px;}
	}
	@media only screen and (max-width:1200px){
		#fbanner{ padding:25px 50px}
	}
	 
	@media only screen and (max-width:999px){
		#fbanner{ padding:25px 40px}
		#fbanner .item a{height:50px;}
		#fbanner .item img{height:30px;}
		#fbanner .owl-prev{background-size:7px auto;left:0px; width:30px;height:30px; margin-top:-12px;}
		#fbanner .owl-next{background-size:7px auto;right:0px; width:30px;height:30px; margin-top:-12px;}

	}
	@media only screen and (max-width:680px){
		
	}
	@media only screen and (max-width:480px){
		#fbanner{ padding:25px 40px}
	}