@charset "utf-8";

/*===== 폰트 설정 =====*/
@import url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css');

/* 
NanumSquare  font-weight
-----------------------
Light
font-weight:300;
Regular
font-weight:400;
Bold
font-weight:700;
Extra Bold
font-weight:800;
 */

 /* 구글 노토산스 고딕 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');


html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,
aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,
nav,output,ruby,section,summary,time,mark,audio,video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,
nav,section {
  display: block;
}
body {
	line-height: 1;
	padding: 0px;
	margin: 0px;
	background: #fff;
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif;
}
ol, ul, li {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
input:focus {
	outline: none;
}
a {
	color: inherit;
	text-decoration: none;
}

.clearfix:after {
	content: ".";	/* the period is placed on the page as the last thing before the div closes */
	display: block;	/* inline elements don't respond to the clear property */ 
	height: 0;	/* ensure the period is not visible */
	clear: both;	/* make the container clear the period */
	visibility: hidden;		/* further ensures the period is not visible */
}

.clearfix {display: inline-block;}   /* a fix for IE Mac */

/* next a fix for the dreaded Guillotine bug in IE6 */

/* Hides from IE-mac \*/

* html .clearfix {height: 1%;}

.clearfix {display: block;}

/* End hide from IE-mac */

/* end of "no-extra-markup" clearing method */

/* .clearfix {
	overflow: hidden;
} */

/*===== 폰트 두께 =====*/
.font_L {
	font-weight: 300 !important;
}

.font_R {
	font-weight: 400 !important;
}

.font_B {
	font-weight: 700 !important;
}

.font_EB {
	font-weight: 800 !important;
}


/*===== 폰트 컬러 =====*/
.font_white {
	color: #fff !important;
}

.font_black_01 {
	color: #171717 !important;
}

.font_blue_01 {
	color: #0064ac !important;
}

.font_blue_02 {
	color: #054dc1 !important;
}

.font_blue_03 {
	color: #accfff !important;
}

.font_blue_04 {
	color: #0096c8 !important;
}

.font_red_01 {
	color: #c20510 !important;
}

.font_red_02 {
	color: #d43d5c !important;
}

.font_pink_01 {
	color: #ff6b81 !important;
}

.font_pink_02 {
	color: #fd504a !important;
}

.font_orange_01 {
	color: #ef7c00 !important;
}

.font_orange_02 {
	color: #f68040 !important;
}

.font_yellow_01 {
	color: #f9be3e !important;
}

.font_gray_01 {
	color: #b2b2b2 !important;
}

.font_green_01 {
	color: #478500 !important;
}

.font_green_02 {
	color: #0a9fad !important;
}

.font_green_03 {
	color: #c1fcbb !important;
}

.font_purple_01 {
	color: #6305c3 !important;
}

/*===== 폰트 크기 =====*/
.font_12 {
	font-size: 12px !important;
}

.font_13 {
	font-size: 13px !important;
}

.font_15 {
	font-size: 15px !important;
}

.font_16 {
	font-size: 16px !important;
}

.font_17 {
	font-size: 17px !important;
}

.font_18 {
	font-size: 18px !important;
}

.font_20 {
	font-size: 20px !important;
}

.font_21 {
	font-size: 21px !important;
}

.font_23 {
	font-size: 23px !important;
}


/*===== 패딩값 =====*/
.pt5 {
	padding-top: 5px !important;
}

.pt10 {
	padding-top: 10px !important;
}

.pt15 {
	padding-top: 15px !important;
}

.pt20 {
	padding-top: 20px !important;
}

.pt25 {
	padding-top: 25px !important;
}

.pt30 {
	padding-top: 30px !important;
}

.pt35 {
	padding-top: 35px !important;
}

.pt40 {
	padding-top: 40px !important;
}

.pt45 {
	padding-top: 45px !important;
}

.pt50 {
	padding-top: 50px !important;
}

.pt60 {
	padding-top: 60px !important;
}

.pt70 {
	padding-top: 70px !important;
}

.pt80 {
	padding-top: 80px !important;
}

.pt90 {
	padding-top: 90px !important;
}

.pt100 {
	padding-top: 100px !important;
}

.pt138 {
	padding-top: 138px !important;
}

.pb0 {
	padding-bottom: 0 !important;
}

.pb3 {
	padding-bottom: 3px !important;
}

.pb10 {
	padding-bottom: 10px !important;
}

.pb15 {
	padding-bottom: 15px !important;
}

