@charset "utf-8";
.main_content h3 {letter-spacing:-2px;}
.main_content h3 span{font-weight:100;}

.slick-slide img{display:inline;}

.more{z-index:2; position:absolute; top:12px; right:9px; display:block; width:30px; height:30px; font-size:0; text-indent:-999px; background:#ff9e2c; border-radius:50%; transition:0.3s ease;}
.more:before,
.more:after{content:''; display:block; position:absolute; top:13px; left:8px; width:14px; height:4px; transition:0.3s ease; background:#fff;}
.more:after{top:8px; left:13px; width:4px; height:14px;}
.more:hover,
.more:focus,
.more:active{transform:rotate(180deg); background:#f28300;}

/* 비주얼 */
#visual{position:relative; overflow:hidden; height:859px; width:100%; margin:0 0 43px; color:#fff; background:#eea70f url(/ostv/images/main/bg.gif) no-repeat 50% 0;}
#visual *{vertical-align:top;}
#visual .tit{padding:0 0 42px 0; line-height:100%; text-align:center;}
#visual h3{padding:63px 0 10px; line-height:100%; font-size:32px;}
/*#visual h3:before{content:''; position:absolute; top:31px; left:50%; width:38px; height:14px; background:url(/ostv/images/main/bg_tit.png) no-repeat;}*/
#visual .list_wrap{position:relative; width:1120px; margin:0 auto; padding:0 70px; box-sizing:border-box;}
#visual .list_area{width:100%; padding:26px 28px 24px 31px; background:#fff; box-sizing:border-box;}
#visual .list_area .list:not(:first-of-type){display:none;}
#visual .list_area.slick-initialized .list:not(:first-of-type){display:block;} 
#visual .list *{display:inline-block; vertical-align:top;}
#visual .list a{width:100%;}
#visual .img{overflow:hidden; max-width:921px;}
#visual .img img{max-width:100%; max-height:517px; transition:0.4s ease-in-out;}
#visual .sbj{display:block; padding:26px 0 0 0; line-height:42px; font-size:28px; font-weight:900;  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#visual .sbj span{height:43px; line-height:43px; padding:0 20px; margin:0 10px 0 0; font-size:22px; font-weight:800; border-radius:43px; color:#fff; background:#8fc320;}
#visual a:hover img,
#visual a:focus img,
#visual a:active img{transform:scale(1.08);}
#visual a:hover .sbj strong,
#visual a:focus .sbj strong,
#visual a:active .sbj strong{text-decoration:underline;}
#visual a:hover .sbj span{background:#73a801;}

#visual .slick-dots{z-index:2; position:absolute; top:-25px; right:35px; line-height:100%;}
#visual .slick-dots *{display:inline-block; vertical-align:top;}
#visual .slick-dots li{line-height:0;}
#visual .slick-dots button{width:12px; height:12px; margin:0 2px; padding:0; font-size:0; text-indent:-999px; background:#0a2558; border-radius:6px; transition:width 0.3s ease}
#visual .slick-dots .slick-active button{width:36px; background:#2a6fff;}

#visual .ctrl{display:block; width:24px; height:24px; font-size:0; text-indent:-999px; background:#0a2558 url(/ostv/images/main/ico_ctrl.png) no-repeat -51px 6px;}
#visual .btn_stop{position:absolute; top:131px; right:50%; margin:0 -490px 0 0; border-radius:50%;}
#visual .ctrl.on{background-position:-23px 6px;}
#visual .ctrl:hover{background-color:#011b4b;}

#visual .control{position:absolute; top:50%; left:0; width:100%;}
#visual .control a{position:absolute; top:0; left:0; width:70px; height:94px; margin:-47px 0 0 0; transition:0.3s ease; background:#0a2558 url(/ostv/images/main/ico_arrow.png) no-repeat 50% 50%;}
#visual .control a:hover{background-position:35% 50%;}
#visual .control .btn_next{left:auto; right:0; transform:rotateY(180deg);}

@media all and (max-width:1140px) {
	#visual{height:auto; padding:0 0 50px;}
	#visual .list_wrap{width:96%;}
	#visual .img,
	#visual .img img{width:100%;}
	#visual .btn_stop{right:90px; margin:0;}
}
@media all and (max-width:1024px) {
	#visual h3{padding-top:53px;}
	#visual .list_area{padding:22px;}
	#visual .sbj{padding:22px 0 0 0; font-size:23px;}
	#visual .sbj span{font-size:19px;}
	#visual .btn_stop{top:120px;}
}
@media all and (max-width:768px) {
	#visual{padding:0 0 45px; margin:0 0 35px; background-size:contain; background-position:50% 95%;}
	#visual .tit{font-size:14px;}
	#visual h3{font-size:26px;}
	#visual .list_wrap{padding:0 50px;}
	#visual .list_area{padding:18px;}
	#visual .sbj{line-height:35px; padding:18px 0 0 0; font-size:19px;}
	#visual .sbj span{height:35px; line-height:35px; margin:0 5px 0 0; font-size:16px;}
	#visual .control a{width:50px; height:70px; margin:-35px 0 0 0;}
	#visual .btn_stop{top:112px; right:65px;}
}
@media all and (max-width:568px) {
	#visual{padding:0 0 32px; margin:0 0 25px;}
	#visual .tit{padding:0 0 53px; font-size:12px;}
	#visual h3{padding:39px 0 5px; font-size:22px;}
	#visual h3:before{top:23px; width:30px; background-size:cover;}
	#visual .btn_stop{top:98px; right:50px;}
	#visual .control a{width:40px; height:60px; margin:-30px 0 0 0;}
	#visual .slick-dots{right:30px;}
	#visual .list_wrap{padding:0 40px;}
	#visual .list_area{padding:14px;}
	#visual .sbj{line-height:30px; padding:13px 0 0 0; font-size:16px;}
	#visual .sbj span{height:30px; line-height:30px; padding:0 11px; font-size:14px;}
}
@media all and (max-width:400px) {
	#visual{padding:0 0 30px;}
	#visual .tit{padding:0 0 48px; font-size:11px;}
	#visual h3{padding:35px 0 4px; font-size:19px;}
	#visual h3:before{top:20px;}
	#visual .btn_stop{top:85px;}
	#visual .list_area{padding:12px;}
	#visual .sbj{line-height:25px; padding:10px 0 0 0; font-size:15px;}
	#visual .sbj span{height:25px; line-height:25px; padding:0 7px; font-size:13px;}
}
@media all and (max-width:330px) {
	#visual h3{font-size:18px;}
}

/* 데일리뉴스, 포커스 */
.news{position:relative; float:left; width:575px; margin:0 0 36px;}
.news.sec2{float:right;}
.news h3{line-height:55px; margin:0 0 30px; font-size:30px; color:#242b3f; border-bottom:2px solid #2c2c2c;}
.news .list_wrap{border-bottom:2px solid #333;}
.news .first *,
.news .list *{display:block;}
.news .first a{position:relative;}
.news .first a:before{content:''; display:block; position:absolute; bottom:12px; right:9px; width:40px; height:40px; background:url(/ostv/images/main/ico_play.png) no-repeat;  background-size:contain;}
.news .first .sbj{width:calc(100% - 49px); line-height:61px; font-size:23px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.news .first .img {overflow:hidden;}
.news .first .img img{width:100%; max-height:313px; transition:0.4s ease-in-out;}
.news .list{height:119px; padding:16px 0 13px 0; border-top:1px solid #bfbfbf;}
.news .list a{position:relative; display:block; padding:0 0 0 248px; font-size:14px; color:#888;}
.news .list .img{position:absolute; top:0; left:0; width:217px; overflow:hidden;}
.news .list .img:before{z-index:1; content:''; display:block; position:absolute; left:50%; top:50%; width:44px; height:44px; transform:translate(-50%, -50%); background:url(/ostv/images/main/ico_play.png) no-repeat;}
.news .list .img img{width:100%; max-height:119px; transition:0.3s ease;}
.news .list .sbj strong,
.news .list .sbj span{overflow:hidden; height:40px; line-height:20px; max-width:99%; text-overflow:ellipsis; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.news .list .sbj strong{margin:0 0 10px; font-size:18px; color:#222;}
.news a:hover img,
.news a:focus img,
.news a:active img{transform:scale(1.1);}

@media all and (max-width:1220px) {
	.news{width:47.5%;}
}
@media all and (max-width:1024px) {
	.news h3{font-size:28px;}
	.news .first .sbj{font-size:21px;}
	.news .list a{padding:10px 0 0 220px;}
	.news .list .img{width:204px;}
	.news .list .img img{max-height:112px;}
	.news .list .sbj strong{font-size:17px;}
}
@media all and (max-width:768px) {
	.news{width:100%;}
	.news h3{margin:0 0 20px; font-size:26px; text-align:center;}
	.news .list_wrap{padding:0 10px;}
	.news .first .sbj{font-size:19px;}
	.news .list .sbj strong{font-size:16px;}
}
@media all and (max-width:568px) {
	.more{top:8px;}

	.news{margin:0 0 28px;}
	.news h3{margin:0 0 15px; line-height:50px; font-size:22px;}
	.news .first .sbj{line-height:55px; font-size:17px;}
	.news .first a:before{width:32px; height:32px;}
	.news .list{height:auto;}
	.news .list a{padding:5px 0 0 180px; font-size:13px;}
	.news .list .img{width:170px;}
	.news .list .img img{max-height:93px;}
	.news .list .sbj strong{margin:0 0 5px; font-size:15px;}
	.news .list .img:before{width:38px; height:38px; background-size:contain;}
}
@media all and (max-width:400px) {
	.news h3{font-size:21px;}
	.news .first .sbj{line-height:50px; font-size:16px;}
	.news .first a:before{width:30px; height:30px;}
	.news .list a{padding:0 0 0 150px; font-size:12px;}
	.news .list .img{width:140px;}
	.news .list .img img{max-height:76px;}
	.news .list .sbj strong{font-size:14px;}
	.news .list .sbj span{height:36px; line-height:18px;}
}

/* 기획영상 */
#plan{clear:both; overflow:hidden; width:100%; padding:19px 0 21px; border-top:1px solid #333; border-bottom:1px solid #333;}
#plan .more{right:25px; width:25px; height:25px;}
#plan .more:before{top:10px; left:7px; width:12px;}
#plan .more:after{top:6px; left:11px; height:12px;}
#plan h3{float:left; width:14.2%; padding:22px 0 0 0; font-size:30px;}
#plan .unit{position:relative; float:left; width:28.6%; height:303px; padding:3px 25px 0; border-left:1px solid #d6d6d6; box-sizing:border-box;}
#plan h4{line-height:53px; font-size:22px; border-bottom:1px solid #000;}
#plan .list{height:56px; padding:20px 0 0 0;}
#plan .list *{display:block;}
#plan .list a{position:relative; display:block; padding:0 0 0 117px;}
#plan .img{position:absolute; top:0; left:0; overflow:hidden;}
#plan .img img{width:99px; height:56px; transition:0.3s ease;}
#plan .sbj{overflow:hidden; height:40px; line-height:20px; max-width:99%; font-size:15px; font-weight:800; text-overflow:ellipsis; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
#plan a:hover img,
#plan a:focus img,
#plan a:active img{transform:scale(1.15);}

@media all and (max-width:1024px) {
	#plan{padding:28px 0 20px;}
	#plan h3{width:100%; padding:0 0 10px 10px;}
	#plan .unit{width:33.33%;}
	#plan .unit1{border-left:none;}
}
@media all and (max-width:768px) {
	#plan{padding-top:13px; border-top:none;}
	#plan h3{padding:0; font-size:26px; text-align:center;}
	#plan h4{line-height:40px;}
	#plan .unit{width:100%; height:auto; padding:17px 10px 0; border-left:none;}
	#plan .unit1{padding:10px 10px 0;}
	#plan .list{padding:12px 0 0 0;}
	#plan .list a{padding:8px 0 0 110px;}
	#plan .more{top:17px; right:10px;}
	#plan .unit1 .more{top:12px;}
}
@media all and (max-width:568px) {
	#plan h3{font-size:24px;}
	#plan h4{line-height:35px; font-size:19px;}
	#plan .more{top:20px;}
	#plan .list{padding:10px 0 0 0;}
}
@media all and (max-width:400px) {
	#plan h3{font-size:22px;}
	#plan h4{font-size:18px;}
	#plan .sbj{font-size:14px;}
}

/* 바로가기 */
#quick {text-align:center; padding:66px 0 105px; line-height:130%; word-break:keep-all;}
#quick h3{position:relative; padding:34px 0 60px; line-height:100%; font-size:38px;}
#quick h3:before,
#quick h3:after{content:''; display:inline-block; width:50px; height:55px; margin:-12px 18px 0 0; vertical-align:top; background:url(/ostv/images/main/ico_tit2.gif) no-repeat;}
#quick h3:after{position:absolute; top:0; left:50%; width:38px; height:14px; margin:0; background:url(/ostv/images/main/bg_tit.png) no-repeat 0 100%;}
#quick li {display:inline-block; width:200px; vertical-align:top;}
#quick li + li{padding:0 0 0 17px;}
#quick li *{display:block;}
#quick li em{display:inline;}
#quick li a{position:relative; padding:227px 0 0 0; font-size:15px; font-weight:400; color:#777; transition:0.3s ease-in; box-sizing:border-box;}
#quick li a:before,
#quick li a:after{z-index:1; content:''; position:absolute; top:0; left:50%; display:block; width:200px; height:200px; transform:translateX(-50%); border-radius:50%; box-shadow:inset 0 0 0 1px #c2c2c2; box-sizing:border-box; transition:0.4s ease-in-out;}
#quick li a:before{z-index:2; top:37px; height:113px; border-radius:0; box-shadow:none; transition:none; background:url(/ostv/images/main/ico_link1.png) no-repeat 50% 0;}
#quick li.list2 a:before{background-image:url(/ostv/images/main/ico_link2.png?time=250320);}
#quick li.list3 a:before{background-image:url(/ostv/images/main/ico_link3.png);}
#quick li.list4 a:before{background-image:url(/ostv/images/main/ico_link4.png);}
#quick li.list5 a:before{background-image:url(/ostv/images/main/ico_link5.png);}
#quick li a:hover:before{background-position:50% 100%;}
#quick li a:hover:after,
#quick li a:focus:after,
#quick li a:active:after{box-shadow:inset 0 0 0 10px #cd2222;}
#quick li a strong{padding:0 0 14px; font-size:22px; color:#222;}
#quick .on li{animation:slideup 0.6s both;}
#quick .on li:nth-child(1){animation-delay:0.25s;}
#quick .on li:nth-child(2){animation-delay:0.5s;}
#quick .on li:nth-child(3){animation-delay:0.75s;}
#quick .on li:nth-child(4){animation-delay:1s;}
#quick .on li:nth-child(5){animation-delay:1.25s;}
@keyframes slideup{
	0%{transform:translateY(20px); opacity:0; visibility:hidden;}
	100%{transform:translateY(0); opacity:100%; visibility:visible;}
}

@media all and (max-width:1220px) {
	#quick li{width:19%;}
	#quick li a{padding:200px 0 0 0;}
	#quick li a:before{height:100px; background-size:contain;}
	#quick li a:after{width:180px; height:180px;}
	#quick li + li{padding:0;}
}
@media all and (max-width:1024px) {
	#quick h3 span,
	#sns h3 span{display:block; line-height:130%; font-size:18px;}

	#quick{padding:40px 0 60px;}
	#quick h3{padding:20px 0 35px 60px; font-size:30px;}
	#quick h3:before{position:absolute; top:50%; left:50%; margin:-37px 0 0 -110px; background-size:contain;}
	#quick li{width:19.5%;}
	#quick li a{padding:155px 0 0 0; font-size:14px;}
	#quick li a:before{top:27px; height:75px;}
	#quick li a:after{width:140px; height:140px;}
	#quick li a strong{padding:0 0 10px; font-size:19px;}
	#quick li a:hover:after,
	#quick li a:focus:after,
	#quick li a:active:after{box-shadow:inset 0 0 0 8px #cd2222;}
}
@media all and (max-width:768px) {
	.main_content h3{letter-spacing:-1px;}
	#quick h3 span, #sns h3 span{font-size:16px;}

	#quick{padding:30px 0 30px;}
	#quick h3{padding:20px 0 30px 40px; font-size:26px;}
	#quick h3:before{height:50px; margin:-30px 0 0 -102px;}
	#quick li{width:35%;}
	#quick li:nth-child(-n+3){width:32%;}
	#quick li a{font-size:13px;}
	#quick li a:before{width:100px; height:65px;}
	#quick li a:after{width:120px; height:120px;}
	#quick li a strong{padding:0 0 5px; font-size:18px;}
	#quick li a{padding:130px 0 10px 0;}
	#quick li a:hover:after,
	#quick li a:focus:after,
	#quick li a:active:after{box-shadow:inset 0 0 0 6px #cd2222;}
}
@media all and (max-width:568px) {
	#quick h3 span, #sns h3 span{font-size:14px;}

	#quick {padding:18px 0;}
	#quick h3{padding:20px 0 25px 50px; font-size:23px;}
	#quick h3:before{height:45px; width:40px; margin:-27px 0 0 -80px;}
	#quick h3:after{width:25px; background-size:cover;}
	#quick li a{padding:90px 0 8px;}
	#quick li a:before{top:18px; width:70px; height:45px;}
	#quick li a:after{width:82px; height:82px;}
	#quick li a span{display:none;}
	#quick li a strong{padding:0; font-size:15px; font-weight:800;}
}
@media all and (max-width:400px) {
	#quick {padding:16px 0;}
	#quick h3 span, #sns h3 span{font-size:13px;}
	#quick h3{padding:20px 0 22px 45px; font-size:21px;}
	#quick li a{padding:85px 0 6px;}
	#quick li a:before{top:18px; width:65px; height:43px;}
	#quick li a:after{width:79px; height:79px;}
	#quick li a strong{font-size:14px;}
}
@media all and (max-width:350px) {
	#quick li em{display:none;}
}

#sns {overflow:hidden; width:100%; padding:29px 0 101px 0; border-top:1px solid #333;}
#sns h3{position:relative; float:left; padding:20px 0 0 30px; line-height:100%; font-size:28px;}
#sns h3:before{content:''; display:inline-block; width:4px; height:25px; margin:2px 17px 0 0; transform:skew(-30deg); background:#000; vertical-align:top;}
#sns ul{float:right; padding:0 4px 0 0;}
#sns li{float:left; padding:0 23px 0 0;}
#sns li a{display:block; width:183px; height:63px; line-height:65px; border-radius:10px; font-size:15px; color:#fff; text-align:center; background:#00b000; transition:0.4s ease;}
#sns li a:before{content:''; display:inline-block; width:32px; height:28px; margin:20px 0 0 0; vertical-align:top; background:url(/ostv/images/main/ico_sns.png) no-repeat;}
#sns li a:hover{font-weight:800; box-shadow:7px -7px 0 rgba(0,176,0,0.3);}
#sns li.bl a:before{width:69px;}
#sns li.fb a{background:#4d6fa9;}
#sns li.fb a:hover{box-shadow:7px -7px 0 rgba(77,111,169,0.3);}
#sns li.fb a:before{background-position:-213px 0;}
#sns li.tw a{background:#1ab2e8;}
#sns li.tw a:before{background-position:-427px 0;}
#sns li.tw a:hover{box-shadow:7px -7px 0 rgba(26,178,232,0.3);}

@media all and (max-width:1220px) {
	#sns li{padding:0 20px 0 0;}
}
@media all and (max-width:1024px) {
	#sns{padding:35px 0 60px; text-align:center;}
	#sns h3{float:none; padding:0 0 0 35px;}
	#sns h3:before{position:absolute; top:50%; left:50%; height:45px; margin:-20px 0 0 -65px; transform:skew(0deg);}
	#sns ul{float:none; width:100%; padding:30px 0 0 20px; box-sizing:border-box;}
	#sns li{float:none; display:inline-block; vertical-align:top;}
	#sns li:last-child{padding:0;}
}
@media all and (max-width:768px) {
	#sns ul{padding-left:0;}
	#sns li {width:29%; padding:0 3% 0 0;}
	#sns li a{width:100%;}
}
@media all and (max-width:568px) {
	#sns{padding:27px 0 53px;}
	#sns h3{padding:0 0 0 25px; font-size:23px;}
	#sns h3:before{height:37px; margin:-18px 0 0 -55px;}
	#sns ul{padding:26px 0 0 0;}
	#sns li a{height:53px; line-height:55px; font-size:14px;}
	#sns li a:before{height:20px; width:27px; margin:17px 0 0 0; background-size:cover;}
	#sns li.bl a:before{width:52px;}
	#sns li.fb a:before{background-position:-146px 0;}
	#sns li.tw a:before{background-position:-300px 0;}
}
@media all and (max-width:400px) {
	#sns{padding:25px 0 48px;}
	#sns h3{padding:0 0 0 20px; font-size:21px;}
	#sns h3:before{height:36px;}
	#sns ul{padding:20px 0 0 0;}
	#sns li a{height:48px; line-height:50px; font-size:13px;}
	#sns li a:before{height:18px; width:20px; margin:17px 0 0 0;}
	#sns li.bl a:before{width:45px;}
	#sns li.fb a:before{background-position:-137px 0;}
	#sns li.tw a:before{background-position:-274px 0;}
}