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

@import url(reset.css);
@import url(com.css);

.page_title {width:100%; background:#febc48; height:100px; margin-bottom:55px;}
.page_title .vod_title {width:1167px; margin:0 auto; height:100px;}
.page_title .vod_title li {color:#fff; font-family: 'tmonmonsori.ttfregular'; padding-top:30px; font-size:2.5em;}

.page_title .reader_title {width:1167px; margin:0 auto; height:100px; text-align:center;}
.page_title .reader_title li {width:562px; height:56px; border-radius:38px; color:#fff; font-family: 'tmonmonsori.ttfregular'; margin-top:12px; font-size:2em; padding-top:20px;}
.page_title .reader_title li a {width:500px; height:46px; margin:0 auto; display:block;}
.page_title .reader_title .on {background:#be7900;}
.page_title .reader_title .off {background:#f9ca78;}

.vod_list {width:1167px; margin:0 auto; height:100%;}
.vod_list li {float:left; width:546px; margin-bottom:45px;}
.vod_list li:nth-child(odd) {margin-right:75px;}
.vod_list li dl dt {background:url(/img/sample_img.png) no-repeat; width:546px; height:271px;}
.vod_list li dl dt a {display:block; width:546px; height:271px; background:url(/img/btn_play.png) center center no-repeat;}
.vod_list li dl dd {width:546px; height:95px; background:#16bfce; position:relative; text-align:center; color:#fff; padding-top:30px;}
.vod_list li dl dd a {display:block; position:absolute; width:61px; height:48px; right:0; top:40px;}
.vod_list li dl dd .vod_title {font-family: 'Roboto-Medium'; font-size:2.5em;}
.vod_list li dl dd .vod_time {font-family: 'Roboto'; font-size:1.5em;}

.page_level {font-family: 'Roboto'; color:#2f2f2f; font-size:1.4em;}
.reader_level {text-align:center; font-family: 'Roboto-Medium'; font-size:2.2em;}
.reader_level span {background:#0b82b9; color:#fff;}
.reader_list {margin-top:40px;}
.reader_list li dl dd {background:#0b82b9; color:#fff; width:373px; height:60px; text-align:center; font-size:1.5em; font-family: 'Roboto-Medium'; padding-top:20px;}
.reader_list li {float:left; margin-right:24px; margin-bottom:35px;}
.reader_list li:nth-child(3n) {margin-right:0px;}

.publish_title {color:#fff; display:inline-block; padding:6px 8px; font-family: 'Roboto'; font-size:1.6em; margin-bottom:20px;}
.publish_list {height:750px;}
.publish_list > li {float:left;}
.publish_box {}
.publish_box dl {-webkit-box-shadow: 3px 3px 5px 2px rgba(0,0,0,0.23);
-moz-box-shadow: 3px 3px 5px 2px rgba(0,0,0,0.23);
box-shadow: 3px 3px 5px 2px rgba(0,0,0,0.23); margin-right:26px;}
.publish_box:nth-child(3n) {margin:0;}
.publish_box_text {color:#fff; padding:20px 25px; display:block;}
.publish_box_text li {list-style:disc; font-family: 'Roboto-Medium'; font-size:1.3em;}
.publish_box_red {background:#bb3709;}
.publish_box_orange {background:#b95d0b;}
.publish_box_green {background:#00844a;}
.publish_box_purple {background:#942c86;}
.publish_box_blue {background:#007ec5;}
.publish_box_blue01 {background:#0192b1;}
.publish_box_blue02 {background:#007892;}
.publish_box_blue03 {background:#00576a;}
.publish_box_red01 {background:#ce3e17;}
.publish_box_red02 {background:#ab2804;}
.publish_box_red03 {background:#801c00;}
.publish_box_green01 {background:#098b5b;}
.publish_box_green02 {background:#047249;}
.publish_box_green03 {background:#015838;}

.btn_publish {display:block; width:200px; height:45px; border-radius:30px; margin:0 auto; background:#401500; color:#fff !important; text-align:center;font-family: 'Roboto-Medium'; font-size:1.8em; padding-top:10px; margin-bottom:65px; margin-top:30px;}

.contact {width:100%; height:100%;
background: #c1c9ea; /* Old browsers */
background: -moz-linear-gradient(top,  #c1c9ea 0%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #c1c9ea 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #c1c9ea 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}

.contact_con_m {display:none;}
.con_text {color:#fff; text-align:center; font-family: 'tmonmonsori.ttfregular'; font-size:3em; padding:40px 0px;}
.contact_con section {background:#959fc6 url(/img/contact_img.png) right bottom no-repeat; width:1007px; border-radius:10px; padding:60px;}
.contact_con table {width:100%;}
.contact_con table th {font-family: 'Roboto-Medium'; color:#fff; font-size:16px; text-align:right; padding-right:25px;padding-bottom:15px;}
.contact_con table td {padding-bottom:15px;}
.contact_con table td input {height:25px;width: 800px;}
.contact_con table td textarea {height:250px; width:800px;}
.contact_con table td select {background:#fff url(/img/contact_select.png) right no-repeat; width:360px; height:45px; border:none;}
.contact_con table td .btn_contact {width:357px; height:70px; border-radius:35px; background:#eb9401; color:#fff; text-align:center; display:block; font-family: 'tmonmonsori.ttfregular'; font-size:2.5em; line-height:2.1em;}
.cc {display:none;}

/************************
			������
*************************/

@media (max-width:719px) and (min-width:1px) {
	section {width:100%; position:relative; padding-bottom:10%;}
	section ul {margin:0 auto; text-align:center;}
	.page_title .vod_title {width:90%; margin:0 auto; height:100px;}
	.page_title .vod_title .youtube {display:none;}
	.page_title .vod_title li {color:#fff; font-family: 'tmonmonsori.ttfregular'; padding-top:30px; font-size:1.5em;}

	.page_title .reader_title {width:90%; margin:0 auto; height:100px;}
	.page_title .reader_title .youtube {display:none;}
	.page_title .reader_title li {color:#fff; font-family: 'tmonmonsori.ttfregular'; font-size:1.2em; width:35%; height:30%; padding:7%;}
	.page_title .reader_title li a {width:100%;}
	.page_title .reader_title li img {display:none;}
	.reader_list {width:90%; margin:10% auto 0;}
	.page_level {font-size:1.2em; text-align:center; margin-bottom:5%;}
	.reader_level {font-size:2em; letter-spacing:-0.06em;}

	.vod_list {width:90%; height:100vh; padding-bottom:300%; margin:0 auto;}
	.vod_list li {width:100%; margin-bottom:25px;}
	.page_title .vod_title li img {display:none;}
	.vod_list li dl dt a {display:block; width:100%; background:url(/img/btn_play.png) center center no-repeat;}
	.vod_list li dl dd {width:100%; height:95px; background:#16bfce; position:relative; text-align:center; color:#fff; padding-top:30px;}
	.vod_list li dl dd a {display:block; position:absolute; width:61px; height:48px; right:0; top:40px;}
	.vod_list li dl dd .vod_title {font-family: 'Roboto-Medium'; font-size:2em;}
	.vod_list li dl dd .vod_time {font-family: 'Roboto'; font-size:1.5em;}

	.publish_list {width:95%; margin:0 auto; height:100%; overflow:hidden;}
	.publish_list > li {width:100%; height:750px; float:left;}
	.publish_box_text {width:100%;}
	
	.contact_con {display:none;}
	.con_foo {display:block; margin:0 auto 10%; width:90%;}
	.contact_con_m {display:block; background:#959fc6; width:90%; border-radius:10px; padding:5%;}
	.contact_con_m table th {font-family: 'Roboto-Medium'; color:#fff; font-size:1em; text-align:right; padding-bottom:15px; padding-right:5%;}
	.contact_con_m table td {padding-bottom:15px;}
	.contact_con_m table td input {height:25px;width:70%;}
	.contact_con_m table td textarea {height:250px; width:70%;}
	.contact_con_m table td select {background:#fff url(/img/contact_select.png) right no-repeat; width:80%; height:45px; border:none;}
	.contact_con_m table td .btn_contact {width:70%; height:50px; margin:0 auto; border-radius:25px; background:#eb9401; color:#fff; text-align:center; display:block; font-family: 'tmonmonsori.ttfregular'; font-size:1.5em; line-height:2.5em;}
	.cc {display:block;}
}

@media (max-width:1099px) and (min-width:720px) {
	section {width:100%; height:auto; position:relative; padding-bottom:30%;}
	.page_title .vod_title {width:90%; margin:0 auto; height:100px;}
	.page_title .vod_title .youtube {display:none;}
	.page_title .vod_title li {color:#fff; font-family: 'tmonmonsori.ttfregular'; padding-top:30px; font-size:2em;}

	.page_title .reader_title {width:90%; margin:0 auto; height:100px;}
	.page_title .reader_title .youtube {display:none;}
	.page_title .reader_title li {color:#fff; font-family: 'tmonmonsori.ttfregular'; padding-top:20px; font-size:1.8em; width:47%; text-align:center; height:auto;}
	.page_title .reader_title li a {width:90%; margin:0 auto;}
	.page_title .reader_title li img {display:none;}
	.page_level {text-align:center;}
	.reader_list {width:90%; margin:10% auto 0; text-align:center;}
	.reader_level {font-size:2em; letter-spacing:-0.06em;}

	.vod_list {width:90%; margin:0 auto;height:100vh;}
	.vod_list li {width:47%; margin-bottom:25px; float:left;}	
	.vod_list li:nth-child(odd) {margin-right:6%;}
	.vod_list li dl dt {background:url(/img/sample_img.png) center center no-repeat; width:100%;}
	.vod_list li dl dt a {display:block; width:100%; background:url(/img/btn_play.png) center center no-repeat;}
	.vod_list li dl dd {width:100%; height:95px; background:#16bfce; position:relative; text-align:center; color:#fff; padding-top:30px;}
	.vod_list li dl dd a {display:block; position:absolute; width:61px; height:48px; right:0; top:40px;}
	.vod_list li dl dd .vod_title {font-family: 'Roboto-Medium'; font-size:1.6em;}
	.vod_list li dl dd .vod_time {font-family: 'Roboto'; font-size:1.2em;}

	.reader_list li:nth-child(even) {margin-right:0px;}
	.reader_list li:nth-child(3n) {margin-right:24px;}

	.publish_list {width:95%; margin:0 auto; height:50%; overflow:hidden;}
	.publish_list > li {float:left; width:32%; margin-right:2%;}
	.publish_list > li:nth-child(3n) {margin:0 !important;}
	.publish_list > li dl dt img {width:100%; height:auto;}
	.publish_list > li dl .publish_box_text {width:77%;}

	.contact_con {display:none;}
	.con_foo {display:block; margin:0 auto 10%; width:90%;}
	.contact_con_m {display:block; background:#959fc6; width:90%; border-radius:10px; padding:5%;}
	.contact_con_m section {margin:0 auto;}
	.contact_con_m table th {font-family: 'Roboto-Medium'; color:#fff; font-size:1em; text-align:right; padding-bottom:15px; padding-right:5%; width:20%;}
	.contact_con_m table td {padding-bottom:15px;}
	.contact_con_m table td input {height:25px;width:70%;}
	.contact_con_m table td textarea {height:250px; width:70%;}
	.contact_con_m table td select {background:#fff url(/img/contact_select.png) right no-repeat; width:80%; height:45px; border:none;}
	.contact_con_m table td .btn_contact {width:70%; height:50px; margin:0 auto; border-radius:25px; background:#eb9401; color:#fff; text-align:center; display:block; font-family: 'tmonmonsori.ttfregular'; font-size:1.5em; line-height:2.5em;}
	.cc {display:block;}
}

@media (max-width:1700px) and (min-width:1100px) {
	.vod_list {width:100%; height:100vh; margin:0 auto;}
}