.pb20 {
	padding-bottom: 20px !important;
}

.pb25 {
	padding-bottom: 25px !important;
}

.pb30 {
	padding-bottom: 30px !important;
}

.pb35 {
	padding-bottom: 35px !important;
}

.pb40 {
	padding-bottom: 40px !important;
}

.pb45 {
	padding-bottom: 45px !important;
}

.pb50 {
	padding-bottom: 50px !important;
}

.pb60 {
	padding-bottom: 60px !important;
}

.pb70 {
	padding-bottom: 70px !important;
}

.pb77 {
	padding-bottom: 77px !important;
}

.pb80 {
	padding-bottom: 80px !important;
}

.pb90 {
	padding-bottom: 90px !important;
}

.pb100 {
	padding-bottom: 100px !important;
}

.pb120 {
	padding-bottom: 120px !important;
}

.pb130 {
	padding-bottom: 130px !important;
}

.pb138 {
	padding-bottom: 138px !important;
}

.pb150 {
	padding-bottom: 150px !important;
}

.pb200 {
	padding-bottom: 200px !important;
}

.pb300 {
	padding-bottom: 300px !important;
}

.pb400 {
	padding-bottom: 400px !important;
}

.pb500 {
	padding-bottom: 500px !important;
}

.pb600 {
	padding-bottom: 600px !important;
}


.pl0 {
	padding-left: 0 !important;
}

.pl10 {
	padding-left: 10px !important;
}

.pl15 {
	padding-left: 15px !important;
}

.pl20 {
	padding-left: 20px !important;
}

.pl25 {
	padding-left: 25px !important;
}

.pl30 {
	padding-left: 30px !important;
}

.pl35 {
	padding-left: 35px !important;
}

.pl40 {
	padding-left: 40px !important;
}

.pl45 {
	padding-left: 45px !important;
}

.pl50 {
	padding-left: 50px !important;
}



.pr10 {
	padding-right: 10px !important;
}

.pr15 {
	padding-right: 15px !important;
}

.pr20 {
	padding-right: 20px !important;
}

.pr25 {
	padding-right: 25px !important;
}

.pr30 {
	padding-right: 30px !important;
}

.pr35 {
	padding-right: 35px !important;
}

.pr40 {
	padding-right: 40px !important;
}

.pr45 {
	padding-right: 450px !important;
}

.pr50 {
	padding-right: 50px !important;
}

.pr0 {
	padding-right: 0 !important;
}


/*===== 마진값 =====*/
.ml_minus20 {
	margin-left: -20px !important;
}

.ml_minus10 {
	margin-left: -10px !important;
}

.ml_minus5 {
	margin-left: -5px !important;
}

.mr_minus20 {
	margin-right: -20px !important;
}

.mr_minus10 {
	margin-right: -10px !important;
}

.mr_minus5 {
	margin-right: -5px !important;
}

.mr0 {
	margin-right: 0 !important;
}

.mr5 {
	margin-right: 5px !important;
}

.mr7 {
	margin-right: 7px !important;
}

.mr8 {
	margin-right: 8px !important;
}

.mr10 {
	margin-right: 10px !important;
}

.mr15 {
	margin-right: 15px !important;
}

.mr20 {
	margin-right: 20px !important;
}

.mr25 {
	margin-right: 25px !important;
}

.mr30 {
	margin-right: 30px !important;
}

.mr35 {
	margin-right: 35px !important;
}

.mr40 {
	margin-right: 40px !important;
}

.mr50 {
	margin-right: 50px !important;
}

.mr60 {
	margin-right: 60px !important;
}

.mr70 {
	margin-right: 70px !important;
}

.mr80 {
	margin-right: 80px !important;
}

.mr90 {
	margin-right: 90px !important;
}

.mr100 {
	margin-right: 100px !important;
}


.mt_minus5 {
	margin-top: -5px !important;
}

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

.mt_minus20 {
	margin-top: -20px !important;
}

.mt5 {
	margin-top: 5px !important;
}

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

.mt15 {
	margin-top: 15px !important;
}

.mt20 {
	margin-top: 20px !important;
}

.mt25 {
	margin-top: 25px !important;
}

.mt30 {
	margin-top: 30px !important;
}
.mt35 {
	margin-top: 35px !important;
}

.mt40 {
	margin-top: 40px !important;
}

.mt45 {
	margin-top: 45px !important;
}

.mt50 {
	margin-top: 50px !important;
}

.mt60 {
	margin-top: 60px !important;
}

