@charset "utf-8";

@import url(base.css);
@import url(index.css);
@import url(sub.css);

/*--------------------------*/
/* body */
/*--------------------------*/

@media screen and (min-width:416px) {
	
	body {min-width:1200px;}
}

@media screen and (max-width:415px) {
	
	body {min-width:320px;}
	body.navOn {position:fixed;}
	
}

/*--------------------------*/
/* header */
/*--------------------------*/

@media screen and (min-width:416px) {
	
	header {position:fixed; z-index:999; width:100%; min-width:1200px; height:100px; padding:0 170px; box-sizing:border-box;}
	header.on {background:white; border-bottom:1px solid #dddddd;}
	
	header h1 {position:absolute; left:20px; top:25px; width:130px; height:44px; background:url("../img/common/logoWhite.png") no-repeat;}
	header.on h1 {background-image:url("../img/common/logo.png");}
	header h1 a {display:block; width:100%; height:100%;}
	
	header .navOpen {display:none;}
	
	header nav {position:absolute; left:50%; top:0; width:920px; margin-left:-426px;}
	header nav > div {display:none;}
	header nav > ul > li {position:relative; float:left;}
	header nav > ul > li > a {float:left; height:100px; padding:38px 30px 0; font-size:18px; text-align:center; color:white !important;}
	header.on nav > ul > li > a {color:#111111 !important;}
	
	header nav > ul ul {position:absolute; left:0; top:100px; z-index:99999; overflow:hidden; width:100%; height:0; padding:10px 0 0 22px; box-sizing:border-box;
		-webkit-transition:height 0.3s ease;
		-moz-transition:height 0.3s ease;
		-o-transition:height 0.3s ease;
		transition:height 0.3s ease;
	}
	body.navOn header nav > ul ul {height:350px;}
	header nav > ul ul a {display:block; padding:8px 0; font-family:"notoLight"; line-height:22px; word-break:break-word;}
	header nav > ul ul a:hover {color:#13547a;}
	
	header .navBg {position:fixed; left:0; top:100px; z-index:9999; width:100%; height:0; background:white; opacity:0.9;
		-webkit-transition:height 0.3s ease;
		-moz-transition:height 0.3s ease;
		-o-transition:height 0.3s ease;
		transition:height 0.3s ease;
	}
	body.navOn header .navBg {height:350px;}
	
	header .estimate {position:absolute; right:92px; top:50%; display:block; height:24px; margin-top:-12px; box-sizing:border-box; color:white;}
	header.on .estimate {color:#111111; border-color:#111111;}
	
	header .language {position:absolute; right:20px; top:50%; margin-top:-12px;}
	header .language button {width:52px; height:24px; text-align:left; vertical-align:top; color:white; background:url("../img/common/arrowLanguage.png") 100% 10px no-repeat;}
	header.on .language button {color:#111111; background-image:url("../img/common/arrowLanguage_on.png"); border-color:#111111;}
	header .language div {position:absolute; right:0; top:29px; border:1px solid white;}
	header.on .language div {border:1px solid #111111;}
	header .language div::after {position:absolute; left:0; top:0; display:block; width:100%; height:100%; content:""; background:white; opacity:0.8;}
	header.on .language div::after {opacity:1;}
	header .language a {position:relative; z-index:9; display:block; width:52px; padding:5px 0; font-family:"notoRegular"; font-size:14px; text-align:center;}
	header .language a:last-child {border-top:1px solid white;}
	header.on .language a:last-child {border-top:1px solid #111111;}
	
}

@media screen and (min-width:416px) and (-ms-high-contrast:active), (-ms-high-contrast:none) {
	header nav > ul > li > a {letter-spacing:-0.5px;}
}

@media screen and (max-width:415px) {
	
	header {position:fixed; z-index:999; width:100%; height:60px;}
	header.on {background:white; border-bottom:1px solid #dddddd;}
	
	header h1 {position:absolute; left:15px; top:50%; width:29px; height:34px; margin-top:-17px; background:url("../img/common/logoWhite.png") 0 0 / cover no-repeat;}
	header.on h1 {background-image:url("../img/common/logo.png");}
	header h1 a {display:block; width:100%; height:100%;}
	
	header .navOpen {position:absolute; right:0; top:0; width:60px; height:60px; background:url("../img/common/navOn.png") 50% 50% / 25px no-repeat;}
	header.on .navOpen {background-image:url("../img/common/navOn_on.png");}
	
	header nav {overflow-y:auto; position:fixed; right:-320px; top:0; z-index:99999; width:320px; height:100%; background:white;
		-webkit-transition:right 0.3s ease;
		-moz-transition:right 0.3s ease;
		-o-transition:right 0.3s ease;
		transition:right 0.3s ease;
	}
	body.navOn header nav {right:0;}
	header nav > div {position:relative; width:100%; height:60px; border-bottom:1px solid #e2e2e2;}
	header nav > div h2 {position:absolute; left:20px; top:12px; font-size:20px;}
	header nav > div button {position:absolute; right:0; top:0; width:60px; height:100%; background:url("../img/common/navClose.png") 50% 50% / 23px no-repeat;}
	
	header nav > ul > li > a {display:block; width:100%; height:50px; padding:10px 20px 0; box-sizing:border-box; font-family:"notoDemiLight"; font-size:18px; background:url("../img/common/navDown.png") 282px 50% / 17px no-repeat; border-bottom:1px solid #e2e2e2;}
	header nav > ul > li > a.on {color:white; background:#13547a url("../img/common/navUp.png") 282px 50% / 17px no-repeat;}
	
	header nav > ul ul {overflow:hidden; width:100%; height:0; background:#f0f0f0;
		-webkit-transition:height 0.3s ease;
		-moz-transition:height 0.3s ease;
		-o-transition:height 0.3s ease;
		transition:height 0.3s ease;
	}
	header nav > ul > li:nth-child(1) a.on + ul {height:350px;}
	header nav > ul > li:nth-child(2) a.on + ul {height:100px;}
	header nav > ul > li:nth-child(3) a.on + ul {height:150px;}
	header nav > ul > li:nth-child(4) a.on + ul {height:100px;}
	header nav > ul > li:nth-child(5) a.on + ul {height:150px;}
	header nav > ul ul a {display:block; height:50px; padding:12px 30px 0; box-sizing:border-box; font-family:"notoDemiLight"; color:#888888 !important; border-top:1px solid white;}
	header nav > ul ul li:first-child a {border-top:none;}
	
	body.navOn header::after {position:fixed; z-index:9999; display:block; width:100%; height:100%; content:""; background:black; opacity:0.6;}
	
	header .navBg {display:none !important;}
	
	header .estimate {position:absolute; right:130px; top:50%; display:block; height:24px; margin-top:-12px; box-sizing:border-box; font-size:14px; color:white;}
	header.on .estimate {color:#111111; border-color:#111111;}
	
	header .language {position:absolute; right:60px; top:50%; margin-top:-12px;}
	header .language button {width:52px; height:24px; text-align:left; vertical-align:top; font-size:14px; color:white; background:url("../img/common/arrowLanguage.png") 100% 10px no-repeat;}
	header.on .language button {color:#111111; background-image:url("../img/common/arrowLanguage_on.png"); border-color:#111111;}
	header .language div {position:absolute; right:0; top:30px; border:1px solid white;}
	header.on .language div {border:1px solid #111111;}
	header .language div::after {position:absolute; left:0; top:0; display:block; width:100%; height:100%; content:""; background:white; opacity:0.8;}
	header.on .language div::after {opacity:1;}
	header .language a {position:relative; z-index:9; display:block; width:52px; padding:5px 0; font-family:"notoRegular"; font-size:14px; text-align:center;}
	header .language a:last-child {border-top:1px solid white;}
	header.on .language a:last-child {border-top:1px solid #111111;}
	
}

/*--------------------------*/
/* banner */
/*--------------------------*/

@media screen and (min-width:416px) {
	
	#cmm_banner {float:left; width:100%; border-top:1px solid #e6e6e6;}
	#cmm_banner > div {width:1200px; margin:0 auto; padding:25px 0; text-align:center;}
	#cmm_banner a:nth-child(2) {display:inline-block; margin:0 187px;}
	
}

@media screen and (max-width:415px) {
	
	#cmm_banner {float:left; width:100%; border-top:1px solid #e6e6e6;}
	#cmm_banner > div {width:100%; padding:15px 0; text-align:center;}
	#cmm_banner a:nth-child(2) {margin:0 15px;}
	#cmm_banner img {height:26px;}

}

/*--------------------------*/
/* footer */
/*--------------------------*/

@media screen and (min-width:416px) {
	
	footer {float:left; width:100%; background:#111111; border-bottom:1px solid #292929;}
	footer > div {position:relative; width:1200px; margin:0 auto; padding:40px 0;}
	
	footer .link {margin-bottom:20px;}
	footer .link a {position:relative; margin-right:30px; color:white;}
	footer .link a:first-child::after {position:absolute; right:-16px; top:1px; display:block; width:1px; height:14px; content:""; background:#7f7f7f;}
	
	footer img {position:absolute; right:0; bottom:-80px; width:122px; opacity:0.6;}
	
	footer address {font-family:"notoRegular"; font-size:14px; color:white;}
	footer address > span {position:relative; display:inline-block; margin-right:30px;}
	footer address > span::after {position:absolute; right:-16px; top:2px; display:block; width:1px; height:14px; content:""; background:#7f7f7f;}
	footer address > span:last-child::after {display:none;}
	
	footer a[href="#top"] {position:absolute; right:0; top:0; display:block; width:65px; height:65px; background:#13547a url("../img/common/skip.png") 50% 50% no-repeat;}
	
	#cmm_bottom {float:left; width:100%; background:#111111;}
	#cmm_bottom > div {position:relative; width:1200px; margin:0 auto; padding:50px 0;}
	#cmm_bottom p {font-family:"notoRegular"; font-size:14px; letter-spacing:1px; color:white;}

}

@media screen and (max-width:415px) {
	
	footer {float:left; width:100%; background:#111111;}
	footer > div {width:100%; text-align:center;}
	
	footer .link {width:100%; margin-bottom:25px; padding:20px 0; border-bottom:1px solid #292929;}
	footer .link a {position:relative; margin-right:40px; font-family:"notoRegular"; letter-spacing:1px; color:white;}
	footer .link a:first-child::after {position:absolute; right:-20px; top:1px; display:block; width:1px; height:14px; content:""; background:#7f7f7f;}
	
	footer img {margin-bottom:5px; width:110px;}
	
	footer address {width:100%; padding:0 15px; box-sizing:border-box; font-family:"notoDemiLight"; font-size:14px; line-height:24px; color:white;}
	footer address > span:nth-child(1),
	footer address > span:nth-child(1) span,
	footer address > span:nth-child(4) {
		display:block;
	}
	footer address > span:nth-child(2) {position:relative; display:inline-block; margin-right:20px;}
	footer address > span:nth-child(2)::after {position:absolute; right:-10px; top:5px; display:block; width:1px; height:14px; content:""; background:#7f7f7f;}
	
	footer a[href="#top"] {display:none;}
	
	#cmm_bottom {float:left; width:100%; padding:15px 0 30px; background:#111111;}
	#cmm_bottom > div {width:100%; text-align:center;}
	#cmm_bottom p {font-family:"notoLight"; font-size:14px; color:white;}
	
}

/*--------------------------*/
/* sub01 */
/*--------------------------*/

/* visual */
@media screen and (min-width:416px) {
	
	#cmm_sbVisual {position:relative; float:left; width:100%; height:430px; background:url("../img/common/subVisual.jpg") 50% 50% / cover no-repeat;}
	
	#cmm_sbVisual h2 {width:100%; margin:130px 0 10px; font-family:"spoqaBold"; font-size:65px; text-align:center; color:white;}
	#cmm_sbVisual p {width:100%; font-size:65px; font-family:"spoqaLight"; font-size:22px; text-align:center; color:white;}
	
}

@media screen and (max-width:415px) {
	
	#cmm_sbVisual {float:left; width:100%; height:180px; padding:0 15px; box-sizing:border-box; background:url("../img/common/subVisual.jpg") 50% 50% / cover no-repeat;}
	
	#cmm_sbVisual h2 {width:100%; margin:80px 0 5px; font-family:"spoqaBold"; font-size:28px; text-align:center; color:white;}
	#cmm_sbVisual p {width:100%; font-family:"spoqaLight"; font-size:13px; letter-spacing:-0.5px; text-align:center; color:white;}
	
}

/*--------------------------*/
/* sub02 */
/*--------------------------*/

/* visual */
@media screen and (min-width:416px) {
	
	#cmm_sbVisual02 {position:relative; float:left; width:100%; height:430px; background:url("../img/common/subVisual02.jpg") 50% 50% / cover no-repeat;}
	
	#cmm_sbVisual02 h2 {width:100%; margin:130px 0 10px; font-family:"spoqaBold"; font-size:65px; text-align:center; color:white;}
	#cmm_sbVisual02 p {width:100%; font-size:65px; font-family:"spoqaLight"; font-size:22px; text-align:center; color:white;}
	
}

@media screen and (max-width:415px) {
	
	#cmm_sbVisual02 {float:left; width:100%; height:180px; padding:0 15px; box-sizing:border-box; background:url("../img/common/subVisual02.jpg") 50% 50% / cover no-repeat;}
	
	#cmm_sbVisual02 h2 {width:100%; margin:80px 0 5px; font-family:"spoqaBold"; font-size:28px; text-align:center; color:white;}
	#cmm_sbVisual02 p {width:100%; font-family:"spoqaLight"; font-size:13px; letter-spacing:-0.5px; text-align:center; color:white;}
	
}


/*--------------------------*/
/* sub03 */
/*--------------------------*/

/* visual */
@media screen and (min-width:416px) {
	
	#cmm_sbVisual03 {position:relative; float:left; width:100%; height:430px; background:url("../img/common/subVisual03.jpg") 50% 50% / cover no-repeat;}
	
	#cmm_sbVisual03 h2 {width:100%; margin:130px 0 10px; font-family:"spoqaBold"; font-size:65px; text-align:center; color:white;}
	#cmm_sbVisual03 p {width:100%; font-size:65px; font-family:"spoqaLight"; font-size:22px; text-align:center; color:white;}
	
}

@media screen and (max-width:415px) {
	
	#cmm_sbVisual03 {float:left; width:100%; height:180px; padding:0 15px; box-sizing:border-box; background:url("../img/common/subVisual03.jpg") 50% 50% / cover no-repeat;}
	
	#cmm_sbVisual03 h2 {width:100%; margin:80px 0 5px; font-family:"spoqaBold"; font-size:28px; text-align:center; color:white;}
	#cmm_sbVisual03 p {width:100%; font-family:"spoqaLight"; font-size:13px; letter-spacing:-0.5px; text-align:center; color:white;}
	
}


/*--------------------------*/
/* sub04 */
/*--------------------------*/

/* visual */
@media screen and (min-width:416px) {
	
	#cmm_sbVisual04 {position:relative; float:left; width:100%; height:430px; background:url("../img/common/subVisual04.jpg") 50% 50% / cover no-repeat;}
	
	#cmm_sbVisual04 h2 {width:100%; margin:130px 0 10px; font-family:"spoqaBold"; font-size:65px; text-align:center; color:white;}
	#cmm_sbVisual04 p {width:100%; font-size:65px; font-family:"spoqaLight"; font-size:22px; text-align:center; color:white;}
	
}

@media screen and (max-width:415px) {
	
	#cmm_sbVisual04 {float:left; width:100%; height:180px; padding:0 15px; box-sizing:border-box; background:url("../img/common/subVisual04.jpg") 50% 50% / cover no-repeat;}
	
	#cmm_sbVisual04 h2 {width:100%; margin:80px 0 5px; font-family:"spoqaBold"; font-size:28px; text-align:center; color:white;}
	#cmm_sbVisual04 p {width:100%; font-family:"spoqaLight"; font-size:13px; letter-spacing:-0.5px; text-align:center; color:white;}
	
}


/*--------------------------*/
/* sub05 */
/*--------------------------*/

/* visual */
@media screen and (min-width:416px) {
	
	#cmm_sbVisual05 {position:relative; float:left; width:100%; height:430px; background:url("../img/common/subVisual05.jpg") 50% 50% / cover no-repeat;}
	
	#cmm_sbVisual05 h2 {width:100%; margin:130px 0 10px; font-family:"spoqaBold"; font-size:65px; text-align:center; color:white;}
	#cmm_sbVisual05 p {width:100%; font-size:65px; font-family:"spoqaLight"; font-size:22px; text-align:center; color:white;}
	
}

@media screen and (max-width:415px) {
	
	#cmm_sbVisual05 {float:left; width:100%; height:180px; padding:0 15px; box-sizing:border-box; background:url("../img/common/subVisual05.jpg") 50% 50% / cover no-repeat;}
	
	#cmm_sbVisual05 h2 {width:100%; margin:80px 0 5px; font-family:"spoqaBold"; font-size:28px; text-align:center; color:white;}
	#cmm_sbVisual05 p {width:100%; font-family:"spoqaLight"; font-size:13px; letter-spacing:-0.5px; text-align:center; color:white;}
	
}







/* snv */
@media screen and (min-width:416px) {
	
	#cmm_snv {position:relative; top:-70px; float:left; width:100%; height:70px; border-bottom:1px solid #e6e6e6;}
	#cmm_snv::after {position:absolute; left:0; top:0; display:block; width:100%; height:100%; content:""; background:white;}
	#cmm_snv > div {position:relative; z-index:9; width:1200px; height:100%; margin:0 auto;}
	#cmm_snv .home {float:left; display:block; width:68px; height:100%; background:url("../img/common/home.png") 50% 50% no-repeat; border-left:1px solid #e6e6e6; border-right:1px solid #e6e6e6;}
	#cmm_snv .snv {position:relative; float:left; height:100%; border-right:1px solid #e6e6e6;}
	#cmm_snv .snv button {min-width:290px; height:100%; padding:0 60px 0 30px; font-family:"notoRegular"; font-size:18px; color:black; text-align:left;}
	#cmm_snv .snv button::after {position:absolute; right:30px; top:50%; display:block; width:7px; height:4px; content:""; background:url("../img/common/arrowSnv.png") no-repeat;}
	#cmm_snv .snv div {position:absolute; left:0; top:70px; z-index:9; display:none; width:100%; background:white; border-left:1px solid #e6e6e6; border-right:1px solid #e6e6e6;}
	#cmm_snv .snv div a {display:block; width:100%; padding:10px 20px; box-sizing:border-box; border-bottom:1px solid #e6e6e6;}
	#cmm_snv .snv div a:nth-child(1) {border-top:1px solid #e6e6e6;}
	
}

@media screen and (max-width:415px) {
	
	#cmm_snv {position:relative; float:left; width:100%; margin-bottom:30px;}
	#cmm_snv .home, #cmm_snv .home + .snv {display:none;}
	#cmm_snv .snv {position:relative; width:100%;}
	#cmm_snv .snv button {position:relative; width:100%; padding:12px; font-family:"spoqaBold"; font-size:18px; border-bottom:1px solid #e5e5e5;}
	#cmm_snv .snv button::after {position:absolute; right:15px; top:50%; display:block; width:12px; height:7px; content:""; background:url("../img/common/arrowSnv_m.png")  0 0 / cover no-repeat;}
	#cmm_snv.opt .snv button {padding:12px 30px 12px 15px; font-size:15px; text-align:left;}
	#cmm_snv .snv div {display:none; width:100%;}
	#cmm_snv .snv div a {display:block; width:100%; padding:10px 20px; box-sizing:border-box; font-family:"spoqaRegular"; font-size:14px; background:#f6f6f6; border-bottom:1px solid #e6e6e6;}
	
}

/* contents */
@media screen and (min-width:416px) {
	
	#cmm_sub {width:1200px; margin:0 auto;}
	#cmm_sub h3 {float:left; width:100%; margin-bottom:60px; font-family:"notoBold"; font-size:50px; text-align:center;}
	#cmm_sub .container.p {float:left; width:100%; margin-bottom:100px;}
	#cmm_sub .container.p > img {width:100%;}
	#cmm_sub .container.m {display:none;}
	#cmm_sub .board {float:left; width:100%; margin-bottom:60px;}
	
}

@media screen and (max-width:415px) {
	
	#cmm_sub {float:left; width:100%; padding:0 15px; margin-bottom:40px; box-sizing:border-box;}
	#cmm_sub h3 {display:none;}
	#cmm_sub .container.p {display:none;}
	#cmm_sub .container.m {float:left; width:100%;}
	#cmm_sub .container.m > img {width:100%;}
	#cmm_sub .board {float:left; width:100%; padding:0 15px; box-sizing:border-box;}

}