@charset "utf-8";
#contents h3{position:relative; text-align:center; margin-bottom:40px; font-size:2.5em; font-weight:300; z-index:99;}
#contents h3 span{font-weight:600;}

.control{position:absolute; bottom:0; left:50%; text-align:center; margin-left:-67.5px; width:135px; max-width:1540px; height:30px; font-size:1.1em; line-height:30px;}
.control a{position:absolute; display:inline-block; width:30px; height:30px; border-radius:100%; background-color:#ccc; background-repeat:no-repeat; background-size:auto 15px; text-indent:-5000px; transition:.3s; z-index:99;}
.control a:hover{background-color:#7731be; transition:.3s;}
.control a.prev{top:0; left:0; background-image:url('/open_content/support/img/main/control_left.png'); background-position:45% center;}
.control a.next{top:0; right:0; background-image:url('/open_content/support/img/main/control_right.png'); background-position:55% center;}
#publicity{position:relative; text-align:center; padding-top:50px; background-color:#f5f5f5;}
#publicity:after,
#publicity:before{content:''; position:absolute; width:509px; height:100%; z-index:1;}
#publicity:after{top:0; left:0; background:url('/open_content/support/img/main/publicity_Lbg.gif') 0 0 no-repeat;}
#publicity:before{bottom:0; right:0; background:url('/open_content/support/img/main/publicity_Rbg.gif') right bottom no-repeat;}
#publicity .con{display:none; position:absolute; left:0; right:0; max-width:1540px; width:100%; margin:auto; white-space:nowrap; z-index:9;}
#publicity .control{position:absolute; top:30%; bottom:auto; left:auto; width:100%; margin-left:0; line-height:40px; margin:auto;}
#publicity .control a{top:auto; width:40px; height:40px; background-size:auto;}
#publicity .control a.prev{left:0;}
#publicity .control a.next{right:0;}
#publicity h4{position:relative; display:inline-block; margin-left:20px; padding-left:20px; font-size:1.2em; font-weight:400; z-index:9;}
#publicity h4:nth-of-type(1){margin-left:0; padding-left:0;}
#publicity h4.select a{color:#7731be; font-weight:500;}
#publicity h4.select+div{display:block;}
#publicity .list{max-width:1400px; margin:auto; }
#publicity .list li{display:inline-block; width:19%; margin-right:1%; padding-bottom:15px; transition:.3s;}
#publicity .list li:hover{transform:translateY(10px); transition:.3s;}
#publicity .list li a{display:block; overflow:hidden; text-align:center; border-radius:10px; background-color:#fff; box-shadow:0 3px 0 rgba(0,0,0,.1);}
#publicity .list li .img{position:relative; height:260px; text-align:center;}
#publicity .list li .img img{position:absolute; left:50%; top:50%; width:100%; max-height:100%; transform:translate(-50%, -50%);}
#publicity .list li .tit{overflow:hidden; padding:25px 20px; font-size:1.15em; font-weight:300; white-space:nowrap; text-overflow:ellipsis;}

#link{padding-top:45px; padding-bottom:45px; background:linear-gradient(to right, #2e5cbc, #7b66fc);}
#link ul{overflow:hidden;}
#link li{float:left; text-align:center; width:16.25%; margin-left:.5%;}
#link li a{position:relative; display:block; padding-top:130px; color:#fff; font-size:1.15em; font-weight:300;}
#link li a:after,
#link li a:before{content:''; position:absolute; top:0; left:50%; margin-left:-52px; width:105px; height:105px;}
#link li a:after{border-radius:100%; background-color:rgba(0,0,0,.15); transition:.3s;}
#link li a:hover:after{background-color:rgba(0,0,0,0); transition:.3s;}
#link li a:before{background:url('/open_content/support/img/main/link.png') 0 center no-repeat; z-index:9;}
#link li.ic01 a:before{background-position-x:0;}
#link li.ic02 a:before{background-position-x:-105px;}
#link li.ic03 a:before{background-position-x:-210px;}
#link li.ic04 a:before{background-position-x:-315px;}
#link li.ic05 a:before{background-position-x:-420px;}
#link li.ic06 a:before{background-position-x:-525px;}

#apply{padding-top:60px; padding-bottom:60px; background-color:#f5f5f5;}
#apply>div{position:relative; overflow:hidden; margin-top:50px; padding-bottom:70px;}
#apply .list li{position:relative; float:left; width:24%; margin-left:.5%; margin-right:.5%; border-radius:10px; background-color:#fff; overflow:hidden;}
#apply .list li:before{content:''; position:absolute; top:0; left:0; width:150%; height:100%; transform:rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0); transform-origin:0% 100%; transition:transform 0.3s, opacity 0.3s, background-color 0.3s;}
#apply .list li:hover:before{opacity:1; transform:rotate3d(0, 0, 1, 0deg); transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1);}
#apply .list li.seo:hover:before, 
#apply .list li.seo dt span{background-color:#2f5cbd;}
#apply .list li.seo:hover dt span{color:#2f5cbd;}
#apply .list li.etc:hover:before,
#apply .list li.etc dt span{background-color:#7731be;}
#apply .list li.etc:hover dt span{color:#7731be;}
#apply .list li:hover dt,
#apply .list li:hover dd,
#apply .list li:hover dd.date{color:#fff; font-weight:300;}
#apply .list li:hover dt span{font-weight:400; background-color:#fff;}
#apply .list li:hover a{text-decoration:none;}
#apply .list li a{position:relative; display:block; min-height:270px; padding:30px;}
#apply .list li dt{overflow:hidden; margin-bottom:10px; padding-top:40px; height:98px; font-size:1.3em; letter-spacing:-.8px; word-break:keep-all; text-overflow:ellipsis;}
#apply .list li dt span{position:absolute; top:30px; display:inline-block; text-align:center; width:55px; color:#fff; font-size:.75em; font-weight:300; line-height:26px; border-radius:3px;}
#apply .list li dd.con{padding-bottom:50px;}
#apply .list li dd.date{position:absolute; bottom:40px; color:#484848; font-size:0.85em; letter-spacing:0; opacity:.8;}

#pzone{padding-top:60px; padding-bottom:60px;}
#pzone>div{position:relative; overflow:hidden; margin-top:55px; padding-bottom:70px;}
#pzone li a{display:block; border-radius:10px; overflow:hidden; line-height:0;}
#pzone li a img{width:100%;}

/*pc*/
@media all and (min-width:801px){
	#publicity{height:620px;}
	#publicity .con{overflow:hidden; height:100%;}
	#publicity h4:before{content:''; position:absolute; left:0; top:9px; width:1px; height:8px; background-color:#ccc;}
	#publicity h4:nth-of-type(1):before{display:none;}
	#publicity .list{max-width:1400px; height:360px; margin-top:35px; overflow:hidden;}
	
	#link li:first-child{margin-left:0;}
	
	#pzone li{float:left; width:49%; margin-left:.5%; margin-right:.5%;}
}

/*tablet~mobile*/
@media screen and (max-width:800px){
	#publicity{height:545px;}
	#publicity:after,
	#publicity:before{width:100%; height:70%; background-size:auto 100%;}
	#contents h3{margin-bottom:0;}
	#publicity .control{display:none;}
	#publicity .control:before{content:''; position:absolute; right:5%; width:50px; height:50px; border-radius:100%; background:rgba(0,0,0,.7) url('/open_content/support/img/main/control_right.png') center no-repeat; box-shadow:0 3px 5px rgba(0,0,0,.7);}
	#publicity h4{padding-left:0; margin-top:30px; margin-left:1%; font-size:1em;}
	#publicity h4 a{overflow:hidden; padding:10px 15px; border-radius:5px; background-color:#fff;}
	#publicity h4.select a{color:#fff; background-color:#7731be;}
	#publicity .con{bottom:5%; width:90%; overflow:hidden;}
	#publicity .list li{width:200px;}
	#publicity .list li:first-child{}
	#publicity .list li .img{position:relative; height:205px; text-align:center;}
	#publicity .list li .tit{padding:15px 10px; font-size:.95em;}
	
	#link{padding:2% 3%;}
	#link li{width:31.3%; min-height:155px; margin:3% 1%;}
	#link li a{padding-top:110px; font-size:1em;}
	#link li a:after,
	#link li a:before{margin-left:-48px; width:95px; height:95px;}
	#link li a:before{background-size:auto 55px;}
	#link li.ic01 a:before{background-position-x:5px;}
	#link li.ic02 a:before{background-position-x:-88px;}
	#link li.ic03 a:before{background-position-x:-178px;}
	#link li.ic04 a:before{background-position-x:-268px;}
	#link li.ic05 a:before{background-position-x:-358px;}
	#link li.ic06 a:before{background-position-x:-450px;}

	#apply{padding:8% 3%;}
	#apply>div{margin-top:20px;}
	#apply .list li{width:48%; margin:1%;}
	#apply .list li a{min-height:auto; padding:25px 25px 70px;}
	#apply .list li dt{height:85px; padding-top:35px; font-size:1.15em;}
	#apply .list li dt span{top:25px; width:46px; line-height:21px;}
	#apply .list li dd.con{padding-bottom:0; font-size:.9em;}
	#apply .list li dd.date{bottom:30px; font-size:.8em;}
	
	#pzone{padding:5%;}
	#pzone h3{display:none;}
	#pzone>div{margin-top:0; padding-bottom:50px;}
	#pzone li a{margin-bottom:15px;}
	#pzone li a img{width:100%;}
}

/*min-mobile*/
@media screen and (max-width:480px){
	#publicity{height:600px;}
	#publicity:after,
	#publicity:before{height:50%;}
	#publicity .control{top:50%;}
	#publicity .list{margin-top:60px;}
	#apply .list li{width:98%; margin:1%;}
}