@charset "utf-8";

.more {position: absolute; top: 10px; right: 0; display: block; text-indent: -9999px; }
.more .bar{display:block; width:28px; height:3px; border-radius: 1.5px; margin:4px 0; background:#3d3d3d; transition:0.25s ease-in-out;}
.more .bar2{width:21px;}
.more span:not(.bar){display:block; line-height:100%; padding:4px 0 0 0;}
.more:hover .bar2{width:28px;}

@media all and (max-width:568px){
    .more .bar {width: 24px; height: 2px;}
    .more .bar2 {width: 19px;}
    .more:hover .bar2{width:24px;}
}


#sch{height: 426px;background:url(/images/promote/main/bg_visual.jpg) no-repeat 50% 0;background-size:cover;}
#sch .slogan{position: relative;padding: 75px 0 35px 55px;color: #fff;}
#sch .slogan:after {content: '';display: block;position: absolute;width: 431px;height: 204px;bottom: -9px;right: 153px;background: url(/images/promote/main/pic_search.png)no-repeat;z-index: 2;background-size: contain;}
#sch .slogan img {display: block;}
#sch .slogan img:nth-child(2) {margin: 7px 0 25px;}
#sch .slogan p {padding: 0 0 0 5px;}
#sch .slogan p br {display: none;}

#sch .sch_box{position: relative;display: flex;align-items: center;padding: 0 37px 0 49px;height: 115px;border-radius:20px;background:url(/images/promote/main/bg_search.jpg)no-repeat;background-size: cover;box-sizing: border-box;box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);}   
#sch .sch_box h4 {display: inline-block;vertical-align: middle;padding: 0 40px 0 15px;font-size: 32px;font-weight: 500;color: #fff;}
#sch .sch_box .con {display: inline-block;vertical-align: middle;width: calc(100% - 211px);}
#sch fieldset{position:relative;overflow:hidden;display:block;width: 100%;padding: 3px 3px 3px 503px;border-radius:10px;box-sizing:border-box;}
#sch select,
#sch input[type="text"]{vertical-align:top; height:54px; line-height:54px; padding:0 45px 0 28px; border:none; font-size:17px; font-weight: 400; box-sizing:border-box; transition:0.3s ease;}
#sch select{width:252px; -webkit-appearance:none; -moz-appearance:none; -moz-appearance:none;}
#sch select::-ms-expand{display:none;}
#sch .sel1 select{border-radius:10px 0 0 10px;}
#sch .sel{position:absolute;top: 3px;left:3px;}
#sch .sel2{left:252px;}
#sch .sel3{left:400px;}
#sch .sel:before,
#sch .sel:after{z-index:1; content:''; display:block; position:absolute; top:50%; right:0; width:1px; height:24px; background:#a6b7c7; transform:translateY(-50%);}
#sch .sel:before{right:28px; width:8px; height:8px; margin:-2px 0 0 0; border-bottom:2px solid #333; border-right:2px solid #333; background:none; transform:translateY(-50%) rotate(45deg);}
#sch input[type="text"]{width:100%;padding-right:100px;border-radius:0 10px 10px 0;}
#sch button{position:absolute; right:26px; top:16px; width: 27px; height: 27px; background: url(/images/promote/main/ico_search.png)no-repeat; background-size: cover; text-indent: -9999px; z-index: 10;}

@media all and (max-width:1280px){
    #sch .slogan:after {width: 300px;bottom: -69px;right: 20px;} 
    #sch select {width: 200px;}
    #sch .sel2 {left: 200px;}
    #sch fieldset {padding-left: 400px;}
}

@media all and (max-width:1024px){
	#sch{height:351px;}
	#sch .slogan{padding:45px 0 20px;}
	#sch .slogan img{height:41px;}
    #sch .slogan:after {width: 220px;bottom: -105px;}
	#sch .bar{top:65px; width:44px; height:8px; margin:0 0 0 -22px;}
	#sch .sch_box{height: 100px;padding: 25px 30px;}
    #sch .sch_box h4 {font-size: 24px;padding: 0 30px 0 0;}
    #sch .sch_box .con {width: calc(100% - 160px);}
	#sch fieldset{padding: 0 0 0 300px;}
	#sch select{width:150px;}
	#sch select,
	#sch input[type="text"]{height:50px; line-height:50px; padding:0 30px 0 15px; font-size:16px;}
	#sch button{top: 10px;right: 20px;}
	#sch input[type="text"]{padding-right:90px;}
	#sch .sel {top:0;}
	#sch .sel2{left:150px;}
	#sch .sel3{left:300px;}
	#sch .sel:before{right:15px;}
}
@media all and (max-width:768px){
	#sch{height:290px;}
	#sch li h4 a{font-size:22px;}
	#sch .slogan{padding:40px 0;}
	#sch .slogan img{height:32px;}
    #sch .slogan img:nth-child(2) {margin: 3px 0 10px;}
    #sch .slogan p {font-size: 15px;}
    #sch .slogan:after {width: 160px; bottom: -132px;}
    
	#sch .sch_box{height: 75px;padding: 15px 25px;}
    #sch .sch_box h4 {font-size: 20px;}
    #sch .sch_box .con {width: calc(100% - 125px);}
	#sch fieldset{padding-left:214px;}
	#sch select{width:95px;}
	#sch .sel2 select{width:120px;}
    #sch select, #sch input[type="text"] {height: 45px; line-height: 45px; font-size: 15px;}
	#sch .sel2{left:95px;}
	#sch button{top: 12px; width: 20px; height: 20px;}
}
@media all and (max-width:568px){
	#sch{height:370px;}
	#sch .slogan{padding:23px 0 17px;}
	#sch .slogan img{display:block; height:28px; margin:0 auto 2px;}
    #sch .slogan img:nth-child(2) {margin: 0 auto 8px;}
    #sch .slogan p {padding: 0; text-align: center; font-size: 14px;}
    #sch .slogan p br{display: block;}
    #sch .slogan:after {display: none;}
    
	#sch .bar{top:60px; width:40px; height:7px; margin:0 0 0 -20px;}
	#sch .sch_box{height: 215px;display: block;}
    #sch .sch_box h4 {display: block;padding: 0;text-align: center;margin: 0 0 10px;}
    #sch .sch_box .con {width: 100%;}
	#sch .sel{position:relative; left:0; top:0; margin:0 0 1px;}
	#sch .sel:after{display:none;}
	#sch fieldset{width:100%; padding:3px;}
	#sch select,
	#sch input[type="text"]{height:45px; line-height:45px; border-radius:0;}
	#sch select,
	#sch input[type="text"],
	#sch .sel2 select{width:100%;}
	#sch .sel1 select{border-radius:10px 10px 0 0;}
    #sch input[type="text"] {border-radius: 0 0 10px 10px}
    
    #sch button {top: auto; bottom: 17px;}
}
@media all and (max-width:380px){
    #sch .slogan p {font-size: 13px;}
}

.sec {clear: both; margin: 60px 0 0;}

#cast{float:left;width: calc(100% - 470px);box-sizing: border-box;}
#cast > ul{position:relative; padding:0 50px 0 0; border-bottom: 1px solid #c6c6c6;}
#cast > ul:after{content:''; display:block; clear:both;}
#cast > ul > li{float:left; box-sizing:border-box;}
#cast > ul > li:first-child{margin: 0 40px 0 0;}
#cast > ul > li + li{border-left:none;}

#cast li h4 a{position:relative; display:block; padding: 0 0 10px; width:100%; font-size:25px; font-weight:400; color:#a5a5a5; text-decoration:none; text-align:center;}
#cast li.on h4 a{font-weight:600; color:#333;}
#cast li h4 a:before{opacity:0; visibility:hidden; content:''; position:absolute; bottom: -1px; left: 0; width:100%; height: 3px; background: #3a9fa3; z-index: 2;}
#cast li.on h4 a:before{opacity:1; visibility:visible;}
#cast li h4 a span{position:relative;}

#cast .con{opacity:0; visibility:hidden; position:absolute; top:100px; left:0; width:100%; box-sizing:border-box; font-size: 0;}
#cast .on .con{opacity:1; visibility:visible; top:80px; transition:0.35s ease-in-out;}
#cast .con li {display: inline-block;vertical-align: top;width: 31.18%;}
#cast .con li:not(:last-child){margin: 0 3.2% 0 0;}
#cast .con li a{position:relative;display:block;box-sizing:border-box;text-decoration:none;width: 100%;}
#cast .con li a:hover .tit,
#cast .con li a:focus .tit,
#cast .con li a:active .tit{text-decoration:underline;}
#cast .con li a .tit {display: block; margin: 10px 0 0; width: 100%; font-size: 18px; font-weight: 600; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-align: center;}
#cast .con li a img {border-radius: 20px;width: 100%;height: 205px;}
#cast .con li .date {position: absolute; width: 96px; height: 30px; line-height: 30px; bottom: 35px; left: 50%; transform: translateX(-50%); font-size: 14px; font-weight: 500; color: #fff; background: #3a9fa3; border-radius: 10px 10px 0 0; text-align: center;}
#cast .con li.no_list {width: 100%; text-align: center; font-size: 16px;}

#cast .more {display: none;}
#cast .on .more {display: block;}

@media all and (max-width:1024px){
    .sec {margin:45px 0 0;}
    #cast {float: none; width: 100%; height: 370px;}
    #cast li h4 a {font-size: 22px;}
}
@media all and (max-width:768px){
    #cast {height: 300px;}
    #cast .on .con {top: 60px;}
    #cast .con li a img {height: 170px;}
    #cast .con li a .tit {font-size: 16px;}
    #cast .con li .date {bottom: 33px;}
}
@media all and (max-width:568px){
    .sec {margin: 30px 0 0;}
    #cast li h4 a {font-size: 20px;}
    #cast > ul > li:first-child {margin: 0 25px 0 0;}
    #cast .con li {width: 48.2%;}
    #cast .con li:nth-child(2) {margin: 0;}
    #cast .con li:nth-child(3) {display: none;}
    #cast .con li a .tit {font-size: 15px;}
    #cast .con li .date {bottom: 28px;}
    #cast .more {top: 4px;}
}
@media all and (max-width:380px){
    #cast {height: 260px;}
    #cast li h4 a {font-size: 19px;}
    #cast .con li a img {height: 140px;}
}

#vod {position: relative;float: right; padding: 30px 44px 40px; width: 420px; height: 334px; background: #3a9fa3; border-radius: 20px; color: #fff; box-sizing: border-box;}
#vod h4 {margin: 0 0 19px; font-size: 25px; line-height: 1;}
#vod .movie {position: relative; display: inline-block; text-align: center; font-size: 22px; font-weight: 600; color: #fff; text-decoration: none;}
#vod .movie:after {content: ''; display: block; position: absolute; top: 59px; left: 50%; transform: translateX(-50%); width: 68px; height: 68px; background: url(/images/promote/main/ico_play.png)no-repeat; background-size: cover;}
#vod .movie img {border-radius: 10px;width: 100%;height: 219px;}
#vod .movie p {position: absolute; bottom: 53px; left: 50%; transform: translateX(-50%);}

#vod .more {top: 31px; right: 44px;}
#vod .more .bar {background: #fff;}

@media all and (max-width:1024px){
    #vod {float: none;width: 100%;height: 314px;}
    #vod .movie {width: 100%;overflow: hidden;height: 200px;}
    #vod .movie:after {width: 60px; height: 60px;}
	#vod .movie img {height:100%;}
    #vod .movie p {font-size: 20px; bottom: 40px;}
}
@media all and (max-width:568px){
    #vod {height: 300px;padding: 30px;}
    #vod h4 {font-size: 22px;}
    #vod .more {top: 29px; right: 32px;}
}
@media all and (max-width:380px){
    #vod h4 {font-size: 20px;}
}


#board {margin: 50px 0 0; padding: 35px 0 0; height: 444px; background: #f3f6f6; box-sizing: border-box;}
#board .tit_wrap {border-bottom: 1px solid #c6c6c6;}
#board h4 {position: relative; float: left; font-size: 25px; line-height: 44px;}
#board h4:after {content: ''; display: block; position: absolute; bottom: -8px; left: 0; width: 100%; height: 3px; background: #3a9fa3;}

#board .more2 {float: right; display: inline-block; margin: 0 0 10px; width: 172px; height: 41px; line-height: 39px; font-size: 15px; text-align: center; border: 1px solid #dde5ed; border-radius: 20.5px; background: #fff; box-sizing: border-box; text-decoration: none; transition: all 0.2s;}
#board .more2:hover {border-color: #3a9fa3;}


#board .list_wrap {margin: 40px 0 0; font-size: 0;}
#board .list_wrap li {display: inline-block; width: 31.42%; margin: 0 2.85% 30px 0;}
#board .list_wrap li:nth-child(3n) {margin: 0 0 30px;}
#board .list_wrap li a {position: relative; display: block; padding: 25px 30px 25px 115px; width: 100%; height: 105px; border: 1px solid #bfd9d3; box-sizing: border-box; background: #fff; border-radius: 10px; text-decoration: none; transition: all 0.2s;}
#board .list_wrap li a:hover {border-color: #3a9fa3; box-shadow: 0 0 20px rgba(0,0,0,0.1);}
#board .list_wrap .date {position: absolute; top: 50%; left: 30px; transform: translateY(-50%); font-size: 30px; font-weight: 600; color: #636363; text-align: center; line-height: 1;}
#board .list_wrap .date span{display: block; margin: 8px 0 0; font-size: 14px; font-weight: 400;}
#board .list_wrap li a:hover .date {color: #006165;}
#board .list_wrap li a:hover .date span{color: #666;}
#board .list_wrap .tit {font-size: 16px;display: inline-block;vertical-align: middle;max-width: 90%;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
#board .list_wrap .txt {display: block; margin: 7px 0 0; font-size: 15px; color: #8a8989;}
#board .list_wrap li a:hover .tit, #board .list_wrap li a:hover .txt {font-weight: 500;}

#board .new{display:inline-block;vertical-align:middle;margin: 0 0 0 5px; width: 17px;height: 17px;line-height: 17px;font-size:12px;font-weight:100;text-align:center;color:#fff;border-radius:50%;background: #ee5656;text-transform:uppercase;}
@media all and (max-width:1440px){
    #board .list_wrap li a {padding: 25px 20px 0 80px;}
    #board .list_wrap .date {left: 15px;}
}
@media all and (max-width:1024px){
    #board {height: auto; padding: 35px 0 10px;}
    #board .list_wrap {margin: 30px 0 0;}
    #board .list_wrap li {width: 49%; margin: 0 2% 20px 0;}
    #board .list_wrap li:nth-child(2n) {margin-right: 0;}
    #board .list_wrap li:nth-child(3) {margin-right: 2%;}
    #board .list_wrap li:nth-child(n + 5) {display: none;}
}

@media all and (max-width:768px){
    #board {margin: 35px 0 0;}
    #board h4 {font-size: 22px;}
    #board .list_wrap .date {font-size: 25px;}
    #board .list_wrap .tit {max-width: 80%;}
}

@media all and (max-width:568px){
    #board {padding: 30px 0 10px;}
    #board h4 {font-size: 20px;}
    #board h4:after {bottom: -3px;}
    #board .list_wrap li {width: 100%; margin: 0 0 15px;}
    #board .list_wrap li:nth-child(4) {display: none;}
    #board .list_wrap li a {padding: 18px 20px 0 100px; height: 80px;}
    #board .list_wrap .tit {max-width: 90%; font-size: 15px;}
    #board .list_wrap .date {left: 25px; font-size: 22px;}
    #board .list_wrap .date span {margin: 4px 0 0;}
    #board .list_wrap .txt {margin: 5px 0 0;}
    
    #board .more2 {margin: 5px 0 0; width: 135px; height: 35px; line-height: 35px; font-size: 14px;}
}

@media all and (max-width:380px){
    #board h4 {font-size: 19px;}
    #board .more2 {width: 120px; font-size: 13px;}
    #board .list_wrap li a {padding-left: 70px;}
    #board .list_wrap .tit {max-width: 85%;}
    #board .list_wrap .date {left: 15px;font-size: 20px;}
    #board .list_wrap li a .date span {font-size: 13px;}
}