@charset "UTF-8";
body{min-width: 1100px}

#header{background-color:#fff;}
#top_contens{display: flex; justify-content:space-between; align-items: center; height: 90px}
#top_contens h1 a{display: block}
#top_contens h1 img{height:70px}
#top_contens div{display: flex; flex-direction: column; align-items: flex-end}
#top_contens div p{text-align: right; font-size: 12px; line-height: 1.5}
#top_contens div .login_btn{position: relative; border:3px solid #e4007f; border-radius: 5px; line-height: 1; padding: 5px 30px; color: #000; margin-bottom:5px; cursor: pointer}
#top_contens div .login_btn font{position: relative; padding-left:20px; background: url("../img/icon/in.png") no-repeat left center; background-size: auto 100%; font-weight: bold; font-size: 14px; z-index: 2;user-select: none}
#top_contens div .login_btn:after{position: absolute; background-color:#f7f24d; width: 0; height: 0; left: 50%; top: 50%; border-radius: 100px; content: ""; z-index: 0;transition: all .2s ease-in-out; opacity: 0}
#top_contens div .login_btn:hover:after{border-radius: 0; left: 0; top: 0; width: 100%; height: 100%; opacity: 1}

.imt{display: flex; align-items: center; line-height: 1; font-size: 12px;justify-content: flex-end; margin-top:2%}
.imt span{display: flex; align-items: center; margin-right:5px;}
.imt span b{display: block; margin: 0 5px}
.imt img{height: 12px; line-height: 0}

