@charset "utf-8";

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

/*--------------------------*/
/* common */
/*--------------------------*/

@media screen and (min-width:416px) {
	
	nav {display:none;}
	
	#cmm_wrap {float:left; width:100%; min-width:1200px;}
	#cmm_wrap01 {float:left; width:100%; min-width:320px;}
	
	#cmm_top {float:left; width:100%; height:40px; background:#003591;}
	#cmm_top > div {width:1200px; height:100%; margin:0 auto;}
	#cmm_top > div > div {position:relative; float:left; width:100%; height:100%;}
	
	#cmm_top p {position:absolute; left:0; top:0; width:215px; height:100%; padding-top:10px; box-sizing:border-box; font-family:"notoBold"; font-size:12px; text-align:center; color:#003591; background:white;}
	#cmm_top .menu {position:absolute; right:0; top:0; height:100%;}
	#cmm_top .menu a {display:block; float:left; width:120px; height:100%; padding-top:10px; box-sizing:border-box; font-family:"notoMedium"; font-size:12px; text-align:center; color:#adc5ee; border-right:1px solid #335da7;}
	#cmm_top .menu a:first-child {border-left:1px solid #335da7;}
	
	header {position:relative; float:left; width:100%; height:90px;}
	header > div {width:1200px; height:90px; margin:0 auto;}
	header > div > div {position:relative; float:left; width:100%; height:100%;}
	
	header h1 {position:absolute; left:4px; top:21px;}
	
	header .gnv {position:absolute; right:0; top:0; width:950px; height:100%;}
	header .gnv > li {position:relative; float:left; width:20%; height:100%;}
	header .gnv > li > a {position:relative; display:block; width:100%; height:100%; padding-top:40px; box-sizing:border-box; font-size:15px; font-family:"notoMedium"; text-align:center; color:#06132a;}
	header .gnv > li > a span {display:none;}
	header .gnv > li:hover > a span {position:absolute; left:50%; bottom:0; display:block; width:90px; height:4px; margin-left:-35px; background:#d2232a;}
	header .gnv > li > ul {position:absolute; left:0; top:90px; z-index:999; width:100%; height:240px; padding-left:20px; box-sizing:border-box;}
	header .gnv > li > ul li {margin-top:20px;}
	header .gnv > li > ul a {font-family:"notoDemiLight"; color:#555555 !important;}
	header .gnv > li > ul a:hover {font-family:"notoRegular"; color:#03036e !important;}
	
	header button[data-nav-open] {display:none;}
	header button[data-language] {display:none;}
	header div[data-language-list] {display:none;}

	header div[data-gnvBg] {position:absolute; left:0; top:90px; z-index:99; width:100%; height:240px; background:white; opacity:0.9;}
	
	a[href="#cmm_wrap"] {position:fixed; right:10px; top:50%; margin-top:-30px;}
	
	#bottom {float:left; width:100%; background:#3a3a3f; border-bottom:1px solid #4e4e53;}
	#bottom > div {width:1200px; margin:0 auto;}
	#bottom > div > div {float:left; width:100%; padding:45px 0; color:white;}
	
	#bottom .menu {margin-bottom:20px;}
	#bottom .menu a {font-size:16px; color:white;}
	#bottom .menu span {position:relative; top:1px; display:inline-block; width:1px; height:14px; margin:0 15px; background:#7f7f7f;}
	
	footer {float:left; width:100%; background:#3a3a3f;}
	footer > div {width:1200px; margin:0 auto;}
	footer > div > div {position:relative; float:left; width:100%; padding:40px 0; color:white;}
	
	footer img {position:absolute; right:0; top:50%; width:200px; margin-top:-25px;}
	
	#cmm_sbVisual {float:left; width:100%; height:190px; padding-top:70px; box-sizing:border-box; text-align:center; color:white;}
	#cmm_sbVisual.sb1 {background:url("../img/common/sbVisual02.jpg") 50% 50% / cover no-repeat;}
	#cmm_sbVisual p {font-size:16px; line-height:16px;}
	#cmm_sbVisual h2 {font-family:"notoBlack"; font-size:36px;}
	
	#cmm_snv {float:left; width:100%; border-bottom:1px solid #dddddd;}
	#cmm_snv > div {width:1200px; margin:0 auto;}
	#cmm_snv > div > div {float:left; width:100%;}

	#cmm_snv a {display:block; float:left; height:50px; padding-top:12px; box-sizing:border-box; font-family:"notoLight"; font-size:16px; text-align:center; color:#777777; border-right:1px solid #dddddd;}
	#cmm_snv a:first-child {border-left:1px solid #dddddd;}
	#cmm_snv a.on {font-family:"notoRegular"; color:#111111;}
	#cmm_snv.num1 a {width:100%;}
	#cmm_snv.num2 a {width:50%;}
	#cmm_snv.num5 a {width:20%;}

	#cmm_snvMobile {display:none;}
	
	#cmm_sbCnt {width:1200px; margin:0 auto;}
	#cmm_sbCnt > div {float:left; width:100%; padding:55px 0 150px;}
	
	#cmm_sbCnt h3 {float:left; width:100%; margin-bottom:50px; font-size:36px; text-align:center; color:#003591;}
	
	#cmm_sbCnt .cntBox {float:left; width:100%;}
	#cmm_sbCnt .cntBox_m {display:none;}
	#cmm_sbCnt .brdBox {float:left; width:100%;}
	
}

@media screen and (max-width:415px) {
	
	nav {position:absolute; left:-330px; top:0; z-index:9999; float:left; width:320px;}
	nav > div:nth-child(1) {position:relative; float:left; width:100%; height:50px; padding:12px 0 0 15px; box-sizing:border-box;}
	nav > div:nth-child(1) p {font-family:"notoMedium"; font-size:18px;}
	nav > div:nth-child(1) button {position:absolute; right:0; top:0; width:50px; height:100%; background:url("../img/common/navClose.png") 50% 50% / 18px no-repeat;}
	nav > div:nth-child(2) {float:left; width:100%; border-top:1px solid #e2e2e2;}
	nav > div:nth-child(2) button {width:100%; height:45px; padding-left:15px; font-family:"notoDemiLight"; font-size:16px; text-align:left; background:url("../img/common/navOff.png") 286px 50% / 18px no-repeat; border-bottom:1px solid #e2e2e2;}
	nav > div:nth-child(2) button.on {color:white; background:#003591 url("../img/common/navOn.png") 286px 50% / 18px no-repeat;}
	nav > div:nth-child(2) a {display:block; width:100%; height:45px; padding:11px 0 0 15px; font-family:"notoDemiLight"; box-sizing:border-box; background:#ebebeb; border-bottom:1px solid white;}
	
	div[data-m-navBg] {position:fixed; left:-330px; top:0; z-index:999; width:320px; height:120%; background:white;}
	div[data-m-wrapBg] {position:fixed; left:0; top:0; z-index:99; width:100%; height:120%; background:black; opacity:0.8;}
	
	#cmm_wrap {float:left; width:100%; min-width:320px;}
	
	#cmm_top {display:none;}
	
	header {float:left; width:100%;}
	header > div {float:left; width:100%;}
	header > div > div {position:relative; float:left; width:100%; height:50px;}
	
	header h1 {position:absolute; left:50%; top:7px; width:150px; height:37px; margin-left:-75px;}
	header h1 a {display:block; width:100%; height:100%;}
	header h1 img {width:100%; height:100%;}
	
	header .gnv {display:none;}
	
	header button[data-nav-open] {position:absolute; left:0; top:0; width:50px; height:50px; background:url("../img/common/gnvOpen.png") 50% 50% / 20px no-repeat;}
	
	header button[data-language] {position:absolute; right:10px; top:5px; height:40px; padding-right:18px; font-size:12px; color:#888888; background:url("../img/common/language.png") 100% 50% / 12px no-repeat;}
	header div[data-language-list] {position:absolute; right:10px; top:45px; z-index:9; background:white; border:1px solid #eeeeee;}
	header div[data-language-list] a {display:block; width:80px; padding:5px 0; text-align:center;}
	header div[data-language-list] a:first-child {border-bottom:1px solid #eeeeee;}
	
	a[href="#cmm_wrap"] {display:none;}
	
	#bottom {float:left; width:100%; background:#3a3a3f;}
	#bottom > div {float:left; width:100%;}
	#bottom > div > div {float:left; width:100%;}
	
	#bottom .menu {float:left; width:100%; height:45px; margin-bottom:20px; padding-top:12px; box-sizing:border-box; text-align:center; border-bottom:1px solid #4e4e53;}
	#bottom .menu a {color:white;}
	#bottom .menu span {position:relative; top:1px; display:inline-block; width:1px; height:12px; margin:0 15px; background:#7f7f7f;}
	
	#bottom address {margin-bottom:10px; padding:0 15px; box-sizing:border-box; font-size:12px; text-align:center; color:white;}
	
	footer {float:left; width:100%; padding:0 15px 20px; box-sizing:border-box; text-align:center; background:#3a3a3f;}
	footer > div {float:left; width:100%;}
	footer > div > div {float:left; width:100%;}
	
	footer p {margin-bottom:12px; font-size:12px; color:white;}
	footer img {width:150px;}
	
	#cmm_sbVisual {float:left; width:100%; height:60px; padding-top:15px; box-sizing:border-box; text-align:center; color:white;}
	#cmm_sbVisual.sb1 {background:url("../img/common/sbVisual02.jpg") 50% 50% / cover no-repeat;}
	#cmm_sbVisual p {display:none;}
	#cmm_sbVisual h2 {font-family:"notoBlack"; font-size:20px;}
	
	#cmm_snv {display:none;}
	
	#cmm_snvMobile {position:relative; float:left; width:100%; border-bottom:5px solid #e5e5e5;}
	
	#cmm_snvMobile button {position:relative; float:left; width:100%; height:45px; font-family:"notoBold"; font-size:20px; color:#003591;}
	#cmm_snvMobile button span {position:absolute; right:10px; top:50%; width:16px; height:8px; margin-top:-4px; background:url("../img/common/m_arrowSnv.png") 0 0 / cover no-repeat;}
	#cmm_snvMobile .list {position:absolute; left:0; top:46px; z-index:9; width:100%; background:#f6f6f6;}
	#cmm_snvMobile .list a {display:block; width:100%; height:45px; padding:10px 0 0 20px; box-sizing:border-box; border-bottom:1px solid #e5e5e5;}
	
	#cmm_sbCnt {float:left; width:100%; margin-bottom:40px;}
	#cmm_sbCnt > div {float:left; width:100%;}
	
	#cmm_sbCnt h3 {display:none;}
	
	#cmm_sbCnt .cntBox {display:none;}
	
	#cmm_sbCnt .cntBox_m {float:left; width:100%; padding:15px 15px 0; box-sizing:border-box;}
	#cmm_sbCnt .cntBox_m img {width:100%;}
	
	#cmm_sbCnt .brdBox {float:left; width:100%; padding:15px 10px 0; box-sizing:border-box;}
	
}