@charset "utf-8";


/* ----------------------------------------------------
   [5] Google Material Icons (Outlined / Rounded / Sharp)  // 우선 순위가 제일 높음
   https://fonts.google.com/icons
   ---------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');


.material-symbols-outlined,
.material-symbols-rounded,
.material-symbols-sharp {
	font-size: 1.2em;             /* 텍스트와 함께 크기 연동 */
	font-size: 24px;             
	line-height: 1;               /* 라인박스 팽창 방지 */
	display: inline-block;        /* inline의 베이스라인 흔들림 방지 */
	vertical-align: -0.20em;      /* 베이스라인 살짝 내리기(상황에 따라 -0.10em~-0.20em) */
	font-style: normal;
	font-variant: normal;
	font-weight: 200;
	font-optical-sizing: auto;	  /* 핵심 1: 자동 옵티컬 사이징 */
	/* 핵심 2: opsz는 빼거나, 꼭 쓸 땐 텍스트 크기와 동일하게 */
	font-variation-settings: 
	'FILL' 0,
	'wght' 200,
	'GRAD' 0; /* 'opsz'는 생략 — auto가 알아서 맞춤 */
}

/* ----------------------------------------------------
   [1] 기본 웹폰트: Pretendard (구글 폰트 or CDN)
   ---------------------------------------------------- */
@import url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/pretendard.css');
/* 가변폰트 쓰려면 ↓
@import url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/variable/pretendardvariable.css');
*/


/*
@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 */



