@charset "UTF-8";

#container span.visualLine { width: 34px; height: 3px; background-color: #fff; display: inline-block; margin-bottom: 7px; }

#mainVisual { background: url("../../img/mainVisualM.jpg") no-repeat center 0; background-size: cover; color: #fff; position: relative; padding: 100px 0 150px 0; }


#mainVisual .mainVisual { max-width: 1000px; margin: 0 auto; text-align: center; }
#mainVisual .mainVisual dl { text-align: center; text-shadow: #000 2px 1px; }
#mainVisual .mainVisual dl dt { font-size: 1.8em; font-weight: bold; line-height: 1.6; letter-spacing: -1px; }
#mainVisual .mainVisual dl dd { font-size: 1.1em; padding: 15px 0 30px 0; line-height: 1.4; }
#mainVisual .mainVisual p { text-align: center; }
#mainVisual .mainVisual p a { display: inline-block; color: #c4c3c1; width: 96px; height: 32px; border: #c4c3c1 2px solid; line-height: 32px; text-align: center; font-size: 1.2em; text-shadow: #000 2px 1px; }

#mainVisual .codingType { width: 100%; background: url("../../img/codingTypeBgM.png") no-repeat center 0; background-size: cover; position: absolute; bottom: 0; }
#mainVisual .codingType ul { max-width: 1000px; margin: 0 auto; overflow: hidden; text-align: center;  }
#mainVisual .codingType li { width: 25%; float: left; }
#mainVisual .codingType li a { color: #fff; width: 100%; height: 81px; display: block; overflow: hidden; text-indent: -9999em;  }

#mainVisual .codingType li a.img { background: url("../../img/codingType1.png") no-repeat center 0; background-size: 130px; }
#mainVisual .codingType li a.sound { background: url("../../img/codingType2.png") no-repeat center 0; background-size: 130px; }
#mainVisual .codingType li a.security { background: url("../../img/codingType3.png") no-repeat center 0; background-size: 130px; }
#mainVisual .codingType li a.web { background: url("../../img/codingType4.png") no-repeat center 0; background-size: 130px; }
/* #mainVisual .codingType li:hover,
#mainVisual .codingType li:focus, */
#mainVisual .codingType li.here { background: url("../../img/codingType_here.png") repeat-x 0 0; }

#mainVisual .codingType li.here a.img { background: url("../../img/codingType1_on.png") no-repeat center 0; background-size: 130px; }
#mainVisual .codingType li.here a.sound { background: url("../../img/codingType2_on.png") no-repeat center 0; background-size: 130px; }
#mainVisual .codingType li.here a.security { background: url("../../img/codingType3_on.png") no-repeat center 0; background-size: 130px; }
#mainVisual .codingType li.here a.web { background: url("../../img/codingType4_on.png") no-repeat center 0; background-size: 130px; }

@media all and (min-width: 500px) {
	#mainVisual { background: url("../../img/mainVisualM.jpg") no-repeat center 0; background-size: cover; color: #fff; position: relative; padding: 100px 0 200px 0; }

	#mainVisual .mainVisual dl dt { font-size: 2.5em; }
	#mainVisual .mainVisual dl dd { font-size: 1.5em; padding: 15px 0 30px 0; }
	
	#mainVisual .codingType li a { width: 100%; height: 107px; background-size: 171px !important;  }
	#mainVisual .codingType li.here a { background-size: 171px !important;  }
}

@media all and (min-width: 768px) {
	#mainVisual { background: url("../../img/mainVisual.jpg") no-repeat center 0; background-size: cover; color: #fff; position: relative; padding: 150px 0 250px 0; }

	#mainVisual .codingType { width: 100%; background: url("../../img/codingTypeBg.png") no-repeat center 0; height: 108px; position: absolute; bottom: 0; }
	#mainVisual .codingType ul { max-width: 1000px; margin: 0 auto; overflow: hidden; text-align: center;  }
	#mainVisual .codingType li { width: 171px; display: block; float: none; }
	#mainVisual .codingType li a { width: 171px; height: 107px; display: inline-block; }

	#mainVisual .codingType li { display: inline-block; border-bottom: none; }
}







#contents .point { display: none; }


@media all and (min-width:768px) {
	#contents .point { display: block; text-align: center;  }
	#contents .point li { display: inline-block; padding: 15px 2px 20px 2px ; }
	#contents .point a { width: 36px; height: 4px; background-color: #dcdcdc; display: inline-block; overflow: hidden; text-indent: -9999em; }
	#contents .point .here a { background-color: #ffbc1a; }
}







#contents #why { background: url("../../img/whyBgM.jpg") no-repeat 0 0; overflow: hidden; background-size: cover; }
#contents #why .why { text-align: center; padding: 30px 0 45px 0;  }
#contents #why .why h2 { color: #4c4c4c; font-size: 2em; padding-bottom: 30px; }
#contents #why .why dl { width: 90%; padding: 0 50px;} 
#contents #why .why dl dt { padding: 57px 0 30px 0; color: #000000; font-size: 1.3em; font-weight: bold; line-height: 1.6;  }
#contents #why .why dl dd { color: #000000; font-size: .9em; line-height: 1.8; text-align: center; padding: 0 5%;  }

#contents #why .why dl.why1 dt { background: url("../../img/why1.png") no-repeat center 0; }
#contents #why .why dl.why2 dt { background: url("../../img/why2.png") no-repeat center 0; }
#contents #why .why dl.why3 dt { background: url("../../img/why3.png") no-repeat center 0; }
#contents #why .why dl.why4 dt { background: url("../../img/why4.png") no-repeat center 0; }

