@charset "utf-8";

@import url(base.css);
@import url(index.css);
@import url(process.css);
@import url(board.css);
@import url(member_cyber.css);
@import url(content.css);

body {overflow-x:hidden;}

/*--------------------------*/
/* wrap */
/*--------------------------*/

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

	#cmm_wrap {width:1280px; min-width:1200px; margin: 0 auto;}

}

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

	#cmm_wrap {float:left; width:100%; min-width:320px;}

	body.fixOn #cmm_wrap {position:fixed;}
	body.fixOn #cmm_wrap::after {position:fixed; z-index:99; display:block; width:100%; height:100%; content:""; background:black; opacity:0.8;}

}

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

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

	header {position:relative; float:left; width:100%;}

	header .boxT {position:relative; z-index:999; float:left; width:100%; height:50px; background:#333333;}
	header .boxT > div {position:relative; width:1200px; height:100%; margin:0 auto;}

	header .boxT h1 {display:none;}

	header .boxT .select {display:none;}
	header .boxT .link {display:block !important;}
	header .boxT .link a:nth-child(1) {position:absolute; left:0; top:0; display:block; width:150px; height:100%; padding-top:8px; box-sizing:border-box; font-family:"notoMedium"; font-size:20px; text-align:center; background:white;}
	header .boxT .link a:nth-child(2) {position:absolute; left:150px; top:0; display:block; width:150px; height:100%; padding-top:8px; box-sizing:border-box; font-size:20px; color:white; text-align:center; background:#f8575f;}

	header .boxT .link_tomo {display:block !important;}
	header .boxT .link_tomo a:nth-child(1) {position:absolute; left:0; top:0; display:block; width:150px; height:100%; padding-top:8px; box-sizing:border-box; font-size:20px; color:white; text-align:center; background:#279b33;}
	header .boxT .link_tomo a:nth-child(2) {position:absolute; left:150px; top:0; display:block; width:150px; height:100%; padding-top:8px; box-sizing:border-box; font-family:"notoMedium"; font-size:20px; text-align:center; background:white;}

	header .boxT .member {position:absolute; right:0; top:13px;}
	header .boxT .member a {position:relative; float:left; margin-left:50px; color:white;}
	header .boxT .member a:first-child {margin-left:0;}
	header .boxT .member a::before {position:absolute; left:-25px; top:4px; display:block; width:1px; height:13px; content:""; background:#5c5c5c;}
	header .boxT .member a:first-child::before {display:none;}

	header .boxT .navOpen {display:none;}

	header .boxB {position:relative; z-index:99; float:left; width:100%; height:110px; background:white;
		-webkit-transition:height 0.3s ease;
		-moz-transition:height 0.3s ease;
		-o-transition:height 0.3s ease;
		transition:height 0.3s ease;
	}
	/*body.fixOn header .boxB {position:fixed; height:60px; border-bottom:1px solid #dde0eb;}*/

	header .boxB > div {position:relative; width:100%; height:100%;}

	header .boxB h1 {/*position:absolute;*/ left:0; top:30px; width: 100%}
	/*header .boxB h1 div {width: 60%}*/
	header div.boxB div > h1 > img.logo2 {width:73%;margin-left: 4%;}
	header div.boxB div > h1 > span{font-family: "notoBold"; font-size: 28px; position: absolute; right: 10px; top: 100px; color: white}

	header .boxB .navClose, header .boxB .member {display:none;}

	header .boxB .gnv {float:right; height:100%;}
	header .boxB .gnv > li {position:relative; float:left; height:100%;}
	header .boxB .gnv > li > a {position:relative; z-index:999; display:block; height:100%; padding:40px 42px 0; box-sizing:border-box; font-family:"notoMedium"; font-size:20px;
		-webkit-transition:padding-top 0.3s ease;
		-moz-transition:padding-top 0.3s ease;
		-o-transition:padding-top 0.3s ease;
		transition:padding-top 0.3s ease;
	}
	body.fixOn header .boxB .gnv > li > a {padding:15px 42px 0;}
	header .boxB .gnv > li:hover > a {color:#279b33;}
	header .boxB .gnv ul {position:absolute; left:0; top:-300px; display:block !important; width:100%; height:210px; padding:20px 0 0 42px; box-sizing:border-box;
		-webkit-transition:top 0.3s ease;
		-moz-transition:top 0.3s ease;
		-o-transition:top 0.3s ease;
		transition:top 0.3s ease;
	}
	body.navOn header .boxB .gnv ul {top:110px;}
	body.navOn.fixOn header .boxB .gnv ul {top:60px;}
	header .boxB .gnv ul li {margin-top:10px;}
	header .boxB .gnv ul li:first-child {margin-top:0;}
	header .boxB .gnv ul a {font-size:16px; color:white;}


	header .boxB .gnv_tomo {float:right; height:100%;}
	header .boxB .gnv_tomo > li {position:relative; float:left; height:100%;}
	header .boxB .gnv_tomo > li > a {position:relative; z-index:999; display:block; height:100%; padding:20px 42px 0; box-sizing:border-box; font-family:"notoMedium"; font-size:20px;
		-webkit-transition:padding-top 0.3s ease;
		-moz-transition:padding-top 0.3s ease;
		-o-transition:padding-top 0.3s ease;
		transition:padding-top 0.3s ease;
	}
	body.fixOn header .boxB .gnv_tomo > li > a {padding:15px 42px 0;}
	header .boxB .gnv_tomo > li:hover > a {color:#f8575f;}
	header .boxB .gnv_tomo ul {position:absolute; left:0; top:-300px; display:block !important; width:100%; height:210px; padding:20px 0 0 42px; box-sizing:border-box;
		-webkit-transition:top 0.3s ease;
		-moz-transition:top 0.3s ease;
		-o-transition:top 0.3s ease;
		transition:top 0.3s ease;
	}
	body.navOn header .boxB .gnv_tomo ul {top:110px;}
	body.navOn.fixOn header .boxB .gnv_tomo ul {top:60px;}
	header .boxB .gnv_tomo ul li {margin-top:10px;}
	header .boxB .gnv_tomo ul li:first-child {margin-top:0;}
	header .boxB .gnv_tomo ul a {font-size:16px; color:black;}

	body.navOn header::after {top:160px;}
	body.navOn.fixOn header::after {top:110px;}
}

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

	header {float:left; width:100%;}

	header .boxT {position:fixed; z-index:9; float:left; width:100%; height:80px;}
	header .boxT > div {position:relative; float:left; width:100%; height:100%; background:white; border-bottom:1px solid #f1f4f8;}

	header .boxT h1 {position:absolute; left:50%; top:10px; margin-left:-30px;}
	header .boxT h1 img {width:80px; margin-top: 10px;}

	header .boxT .select {position:absolute; left:0; top:0; width:80px; height:100%; text-align:center; background:url("/common/img/common/btnDown.png") 100% 50% / 10px no-repeat;}
	header .boxT .link {position:absolute; left:5px; top:55px; display:none; background:white; border:1px solid #dadfe5;}
	header .boxT .link a {display:block; width:78px; padding:8px 0; text-align:center;}
	header .boxT .link a:first-child {border-bottom:1px solid #dadfe5;}

	header .boxT .link_tomo {position:absolute; left:5px; top:55px; display:none; background:white; border:1px solid #dadfe5;}
	header .boxT .link_tomo a {display:block; width:78px; padding:8px 0; text-align:center;}
	header .boxT .link_tomo a:first-child {border-bottom:1px solid #dadfe5;}

	header .boxT .member {display:none;}

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

	header .boxB {position:fixed; right:-320px; top:0; z-index:999; overflow-y:auto; width:320px; height:100%; padding:60px 0 0 30px; box-sizing:border-box; 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 .boxB {right:0;}

	header .boxB h1 {display:none;}

	header .boxB .navClose {position:absolute; left:15px; top:15px; width:25px; height:25px; background:url("/common/img/common/navClose.png") 0 0 / cover no-repeat;}

	header .boxB .member {float:left; width:100%; margin-bottom:30px;}
	header .boxB .member div {margin-bottom:15px; padding-bottom:15px; border-bottom:1px solid #dde0eb;}
	header .boxB .member div a {position:relative; margin-right:40px; font-size:16px;}
	header .boxB .member div a:last-child {margin-right:0;}
	header .boxB .member div a::after {position:absolute; right:-21px; top:1px; display:block; width:1px; height:14px; content:""; background:#dde0eb;}
	header .boxB .member div a:last-child::after {display:none;}
	header .boxB .member .text {margin-bottom:15px; letter-spacing:-1px;}
	header .boxB .member .login {display:block; width:270px; height:45px; padding-top:8px; box-sizing:border-box; font-family:"notoMedium"; font-size:18px; text-align:center; color:#1e8e2a; border:1px solid #1e8e2a;}
	header .boxB .member .info01 {margin-bottom:5px; font-size:16px;}
	header .boxB .member .info01 em {font-family:"notoMedium"; font-size:22px;}
	header .boxB .member .info02 {height:50px; padding:4px 0 0 45px; box-sizing:border-box; font-size:18px; color:#279b33; background:url("/common/img/common/icon_headphone.png") 0 0 / 30px no-repeat;}
	header .boxB .member .info02 em {display:inline-block; height:30px; margin-left:8px; padding:0 15px; box-sizing:border-box; font-family:"notoMedium"; font-size:20px; line-height:26px; border:1px solid #279b33;
		-webkit-border-radius:15px;/*Safari, Chrome*/
		-moz-border-radius:15px;/*Firefox*/
		border-radius:15px;
	}
	header .boxB .member .classroom {display:block; width:270px; height:45px; padding-top:8px; box-sizing:border-box; font-family:"notoMedium"; font-size:18px; text-align:center; color:white; background:#1e8e2a;}

	header .boxB .gnv {float:left; width:100%;}
	header .boxB .gnv > li {margin-bottom:20px;}
	header .boxB .gnv > li:nth-child(2) ul li:nth-child(2) {display: none;}
	header .boxB .gnv > li:nth-child(4) {display: none;}
	header .boxB .gnv > li > a {font-family:"notoMedium"; font-size:20px;}
	header .boxB .gnv > li > a.on {color:#279b33;}
	header .boxB .gnv ul {display:none; margin-top:10px; padding-top:5px; border-top:1px solid #dde0eb;}
	header .boxB .gnv ul a {display:block; padding:5px 0;}

	header .boxB .gnv_tomo {float:left; width:100%;}
	header .boxB .gnv_tomo > li {margin-bottom:20px;}
	header .boxB .gnv_tomo > li > a {font-family:"notoMedium"; font-size:20px;}
	header .boxB .gnv_tomo > li > a.on {color:#f8575f;}
	header .boxB .gnv_tomo ul {display:none; margin-top:10px; padding-top:5px; border-top:1px solid #dde0eb;}
	header .boxB .gnv_tomo ul a {display:block; padding:5px 0;}

	header .boxT a.login {
		display: block;
		width: 80px;
		height: 40px;
		margin-top: 20px;
		margin-left: 5px;
		padding-top: 8px;
		box-sizing: border-box;
		font-family: "notoMedium";
		font-size: 15px;
		text-align: center;
		color: white;
		border: 1px solid #1e8e2a;
		background-color: #0f741a;
	}
}

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

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

	#cmm_banner {float:left; width:100%;}
	#cmm_banner > div {width:1600px; margin:0 auto;}
	#cmm_banner > div > div {position:relative; float:left; width:100%; height:100px; padding:20px 100px 0; box-sizing:border-box;}

	#cmm_banner .box.opt {float:left; width:100%;}
	#cmm_banner .box.opt a {float:left; display:block; }
	#cmm_banner .box.opt a:last-child {margin-right:0;}
	#cmm_banner .box img {width:200px !important; height:50px;}
	/*#cmm_banner .box img:last-child {margin-right:0;}*/

	#cmm_banner .prev {position:absolute; left:0; top:50%; width:14px; height:27px; margin-top:-14px; background:url("/common/img/common/bannerPrev.png") no-repeat;}
	#cmm_banner .next {position:absolute; right:0; top:50%; width:14px; height:27px; margin-top:-14px; background:url("/common/img/common/bannerNext.png") no-repeat;}


	#cmm_banner_footer {float:left; width:100%; border-top:5px solid #f1f4f8;}
	#cmm_banner_footer > div {width:1200px; margin:0 auto;}
	#cmm_banner_footer > div > div {position:relative; float:left; width:100%; height:100px;box-sizing:border-box;}
	#cmm_banner_footer > div > div > a:first-child {margin-left: 0;}
	#cmm_banner_footer > div > div > a {margin-left: 20px;}
	#cmm_banner_footer > div > div > a > img {width: 180px;}

}

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

	#cmm_banner {float:left; width:100%; border-top:5px solid #f1f4f8; display: none;}
	#cmm_banner_footer {display: none;}
	#cmm_banner > div {float:left; width:100%;}
	#cmm_banner > div > div {position:relative; float:left; width:100%; height:60px; padding:15px 40px 0; box-sizing:border-box;}

	#cmm_banner .box.opt {float:left; width:100%; text-align:center;}
	#cmm_banner .box.opt a {display:inline-block; margin:0 5px;}
	#cmm_banner .box img {width:120px; height:30px;}

	#cmm_banner .prev {position:absolute; left:0; top:0; width:30px; height:100%; background:url("/common/img/common/bannerPrev.png") 50% 50% / 8px no-repeat;}
	#cmm_banner .next {position:absolute; right:0; top:0; width:30px; height:100%; background:url("/common/img/common/bannerNext.png") 50% 50% / 8px no-repeat;}

	#cmm_banner_footer {float:left; width:100%; border-top:5px solid #f1f4f8;}
	#cmm_banner_footer > div {width:1200px; margin:0 auto;}
	#cmm_banner_footer > div > div {position:relative; float:left; width:100%; height:100px;box-sizing:border-box;}
	#cmm_banner_footer > div > div > a:first-child {margin-left: 0;}
	#cmm_banner_footer > div > div > a {margin-left: 20px;}
	#cmm_banner_footer > div > div > a > img {width: 180px;}
}

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

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

	footer {float:left; width:100%;}
	footer > div {width:1280px; margin:0 auto;}
	footer > div > div {position:relative; float:left; width:100%; padding:20px 0 10px 400px; box-sizing:border-box;border-top: #1f106a solid 3px;}

	footer .logo {position:absolute; left:0; top:20px; width:360px;}

	footer .link {float:left; width:100%; margin-bottom:10px;padding-left: 20px;}
	footer .link a {float:left; margin-left:80px; font-family:"notoMedium"; font-size:18px; color:black;}
	footer .link a:first-child {margin-left:0; color: #868686}
	footer .link a:nth-child(2) {color: #868686}
    
    footer .link1 {float:left; width:40%; margin-bottom:10px;padding-left: 20px;}
    footer .link1 a {font-family:"notoMedium", sans-serif; font-size:18px; color:black;}
    footer .link2 {float:left; width:40%; margin-bottom:10px;padding-left: 20px; text-align:right;}
    footer .link2 a {font-family:"notoMedium", sans-serif; font-size:12px; color:black;}

	footer address {float:left; width:1200px; margin-bottom:15px; font-family:"notoDemiLight"; line-height:5px; color:#868686;padding-left: 20px;}
	footer address span {position:relative; display:inline-block; margin-right:30px;}
	footer address span::after {position:absolute; right:-16px; top:-4px; display:block; width:1px; height:11px; content:""; background:#464646;}
	/*footer address span:nth-child(3), footer address span:nth-child(7) {margin-right:0;}*/
	/*footer address span:nth-child(3)::after, footer address span:nth-child(7)::after {display:none;}*/

	footer p {float:left; width:100%; font-family:"notoDemiLight"; color:#868686;}

	footer a[href="#cmm_wrap"] {position:absolute; right:0; top:0; display:block; width:70px; height:70px; background:white url("/common/img/common/topLink.jpg") 50% 50% no-repeat;}

}

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

	footer {float:left; width:100%; padding:35px 15px; box-sizing:border-box; text-align:center; background:#333333;}
	footer > div {float:left; width:100%;}
	footer > div > div {float:left; width:100%;}

	footer .logo {width:80px; margin-bottom:20px;}

	footer .link {margin-bottom:10px; text-align:left;}
	footer .link a {display:inline-block; margin:0 5px 10px 0; font-family:"notoMedium"; font-size:13px; letter-spacing:-1px; color:white;}

	footer address {margin-bottom:18px; font-family:"notoDemiLight"; font-size:13px; text-align:left; color:#868686; display: none;}
	footer address span:nth-child(1), footer address span:nth-child(4), footer address span:nth-child(7) {
		position:relative; display:inline-block; margin-right:20px;
	}
	footer address span:nth-child(1)::after, footer address span:nth-child(4)::after, footer address span:nth-child(7)::after {
		position:absolute; right:-12px; top:4px; display:block; width:1px; height:10px; content:""; background:#464646;
	}
	footer address span:nth-child(3), footer address span:nth-child(6), footer address span:nth-child(9) {display:block;}

	footer p {font-family:"notoDemiLight"; font-size:13px; text-align:left; color:#868686;}

}

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

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

	#cmm_root {float:left; width:100%; height:58px; margin-bottom:45px; background:#1e8e2a; border-top:10px solid #f1f4f8;}
	#cmm_root > div {width:1200px; height:100%; margin:0 auto;}

	#cmm_root .home {float:left; display:block; width:70px; height:100%; background:#0f741a url("/common/img/common/home.png") 50% 50% no-repeat; border-left:1px solid #4ba555; border-right:1px solid #4ba555;}
	#cmm_root .box {position:relative; float:left; height:100%; border-right:1px solid #4ba555;}
	#cmm_root .box button {position:relative; min-width:300px; height:100%; padding:0 80px 0 30px; font-size:18px; text-align:left; color:white;}
	#cmm_root .box button::after {position:absolute; right:30px; top:50%; display:block; width:15px; height:8px; margin-top:-4px; content:""; background:url("/common/img/common/arrowRoot.png") no-repeat;}
	#cmm_root .box div {position:absolute; left:0; top:58px; z-index:5; width:100%; box-sizing:border-box; border-left:1px solid #f1f4f8; border-right:1px solid #f1f4f8;}
	#cmm_root .box div a {display:block; width:100%; padding:10px 20px; box-sizing:border-box; font-size:16px; background:white; border-bottom:1px solid #f1f4f8;}
}

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

	#cmm_root {float:left; width:100%; margin-top:80px;}
	#cmm_root > div {float:left;width:100%; }

	#cmm_root .home {display:none;}
	#cmm_root .box {position:relative; float:left; width:50%; background:#1e8e2a;}
	#cmm_root .box:last-child {box-sizing:border-box; border-left:1px solid #4ba555;}
	#cmm_root .box button {position:relative; float:left; width:100%; height:45px; padding:0 30px 0 15px; text-align:left; color:white;}
	#cmm_root .box button::after {position:absolute; right:10px; top:50%; display:block; width:12px; height:6px; margin-top:-3px; content:""; background:url("/common/img/common/arrowRoot.png") 0 0 / cover no-repeat;}
	#cmm_root .box div {position:absolute; left:0; top:45px; z-index:9; width:100%; background:#8fc795;}
	#cmm_root .box div a {display:block; width:100%; padding:10px 15px; box-sizing:border-box; color:white; border-top:1px solid #c6eaca;}
	#cmm_root #ap_st_btn {display: none;}
}

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

	#cmm_sub {
		width: 100%;
	}

	#cmm_sub > div {
		float: left;
		margin-top: 80px;
		margin-bottom: 20px;
		width: 20%;
		margin-right: 0px;
	}

	#cmm_sub > div.mobile {
		display: none;
	}

	#cmm_sub h2 {
		float: none;
		width: auto;
		text-align: center;
	}

	#cmm_sub h2 span {
		position: relative;
		font-family: "notoMedium";
		font-size: 30px;
	}

	#cmm_sub h2 span::after {
		position: absolute;
		left: 0;
		bottom: -5px;
		z-index: -9;
		display: block;
		width: 100%;
		height: 15px;
		content: "";
		background: #e1f6e3;
	}

	#cmm_sub h2.consult {
		font-family: "notoLight";
		font-size: 30px;
        background-color: #f1f4f8;
        margin-bottom:10px;
	}

	#cmm_sub div.consult_time {
		font-family: "notoLight";
		text-align: center;
		margin-bottom: 30px;
		margin-top: 20px;
		font-size: 15px;
		background-color: #A0BAED;
		color: white
	}

	#cmm_sub div.consult_time > span {
		font-family: "notoBold";
		font-size: 20px;
	}

	#cmm_sub div > a.cyber_qna {
		width: 280px;
		height: 66px;
		margin-bottom: 20px;
		margin-left: 10px;
		padding: 18px 90px 18px 65px;
		box-sizing: border-box;
		font-family: "notoMedium";
		font-size: 18px;
		background: #f1f4f8;
		-webkit-border-radius: 33px; /*Safari, Chrome*/
		-moz-border-radius: 33px; /*Firefox*/
		border-radius: 33px;
	}

	#cmm_sub div > a.cyber_qna::after {
		margin-left: 120px;
		display: inline-block;
		width: 25px;
		height: 18px;
		margin-top: -9px;
		content: "";
		background: url("/common/img/index/more.png") no-repeat;
	}

	#cmm_sub .cate_box {
		position: relative;
		float: left;
		width: 146px;
		margin-left: 2px
	}

	#cmm_sub .cate_box button {
		position: relative;
		float: left;
		width: 100%;
		height: 50px;
		text-align: center;
		font-size: 18px;
		border: 1px solid #e5e5e5;
	}

	#cmm_sub .cate_box button::after {
		position: absolute;
		right: 10px;
		top: 50%;
		display: block;
		width: 12px;
		height: 6px;
		margin-top: -3px;
		content: "";
		background: url("/common/img/common/arrowRoot.png") 0 0 / cover no-repeat;
	}

	#cmm_sub .cate_box div {
		position: absolute;
		left: 0;
		top: 45px;
		z-index: 9;
		width: 100%;
		background-color: white;
		margin-top: 5px
	}

	#cmm_sub .cate_box div a {
		display: block;
		width: 100%;
		padding: 10px 15px;
		box-sizing: border-box;
		margin-left: 0px;
	}

	#cmm_sub .cate_box button.on {
		font-family: "notoMedium";
		color: #1e8e2a;
		border: 1px solid #1e8e2a;
	}

	#cmm_sub div.intro {
		padding-left: 0px; 
		width: 78.5%;
		font-family: "notoMedium";
		font-size: 18px;
		margin-bottom: 20px;
	}

	#cmm_sub div.intro span {
		font-family: "notoBold";
		color: blue;
		font-size: 20px;
	}

	#cmm_sub div.guide_box {
		margin-top: 100px;
		width: 138%;
		background-color: #f1f4f8;
		margin-left: -45px;
	}

	#cmm_sub div.guide_box > div {
		height: 320px;
		padding-top: 30px;
	}

	#cmm_sub div.guide_box > div > div:first-child {
		width: 30%;
		float: left;
	}

	#cmm_sub div.guide_box > div > div:last-child {
		width: 70%;
		float: left;
	}

	#cmm_sub div.guide_box div.guide_txt {
		margin-left: 45px;
		margin-top: -35px;
		font-size: 25px;
		margin-right: 250px
	}

	#cmm_sub div.guide_box table.guide_rule {
		background-color: white;
		width: 95%;
		border-radius: 20px;
	}

	#cmm_sub div.guide_box table.guide_rule th {
		width: 18%;
	}

	/*#cmm_sub div.guide_box table.guide_rule tr:first-child td{background-color: #f1f4f8;}*/
	#cmm_sub div.guide_box table.guide_rule th > div {
		background-color: #f1f4f8;
		border-radius: 20px;
		margin-top: 10px;
		margin-bottom: 10px;
		padding: 5px 10px 5px 10px;
		margin-left: 20px
	}

	#cmm_sub div.guide_box table.guide_rule td {
		padding: 10px 10px 10px 10px;
	}

	#cmm_sub div.guide_box table.guide_rule tr {
	}

	#cmm_sub .box h2 {
		height: 40px;
		font-family: "notoMedium";
		font-size: 28px;
		text-align: left
	}

	#cmm_sub .box p {
		height: 43px;
		font-size: 18px;
	}

	#cmm_sub .box div {
		height: 150px;
		padding-top: 55px;
		box-sizing: border-box;
		font-size: 20px;
		color: #279b33;
		text-align: center;
		background: url("/common/img/index/iconHeadphone.jpg") 50% 0 no-repeat;
	}

	#cmm_sub .box div em {
		display: inline-block;
		min-width: 90px;
		height: 38px;
		margin-top: 10px;
		padding: 2px 20px 0;
		box-sizing: border-box;
		font-family: "notoMedium";
		border: 2px solid #279b33;
		-webkit-border-radius: 19px; /*Safari, Chrome*/
		-moz-border-radius: 19px; /*Firefox*/
		border-radius: 19px;
	}

	#cmm_sub .box a {
		display: block;
		height: 70px;
		padding-top: 12px;
		box-sizing: border-box;
		font-family: "notoMedium";
		font-size: 18px;
		text-align: center;
		color: white;
		background: #279b33;
	}

	#cmm_sub .box a::before {
		position: relative;
		top: 8px;
		display: inline-block;
		width: 36px;
		height: 31px;
		margin-right: 10px;
		content: "";
		background: url("/common/img/index/iconComputer.png") no-repeat;
	}

	#cmm_sub .course{
		width: 138%;
	}

	.nav {
		display:flex;
		flex-wrap:wrap;
		padding-left:0;
		margin-bottom:0;
		list-style:none;
	}

	.nav-link {
		display:block;
		height: 50px;
		font-size: 18px;
		margin-right: 10px;
		margin-bottom: 10px;
		background-color: #4d4dff;
		color: white;
		padding-left: 40px;
		padding-right: 40px;
	}

	/*.nav-item:nth-child(2) .nav-link{
		padding-right: 70px;
		padding-left: 70px;
	}

	.nav-item:nth-child(3) .nav-link{
		padding-right: 70px;
		padding-left: 70px;
	}

	.nav-item:nth-child(5) .nav-link{
		padding-right: 70px;
		padding-left: 70px;
	}*/

	.nav-link:hover, .nav-link:focus {
		text-decoration:none;
	}

	.nav-link.disabled {
		color:#6c757d;
		pointer-events:none;
		cursor:default;
	}

	/*.nav-tabs {
		border-bottom:1px solid #dee2e6;
	}*/

	.nav-tabs .nav-item {
		margin-bottom:-1px;
	}

	.nav-tabs .nav-link {
		border:1px solid transparent;
		border-top-left-radius:0.25rem;
		border-top-right-radius:0.25rem;
	}

	.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
		border-color:#e9ecef #e9ecef #dee2e6;
	}

	.nav-tabs .nav-link.disabled {
		color:#6c757d;
		background-color:transparent;
		border-color:transparent;
	}

	.nav-tabs .nav-link.active,
	.nav-tabs .nav-item.show .nav-link {
		background-color: #ff0000;
	}

	.nav-tabs .dropdown-menu {
		margin-top:-1px;
		border-top-left-radius:0;
		border-top-right-radius:0;
	}

	.nav-pills .nav-link {
		border-radius:0.25rem;
	}

	.nav-pills .nav-link.active,
	.nav-pills .show > .nav-link {
		color:#fff;
		background-color:#007bff;
	}

	.nav-fill .nav-item {
		flex:1 1 auto;
		text-align:center;
	}

	.nav-justified .nav-item {
		flex-basis:0;
		flex-grow:1;
		text-align:center;
	}

	.tab-content > .tab-pane {
		display:none;
	}

	.tab-content > .active {
		display:block;
	}

	ul.nav {
		margin-top:-30px;
		margin-left: -20px;
		width:100%;
	}

	ul.nav li a.active {
		font-weight:bold;
	}

	div.course_wrap{
		margin-top: 10px !important;
	}

	div.course_wrap > div{
		height: 550px !important;
	}

	div.course_info{
		margin-top: -20px;
		margin-left: 20px;
		margin-right: 60px;
	}

	div.course_info > span{
		color: black !important;
	}

	div.course_info span.small{
		font-size: 17px !important;
		color: black !important;
	}

	div.course_standard{
		font-size: 15px !important;
		color: black !important;
		margin-left: 10px;
	}

	img.course_image{
		margin-left: 20px;
		width: 300px;
		height: 195px;
	}

	div.course_detail > span{
		font-size: 17px !important;
		color: black !important;
	}

	table.cd_table {
		width: 60%;
		text-align: center;
	}

	table.cd_table tr{
		border-top: black solid 1px;
	}
	table.cd_table tr:last-child{
		border-bottom: black solid 1px;
	}
	table.cd_table th{
		background-color: #fffee6;
		vertical-align: middle;
		font-family: "notoBold";
		font-size: 16px;
		width: 50px;
	}
	table.cd_table td{
		border-left: black solid 1px;
		height: 80px;
		vertical-align: middle;
		font-size: 16px;
	}

	table.cd_table > tbody > tr > td:nth-child(3){
		padding-left: 20px;
		text-align: left;
	}

	div.course_info .pc {padding-left:19px; background:url("/common/img/cyber/iconPc.jpg") 0 2px no-repeat; font-size: 15px !important; color: #888888 !important}
	div.course_info .mobile {padding-left:19px; background:url("/common/img/cyber/iconMobile.jpg") 0 2px no-repeat; font-size: 15px !important; color: #888888 !important}
	.img_wrap{
		text-align: right;
		margin-bottom: 5px;
	}

	div#hire table.cd_table > tbody > tr > td:nth-child(2){
		padding-left: 20px;
		text-align: left;
	}

	div#hire table.cd_table > tbody > tr > th{
		width: 100px;
	}

	div#hire table.cd_table td{
		height: 60px !important;
	}

	div.tb_div{
		width: 30%;
		float: left;
		margin-top: 10px;
	}

	div.tb_div span{
		font-size: 16px !important;
		color: black !important;
		margin-left: 10px;
	}


	div#white table.cd_table{
		width: 90%;
		margin-right: 30px;
	}

	div#white table.cd_table > tbody > tr > td:nth-child(2){
		padding-left: 20px;
		text-align: left;
	}

	div#safe table.cd_table td{
		height: 32px !important;
	}

	div#safe table.cd_table{
		width: 90%;
		margin-right: 30px;
	}

	div#safe table.cd_table > tbody > tr > td:nth-child(2){
		padding-left: 20px;
		text-align: left;
	}

	div#white table.cd_table td{
		height: 60px !important;
	}

	div#internet table.cd_table td{
		height: 60px !important;
	}

	div#internet table.cd_table > tbody > tr > td:nth-child(2){
		padding-left: 20px;
		text-align: left;
	}

	div#internet table.cd_table > tbody > tr > th{
		width: 100px;
	}

	div#collective table.cd_table{
		margin-bottom: 10px;
	}

	div#collective table.cd_table td{
		width: 240px;
		height: 40px;
		text-align: left;
		padding-left: 20px;
	}

	table.guide_tb{
		font-size: 16px;
		width: 100%;
	}

	table.guide_tb th{
		border: black solid 2px;
		background-color: #fffee6;
		vertical-align: middle;
	}

	table.guide_tb tr td{
		border: black solid 2px;
		/*width: 200px;*/
		vertical-align: middle;
		padding-left: 20px;
	}

	table.guide_tb tr th{
		font-family: "notoBold";
		width: 150px;
	}

	table.guide_tb tr:first-child th{
		width: 50px;
	}

	/*table.guide_tb tr:nth-child(1) td:nth-child(1){
		text-align: center;
	}*/

	table.guide_tb tr:nth-child(2) td:first-child{
		text-align: center;
	}
    /*  td:last-child span */
	table.guide_tb tr:last-child td:last-child, table.guide_tb tr:last-child{
		color: red !important;
	}
}