.mt70 {
	margin-top: 70px !important;
}

.mt75 {
	margin-top: 75px !important;
}

.mt80 {
	margin-top: 80px !important;
}

.mt90 {
	margin-top: 90px !important;
}

.mt100 {
	margin-top: 100px !important;
}

.mt105 {
	margin-top: 105px !important;
}

.mt110 {
	margin-top: 110px !important;
}

.mt120 {
	margin-top: 120px !important;
}

.mt130 {
	margin-top: 130px !important;
}

.mt140 {
	margin-top: 140px !important;
}

.mt150 {
	margin-top: 150px !important;
}

.mt160 {
	margin-top: 160px !important;
}


.mb0 {
	margin-bottom: 0px !important;
}

.mb3 {
	margin-bottom: 3px !important;
}

.mb5 {
	margin-bottom: 5px !important;
}

.mb10 {
	margin-bottom: 10px !important;
}

.mb13 {
	margin-bottom: 13px !important;
}

.mb15 {
	margin-bottom: 15px !important;
}

.mb20 {
	margin-bottom: 20px !important;
}

.mb25 {
	margin-bottom: 25px !important;
}

.mb30 {
	margin-bottom: 30px !important;
}

.mb35 {
	margin-bottom: 35px !important;
}

.mb40 {
	margin-bottom: 40px !important;
}

.mb45 {
	margin-bottom: 45px !important;
}

.mb50 {
	margin-bottom: 50px !important;
}

.mb55 {
	margin-bottom: 55px !important;
}

.mb60 {
	margin-bottom: 60px !important;
}

.mb65 {
	margin-bottom: 65px !important;
}

.mb70 {
	margin-bottom: 70px !important;
}

.mb75 {
	margin-bottom: 75px !important;
}

.mb80 {
	margin-bottom: 80px !important;
}

.mb85 {
	margin-bottom: 85px !important;
}

.mb90 {
	
	margin-bottom: 90px !important;
}
.mb95 {
	margin-bottom: 95px !important;
}

.mb100 {
	margin-bottom: 100px !important;
}

.mb130 {
	margin-bottom: 130px !important;
}

.mb150 {
	margin-bottom: 150px !important;
}

.mb175 {
	margin-bottom: 175px !important;
}

.mb180 {
	margin-bottom: 180px !important;
}

.mb200 {
	margin-bottom: 200px !important;
}

.mb220 {
	margin-bottom: 220px !important;
}

.mb240 {
	margin-bottom: 240px !important;
}

.mb250 {
	margin-bottom: 250px !important;
}

.mb280 {
	margin-bottom: 280px !important;
}

.mb300 {
	margin-bottom: 300px !important;
}

.mb400 {
	margin-bottom: 400px !important;
}

.mb500 {
	margin-bottom: 500px !important;
}


.ml_minus10 {
	margin-left: -10px !important;
}

.ml5 {
	margin-left: 5px !important;
}

.ml10 {
	margin-left: 10px !important;
}

.ml11 {
	margin-left: 11px !important;
}

.ml15 {
	margin-left: 15px !important;
}

.ml20 {
	margin-left: 20px !important;
}

.ml25 {
	margin-left: 25px !important;
}

.ml30 {
	margin-left: 30px !important;
}

.ml35 {
	margin-left: 35px !important;
}

.ml40 {
	margin-left: 40px !important;
}

.ml50 {
	margin-left: 50px !important;
}

.ml55 {
	margin-left: 55px !important;
}

.ml58 {
	margin-left: 58px !important;
}

.ml60 {
	margin-left: 60px !important;
}

.ml65 {
	margin-left: 65px !important;
}

.ml70 {
	margin-left: 70px !important;
}

.ml80 {
	margin-left: 80px !important;
}

.ml90 {
	margin-left: 90px !important;
}

.ml100 {
	margin-left: 100px !important;
}


.dp_ib {
	display: inline-block !important;
}
.dp_b {
	display: block !important;
}



#wrap {
	display: block;
	width: 100%;
	background: #fff;
}

.contents {
	width: 100%;
	margin: 0 auto;
}

.contents img {
	width: 100%;
	display: block;
}

/* 해상도 768px 이하인 경우 적용 */ 
@media all and (max-width:767px)  {
	.contents .phone {
		display: block;
	}

	.contents .tablet {
		display: none;
	}
}

/* 해상도 768px 이상인 경우 적용 */ 
@media all and (min-width:768px)  {
	.contents .phone {
		display: none;
	}

	.contents .tablet {
		display: block;
	}
}

