@charset "utf-8";
/* CSS Document */

.show_480{ display: none; }
.show_540{ display: none; }
.show_640{ display: none; }
.show_768{ display: none; }
.show_860{ display: none; }
.show_980{ display: none; }
.show_1040{ display: none; }
.show_1200{ display: none; }

@media only screen and (max-width: 1200px) {
	.show_1200{ display: block!important; }
	.hide_1200{ display: none!important; }
}
@media only screen and (max-width: 1040px) {
	.show_1040{ display: block!important; }
	.hide_1040{ display: none!important; }
}
@media only screen and (max-width: 980px) {
	.show_980{ display: block!important; }
	.hide_980{ display: none!important; }
}
@media only screen and (max-width: 860px) {
	.show_860{ display: block!important; }
	.hide_860{ display: none!important; }
}
@media only screen and (max-width: 768px) {
	.show_768{ display: block!important; }
	.hide_768{ display: none!important; }
}
@media only screen and (max-width: 640px) {
	.show_640{ display: block!important; }
	.hide_640{ display: none!important; }
}
@media only screen and (max-width: 540px) {
	.show_540{ display: block!important; }
	.hide_540{ display: none!important; }
}
@media only screen and (max-width: 480px) {
	.show_480{ display: block!important; }
	.hide_480{ display: none!important; }
}

.slide_vol{
	background: #23907E!important;
}
.pattern2 .slick-prev:before, .pattern2 .slick-next:before{
		color: #23907E!important;
}
.recommend_item .slide_vol{
	background: #9B9B9B!important;
}
.bold_title {
    font-weight: bold;
	color: #000;
}
.recommend_area{
	padding: 50px 0;
	background: #F7F0E3;
}
.recommend_title{
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 10px;
}
.recommend_item .box1{
	color: #000;
}
.recommend_item{
	width: 23.5%;
	float:left;
	margin-right: 2%;
}
.recommend_item:last-child{
	margin-right: 0;
}
.recommend_img{
	overflow: hidden;
}
.recommend_item .box1 {
    color: #000;
    background: #fff;
    padding: 10px;
}
@media only screen and (max-width: 980px) {
	.recommend_area{
		padding: 50px 20px;
	}
}
@media only screen and (max-width: 540px) {
	.recommend_item{
		width: 49%;
		margin-right: 2%;
	}
	.recommend_item:nth-child(2n){
		margin-right: 0;
	}
	.recommend_item:nth-child(n+3){
		margin-top: 15px;
	}
}

.w980{
	width:100%;
	max-width:980px;
	margin:0 auto;
}
.w500_title{
	width:500px;
	margin:50px auto 100px 0;
	background-image:url(../img/bg_75.png);
	padding:65px 60px;
	position:relative;
	text-align:center;
}
.diy_logo{
	position:absolute;
	top:-35px;
	left:20px;
}
.bg_img {
	width:100%;
	position:relative;
	margin-top:31px;
	display:inline-block;
}
.bg_img img {
	width:100%;
	max-width:1920px;
}
.main_pc{
	display:block;
}
.main_sp{
	display:none;
	position:relative;
}
.vol_absolute {
	position:absolute;
	top:0;
	width:100%;
	margin:0 auto;
	padding:65px 0px 0;
	display:block;
}
.white_contents {
	background-color:#fff;
	width:100%;
	padding:40px 60px;
	display:inline-block;
}
.title_1 {
	margin-bottom:15px;
}

.top_margin {
	max-width:none;
	position:relative;
}
.pan_link {
	background:#b4d9e1;
}
.menu_area{
	box-shadow:none!important;
}
.diy_title{
	margin-top:10px;
	font-size:25px;
	font-weight:bold;
}
.diy_subtitle{
	font-size:14px;
}
.diy_contentstitle{
	font-size:16px;
	font-weight:bold;
}
.full_youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border:1px solid #ccc;
}
.full_youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
.diy_concept{
	margin: 30px auto;
	text-align: center;
}
.plofile {
    width: 75%;
    float: left;
}
.teacher {
    border-bottom: #222 dotted 1px;
    margin-bottom: 15px;
}
.teacher_img_s {
    display: none;
}
.teacher_img {
    float: right;
    width: 20%;
    max-width: 200px;
    display: inline-block;
}
.intro{
	margin-top: 20px;
}
.intro_title{
	padding-bottom: 5px;
	font-size: 16px;
	font-weight: bold;
}
.font_s{
	font-size: 11px;
}
.text_box, .text_box_top {
    text-indent: -0.6rem;
    padding-left: 0.5rem;
}
.text_box_top {
    margin-top: 15px;
}
.text_box {
    margin-top: 5px;
}
.step b {
    display: block;
}


@media screen and (max-width: 768px) {
	.main_pc{
		display:none;
	}
	.main_sp{
		display:block;
		margin:0 auto;
	}
	.w500_title{
		width:80%;
		margin:0 10%;
		padding:50px 20px 40px;
		margin-top:-100px;
		text-align:center;
	}
	.title_2 {
		margin:0 auto 15px;
	}
	.w980 {
		padding-top:0;
	}
	.white_contents {
	    padding: 20px 30px 40px 30px;
	}
	.plofile {
	    width: 100%;
	}
	.teacher_img {
	    display: none;
	}
	.teacher_img_s {
	    display: block;
	    float: right;
	    width: 150px;
	    margin: 0 0 0 15px;
	}
}

@media screen and (max-width: 640px) {
	.plofile {
	    margin-top: 0;
	}
	.teacher_img_s {
	    display: block;
	    float: right;
	    width: 100px;
	    margin: 0 0 15px 15px;
	}
}

@media screen and (max-width: 480px) {
	.diy_title{
		font-size:20px;
	}
	.diy_subtitle{
		font-size:12px;
	}
	.w500_title {
		margin:-50px 5% 0;
		width:90%;
	}
	.br_sp {
		display:block;
	}
	.white_contents {
		padding:20px 5% 40px;

	}
}