@charset "utf-8";

@import url(base.css);
@import url(main.css);
@import url(content.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 */
/*--------------------------*/

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

	header {position:fixed; left:0; top:0; z-index:9999; width:100%; height:90px; background:white; transition:height 0.5s ease;}
	body.fixOn header {height:70px; border-bottom:1px solid #dfdfdf;}

	header h1 {position:absolute; left:25px; top:50%; margin-top:-32px; line-height:0; transition:margin-top 0.5s ease;}
	body.fixOn header h1 {margin-top:-18px;}
	header h1 img {height:60px; transition:height 0.5s ease;}
	body.fixOn header h1 img {height:36px;}

	header .navOpen {display:none;}

	header nav {display:flex; width:70%; height:100%; margin:0 auto;}
	header nav div {display:none;}

	header nav > ul {display:flex; width:100%; height:100%;}
	header nav > ul > li {position:relative; width:20%; height:100%;}
	header nav > ul > li > a {display:flex; justify-content:center; align-items:center; width:100%; height:100%; font-family:"notoRegular"; font-size:20px; text-align:center;}
	header nav > ul > li:hover > a {color:#354886;}

	header nav > ul ul {position:absolute; left:0; top:90px; z-index:99; overflow:hidden; width:100%; height:0; opacity:0; border-left:1px solid #dfdfdf; border-top:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf; transition:height 0.5s ease, opacity 0.5s ease, top 0.5s ease;}
	body.navOn header nav > ul ul {height:300px; opacity:1;}
	body.fixOn header nav > ul ul {top:69px;}
	header nav > ul > li:last-child ul {border-right:1px solid #dfdfdf;}
	header nav > ul ul a {display:flex; justify-content:center; align-items:center; height:50px; text-align:center;}
	header nav > ul ul a:hover {color:white; background:#354886;}

	header [data-nav-bg] {position:fixed; left:0; top:90px; z-index:9; display:block; width:100%; height:0; opacity:0; background:white; border-top:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf; transition:all 0.5s ease}
	body.navOn header [data-nav-bg] {height:300px; opacity:1;}
	body.fixOn header [data-nav-bg] {top:69px;}

	header .language {position:absolute; right:25px; top:50%; margin-top:-20px;}
	header .language button {width:50px; height:40px; font-size:16px; text-align:left;}
	header .language button::after {position:absolute; right:0; top:50%; display:block; width:9px; height:6px; margin-top:-3px; content:""; background:url("../img/common/arrow_language.png") no-repeat;}
	header .language button.on::after {transform:rotate(180deg);}
	header .language div {position:absolute; left:0; top:40px; z-index:99999; width:100%; font-family:"robotoRegular"; background:white; border:1px solid #dfdfdf;}
	header .language a {display:block; width:100%; padding:10px 0; font-size:16px; text-align:center; border-top:1px solid #dfdfdf;}
	header .language a:first-child {border-top:none;}
	header .language a:hover {color:white; background:#354886;}

}

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

	header {left:50%; width:2560px; margin-left:-1280px;}

}

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

	header {position:fixed; left:0; top:0; z-index:9999; width:100%; height:70px; background:white; border-bottom:1px solid #dfdfdf;}

	header h1 {position:absolute; left:25px; top:50%; margin-top:-18px; line-height:0;}
	header h1 img {height:36px;}

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

	header nav {position:fixed; right:-300px; top:0; overflow:auto; z-index:99; 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 div {position:relative; display:block; height:70px; color:white; background:#2e3192;}
	header nav div p {display:flex; align-items:center; height:100%; padding-left:20px; font-family:"robotoRegular"; font-size:26px;}
	header nav div button {position:absolute; right:0; top:0; width:70px; height:100%; background:url("../img/common/navClose.png") 50% 50% / 20px no-repeat;}

	header nav > ul > li > a {display:flex; align-items:center; height:60px; padding-left:20px; font-size:19px; background:url("../img/common/navBg.png") 238px 50% / 14px no-repeat; border-bottom:1px solid #dfdfdf;}
	header nav > ul ul {overflow:hidden; height:0; transition:height 0.5s ease;}
	header nav > ul li:nth-child(1) ul.on {height:330px;}
	header nav > ul li:nth-child(2) ul.on {height:220px;}
	header nav > ul li:nth-child(3) ul.on {height:110px;}
	header nav > ul li:nth-child(4) ul.on {height:165px;}
	header nav > ul li:nth-child(5) ul.on {height:165px;}
	header nav > ul ul a {display:flex; align-items:center; height:55px; padding-left:25px; background:#f3f3f3; border-bottom:1px solid #d1d1d1;}

	header span[data-nav-bg] {display:none;}
	body.navOn header span[data-nav-bg] {position:fixed; left:0; top:0; z-index:9; display:block; width:100%; height:100%; background:black; opacity:0.6;}

	header .language {position:absolute; right:80px; z-index:8; top:50%; margin-top:-20px;}
	header .language button {width:50px; height:40px; font-size:16px; text-align:left;}
	header .language button::after {position:absolute; right:0; top:50%; display:block; width:9px; height:6px; margin-top:-3px; content:""; background:url("../img/common/arrow_language.png") no-repeat;}
	header .language button.on::after {transform:rotate(180deg);}
	header .language div {position:absolute; left:0; top:40px; z-index:99999; width:100%; font-family:"robotoRegular"; background:white; border:1px solid #dfdfdf;}
	header .language a {display:block; width:100%; padding:10px 0; font-size:16px; text-align:center; border-top:1px solid #dfdfdf;}
	header .language a:first-child {border-top:none;}

}

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

	header {height:60px;}

	header h1 {left:15px; margin-top:-16px;}
	header h1 img {height:32px;}

	header .navOpen {width:60px; background-size:20px;}

	header nav div {height:60px;}
	header nav div p {font-size:22px;}
	header nav div button {width:60px; background-size:16px;}

	header nav > ul > li > a {height:50px; font-size:16px; background-size:12px; background-position:245px 50%;}
	header nav > ul li:nth-child(1) ul.on {height:270px;}
	header nav > ul li:nth-child(2) ul.on {height:180px;}
	header nav > ul li:nth-child(3) ul.on {height:45px;}
	header nav > ul li:nth-child(4) ul.on {height:90px;}
	header nav > ul li:nth-child(5) ul.on {height:135px;}
	header nav > ul ul a {height:45px;}

	header .language {right:70px;}

}

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

footer {clear:both; padding:50px 25px; text-align:center; background:#98a1af;}
footer img {
	margin-bottom:25px;
	width: 110px;
}
footer address {margin-bottom:10px; font-size:16px; color:white;}
footer address span {position:relative; top:2px; display:inline-block; width:1px; height:14px; margin:0 15px; background:#b2bbc8;}
footer p {font-size:14px; color:#e1e4e9;}

footer .topLink {position:fixed; right:25px; bottom:25px; z-index:1000; display:none; width:45px; height:45px; background:white url("../img/common/topLink.png") 50% 50% no-repeat; border:1px solid #cdcdcd; border-radius:50%;}

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

	footer {padding:40px 25px;}
	footer img {height:35px; margin-bottom:15px;}
	footer address span {margin:0 15px;}

}

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

	footer .topLink:hover {background:black url("../img/common/topLink_on.png") 50% 50% no-repeat; border-color:black;}

}

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

	footer {padding:30px 15px;}
	footer img {margin-bottom:10px;}
	footer address {font-size:15px;}
	footer address span {height:14px;}
	footer address span:nth-child(1), footer address span:nth-child(3) {display:block; width:0; height:0; margin:0; background:none;}
	footer p {font-size:13px;}

	footer .topLink {right:5px; bottom:5px; width:40px; height:40px; background-size:17px;}

}

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

#cmm_sbVisual {height:500px; margin:90px 0 70px; padding:130px 25px 0; text-align:center; color:white;}
#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 h2 {font-family:"notoMedium"; font-size:70px;}
#cmm_sbVisual p {position:relative; margin-bottom:150px; font-family:"notoLight"; font-size:16px;}
#cmm_sbVisual p::after {position:absolute; left:50%; bottom:-120px; display:block; width:1px; height:80px; content:""; background:white;}

#cmm_sbVisual nav button {display:none;}
#cmm_sbVisual nav a {display:inline-block; margin:0 25px; padding:10px 0; font-size:20px; color:white; opacity:0.6;}
#cmm_sbVisual nav a.on {font-family:"notoMedium"; font-size:20px; opacity:1;}

#cmm_sbTitle {position:relative; max-width:1250px; margin:0 auto 70px; padding:0 25px;}
#cmm_sbTitle h3 {padding-bottom:20px; font-family:"notoMedium"; font-size:40px; border-bottom:1px solid black;}
#cmm_sbTitle p {position:absolute; right:25px; bottom:30px; font-size:16px; color:#585858;}
#cmm_sbTitle p span {display:inline-block; width:6px; height:11px; margin:0 12px; background:url("../img/common/arrow_route.png") no-repeat;}
#cmm_sbTitle p em {font-family:"notoMedium";}

#cmm_sbCnt {max-width:1250px; margin:0 auto 120px; padding:0 25px;}
#cmm_sbCnt::after {clear:both; display:block; content:"";}

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

	#cmm_sbVisual {position:relative; height:400px; margin:70px 0 50px; padding-top:100px;}

	#cmm_sbVisual h2 {font-size:55px;}
	#cmm_sbVisual p {margin-bottom:110px; font-size:15px;}
	#cmm_sbVisual p::after {bottom:-90px; height:60px;}

	#cmm_sbVisual nav a {margin:0 15px; font-size:18px;}

	#cmm_sbTitle {margin:0 auto 50px;}
	#cmm_sbTitle h3 {padding-bottom:10px; font-size:32px;}
	#cmm_sbTitle p {bottom:18px;}

	#cmm_sbCnt {margin:0 auto 70px;}

}

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

	#cmm_sbVisual nav div {display:block !important;}

}

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

	#cmm_sbVisual {height:350px;}

	#cmm_sbVisual h2 {font-size:45px;}
	#cmm_sbVisual p {margin-bottom:0;}
	#cmm_sbVisual p::after {bottom:-70px; height:40px;}

	#cmm_sbVisual nav {position:absolute; left:0; bottom:0; z-index:99; width:100%;}
	#cmm_sbVisual nav button {position:relative; display:block; width:100%; height:50px; font-size:18px; color:white; background:#2e3192;}
	#cmm_sbVisual nav button::after {position:absolute; right:20px; top:50%; width:10px; height:6px; margin-top:-3px; content:""; background:url("../img/common/arrow_snv.png") 0 / cover no-repeat; transition:transform 0.5s ease;}
	#cmm_sbVisual nav button.on::after {transform:rotate(-180deg);}
	#cmm_sbVisual nav div {position:absolute; left:0; top:50px; z-index:99; display:none; width:100%; background:white;}
	#cmm_sbVisual nav div a {display:block; margin:0; padding:12px 0; font-family:"notoDemiLight" !important; font-size:15px !important; color:black; background:white; opacity:1; border-bottom:1px solid #dfdfdf;}

	#cmm_sbTitle {display:none;}

}

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

	#cmm_sbVisual {height:280px; margin:60px 0 40px; padding:70px 15px 0;}

	#cmm_sbVisual h2 {font-size:37px;}
	#cmm_sbVisual p {font-size:14px;}
	#cmm_sbVisual p::after {bottom:-50px; height:30px;}

	#cmm_sbVisual nav button {height:45px; font-size:16px;}
	#cmm_sbVisual nav button::after {right:15px;}
	#cmm_sbVisual nav div {top:45px;}
	#cmm_sbVisual nav div a {padding:10px 0;}

	#cmm_sbCnt {margin:0 auto 40px; padding:0 15px;}

}

/* tab */

.cmm_tab {margin-bottom:80px; text-align:center;}
.cmm_tab a {display:inline-block; padding:10px 5px; border:1px solid black;}
.cmm_tab a.on {color:white; background:black;}

.cmm_tab.num02 a {min-width:200px;}
.cmm_tab.num03 a {min-width:175px;}

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

	.cmm_tab {margin-bottom:60px;}

}

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

	.cmm_tab {display:flex; justify-content:space-between; margin-bottom:40px;}
	.cmm_tab a {font-size:14px;}

	.cmm_tab.num02 a {width:49.5%; min-width:auto;}
	.cmm_tab.num03 a {width:33%; min-width:auto;}

}