.btn_area_01 {
	display: block;
	width: 90%;
	margin: 30px auto 100px; 
}

.btn_area_01 ul {
	display: flex; 
	justify-content: space-between;
	list-style: none;
	padding: 0;
	margin: 0;
}

.btn_area_01 ul li {
	width: 48%; 
}

/* 공통 버튼 스타일 */
.btn_participate a, .btn_download_lesson_plan a {
	display: flex;           /* 가로/세로 중앙정렬을 위해 flex 적용 */
	align-items: center;     /* 세로축 중앙정렬 */
	justify-content: center;  /* 가로축 중앙정렬 */
	height: 60px;
	background-color: #6d4d42;
	color: #fff;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	text-decoration: none;    /* a 태그 밑줄 제거 */

	font-family: 'NanumSquare', 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif;
	font-size: 16px;
	font-weight: 700;

	line-height: 60px; 
	text-indent: 0; 
	border: 1px solid #6c4a3f;
}

/* 아이콘 공통 스타일 */
.icon_participate, .icon_download {
	display: inline-block;
	width: 20px;
	height: 26.7px;
	margin-left: 15px; /* 글자와 아이콘 사이 간격 */
	margin-top: -2px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	vertical-align: middle;
}

.icon_participate {
	background-image: url(https://yfgc.fgtv.com/etc/12basket/images/icon_participate.png);
}

.icon_download {
	background-image: url(https://yfgc.fgtv.com/etc/12basket/images/icon_download.png);
}

.contents_title {
	display: block;
	width: 260px;
	margin: 20px auto 10px;
	padding: 8px 10px 7px;
	
	font-family: 'NanumSquare' !important;
	font-size: 15px !important;
	font-weight: 600;
	color: #fff;
	text-align: center;

	background-color: #6d4d42;
	border-radius: 50px;
	-webkit-border-radius: 50px;
}

.contents_main_title {
	display: block;
	width: 260px;
	margin: 20px auto 10px;
	padding: 8px 10px 7px;
	
	font-family: 'NanumSquare' !important;
	font-size: 13px !important;
	font-weight: 600;
	color: #fff;
	text-align: center;

	background-color: #6d4d42;
	border-radius: 50px;
	-webkit-border-radius: 50px;
}

.contents_sub_title {
	display: block;
	margin: 0 auto 15px;
	padding: 0 15px;
	
	font-family: 'NanumSquare' !important;
	font-size: 24px !important;
	font-weight: 800 !important;
	color: #6d4d42;
	text-align: center;
}

/* 해상도 639px 이하 */ 
@media all and (max-width:639px) {
	.contents_box {
		margin: 0 15px;
		padding: 15px;
		background-color: #fff;
		border: 1px solid rgba(225, 225, 225, 1);
		border-radius: 8px;
		-webkit-border-radius: 8px;
		box-sizing: border-box;
	}
}

/* 해상도 640px 이상 */ 
@media all and (min-width:640px) {
	.contents_box {
		margin: 0 10%;
		padding: 25px;
		background-color: #fff;
		border: 1px solid rgba(225, 225, 225, 1);
		border-radius: 8px;
		-webkit-border-radius: 8px;
		box-sizing: border-box;
	}
}

.contents_desc {
	font-family: 'NanumSquare', 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif;
	font-size: 14px;
	/* font-size: 16px; */
	line-height: 26px;
	/* line-height: 28px; */
	padding-bottom: 10px;
	/* padding-bottom: 15px; */
	border-bottom: 1px solid rgba(225, 225, 225, 0.85);
	-webkit-text-size-adjust: none;  /* ios에서 가로모드로 회전시 글자 커지는 현상 방지 */
	/* word-break: keep-all; */
}

.contents_write {
	margin: 15px auto 0;
	/* margin: 20px auto 0; */
}


.contents_write ul {
    overflow: hidden;
    box-sizing: border-box;
	 margin: 10px 0;
    padding-bottom: 10px;
    /* margin: 15px 0;
    padding-bottom: 15px; */
    border-bottom: 1px solid rgba(225, 225, 225, 0.85);
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}

.contents_write ul:last-child {
	margin: 15px 0 0;
	padding-bottom: 0;
    border-bottom: none;
}

.contents_write ul li {
    float: left;
    font-size: 16px;
}

.contents_write ul:last-child .write_title_area_01 {
    margin-top: -6.5% !important;
}


/* 디바이스 가로 350픽셀 이하일때 적용 */
@media screen and (max-width: 350px) {
	.write_title_area_01 {
		width: 30%;
		/* width: 20%; */
		font-size: 15px !important;
		font-family: 'NanumSquare' !important;
		font-weight: 800 !important;
		text-align: left;
		line-height: 22px;

		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: left;
	}
}

/* 디바이스 가로 350픽셀 이상일때 적용 */
@media screen and (min-width: 351px) {
	.write_title_area_01 {
		width: 30%;
		/* width: 20%; */
		font-size: 15px !important;
		font-family: 'NanumSquare' !important;
		font-weight: 800 !important;
		text-align: left;
		line-height: 22px;

		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: left;
	}
}

.write_input_area_01 {
	width: 70%;
    /* width: 80%; */
    text-align: left;
    background-color: #fff;
    font-size: 15px !important;
    line-height: 20px;
}

.m_input_w100per {
    width: 100%;
    padding: 9px 12px 10px;
    border: 1px solid rgba(178, 178, 178, 1);
    background-color: #fff;
    outline: 0;
    box-sizing: border-box;
    font-size: 15px !important;
    ime-mode: disabled !important;
}

.write_input_area_01 span {
	display: block !important;
}

/* 해상도 639px 이하 */ 
@media all and (max-width:639px) {
	.btn_area_02 {
		display: block;
		width: 90%;
		margin: 20px auto 100px; 
		/* margin: 30px auto 100px; */ 
	}
}

/* 해상도 640px 이상 */ 
@media all and (min-width:640px) {
	.btn_area_02 {
		display: block;
		width: 80%;
		margin: 30px auto 100px; 
	}
}

.btn_area_02 ul {
	display: flex; 
	justify-content: space-between;
	list-style: none;
	padding: 0;
	margin: 0;
}

.btn_area_02 ul li {
	width: 48%; 
}

/* 버튼 스타일 */
.btn_upload a {
	display: flex;           /* 가로/세로 중앙정렬을 위해 flex 적용 */
	align-items: center;     /* 세로축 중앙정렬 */
	justify-content: center;  /* 가로축 중앙정렬 */
	height: 60px;
	background-color: #6d4d42;
	color: #fff;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	text-decoration: none;    /* a 태그 밑줄 제거 */

	font-family: 'NanumSquare', 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif;
	font-size: 16px;
	font-weight: 700;

	line-height: 60px; 
	text-indent: 0; 
	border: 1px solid #6c4a3f;
}

.btn_cancle a {
	display: flex;           /* 가로/세로 중앙정렬을 위해 flex 적용 */
	align-items: center;     /* 세로축 중앙정렬 */
	justify-content: center;  /* 가로축 중앙정렬 */
	height: 60px;
	background-color: #454545;
	color: #fff;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	text-decoration: none;    /* a 태그 밑줄 제거 */

	font-family: 'NanumSquare', 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif;
	font-size: 16px;
	font-weight: 700;

	line-height: 60px; 
	text-indent: 0; 
	border: 1px solid #222;
}

#photoInput {
	width: 55% !important;
    /* width: 60% !important; */
}

/* 디바이스 가로 350픽셀 이하일때 적용 */
@media screen and (max-width: 350px) {
	.btn_find {
		display: inline-block;
		padding: 10px 12px 9px;
		text-align: center;
		font-family: 'NanumSquare', 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
		font-size: 12px;
		font-weight: 700;
		color: #fff;
		background: #0064ac;
		border-radius: 50px;
		-webkit-border-radius: 50px;
		box-sizing: border-box;
		outline: none;
	}
}

/* 디바이스 가로 350픽셀 이상일때 적용 */
@media screen and (min-width: 351px) {
	.btn_find {
		display: inline-block;
		padding: 10px 15px 9px;
		text-align: center;
		font-family: 'NanumSquare', 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
		font-size: 14px;
		font-weight: 700;
		color: #fff;
		background: #0064ac;
		border-radius: 50px;
		-webkit-border-radius: 50px;
		box-sizing: border-box;
		outline: none;
	}
}

.write_input_area_01 button {
	outline: none !important;
	border: none !important;
}

.write_input_area_01 input::placeholder {
 	color: #929292 !important;
}

.write_input_area_01 input::-webkit-input-placeholder{
 	color: #929292 !important;
}

.write_input_area_01 input::value {
 	color: #929292 !important;
}

.write_input_area_01 input::-webkit-input-value{
 	color: #929292 !important;
}