@media screen and (max-width:415px) {
	
	#cmm_sub {display:flex; justify-content:center; margin:20px 0 0 -17px;}
	#cmm_sub > div {float:left;}
	#cmm_sub > div>img {float:left; width:100%;}
	#cmm_sub > div.pc {display: none;}

	#cmm_sub h2 {float:left; width:100%; margin:50px 0 20px; text-align:center;}
	#cmm_sub h2 span {position:relative; font-family:"notoMedium"; font-size:24px;}
	#cmm_sub h2 span::after {position:absolute; left:0; bottom:-5px; z-index:-9; display:block; width:100%; height:14px; content:""; background:#e1f6e3;}
	#cmm_sub .cate_box button.on {font-family:"notoMedium"; color:#1e8e2a; border:1px solid #1e8e2a;}
	#cmm_sub p.mobile img {width: 100%}
	#cmm_sub a.mobile img {width: 100%}
	#cmm_sub div.mobile img {width: 100%}

	.category .cate_box {position:relative; float:left; width:120px; height: 37px; margin: 0 2px 2px 0;border:1px solid #e5e5e5;}
	.category .cate_box:last-child {box-sizing:border-box; border-left:1px solid #4ba555;}
	.category .cate_box button {position:relative; float:left; width:120px; height:37px; padding:0 30px 0 15px; text-align:left;}
	.category .cate_box button::after {position:absolute; right:10px; top:50%; display:block; width:12px; height:6px; margin-top:-3px; content:""; background:url("/common/img/common/arrowRoot.png") 0 0 / cover no-repeat;}
	.category .cate_box div {position:absolute; left:0; top:45px; z-index:9; width:100%;}
	.category .cate_box div a {display:block; width:100%; box-sizing:border-box;margin:0;  border-top:1px solid #c6eaca; background:white;}
	.category .cate_box div a:first-child {margin-top: -8px}
    
    #cmm_sub .box h2 {
        height: 40px;
        font-family: "notoMedium";
        font-size: 28px;
        text-align: left
    }
    
    #cmm_sub .box p {
        height: 45px;
        font-size: 18px;
        margin-bottom: 30px;
    }
    
    #cmm_sub .box div {
        height: 150px;
        padding-top: 55px;
        box-sizing: border-box;
        font-size: 20px;
        color: #279b33;
        text-align: center;
        background: url("/common/img/index/iconHeadphone.jpg") 50% 0 no-repeat;
    }
    
    #cmm_sub .box div em {
        display: inline-block;
        min-width: 90px;
        height: 38px;
        margin-top: 10px;
        padding: 2px 20px 0;
        box-sizing: border-box;
        font-family: "notoMedium";
        border: 2px solid #279b33;
        -webkit-border-radius: 19px; /*Safari, Chrome*/
        -moz-border-radius: 19px; /*Firefox*/
        border-radius: 19px;
    }
    
    #cmm_sub .box a {
        display: block;
        height: 70px;
        padding-top: 12px;
        box-sizing: border-box;
        font-family: "notoMedium";
        font-size: 18px;
        text-align: center;
        color: white;
        background: #279b33;
    }
    
    #cmm_sub .box a::before {
        position: relative;
        top: 8px;
        display: inline-block;
        width: 36px;
        height: 31px;
        margin-right: 10px;
        content: "";
        background: url("/common/img/index/iconComputer.png") no-repeat;
    }
    
    footer {display:none;}
}