/* 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: 'Pretendard', 'Noto Sans KR', 'Nanum Gothic', 'Malgun Gothic', '맑은 고딕', sans-serif; word-break: keep-all; /* word-break: break-all; */ word-wrap: break-word;
	font-size : 14px; 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: 15px; 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: 15px;}
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(253,253,253,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(12,61,110,1.0);}
	/* Scroll >= 100 js/common.js */

	#header .headerFix > .naviArea {position: relative; display: block; margin: 0 auto; width: 100%; height: 100px; box-sizing: border-box; padding: 0;}
	#header .headerFix > .naviArea .ci {position: absolute; top: 0; left: 20px; width: 180px; 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 ul.topLink {position: absolute; top: 0; right: 20px; width: 130px; height: 100px; box-sizing: border-box; padding: 20px 0; line-height: 30px; text-align: center; overflow: hidden; z-index: 1; /* transition: all 0.05s; */}
	#header .headerFix > .naviArea ul.topLink > li {float: left; display: block; margin-right: 10px; width: 60px; height: 60px;}
	#header .headerFix > .naviArea ul.topLink > li:last-child {margin-right: 0px;}
	#header .headerFix > .naviArea ul.topLink > li > a {display: block; width: 100%; height: 100%; box-sizing: border-box; padding: 20px 0; line-height: 20px; 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/iconTopLineInquiry.png') center center no-repeat; background-color: rgba(240,240,240,0.4);}
	#header .headerFix > .naviArea ul.topLink > li > a:hover {background-color: rgba(246,174,0,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(43,52,102,0.7); z-index: 2; transition: all  0.3s;}
	#naviToggle.on {background-color: rgba(43,52,102,0.9);}
	@media (hover: hover) {
		#naviToggle:hover {background-color: rgba(43,52,102,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: 150px; height: 80px; box-sizing: border-box; padding: 17.5px 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: 0; right: 0; display: block; margin: 0 auto; width: 560px; height: 100px; z-index: 1; transition: all 0.3s;}
	#header .headerFix .naviArea .menuNavi > li {position: relative; float: left; width: 140px; 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: 0em; 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(255,255,255,0.0); transition: all 0.6s;}
	#header .headerFix .naviArea .menuNavi > li:hover > a {color: #fff; background-color: rgba(12,61,110,0.8);}
	#header .headerFix .naviArea .menuNavi > li:hover > .menuLine {width: 60px; background-color: rgba(246,174,0,1.0);}

	#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(3,34,64,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: #fff;
		box-shadow: 0 0 1px 0 #ddd;
		border-radius: 0 0 0 0;
		background-color: rgba(255,255,255,0.95);
		border-top: 0 #fff solid;
	}
	#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; list-style: disc inside; box-sizing: border-box; padding: 10px 0 9px 20px; border-bottom: 1px #f4f4f4 solid; width: 100%; line-height: 20px; font-size: 13px; font-weight: 400; color: #444; letter-spacing: 0em; text-align: left; background-image: none; transition: all 0.3s;}
	#header .headerFix .naviArea .menuNavi li>.subMenu>li:last-child>a {padding: 10px 0 10px 20px; border-bottom: 0;}
	#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(246,174,0,1.0); 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;}

	#header .headerFix .naviArea .menuNavi li:last-child > .subMenu {left: auto; right: 0;}
	#header .headerFix .naviArea .menuNavi li:nth-child(3) > .subMenu {width: 200px;}

	@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: 20px; width: 167px; height: 50px; padding: 15px 0;}
		#header .headerFix > .naviArea .ci > a {box-sizing: border-box; padding-left: 0;}

		#header .headerFix > .naviArea ul.topLink {right: 90px; width: 80px; padding : 22px 0 22px;}
		#header .headerFix > .naviArea ul.topLink > li {margin-right: 5px; width: 36px; height: 36px;}
		#header .headerFix > .naviArea ul.topLink > li > a {padding: 8px 0;}
		#header .headerFix > .naviArea ul.topLink > li.home > a,
		#header .headerFix > .naviArea ul.topLink > li.inquiry > a {background-size: 30px;}

		#header .headerFix .naviArea .menuNavi {display: none;}

		#header .headerFix .naviArea .menuNavi > li > .menuLine {top: 50px; bottom: 0; left: 0; right: auto; background-color: rgba(244,184,0,0.0);}
		#header .headerFix .naviArea .menuNavi > li:hover > .menuLine {background-color: rgba(244,184,0,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: 500; color: #555; box-sizing: border-box; padding: 10px 0 9px; border-bottom: 1px #eee solid; transition: all 0.3s;}
		#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(n) > .subMenu {left: auto; width: 100%; padding: 0;}

		#header .headerFix .naviArea .menuNavi > li > .subMenu > li {float: left; display: block; width: 100%; min-height: 40px; font-weight: 400; box-sizing: border-box; padding: 0; border-bottom: 0px rgba(255,255,255,0.2) solid;}
		#header .headerFix .naviArea .menuNavi > li > .subMenu > li > a:nth-child(n) {width: 100%; font-size: 12px; font-weight: 300; letter-spacing: 0.02em; text-align: left; line-height: 20px; box-sizing: border-box; padding: 10px 0 9px 20px; color: #333; 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: 420px) {
		#header .headerFix > .naviArea .ci {left: 10px;}
		#header .headerFix > .naviArea ul.topLink {right: 75px;}
		#naviToggle {right: 10px;}
	}
	@media screen and (max-width: 359px) {
		#header .headerFix > .naviArea ul.topLink {right: 72px; width: 72px; padding: 22px 0 22px;}
		#header .headerFix > .naviArea ul.topLink > li {margin-right: 2px; width: 34px; height: 34px;}
		#header .headerFix > .naviArea ul.topLink > li > a {padding: 8px 0;}
		#header .headerFix > .naviArea ul.topLink > li.home {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: 240px; box-sizing: border-box; padding: 40px 0 0; background: url('../img/bgBottomArea.jpg') center bottom no-repeat; background-size: cover;}

	#bottom .companyInfoArea {position: relative; display: block; margin: 0 auto; width: 100%; height: auto; box-sizing: border-box; padding: 0 20px;}

	#bottom .companyInfoArea .bottomCIArea {position: relative; display: block; margin: 0 auto; width: 100%; height: 60px;}
	#bottom .companyInfoArea .bottomCIArea .bottomCI {float: left; position: relative; display: block; width: 180px; height: 60px; box-sizing: border-box; background: url('../img/ci_white_CES.png') center center no-repeat;}
	#bottom .companyInfoArea .bottomCIArea .bottomCI > a {position: absolute; inset: 0 0 0 0; display: block; widtH: 100%; height: 100%;}
	#bottom .companyInfoArea .bottomCIArea .linkGroup {float: right; display: flex; width: 360px; height: 60px; box-sizing: border-box; padding: 10px 0;}
	#bottom .companyInfoArea .bottomCIArea .linkGroup > li {float: left; display: block; flex-grow: 1; height: 100%;}
	#bottom .companyInfoArea .bottomCIArea .linkGroup > li > a {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;  font-size: 13px; font-weight: 500; color: #fff; text-align: center; text-decoration: none; transition: all 0.3s;}
	#bottom .companyInfoArea .bottomCIArea .linkGroup > li > a:hover {background-color: rgba(244,184,0,1.0);}

	#bottom .companyInfoArea .copyrightArea {position: relative; display: block; margin: 20px auto 0; width: 100%; height: auto; min-height: 50px; box-sizing: border-box; padding-top: 19px; border-top: 1px rgba(255,255,255,0.3) solid;}
	#bottom .companyInfoArea .copyrightArea > .companyInfo {display: block; width: 100%; padding: 0;}
	#bottom .companyInfoArea .copyrightArea > .companyInfo p {padding: 0; line-height: 20px; font-size: 12px; font-weight: 100; color: #bbb; letter-spacing: -0.01em;}
	#bottom .companyInfoArea .copyrightArea > .companyInfo p > br {display: block;}
	#bottom .companyInfoArea .copyrightArea > .companyInfo p > span {padding-right: 20px;}
	#bottom .companyInfoArea .copyrightArea > .companyInfo p > strong {font-weight: 700;}
	#bottom .companyInfoArea .copyrightArea > p.copyright {position: absolute; top: 20px; left: auto; right: 0; display: block; width: 100%; height: 20px; box-sizing: border-box; padding: 0; line-height: 20px; font-size: 11px; font-weight: 300; color: #bbb; text-align: right;}
	#bottom .companyInfoArea .copyrightArea > p.copyright strong {font-weight: 700; color: #fff;}
	#bottom .companyInfoArea .copyrightArea > a.contactUs {position: absolute; top: 50px; right: 0; display: flex; justify-content: center; align-items: center; width: 140px; height: 30px; box-sizing: border-box; padding: 4px; border: 1px rgba(255,255,255,0.3) solid; font-size: 12px; font-weight: 500; color: #fff; text-decoration: none; transition: all 0.3s;}
	#bottom .companyInfoArea .copyrightArea > a.contactUs:hover {border-color: rgba(0,77,169,1.0); background-color: rgba(0,77,169,0.8);}
	@media screen and (max-width: 1220px) {
		#bottom .companyInfoArea {padding: 0 10px;}
	}
	@media screen and (max-width: 980px) {
	}
	@media screen and (max-width: 660px) {
		#bottom .companyInfoArea .bottomCIArea {height: auto;}
		#bottom .companyInfoArea .bottomCIArea .bottomCI {float: none; margin: 0 auto;}
		#bottom .companyInfoArea .bottomCIArea .linkGroup {float: none; margin: 0 auto;}
		#bottom .companyInfoArea .copyrightArea > .companyInfo {margin: 0 auto;}
		#bottom .companyInfoArea .copyrightArea > .companyInfo p {line-height: 1.4em; font-size: 12px; text-align: center;}
		#bottom .companyInfoArea .copyrightArea > .companyInfo p > span {display: inline-block; padding: 0 10px;}

		#bottom .companyInfoArea .copyrightArea > p.copyright {position: relative; top: 0; margin: 20px 0 0; padding: 0; text-align: left;}
		#bottom .companyInfoArea .copyrightArea > a.contactUs {position: relative; top: 0; margin: 10px 0 0; padding: 0;}

		#bottom .companyInfoArea .copyrightArea > p.copyright {line-height: 1.4em; font-size: 11px; text-align: center;}
		#bottom .companyInfoArea .copyrightArea > a.contactUs {margin: 10px auto 0; padding: 0;}
	}
	@media screen and (max-width: 420px) {
		#bottom .companyInfoArea .copyrightArea > .companyInfo p {font-size: 9px;}
		#bottom .companyInfoArea .copyrightArea > p.copyright {font-size: 9px;}
		#bottom .companyInfoArea .bottomCIArea .linkGroup {width: 300px;}
	}

	#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; top: 80px; bottom: 0; right: -60px; margin: auto 0; 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 {opacity: 0; /* visibility: hidden;*/}

	.slideUp {animation-name: slide; -webkit-animation-name: slide; animation-duration: 1.0s; -webkit-animation-duration: 1.0s; opacity: 1; /* visibility: hidden;*/}
	@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; opacity: 1; /* visibility: hidden;*/}
	@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; opacity: 1; /* visibility: hidden;*/}
	@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; opacity: 1; /* visibility: hidden;*/}
	@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 */