@charset "utf-8";

#detail_con {padding:30px 0 0;}
#mainMovie {overflow:hidden;}
#mainMovie .con {float:left; width:76%;}
#mainMovie .con video {width:100%; min-height:594px; background:#808080;}
#mainMovie .con .play .tit {position:relative; padding:23px 0 20px; border-bottom:2px solid #000;}
#mainMovie .con .play .tit>p {margin-left:20px; font-size:30px; width:743px;}
#mainMovie .con .play .tit>dl {overflow:hidden; margin-top:10px; margin-left:20px;}
#mainMovie .con .play .tit>dl dt, #mainMovie .con .play .tit>dl dd {float:left; margin-right:5px; color:#666;} 
#mainMovie .con .play .tit>dl dt.up {width:19px; height:18px; margin-left:10px; background:url('/tv/img/main/ic_up.gif') no-repeat;}
#mainMovie .con .play .tit>ul {position:absolute; right:0; top:25px; overflow:hidden;}
#mainMovie .con .play .tit>ul>li {float:left; width:36px; margin-left:5px;}
#mainMovie .con .play .subtitle {margin:20px 0; padding:15px 20px; background:#f3f3f3;}
#mainMovie .con .play .subtitle>p {margin-bottom:20px; font-weight:bold; color:#313131;}
#mainMovie .con .play textarea {width:100%; color:#616161; border:0; background:none;}
#mainMovie .con .play .tit>.copyright>p {margin-left:20px; font-size:14px; color:#666;}
#mainMovie .con .play .tit>.copyright>img {position:absolute; right:0; bottom:0; height:55px; border-right:2px solid #000;}
#mainMovie .con .play .embed-container iframe {height:101%;}

#mainMovie .list, #mainMovie .nodata {float:right; width:22%;}
#mainMovie .list h4 {font-size:22px;}
#mainMovie .list>div {margin-top:12px; overflow:hidden;}
#mainMovie .list>div:first-child {margin-top:0;}
#mainMovie .list>div>a {display:block; position:relative; padding-left:55%; line-height:1.2em;}
#mainMovie .list>div>a img {position:absolute; left:0; width:50%; min-height:90px;}
#mainMovie .list>div>a p.tit {margin-top:3px; font-weight:bold; font-size:14px; line-height:18px; color:#666;}
#mainMovie .list>div>a span {display:block; margin:10px 0; font-size:12px; letter-spacing:0; color:#999;}

#remaining {position:relative; margin-top:40px; padding:100px 0 140px; background:#f1f1f1;}
#remaining>ul {overflow:hidden;}
#remaining>ul>li {float:left; text-align:right; width:19%; margin:20px .5%; max-height:202px;}
#remaining>ul>li.nodata {float:none; text-align:center; width:100%; margin:20px 0;}
#remaining>ul>li .tit {margin-top:10px; margin-bottom:5px; font-size:14px; color:#666; font-weight:bold; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#remaining>ul>li span {font-size:13px; color:#999;}
#remaining>ul>li span:last-child {position:relative; margin-left:10px; padding-left:10px;}
#remaining>ul>li span:last-child:before {display:block; content:""; position:absolute; left:0; top:5px; width:1px; height:9px; background:#cdcdcd;}
#remaining>a {position:absolute; top:43%; width:46px; height:46px; border-radius:50%; background-color:#333; background-image:url('/headman/img/main/commitment_point.png'); background-repeat:no-repeat; background-position:17px center; z-index:100;}
#remaining>a:hover {background-color:#1545b7;}
#remaining>a.prev {left:9%;}
#remaining>a.next {right:9%; transform:rotate(180deg);}
#remaining .page {position:absolute; text-align:center; bottom:80px; width:100%;}
#remaining .page a {width:19px; height:19px; margin-left:5px; border-radius:50%; border:4px solid #333;}
#remaining .page a.on {border-color:#1545b7; background:#1545b7;}

#sitemap {max-width:1400px; margin:0 auto; padding:30px 10px 60px;}
#sitemap>div>p {background:#ff007d;}

/*pc*/
@media screen and (min-width:801px){
	#remaining>ul {height:526px;}
}

/*pc_min*/
@media all and (max-width:1300px){
	#remaining>a.prev {left:0;}
	#remaining>a.next {right:0;}
	#remaining>ul {width:92%;}
}

/*tablet*/
@media screen and (max-width:800px){
	#mainMovie .con, #mainMovie .list {float:none; width:100%;}
	#mainMovie .list {overflow:hidden; margin-top:20px;}
	#mainMovie .nodata {display:none;}
	#mainMovie .list>div {float:left; width:24%; margin:2% .5% !important;}
	#mainMovie .list>div:last-child {display:none;}
	#mainMovie .list>div>a {padding-left:0;}
	#mainMovie .list>div>a img {position:static; width:100%;}
	#mainMovie .con .play, #mainMovie .con .subtitle {float:none; width:100%;}
	#mainMovie .con .play video {height:auto;}
	#mainMovie .con .subtitle textarea {height:100px;}

	#remaining>ul>li {width:24%;}
}


/*mobile*/
@media screen and (max-width:640px){
	#mainMovie .con .play .tit {padding-bottom:40px;}
	#mainMovie .con .play .tit>.copyright>p {display:none;}
	#mainMovie .con .play .tit>ul {position:static; margin-left:18px; margin-top:5px;}
	#mainMovie .list>div {width:49%;}
	#remaining>ul>li {width:49%;}
}