@charset "utf-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
/* font-family: 'Noto Sans KR', sans-serif; */
/* Thin 250, Light 300, DemiLight 350, Regular 400, Medium 500, Bold 700, Black 900 */
/* 100, 300,400, 500,700,900 */

@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 100;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),	
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 300;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),	
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 400;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),	
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 500;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),	
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 700;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),	
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 900;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),	
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');
}

/*

@font-face {
	font-family: 'GangwonEdu';
	/* font-family: 'GangwonEdu_OTFBoldA'; 
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEdu_OTFBoldA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
*/

/*
@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}
*/


/* Base Style Start */
html, body {position: relative; width: 100%; height: 100%; margin: 0px auto; padding: 0;}
body, div, ul, li, dl, dt, dd, ol, p, h1, h2, h3, h4, h5, h6, table, form {margin: 0; padding: 0; border: 0;}

body {
	position: relative;
	font-family: 'Noto Sans KR', 'Nanum Gothic', 'Malgun Gothic', '맑은 고딕', sans-serif; word-break: keep-all; /* word-break: break-all; */ word-wrap: break-word;
	font-size : 16px; font-weight: 400; color: #444;
	background-color : #fff;

	min-width: 320px;
}
/* Base Style End */

/* Text Base Style Start */
dl, dt, dd, ul, ol, li, p {list-style : none; /* for smartEditor text-align : justify; */ vertical-align : middle; letter-spacing : 0px; line-height: 1.67em; }