.leader{padding-bottom: 50px}
.leader h2{ display: flex; align-items: center; position: relative; height: 60px; font-size: 28px; color: #fff; margin: 50px 0 40px 0; border-radius: 10px; padding-left:20px}
.leader h2 span{display: block; margin-left: 10px; font-size: 24px}
.leader h2 img{position: absolute; right:3%; top:-47%; width: 9%}
.leader p{text-align: right; font-size: 12px; margin-top: 10px}
#s4.leader h2 img {width: 11%}
.nav_item,.nav_items{display: flex; overflow: hidden;}

.slick-list.draggable{padding: 10px 0;padding-left:10px}
#s2 .slick-list.draggable{padding-left:0}


.s_item{width: 156px}
.slick-arrow{width: 30px; right: -30px}
.slick-arrow.slick-prev{left: -30px}

.s_item.active a{position: relative; border:3px solid #21446e !important; background-color: #21446e !important; cursor: default; pointer-events: none}
.s_item.active a img{filter:contrast(0) brightness(2); opacity: 1}
.s_item.active a:before{position: absolute; left: 8%; top: 52%; width:84%; height:2px; background-color: #bbb; content: ""; z-index: 3}
.s_item .login{font-size:16px}
.container{position: relative;border-top-left-radius:10px; border-top-right-radius: 10px; padding-bottom: 50px}
.container:before{border-top-left-radius:10px; border-top-right-radius: 10px}

.container h3{display: flex; justify-content: center; flex-direction: column; align-items: center; font-size:40px;padding:4% 0 5% 0; background:url("../img/sub/h3_line.png") no-repeat center bottom; background-size:90% auto;}
.container h3 span{position: relative;display: block; line-height: 1; padding-left:6.5%; background-size: auto 85% !important; z-index: 2}
.container h3 font{font-size:26px}

.container h3.m span{background: url("../img/icon/mv_icon.png") no-repeat left center;}
.container h3.b span{background: url("../img/icon/book_icon.png") no-repeat left center; padding-left:7.5% }
.container h3.f span:before{position: absolute; left: 0; top:-10%; bottom: 0; height: 110%; width:8%; background: url("../img/icon/fc_icon.png") no-repeat left center;background-size: auto 100%; content: ""}
.container h3.a span:before{position: absolute; left: 0; top:-30%; bottom: 0; height: 130%; width:20%; background: url("../img/icon/ano_icon.png") no-repeat left center;background-size: auto 100%; content: ""}

.s_leader{font-size: 20px; text-align: center; margin:3% 0; line-height: 1.5}
.s_leader span{display: block; font-size: 16px}
#movie,#movie .toggle_contents{display: flex; flex-wrap: wrap}
#movie .pin_box{position: relative; display: block; width:calc((100% - 20px)/2); margin-bottom: 20px; background-color: #fff; border-radius: 15px}
#movie .pin_box:nth-child(even){margin-left: 20px}
#movie .pin_box_contents{padding:30px}
#movie .pin_box:before,#movie .pin_box:after,#movie .pin_box_contents:before,#movie .pin_box_contents:after{position: absolute;content: ""; width: 22px; height: 22px; background: url("../img/icon/pin.png") no-repeat center center; background-size:100% auto}
#movie .pin_box:before{left: 6px; top: 6px}
#movie .pin_box:after{left: 6px; bottom:6px}
#movie .pin_box_contents:before{right: 6px; top: 6px}
#movie .pin_box_contents:after{right: 6px; bottom:6px}
#movie.toggle_list .pin_box{width: 100%; margin: 0; margin-bottom: 50px}


#movie .item{display: block}
#movie .item h4{padding:3% 0 4% 0; background: url("../img/sub/item_line.png") no-repeat center bottom; background-size:100% auto; margin-bottom: 3%}
#movie .item h4 span{display: block; font-size: 28px; line-height: 1.2; padding-left:9%; background: url("../img/icon/mv_icon.png") no-repeat left 3px; background-size:8% auto; color: #21446e}
#movie .item p{font-size: 20px; line-height: 1.5}
#movie .item p span{display: block; text-align: right; font-size: 16px}
#movie .item:hover img{opacity: 1; transform: scale(1.02)}
#movie .toggle_contents .item {width:calc((100% - 30px)/2); margin-top: 30px;}
#movie .toggle_contents .item:nth-child(even){margin-left: 30px}
#movie .toggle_contents .item h4{background: none; padding-bottom: 0; margin-bottom: 0}
#movie .toggle_contents .item p{text-align: right; font-size: 16px}
#movie .toggle_title{background: url("../img/icon/mv_icon.png") no-repeat left center; background-size: auto 90%}

#movie .item .poster{position: relative; display: block; border: 2px solid #ccc; overflow:hidden}
#movie .item .poster img{transition: all .2s ease-in-out;}
#movie .item .poster:before{position: absolute; left: 0; top: 0; width:calc(100% - 6px); height:calc(100% - 6px); border:3px solid #fff; content: ""; z-index: 2}



.toggle_title{position: relative; display: flex; justify-content: space-between; align-items: center; font-size: 32px; line-height: 1; font-weight: bold; padding-left:6%; color: #21446e; cursor: pointer; user-select: none}
.toggle_title font{position: absolute;right: 20px; display: flex; align-items: center; font-size: 20px; padding-right:3%; background: url("../img/icon/down_arrow_pink.png") no-repeat right center; background-size:27% auto;transition: all .2s ease-in-out; user-select: none; color: #000; height: 70px}

.toggle_item.active .toggle_title font{background: url("../img/icon/up_arrow_pink.png") no-repeat right center; background-size: 27% auto}
.toggle_contents{height: 0; overflow: hidden; background: url("../img/sub/h4_line.png") no-repeat center top; background-size: 100% auto; transition: all .2s ease-in-out; opacity: 0}
.toggle_item.active .toggle_contents{height: auto; opacity: 1;padding-top:3%; margin-top:2%;}


.clip_box{position: relative; border-radius: 15px; padding: 20px;background-color: #fff; background-size:5% auto; margin-bottom: 50px}
.clip_box:before{position: absolute; left:15px; top: -32px; width:70px; height:93px;background: url("../img/icon/clip.png") no-repeat left top; content: ""; background-size: 100% auto}
#book .toggle_title{background: url("../img/icon/book_icon.png") no-repeat 5.5% center; background-size: auto 100%; padding-left: 12%}
.clip_box .item_wrap{display: flex; flex-wrap: wrap}
	#book.b .item_wrap{padding:3% 3% 5% 3%}
.clip_box .item{display: flex; align-items: center; line-height: 1.2;  width:calc((100% - 20px)/2); height:60px; margin-top: 20px;  border-radius: 15px; color: #fff; padding-left: 5%; background: url("../img/icon/p_pin.png") no-repeat 3% center #efa625; background-size:5% auto; font-size: 20px; font-weight: bold;}
.clip_box .item:nth-child(even){margin-left:20px}
.clip_box .item.b {font-size: 24px;width: auto;padding-right: 100px;height: 80px;padding-left: 70px;}

.clip_box.x .item_wrap{justify-content: center}
.clip_box p{text-align: center; font-size: 20px; margin: 20px 0}

.item_text p{padding: 0 10%; margin-top: 5%; margin-bottom: 0; text-align: left}
.item_text span{display: block; text-align: center; color:red; font-size:24px; margin-bottom: 5%}
.item_text span b{display: block; text-align: center; color: #000; margin-top: 3%}

#s1 h2{background-color:#453e77}
#s1 .slider{padding:0}

#c1{background: linear-gradient(to bottom,#dcd8fc 0%,#dcd8fc 100%);}
#c1:before{position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: url("../img/icon/line_bg.png") repeat left top; content: ""; background-size:10px auto; opacity: 0.3;}

#s2 h2{background-color:#4cad83}
#s2 .slider{padding:0}

#c2{background: linear-gradient(to bottom,#B1EBCD 0%,#B1EBCD 100%);}

#c2:before{position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: url("../img/icon/dot_bg.png") repeat left top; content: ""; background-size:10px auto; opacity: 1.0;}

#s3 h2{background-color:#57c4f1}
#s3 .slider{padding:0}

#c3{background: linear-gradient(to bottom,#A7DFF8 0%,#A7DFF8 100%);}
#c3:before{position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: url("../img/icon/dot_bg.png") repeat left top; content: ""; background-size:10px auto; opacity: 0.8;}

#s4 h2{background-color:#ef8201}
#s4 .slider{padding:0}

#c4{background: linear-gradient(to bottom,#FFDEB7 0%,#FFDEB7 100%);}
#c4:before{position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: url("../img/icon/yline_bg.png") repeat left top; content: ""; background-size:auto 10px; opacity: 0.3;}

#s5 h2{background-color:#005190}
#s5 .slider{padding:0}

#c5{background: linear-gradient(to bottom,#BCCFFC 0%,#BCCFFC 100%);}
#c5:before{position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: url("../img/icon/dot_bg.png") repeat left top; content: ""; background-size:10px auto; opacity: 0.8;}

#s6 h2{background-color:#acd300}
#s6 .slider{padding:0}

#c6{background: linear-gradient(to bottom,#EFFFA6 0%,#EFFFA6 100%);}
#c6:before{position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: url("../img/icon/yline_bg.png") repeat left top; content: ""; background-size:auto 10px; opacity: 0.3;}

#s7 h2{background-color:#e75197}
#s7 .slider{padding:0}

#c7{background: linear-gradient(to bottom,#F8C7DE 0%,#F8C7DE 100%);}
#c7:before{position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: url("../img/icon/dot_bg.png") repeat left top; content: ""; background-size:10px auto; opacity: 0.5;}

@media screen and (max-width:640px){
	#top_contens div .login_btn{position:fixed; right: 60px; top: 10px; z-index: 10000;border: 1px solid #e4007f; padding: 0}
	#top_contens div .login_btn font{display: flex; align-items: flex-end; height: 38px; padding:3px; font-size: 10px; background: url("../img/icon/in.png") no-repeat center 3px;background-size:17px auto}

	.s_item .login{font-size: 2.5vw}
		#notice_contents{margin-top:4%}

	#top_contens,#top_contens div{display: block; height: auto}
	#top_contens h1{display: none}
	#top_contens div p{text-align: left; font-size:2.25vw; padding: 10px; border: 1px solid #e7e7e7; margin-top: 20px; line-height: 1.8}
	.leader{padding-bottom: 20px}
	.leader h2{font-size: 4vw; height: auto; line-height: 1; padding: 3% 10% 3% 3%; display: flex; align-items: center; margin:8% 0 5% 0; border-radius:8px}
	.leader h2 span{font-size:2vw}
	.leader h2 img {width: 15%}
	#s4.leader h2 img{width: 19%}
	.slider{min-height:auto}
	.nav_item{justify-content: center; align-items: center}
	.slick-list.draggable{width:calc(100% - 60px); padding-left: 0}
	.slick-arrow{right: 0; width:30px; height: calc(100% - 18px)}
	.slick-arrow.slick-prev{left: 0}
	.nav_items{padding: 10px 0}
	.nav_items .s_item{width: calc((100% - 102px)/3)}
	.container h3{font-size:4.3vw}
	.container h3 span{padding-left: 8.5%}
	.s_leader{font-size:3vw;margin: 5% 0; text-align: left}
	.s_leader span{font-size:2.5vw; margin-top: 10px}
	.s_leader br{display: none}
/*	#movie .pin_box,.clip_box .item{width: 100%}
	#movie .pin_box:nth-child(2n),.clip_box .item:nth-child(2n){margin-left:0;}
*/	
	#movie .item h4 span{font-size: 3.2vw; background-size: 9% auto; background-position: left 1px; padding-left: 12%;}
	#movie .item p{font-size:2.8vw}
	#movie .item p span{font-size: 2.5vw}
	.container h3.b span{padding-left:9.5%}
	.container h3 font{font-size: 3vw}

	.clip_box{padding:3%; margin-bottom:30px}
	.clip_box::before{background-size:35px auto; top:-15px}
	.clip_box .item{width: 100%;  font-size: 3vw; line-height: 1; height: auto; padding:3% 3% 3% 10%;background-size: 4% auto; border-radius:10px}
	.clip_box .item:nth-child(even){margin-left: 0}
	.clip_box p{margin:3% 0 0 0; font-size:2.8vw}
	.toggle_title{font-size:3.5vw}
	.toggle_title font{height: 100%; font-size:2.2vw; padding-right:5%; right: 2%}
	#book .toggle_title{padding-left:17%; background-position:9% center}
	#movie .toggle_contents .item p{font-size:2.5vw}
	#movie .pin_box:before,#movie .pin_box:after,#movie .pin_box_contents:before,#movie .pin_box_contents:after{width: 14px; height:14px; background-size:100% auto}
	#movie.toggle_list .pin_box{margin-bottom: 30px}
	#movie .pin_box_contents{padding: 20px}
	#movie .toggle_contents .item {width:calc((100% - 20px)/2); margin-top:20px;}
	#movie .toggle_contents .item:nth-child(even){margin-left: 20px}
	
	.item_text span{font-size:3vw}
	
	
}