@charset "utf-8";

@import url(base.css);
@import url(main.css);
@import url(sub.css);
@import url(owl.carousel.css);
@import url(swiper.css);

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

body {width:100%; min-width:280px;}

@media screen and (min-width:2560px) {
	
	body {max-width:2560px; margin:0 auto;}
	
}

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

/* PC */

@media screen and (min-width:1100px) {

	header {top:-130px; float:left; width:100%; height:110px; background:#005385; transition:top 0.5s ease;}
	header > div {position:relative; float:left; width:100%; padding-top:45px;}

	body.fixOn header {position:fixed; left:0; top:-45px; z-index:999;}

	header h1 {position:absolute; left:25px; top:50%; margin-top:-31px;}

	body.fixOn header h1 {margin-top:2px;}
	body.fixOn h1 img {width:120px;}

	header .navOpen {display:none;}

	header .language {position:absolute; right:0; top:0;}
	header .language button {width:120px; height:45px; padding-left:35px; font-size:14px; text-align:left; color:white; background:url("../img/common/arrow_language.png") 75px 50% no-repeat; border-left:1px solid #004772;}
	header .language div {position:absolute; right:0; top:44px; z-index:999; width:100%; background:#004772;}
	header .language div a {display:block; padding:10px 0; text-align:center; color:white;}
	header .language div a:first-child {border-bottom:1px solid #005385;}

	header nav .top {display:none;}

	header nav > ul {float:left; width:100%; height:65px; padding-left:20%; background:#0a69b2;}
	header nav > ul > li {position:relative; float:left; width:20%; height:100%;}
	header nav > ul > li > a {display:flex; justify-content:center; align-items:center; width:100%; height:100%; padding:0 5px; text-align:center; color:white !important;}
	header nav > ul > li:hover > a {color:#0a69b2 !important; background:#cee4f5;}
	header nav > ul ul {position:absolute; left:0; top:65px; display:none; z-index:999; width:100%; background:#cee4f5;}
	header nav > ul > li:hover ul {display:block;}
	header nav > ul ul a {display:block; padding:10px 5px; text-align:center; color:#0a69b2 !important; border-top:1px solid #8dbadc;}

	header nav .menu {position:absolute; right:120px; top:0;}
	header nav .menu a {float:left; display:block; width:120px; height:45px; padding-top:13px; font-size:14px; text-align:center; color:white; border-left:1px solid #004772;}

}

@media screen and (min-width:2560px) {
	
	body.fixOn header {left:50%; width:2560px; margin-left:-1280px}
	
}

/* tablet & mobile */

@media screen and (max-width:1099px) {

	header {position:fixed; left:0; top:0; z-index:999; width:100%; height:65px; background:#0a69b2;}

	header h1 {position:absolute; left:25px; top:10px;}
	header h1 img {width:120px;}

	header .navOpen {position:absolute; right:0; top:0; width:65px; height:100%; background:url("../img/common/nav.png") 50% 50% / 24px no-repeat;}

	header .language {position:absolute; right:80px; top:12px;}
	header .language button {height:36px; padding-right:30px; color:white; background:url("../img/common/arrow_language.png") 100% 50% / 9px no-repeat; border-bottom:1px solid white;}
	header .language div {position:absolute; right:0; top:42px; z-index:999; width:100%; background:#004772;}
	header .language div a {display:block; padding:10px 0; text-align:center; color:white;}
	header .language div a:first-child {border-bottom:1px solid #005385;}

	header nav {position:fixed; right:-300px; top:0; z-index:99999; overflow:hidden; width:280px; height:100%; background:white; opacity:0; transition:right 0.5s ease, opacity 0.5s ease;}
	body.navOn header nav {right:0; opacity:1;}
	header nav .top {position:relative; float:left; width:100%; height:65px; background:#005385;}
	header nav .top p {position:absolute; left:20px; top:12px; font-size:24px; color:white;}
	header nav .top button {position:absolute; right:0; top:0; width:65px; height:100%; background:url("../img/common/navClose.png") 50% 50% / 20px no-repeat;}
	header nav > ul {float:left; width:100%;}
	header nav > ul > li > a {display:block; padding:14px 20px; font-size:18px; border-bottom:1px solid #dcdcdc;}
	header nav > ul ul {overflow:hidden; height:0; padding:0; background:#cee4f5; transition:all 0.5s ease;}
	header nav > ul > li:nth-child(2) ul.on {height:220px; padding:10px 0;}
	header nav > ul > li:nth-child(3) ul.on {height:170px; padding:10px 0;}
	header nav > ul ul a {display:block; height:50px; padding:10px 20px 0; color:#0a69b2 !important;}
	header nav .menu {float:left; width:100%; border-top:10px solid #f8f8f8;}
	header nav .menu a {float:left; display:block; width:50%; height:50px; padding-top:12px; text-align:center; color:white; background:#97ccf4; border-right:1px solid #abd5f4;}
	header nav .menu a:last-child {border-right:none;}

	body.navOn header [data-nav-bg] {position:fixed; left:0; top:0; width:100%; height:100%; background:black; opacity:0.6;}

}

@media screen and (max-width:600px) {

	header {height:60px;}

	header h1 {left:15px; top:12px;}
	header h1 img {width:100px;}

	header .navOpen {width:60px;}

	header .language {right:70px;}

	header nav .top {height:60px;}
	header nav .top p {top:14px; font-size:20px;}
	header nav .top button {width:60px; background-size:18px;}
	header nav > ul > li > a {font-size:16px;}

}

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

footer {float:left; width:100%; padding:40px 0; background:#5c5e63;}
footer > div {position:relative; width:100%; max-width:1250px; margin:0 auto; padding:0 25px;}

footer address {width:100%; color:white;}
footer address span {position:relative; display:inline-block; width:1px; height:12px; margin:0 15px; background:#d4d4d4;}
footer p {width:100%; margin-top:10px;  font-family:"robotoRegular"; font-size:15px; word-break:break-word; color:#e5e5e6;}

@media screen and (max-width:1099px) {

	footer {padding:20px 25px; text-align:center;}
	footer > div {padding:0;}

	footer p {font-size:14px;}

}

@media screen and (max-width:600px) {

	footer {padding:20px;}
	footer address {margin-bottom:5px;}
	footer address span:nth-child(1) {display:block; height:0; background:none;}

	footer p {font-size:13px;}

}

/*--------------------------*/
/* sub */
/*--------------------------*/

/* visual */

#cmm_sbVisual {clear:both; height:285px; margin-bottom:50px; padding:100px 25px 0; text-align:center;}

#cmm_sbVisual.bg01 {background:url("../img/common/sbVisual01.jpg") 50% 50% / cover no-repeat;}
#cmm_sbVisual.bg02 {background:url("../img/common/sbVisual02.jpg") 50% 50% / cover no-repeat;}
#cmm_sbVisual.bg03 {background:url("../img/common/sbVisual03.jpg") 50% 50% / cover no-repeat;}
#cmm_sbVisual.bg04 {background:url("../img/common/sbVisual04.jpg") 50% 50% / cover no-repeat;}
#cmm_sbVisual.bg05 {background:url("../img/common/sbVisual05.jpg") 50% 50% / cover no-repeat;}

#cmm_sbVisual.bgA01 {background:url("../img/common/sbVisualA01.jpg") 50% 50% / cover no-repeat;}
#cmm_sbVisual.bgA02 {background:url("../img/common/sbVisualA02.jpg") 50% 50% / cover no-repeat;}
#cmm_sbVisual.bgA03 {background:url("../img/common/sbVisualA03.jpg") 50% 50% / cover no-repeat;}

#cmm_sbVisual h2 {font-size:58px; font-family:"robotoBold"; color:white;}

@media screen and (min-width:1100px) {

	body.fixOn #cmm_sbVisual {margin-top:110px;}

}

@media screen and (max-width:1099px) {

	#cmm_sbVisual {margin-top:65px; height:180px; padding-top:50px;}
	#cmm_sbVisual h2 {font-size:42px;}

}

@media screen and (max-width:600px) {

	#cmm_sbVisual {margin:60px 0 40px; height:120px; padding:40px 15px 0;}
	#cmm_sbVisual h2 {font-size:28px;}

}

/* snv */

#cmm_snv {width:100%; max-width:1250px; margin:0 auto 50px; padding:0 25px;}
#cmm_snv::after {clear:both; display:block; content:"";}

#cmm_snv button {display:none;}

#cmm_snv .box {float:left; width:100%; border-top:1px solid #dedede; border-bottom:1px solid #dedede;}

#cmm_snv .box a {position:relative; float:left; display:flex; justify-content:center; align-items:center; height:50px; font-family:"notoRegular"; font-size:18px; text-align:center; color:#7b7b7b; border-right:1px solid #dedede;}
#cmm_snv .box a:first-child {border-left:1px solid #dedede;}
#cmm_snv .box a:last-child {float:right;}
#cmm_snv .box a.on {font-family:"notoMedium"; color:white; background:#0a69b2;}

#cmm_snv.num02 a {width:50%;}
#cmm_snv.num03 a {width:33.33%;}
#cmm_snv.num03 a:last-child {width:33.34%;}
#cmm_snv.num04 a {width:25%;}

@media screen and (min-width:601px) and (max-width:1099px) {

	#cmm_snv .box a {font-size:16px;}

}

@media screen and (max-width:600px) {

	#cmm_snv {position:relative; margin-bottom:30px; padding:0 15px;}

	#cmm_snv button {position:relative; display:block; width:100%; height:45px; font-family:"notoRegular"; font-size:16px; color:white; background:#97ccf4;}
	#cmm_snv button::after {position:absolute; right:15px; top:50%; display:block; width:14px; height:8px; margin-top:-4px; content:""; background:url("../img/common/arrow_snv.png") 0 / cover no-repeat;}

	#cmm_snv .box {position:absolute; left:15px; top:47px; z-index:99; display:none; width:calc(100% - 30px); background:white; border:1px solid #dedede;}
	#cmm_snv .box a {width:100% !important; height:45px; font-size:15px; border-bottom:1px solid #dedede; border-right:none;}
	#cmm_snv .box a:first-child {border-left:none;}
	#cmm_snv .box a:last-child {border-bottom:none;}
	#cmm_snv .box a.on {font-family:"notoDemiLight"; color:#7b7b7b; background:white;}
	#cmm_snv .box a.on::after {display:none;}

}

/* content */

#cmm_sub {width:100%; max-width:1250px; margin:0 auto; padding:0 25px;}
#cmm_sub > div {float:left; width:100%; min-height:200px; margin-bottom:100px;}

#cmm_sub.sample p {width:100%; margin-top:50px;}
#cmm_sub.sample p img {width:100%;}

@media screen and (max-width:1099px) {

	#cmm_sub > div {margin-bottom:60px;}

}

@media screen and (max-width:600px) {

	#cmm_sub {padding:0 15px;}
	#cmm_sub > div {margin-bottom:40px;}

}