#contents #why .why .mWhy { display: block; }
#contents #why .why .pWhy { display: none; }

#contents #why .why .slick-slider {padding:0;}
#contents #why .why .slick-prev {left: 10px; top: 42%; width: 22px; height: 39px; background: url("../../img/why_left.png") no-repeat 0 0; background-size: 80%; }
#contents #why .why .slick-next {right: 10px; top: 42%; width: 22px; height: 39px; background: url("../../img/why_right.png") no-repeat 0 0; background-size: 80%; }

#contents #why .why .slick-prev:before { content: ''; }
#contents #why .why .slick-next:before { content: ''; }

#contents #why .why .slick-dots li button::before { content: ''; width: 40px; height: 5px; background-color: #a0a0a0; opacity: 1; }
#contents #why .why .slick-dots li { width: 40px; height: 5px; }
#contents #why .why .slick-dots li button { width: 40px; height: 5px; }
#contents #why .why .slick-dots li.slick-active button:before { opacity: 1; background-color: #ffb400; }


@media all and (min-width: 768px) {
	#contents #why { background: url("../../img/whyBg.png") repeat-x 0 bottom; overflow: hidden; min-height: 486px; }
	#contents #why .why { max-width: 1000px; margin: 0 auto; text-align: center; padding: 30px 0;  }

	#contents #why .why dl { width: 25%; padding: 0; float: left; background: url("../../img/whyLine.png") no-repeat right 50px; } 
	#contents #why .why dl:last-child { background: none; }
	#contents #why .why dl dt { width: 100%; clear: both; padding: 57px 0 45px 0; color: #414141; font-size: 1.2em; font-weight: bold; }
	#contents #why .why dl dd { width: 90%; clear: both;  padding: 0 5%; color: #000000; min-height: 180px; font-size: .9em; line-height: 1.6; text-align: center; }

	#contents #why .why .mWhy { display: none; }
	#contents #why .why .pWhy { display: block; }

	#contents #why .why .slick-prev {left: 10px; top: 42%; width: 22px; height: 39px; background: url("../../img/why_left.png") no-repeat 0 0; background-size: 100%; }
	#contents #why .why .slick-next {right: 10px; top: 42%; width: 22px; height: 39px; background: url("../../img/why_right.png") no-repeat 0 0; background-size: 100%; }

}







#contents #video { background: none;  }
#contents #video .videoBg { background: none;  }
#contents #video .video { max-width: 1000px; margin: 0 auto; text-align: center; padding: 0; }
#contents #video .video h2 { display: none; }


#contents #video .video .mVideo { position: relative; height: 0; padding-bottom: 50%; padding-top: 25px; }
#contents #video .video .mVideo iframe { position: absolute; top: 0; left: 0;width: 100%; height: 100%; }

@media all and (min-width: 768px) {
	#contents #video { background: url("../../img/videoBg_left.png") no-repeat 0 50%; min-height: 486px; }
	#contents #video .videoBg { background: url("../../img/videoBg_right.png") no-repeat right 50%; min-height: 486px; }
	#contents #video .video { max-width: 1000px; margin: 0 auto; text-align: center; padding: 30px 0 50px 0;  }
	#contents #video .video h2 { display: block; color: #4c4c4c; font-size: 2em; padding-bottom: 30px; }
	
	#contents #video .video .mVideo { position: relative; height: auto; padding-bottom: 0; padding-top: 0; }
	#contents #video .video .mVideo iframe { position: static; width: 703px; height: 379px; }

}




#contents #client { background: url("../../img/clientBgM.jpg") no-repeat center 0; background-size: cover;  }
#contents #client .client { max-width: 1000px; margin: 0 auto; text-align:c enter; padding: 30px 0;  }
#contents #client .client h2 { color: #fff; font-size: 2em; padding: 0 30px 30px 30px; text-align: left; }

#contents #client .client .clientList { margin: 0 30px; }
#contents #client .client .clientList li { width: 23%; float: left; text-align: center; margin: 0; padding: 1%; }
#contents #client .client .clientList li img { max-width: 170px; width: 100%; }

#contents #client .client .more { text-align: center; margin-top: 30px; }
#contents #client .client .more a { display: inline-block; color: #d5d5d5; border: #adadad 2px solid; padding: 0 15px; height: 30px; line-height: 30px; text-align: center; font-size: 1.2em;  }

#contents #client .client .slick-slider {padding:0;}
#contents #client .client .slick-prev {left: -20px; width: 22px; height: 39px; background: url("../../img/client_left.png") no-repeat 0 0; background-size: 60%;}
#contents #client .client .slick-next {right: -30px; width: 22px; height: 39px; background: url("../../img/client_right.png") no-repeat 0 0; background-size: 60%; }

#contents #client .client .clientList .slick-prev:before { content: ''; }
#contents #client .client .clientList .slick-next:before { content: ''; }

#contents #client .client .slick-dots {  }

@media all and (min-width:640px) {
	#contents #client { background: url("../../img/clientBg.jpg") no-repeat center 0; background-size: cover;  }
	
	#contents #client .client h2 { color: #fff; font-size: 2em; padding-bottom: 30px; text-align: center; }

	#contents #client .client .clientList { margin: 0 70px; }

	#contents #client .client .slick-prev {left: -30px; width: 22px; height: 39px; background: url("../../img/client_left.png") no-repeat 0 0; background-size: 100%; }
	#contents #client .client .slick-next {right: -30px; width: 22px; height: 39px; background: url("../../img/client_right.png") no-repeat 0 0; background-size: 100%; }


}

@media all and (min-width:1025px) {
	#contents #client .client .clientList { margin: 0 150px; }
}