h1 {font-weight: bold; color: #222; font-size: 34px; line-height: 50px;}
h2 {font-weight: bold; color: #222; font-size: 30px; line-height: 40px;}
h3 {font-weight: bold; color: #222; font-size: 24px; line-height: 30px;}
h4 {font-weight: bold; color: #222; font-size: 20px; line-height: 30px;}
h5 {font-weight: bold; color: #222; font-size: 16px; line-height: 25px;}
h6 {font-weight: bold; color: #222; font-size: 14px; line-height: 20px;}

.bold	{font-weight: bold;}
.left	{text-align: justify;}
.center	{text-align: center;}
.right	{text-align: right;}
.caution {color: #2cafcb !important;}
.caution02 {color: #222;}
.caution03 {color: #e7404f !important;}

.pColor01 {color: #b81c22;}
.pColor01light {}
.pColor01dark {color: #704443;}
.pColoe01drakGray {}

.pColorRed {color: #e7404f;}
.pColorGreen {color: #91c329;}
.pColorBlue {color: #4D72C5;}
.pColorDarkBlue {color: #454583;}
.pColorGray {color: #cbd0d3;}
/* Text Base Style Start */

img {border: none; margin: 0; padding: 0;}
input::-webkit-input-placeholder {color: #999; font-weight: 500; font-size: 13px;}
input:-moz-placeholder {color: #999; font-weight: 500; font-size: 13px;}
input::-moz-placeholder {color: #999; font-weight: 500; font-size: 13px;}
input:-ms-input-placeholder {color: #999; font-weight: 500; font-size: 13px;}

/* a href Style Start */
a {letter-spacing: 0px;	margin: 0; text-align: justify; text-decoration: none; outline: 0; color: #444;}
a:hover {text-decoration: underline; color: #222;}
/* a href Style End */

/* Space Null Start */
.null05 {width: 100%; height: 5px; border: 0; margin: 0; padding: 0; line-height: 0; font-size: 0;}
.null10 {width: 100%; height: 10px; border: 0; margin: 0; padding: 0; line-height: 0; font-size: 0;}
.null20 {width: 100%; height: 20px; border: 0; margin: 0; padding: 0; line-height: 0; font-size: 0;}
.null30 {width: 100%; height: 30px; border: 0; margin: 0; padding: 0; line-height: 0; font-size: 0;}
.null40 {width: 100%; height: 40px; border: 0; margin: 0; padding: 0; line-height: 0; font-size: 0;}
.null50 {width: 100%; height: 50px; border: 0; margin: 0; padding: 0; line-height: 0; font-size: 0;}
.null100 {width: 100%; height: 100px; border: 0; margin: 0; padding: 0; line-height: 0; font-size: 0;}
/* Space Null End */

.dummy {clear: both; width: 100%; height: 0; border: 0; margin: 0; padding: 0; line-height: 0; font-size: 0;}
.line01 {width: 100%; height: 1px; border: 0; margin: 0; padding: 0; line-height: 0; font-size: 0; background-color: #dddddd;}
.brNone {display: none;}
.worning01 {position: relative; display: inline-block; line-height: 30px; font-size: 12px !important; padding: 0; font-weight: 500 !important; color: #444; text-align: center; z-index: 0;}
.worning01:before {position: absolute; top: 0; left: 0; display: inline-block; width: 100%; height: 100%; box-sizing: border-box; padding: 0 10px; z-index: -1; content: ""; background-color: #eeeee0;}

.worning01.green:before {background-color: #eeffb1;}
.worning01.blue:before {background-color: #c0f7ff;}
.worning01.red:before {background-color: #ffdaf9;}

.clearFix:after {content:""; display: block; clear: both;} /* 부모창에 자식창의 높이를 알려주는 권장방법 */
.clearFix {*zoom: 1;} /* IE5.5 ~ 7 브라우저 대응 핵 */


/* Table Base Style Start */
/*
table {table-layout: fixed; width: 100%; margin: 0 auto; padding: 0; border-collapse: separate; border-spacing: 0; font-size: 13px; border-top: 1px #1c75bc solid;}
table caption {display: none;}
table th {color: #333; font-weight: bold; line-height: 30px; background-color: #f9f9f9; }
table th,
table td {padding: 10px 10px 9px; border-top: 0; border-left: 1px #e9e9e9 solid; border-right: 1px #e9e9e9 solid; border-bottom: 1px #e9e9e9 solid; font-weight: normal;}
*/
table {table-layout: fixed; width: 100%; margin: 0 auto; padding: 0; border-collapse: collapse; border-top: 2px solid #6eb92b; border-bottom: 1px solid #999; font-size: 13px;}
table td, table th {padding: 10px; border: 1px solid #eee;}
table tr:first-child th {border-top: 0;}
table tbody tr:last-child th,
table tbody tr:last-child td {border-bottom: 0;}
table tr td:first-child,
table tr th:first-child {border-left: 0;}
table tr td:last-child,
table tr th:last-child {border-right: 0;}
/* Table Base Style End */

/* 웹접근성을 위한 본문 바로가기 : Navigation Skip (메뉴 스킵) */
#skipBind {position: relative; top: 0; left: 0; width: 100%; height: 0px; z-index: 9999;}
#skipBind > li > a {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 0; margin: 0; line-height: 40px; font-size: 14px; color: #fff; text-align: center; overflow: hidden; background-color: #222;}
#skipBind > li > a:focus {height: 40px; overflow: visible;}
/* 웹접근성을 위한 본문 바로가기 : Navigation Skip (메뉴 스킵) */

	/* Top Header Start */
	#pageBlack {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); z-index: -1; opacity: 0; transition: all 0.5s;}
	#naviBlack {position: fixed; top: 0; right: -100%; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); z-index: -1; transition: all 0.5s;}

	/* Top Header Start */
	#header {position: fixed; top: 0; left: 0; width: 100%; height: 100px; z-index: 999;}
	#header > .headerFix {
		position: relative; top: 0px; width: 100%; height: 100px; margin: 0 auto; z-index: 100; box-sizing: border-box; border-bottom: 0 rgba(250,250,250,0.2) solid;
		background-color: rgba(0,0,0,0.1);
		box-shadow: 0 0 1px 0 rgba(255,255,255,0.6);
		transition: all 0.3s;
	}
	/* Scroll >= 100 js/common.js */
	#header > .headerFix.whiteOn {border-bottom: 0 rgba(240,240,240,1.0) solid; box-shadow: 0 0 1px 0 rgba(0,0,0,0.1); background-color: rgba(255,255,255,0.95);}
	#header > .headerFix.whiteOn .ci > a > img {content: url(/pub/img/ci_color.png);}
	#header > .headerFix.whiteOn .naviArea .menuNavi > li > a {color: #222;}
	#header > .headerFix.whiteOn .naviArea .menuNavi li .subMenu {background-color: rgba(240,240,240,0.95);}
	#header > .headerFix.whiteOn .naviArea ul.topLink > li.home > a,
	#header > .headerFix.whiteOn .naviArea ul.topLink > li.inquiry > a {background-color: rgba(220,220,220,1.0);}
	#header > .headerFix.whiteOn .naviArea ul.topLink > li > a:hover {background-color: rgba(0,104,158,1.0);}
	/* Scroll >= 100 js/common.js */

	#header .headerFix > .naviArea {position: relative; width: 100%; max-width: 1200px; height: 100px; margin: 0px auto 0;}
	#header .headerFix > .naviArea .ci {position: absolute; top: 0; left: 0; width: 160px; height: 100px; box-sizing: border-box; padding: 20px 0; line-height: 60px; text-align: center; z-index: 1; transition: all 0.3s;}
	#header .headerFix > .naviArea .ci > a {position: relative; display: block; width: 100%; height: 100%;}
	#header .headerFix > .naviArea .ci > a img {float: left; width: 100%; height: auto;}

	#header .headerFix > .naviArea .kakaoCh {position: absolute; top: 0; right: 0; width: 60px; height: 100px; box-sizing: border-box; padding: 30px 10px; line-height: 40px; text-align: center; z-index: 1; transition: all 0.3s;}
	#header .headerFix > .naviArea .kakaoCh > a {position: relative; display: block; width: 100%; height: 100%; background: url('../img/mIconSupport02_kakao.png') center center no-repeat;}

	/*
	#header .headerFix > .naviArea ul.topLink {position: absolute; top: 0; right: 0; width: 100px; height: 100px; box-sizing: border-box; padding: 30px 0 30px; line-height: 30px; text-align: center; overflow: hidden; z-index: 1; transition: all 0.3s;}
	#header .headerFix > .naviArea ul.topLink > li {float: left; display: block; margin-right: 10px; width: 40px; height: 40px;}
	#header .headerFix > .naviArea ul.topLink > li > a {display: block; width: 100%; height: 100%; line-height: 40px; font-size: 9px; font-weight: 500; color: #fff; text-align: center; border-radius: 50%; transition: all 0.3s;}
	#header .headerFix > .naviArea ul.topLink > li.home > a {background: url('../img/iconTopLineHome.png') center center no-repeat; background-color: rgba(240,240,240,0.4);}
	#header .headerFix > .naviArea ul.topLink > li.inquiry > a {background: url('../img/iconTopLineContact.png') center center no-repeat; background-color: rgba(240,240,240,0.4);}
	#header .headerFix > .naviArea ul.topLink > li > a:hover {background-color: rgba(0,104,158,1.0);}
	*/

	/* for Mobile Start */
	/* #header .naviArea .naviToggle {position: absolute; top: 15px; right: 20px; display: none; width: 30px; height: 30px; z-index: 1; background-image: url('../img/naviToggle.png'); background-position: 0 0; background-color: rgba(0,0,0,0); transition: all 0.3s;} */
	#naviToggle {position: absolute; top: 10px; right: 20px; display: none; width: 60px; height: 60px; border-radius: 50%; background: rgba(50,126,193,0.5); z-index: 2; transition: all  0.3s;}
	#naviToggle.on {background-color: rgba(50,126,193,0.8);}
	@media (hover: hover) {
		#naviToggle:hover {background-color: rgba(50,126,193,1.0);}
	}
	#naviToggle #line-wrapper {position: relative; top: 20px; left: 0; right: 0; margin: 0 auto; width: 30px; height: 20px;}
	#naviToggle #line-wrapper .init {animation: none !important;}
	#naviToggle #line-wrapper .line {margin-bottom: 7px; width: 30px; height: 2px; background: #ffffff;}
	#naviToggle #line-wrapper .line-top {animation: line-top .5s forwards ease-out, line-top-rotate .3s .5s forwards ease-out;}
	#naviToggle #line-wrapper .top-reverse {animation: line-top-rotate-reverse .3s forwards ease-out, line-top-reverse .5s .3s forwards ease-out;}
	#naviToggle #line-wrapper .line-mid {animation: line-mid .5s forwards ease-out;}
	#naviToggle #line-wrapper .mid-reverse {width: 20px; animation: line-mid-invisible .3s forwards ease-out, line-mid-reverse .5s .3s forwards ease-out;}
	#naviToggle #line-wrapper .line-bot {animation: line-bot .5s forwards ease-out, line-bot-rotate .3s .5s forwards ease-out;}
	#naviToggle #line-wrapper .bot-reverse {animation: line-bot-rotate-reverse .3s forwards ease-out, line-bot-reverse .5s .3s forwards ease-out;}
	@keyframes line-top {
		0% {transform: translateY(0px)}
		100% {transform: translateY(9px)}
	}
	@keyframes line-top-reverse {
		0% {transform: translateY(9px)}
		100% {transform: translateY(0px)}
	}
	@keyframes line-top-rotate {
		0% {transform:translateY(9px) rotateZ(0deg)}
		100% {transform:translateY(9px) rotateZ(45deg)}
	}
	@keyframes line-top-rotate-reverse {
		0% {transform:translateY(9px) rotateZ(45deg)}
		100% {transform:translateY(9px) rotateZ(0deg)}
	}
	@keyframes line-mid {
		0% {transform:scale(1)}
		100% {transform:scale(0)}
	}
	@keyframes line-mid-reverse {
		0% {transform:scale(0)}
		100% {transform:scale(1)}
	}
	@keyframes line-mid-invisible {
		0% {transform:scale(0)}
		100% {transform:scale(0)}
	}
	@keyframes line-bot {
		0% {transform:translateY(0px)}
		100% {transform:translateY(-9px)}
	}
	
	@keyframes line-bot-reverse {
		0% {transform:translateY(-9px)}
		100% {transform:translateY(0px)}
	}
	@keyframes line-bot-rotate {
		0% {transform:translateY(-9px) rotateZ(0deg)}
		100% {transform:translateY(-9px) rotateZ(135deg)}
	}
	@keyframes line-bot-rotate-reverse {
		0% {transform:translateY(-9px) rotateZ(135deg)}
		100% {transform:translateY(-9px) rotateZ(0deg)}
	}
	#header .naviArea .mobileHome {position: fixed; top: 0; right: -320px; display: none; width: 270px; height: 80px; box-sizing: border-box; padding: 0 20px 0; border-bottom: 0px #eee solid; z-index: 11; background: url('../img/bgMobileNavi.png') center top no-repeat rgba(250,250,250,1.0);}
	#header .naviArea .mobileHome > .logo {float: left; display: block; width: 107px; height: 80px; box-sizing: border-box; padding: 20px 0;}
	#header .naviArea .mobileHome > .logo > a {display: block; width: 100%; height: 100%; box-sizing: border-box; padding:  0;}
	#header .naviArea .mobileHome > .logo > a > img {display: block; width: 100%; vertical-align: top;}
	/* for Mobile End */

	#gnb,
	#header .headerFix .naviArea .menuNavi {position: absolute; top: 0; left: auto; right: 60px; display: block; margin: 0 auto; width: 720px; height: 100px; z-index: 1; transition: all 0.3s;}
	#header .headerFix .naviArea .menuNavi > li {position: relative; float: left; width: 120px; height: 100px; transition: all 0.3s;}
	#header .headerFix .naviArea .menuNavi > li > a {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; box-sizing: border-box; padding: 30px 0;  line-height: 40px; font-size: 18px; font-weight: 500; text-align: center; letter-spacing: -0.03em; text-decoration: none; color: #fff; z-index: 1; transition: all 0.3s; }
	#header .headerFix .naviArea .menuNavi > li > .menuLine {position: absolute; bottom: 30px; left: 0; right: 0; margin: 0 auto; display: block; width: 0; height: 2px; line-height: 0; font-size: 0; z-index: 2; background-color: rgba(54,47,45,0.0); transition: all 0.6s;}
	#header .headerFix .naviArea .menuNavi > li:hover > a {color: #fff; background-color: rgba(50,126,193,1.0);}
	#header .headerFix .naviArea .menuNavi > li:hover > .menuLine {width: 60px; background-color: rgba(255,255,255,1.0);}
	#header .headerFix .naviArea .menuNavi > li:nth-child(6) > a {background-image: url('../img/iconNewWin.png'); background-position: center top 25px; background-repeat: no-repeat;}

	#header .headerFix .naviArea .menuNavi > li > a:hover,
	#header .headerFix .naviArea .menuNavi > li.fix > a,
	#header .headerFix .naviArea .menuNavi > li.on > a,
	#header .headerFix .naviArea .menuNavi > li.on > a:hover {color: #fff; background-color: rgba(50,126,193,1.0);}

	#header .naviArea .menuNavi li .subMenu {
		position: absolute; display: none;
		top: 100px; left: 0; width: 100%; height: auto; padding: 20px 0; z-index: 10; background-color: #f9f9f9;
		border-radius: 0 0 0 0;
		background-color: rgba(240,240,240,0.95);
		border-top: 0 #fff solid;
	}
	#header .headerFix .naviArea .menuNavi li:last-child > .subMenu {left: auto; right: 0;}
	#header .headerFix .naviArea .menuNavi li>.subMenu>li {float: left; display: block; width: 100%;}
	#header .headerFix .naviArea .menuNavi li>.subMenu>li>a {float: left; display: block; box-sizing: border-box; padding: 10px 0; width: 100%; line-height: 20px; font-size: 14px; font-weight: 300; color: #222; letter-spacing: -0.02em; text-align: center; background-image: none; transition: all 0.3s;}
	#header .headerFix .naviArea .menuNavi li>.subMenu>li>a:hover,
	#header .headerFix .naviArea .menuNavi li>.subMenu>li:hover {color: #fff; text-decoration: none; background-color: rgba(33,30,62,0.4); transition: all 0.3s;}
	#header .headerFix .naviArea .menuNavi li>.subMenu>li.topLine {position: absolute; top: 0; left: 20px; display: none; width: calc(100% - 40px); height: 1px; line-height: 0; font-size: 0; box-sizing: border-box; background-color: rgba(255,255,255,0.4); z-index: 1;}
	@media screen and (max-width: 980px) {
		#header {height: 80px; transition: all 0.3s;}
		#header .headerFix {height: 80px !important; background-color: rgba(0,0,0,0.1); transition: all 0.3s;}

		#naviToggle {display: block; border: 0; z-index: 11; transition: all 0.3s}

		#header .headerFix > .naviArea {position: relative; width: 100%; height: 80px; margin: 0px auto 0;}
		#header .headerFix > .naviArea > .mobileHome {display: block;}
		#header .headerFix > .naviArea .ci {left: 10px; width: 133px; height: 80px; padding: 15px 0;}
		#header .headerFix > .naviArea .ci > a {box-sizing: border-box; padding-left: 0;}
		#header .headerFix > .naviArea ul.topLink {right: 80px; padding: 20px 0 20px;}

		#header .headerFix > .naviArea .kakaoCh {right: 90px; height: 80px; padding: 20px 10px;}

		#header .headerFix .naviArea .menuNavi {display: none;}
		#header .headerFix .naviArea .menuNavi > li > .menuLine {top: 50px; bottom: 0; left: 0; right: auto; background-color: rgba(19,159,224,1.0);}
		#header .headerFix .naviArea .menuNavi > li:hover > .menuLine {background-color: rgba(19,159,224,1.0);}
		/* #header .headerFix .naviArea .menuNavi > li.on > .menuLine {display: none;} */

		#header .headerFix .naviArea .menuNavi {position: fixed; top: 0; left: auto; right: -270px; display: none; transform: translateX(0); width: 100%; max-width: 270px; min-width: 200px; margin-top: 80px; height: calc(100% - 80px); box-sizing: border-box; padding: 20px 30px 20px;  z-index: 10; overflow-y: scroll; background-color: #fff;}
		#header .headerFix .naviArea .menuNavi > li:nth-child(n) {position: relative; display: block; list-style: none; width: 100%; height: auto; min-height: 60px; transition: all 0.3s;}
		#header .headerFix .naviArea .menuNavi > li:nth-child(n) > a {position: relative; display: block; width: 100%; height: 100%; min-height: 60px; line-height: 40px; text-align: left; font-size: 16px; font-weight: 400; color: #444; box-sizing: border-box; padding: 10px 0 9px; border-bottom: 1px #eee solid;}
		#header .headerFix .naviArea .menuNavi > li:last-child > a {border: 0;}
		#header .headerFix .naviArea .menuNavi > li:last-child > .subMenu > li > a {text-align: left;}
		#header .headerFix .naviArea .menuNavi > li > span,
		#header .headerFix .naviArea .menuNavi > li:last-child > span {height: 100%; background: none;}
		#header .headerFix .naviArea .menuNavi > li.fix > a,
		#header .headerFix .naviArea .menuNavi > li.fix,
		#header .headerFix .naviArea .menuNavi > li.on,
		#header .headerFix .naviArea .menuNavi > li:hover {color: #222; background-color: #fff;}
		#header .headerFix .naviArea .menuNavi > li.on {color: #222;}

		#header .headerFix .naviArea .menuNavi > li > a:hover,
		#header .headerFix .naviArea .menuNavi > li.on > a,
		#header .headerFix .naviArea .menuNavi > li.on > a:hover {font-weight: 500; color: #000; background-color: rgba(0,0,0,0.0);}

		#header .headerFix .naviArea .menuNavi > li > a {display: none;}
		#header .headerFix .naviArea .menuNavi > li > a.mobileSubHref {display: block;}

		#header .headerFix .naviArea .menuNavi > li:nth-child(4) > a {background-position: right center;}

		#header .headerFix .naviArea .menuNavi > li > .subMenu {position: relative; float: left; top: -1px; display: none; width: 100%; margin-top: 0; padding: 0; border-top: 1px rgba(0,0,0,0.8) solid; border-radius: 0;}
		#header .headerFix .naviArea .menuNavi > li:nth-child(2) > .subMenu,
		#header .headerFix .naviArea .menuNavi > li:nth-child(3) > .subMenu {left: auto; width: 100%;}

		#header .headerFix .naviArea .menuNavi > li > .subMenu > li {float: left; display: block; width: 100%; min-height: 40px; font-weight: 400; line-height: 40px; box-sizing: border-box; padding: 0; border-bottom: 1px rgba(255,255,255,0.2) solid;}

		#header .headerFix .naviArea .menuNavi > li > .subMenu > li > a {width: 100%; font-size: 13px; font-weight: 400; text-align: left; line-height: 39px; color: #333; padding: 0 0 0 20px; background-image: none;}
		#header .headerFix .naviArea .menuNavi > li > .subMenu > li > a:hover,
		#header .headerFix .naviArea .menuNavi > li > .subMenu > li:hover {color: #fff; text-decoration: none;}

		#header .headerFix .naviArea .menuNavi > li > .subMenu > li.topLine {display: none;}
	}
	@media screen and (max-width: 660px) {
		#header .headerFix > .topLineArea > .topLineBox > .contact {width: 200px;}
		#header .headerFix > .topLineArea > .topLineBox > .contact > .info {display: none;}
	}
	/* Top Header End */

	/* Response Box Start */
	.responseArea {position: relative; width: 100%; height: auto; margin: 0 auto; padding: 0;}

	.r02Area {position: relative; width: 100%; height: auto; margin: 0 auto; padding: 0;}
	.r02Area .r02Box {position: relative; float: left; display: block; width: 50%; height: auto; margin: 0; padding: 0; transition: all 0.3s;}
	@media screen and (max-width: 980px) {
		.r02Box {width: 100% !important; transition: all 0.3s;}
	}

	.r03Area {position: relative; width: 100%; height: auto; margin: 0 auto; padding: 0;}
	.r03Area .r03Box {position: relative; float: left; display: block; width: 33.3333%; height: auto; margin: 0; padding: 0; transition: all 0.3s;}
	@media screen and (max-width: 980px) {
		.r03Box {width: 100% !important; transition: all 0.3s;}
	}
	/* Response Box End */


	/* Copyright Start */
	#bottom {position: relative; width: 100%; min-height: 400px; box-sizing: border-box; padding: 60px 0 0; background: url('../img/bgBottomArea.jpg') center center no-repeat; background-size: cover;}

	#bottom .bottomCI {display: block; margin: 0 auto; width: 160px; height: 130px; box-sizing: border-box; background: url('../img/ci_bottom.png') center center no-repeat;}
	/*
	#bottom .bottomCompanyName {display: block; margin: 20px auto 0; width: 100%; max-width: 200px; height: 30px; line-height: 30px; font-size: 16px; font-weight: 700; text-align: center; color: #fff;}
	#bottom .bottomCI > img {vertical-align: top; display: block; width: 100%; height: 100%;}
	*/

	#bottom .phoneBox {display: block; margin: 20px auto 20px; width: 280px; height: 40px; box-sizing: border-box; padding: 0; border-radius: 20px; overflow: hidden;}
	#bottom .phoneBox .phoneTitle {float: left; width: 80px; height: 40px; line-height: 40px; font-size: 14px; font-weight: 500; color: #222; text-align: center; letter-spacing: -0.03em; background-color: #fff;}
	#bottom .phoneBox a.phoneNo {float: left;  width: 200px; height: 40px; line-height: 40px; font-size: 20px; font-weight: 700; font-family: Georgia, "Times New Roman", Times, serif; color: #fff; text-align: center; letter-spacing: -0.03em; text-decoration: none; background-color: rgba(50,126,193,1.0); transition: all 0.3s;}
	#bottom .phoneBox a.phoneNo:hover {background-color: rgba(48,175,213,1.0);}


	#bottom > .copyrightArea {display: block; margin: 0 auto 0; width: 100%; box-sizing: border-box; padding: 0 0 20px;}
	#bottom > .copyrightArea > ul.companyInfo {width: 100%; padding: 0; margin: 0 auto;}
	#bottom > .copyrightArea > ul.companyInfo > li {width: 100%; line-height: 20px;}
	#bottom > .copyrightArea > ul.companyInfo > li > ul {width: 100%; text-align: center; line-height: 20px;}
	#bottom > .copyrightArea > ul.companyInfo > li > ul > li {display: inline-block; line-height: 20px; font-size: 12px; font-weight: 300; color: #ccc; text-align: center; margin: 0 auto; padding: 0 5px;}

	#bottom > .copyrightArea > p.copyright {display: block; width: 100%; height: 40px; box-sizing: border-box; padding: 10px 0; line-height: 20px; font-size: 12px; font-weight: 500; color: #FFF; text-align: center;}
	#bottom > .copyrightArea > a.url {display: block; margin-top: 40px; width: 100%; height: 40px; line-height: 40px; font-size: 14px; font-weight: 500; color: #fff; text-align: center;}

	@media screen and (max-width: 1220px) {
	}
	@media screen and (max-width: 980px) {
	}
	@media screen and (max-width: 660px) {
	}


	#bottom > .nabyArea {position: relative; width: 100%; height: 60px; margin: 60px auto 0; background-color: rgba(0,0,0,0.5);}
	#bottom > .nabyArea > .nabyBox {display: block; width: 100%; max-width: 1200px; height: 100%; margin: 0 auto; box-sizing: border-box; padding: 0 10px;}
	#bottom > .nabyArea > .nabyBox > .nabyCopy {float: left; display: block; width: 70%; height: 100%;}
	#bottom > .nabyArea > .nabyBox > .nabyCopy > a {display: block; width: 100%; height: 100%; box-sizing: border-box; padding: 20px 0; line-height: 20px; font-size: 12px; font-weight: 400; color: #777; text-decoration: none;}

	#bottom > .nabyArea > .nabyBox > .bottomLink {float: right; display: block; width: 30%; height: 60px; box-sizing: border-box; padding: 10px 0; text-align: right;}
	#bottom > .nabyArea > .nabyBox > .bottomLink > li {display: inline-block; width: 60px; height: 40px; text-align: center; margin: 0 5px;}
	#bottom > .nabyArea > .nabyBox > .bottomLink > li > a {display: block; width: 100%; height: 40px; line-height: 40px; font-size: 12px; font-weight: 400; color: #fff; text-align: center; background-color: #383541; transition: all 0.3s;}
	#bottom > .nabyArea > .nabyBox > .bottomLink > li > a:hover {color: #fff; background-color: #e60412; transition: all 0.3s;}
	#bottom > .nabyArea > .nabyBox > .bottomLink > li > a.admin {color: #fff; background-color: #e24a00; transition: all 0.3s;}
	#bottom > .nabyArea > .nabyBox > .bottomLink > li > a.admin:hover {color: #fff; background-color: #e60412; transition: all 0.3s;}

	.BtGoTop {position: fixed; display: block; bottom: 120px; right: -60px; width: 60px; height: 60px; z-index: 99; background: url('../img/iconGoTop.png') center center no-repeat; background-color: rgba(0,0,0,0.3); transition: all 0.3s;}
	.BtGoTop:hover {background-color: rgba(230,4,18,0.8);}
	@media screen and (max-width: 1220px) {
	}
	@media screen and (max-width: 980px) {
	}
	@media screen and (max-width: 660px) {
		#bottom > .copyrightArea > ul.companyInfo > li {line-height: 16px;}
		#bottom > .copyrightArea > ul.companyInfo > li > ul {line-height: 16px;}

		#bottom > .copyrightArea > ul.companyInfo > li > ul > li {line-height: 16px; font-size: 10px;}
		#bottom > .copyrightArea > p.copyright {font-size: 10px;}

		#bottom > .nabyArea {height: auto; margin: 60px auto 0;}
		#bottom > .nabyArea > .nabyBox > .nabyCopy {float: none; width: 100%; height: 40px;}
		#bottom > .nabyArea > .nabyBox > .nabyCopy > a {font-size: 12px; text-align: center; padding: 10px 0; letter-spacing: -0.5px;}
		#bottom > .nabyArea > .nabyBox > .bottomLink {float: none; width: 100%; height: 60px; padding: 0 0 20px; text-align: center;}
	}
	/* Copyright End */


	/* Up Slideanimate */
	.slideanim,
	.slideanim2,
	.slideanim3,
	.slideanim4 {visibility: hidden;}

	.slideUp {animation-name: slide; -webkit-animation-name: slide; animation-duration: 1.0s; -webkit-animation-duration: 1.0s; visibility: visible;}
	@keyframes slide {
		0% {opacity: 0; transform: translateY(70%);} 
		100% {opacity: 1; transform: translateY(0%);}
	}
	@-webkit-keyframes slide {
		0% {opacity: 0; -webkit-transform: translateY(70%);} 
		100% {opacity: 1; -webkit-transform: translateY(0%);}
	}

	.slideLeft {animation-name: slide2; -webkit-animation-name: slide2; animation-duration: 1.0s; -webkit-animation-duration: 1.0s; visibility: visible;}
	@keyframes slide2 {
		0% {opacity: 0; transform: translateX(70%);} 
		100% {opacity: 1; transform: translateX(0%);}
	}
	@-webkit-keyframes slide2 {
		0% {opacity: 0; -webkit-transform: translateX(70%);} 
		100% {opacity: 1; -webkit-transform: translateX(0%);}
	}

	.slideRight {animation-name: slide3; -webkit-animation-name: slide3; animation-duration: 1.0s; -webkit-animation-duration: 1.0s; visibility: visible;}
	@keyframes slide3 {
		0% {opacity: 0; transform: translateX(-600%);} 
		100% {opacity: 1; transform: translateX(0%);}
	}
	@-webkit-keyframes slide3 {
		0% {opacity: 0; -webkit-transform: translateX(-600%);} 
		100% {opacity: 1; -webkit-transform: translateX(0%);}
	}

	.slideDown {animation-name: slide4; -webkit-animation-name: slide4; animation-duration: 1.0s; -webkit-animation-duration: 1.0s; visibility: visible;}
	@keyframes slide4 {
		0% {opacity: 0; transform: translateY(-60px);} 
		100% {opacity: 1; transform: translateY(0%);}
	}
	@-webkit-keyframes slide3 {
		0% {opacity: 0; -webkit-transform: translateY(-60px);} 
		100% {opacity: 1; -webkit-transform: translateY(0%);}
	}
	/* Up Slideanimate */