@charset "utf-8";
#container_main{ position: relative; overflow: hidden; }


.img { position: relative; }
.img .wrap { position: relative; /*padding-top: 66%;*/ overflow: hidden; }
.img .wrap .centered { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%); }
.img .wrap .centered img { position: absolute; top: 0; left: 0; width: auto; height: 100%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }

/* main top */
#mainTop { position: relative; overflow: hidden; background-color: #6f5a46; }
/*
#mainTop:before { content: ''; display: block; width: calc(50% - 1024px); height: 100%; position: absolute; left: 0; top: 0; background-color: #00264d; }
#mainTop:after { content: ''; display: block; width: calc(50% - 1024px); height: 100%; position: absolute; right: 0; top: 0; background-color: #0a6869; }
*/

/* visual */
#visual { width: 100%; max-width: 1900px; margin: 0 auto; height: 511px; transition: .3s; }
#visual .img { height: 100%; }
#visual .img .wrap { height: 100%; } 
@media all and (max-width: 1220px) {
	#visual { height: auto; }
	#visual .img .wrap { padding-top: 26.9%; } 
}

/* slogan */
#slogan { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
#slogan .inner { height: 100%; }
#slogan .wrap { box-sizing: border-box; padding-top: 90px; }
#slogan .wrap p { font-size: 22px; line-height: 100%; color: #94ffd4; font-weight: 400; letter-spacing: -1px; text-shadow: 2px 2px 2px rgba(73, 73, 73, .6); margin-bottom: 10px; }
#slogan .wrap h3 { font-size: 50px; line-height: 100%; color: #fff; font-weight: 800; letter-spacing: -2px; text-shadow: 3px 3px 3px rgba(66, 66, 66, .6); }
#slogan .wrap div { font-size: 16px; line-height: 150%; color: #fff; font-weight: 200; text-shadow: 2px 2px 2px rgba(73, 73, 73, .6); margin-top: 15px; }
#slogan .wrap div span { display: block; }
@media all and (max-width: 1220px) {
	#slogan .wrap { padding-top: 50px; }
}
@media all and (max-width: 1024px) {
	#slogan .wrap { padding-top: 2%; }
	#slogan .wrap h3 { font-size: 35px; }
}
@media all and (max-width: 768px) { 
	#slogan .wrap p { font-size: 18px; }
	#slogan .wrap h3 { font-size: 28px; }
	#slogan .wrap div { font-size: 14px; margin-top: 10px; }
}
@media all and (max-width: 568px) {
	#slogan .wrap div { display: none; }
} 
@media all and (max-width: 425px) {
	#slogan .wrap h3 { font-size: 24px; }
	#slogan .wrap p { font-size: 16px; margin-bottom: 5px; }
} 

/* main middle */
#mainMiddle { background: #f1f1f1 url("/images/committee/main/bg_middle.png") center top 79px no-repeat; }

/* quick */
#quick { margin-top: -79px; margin-bottom: 51px; transition: .3s; }
#quick .list { padding: 0 9.5%; }
#quick .list ul { background-color: #fff; padding: 20px 0; box-shadow: 5px 5px 5px rgba(34, 34, 34, .2); }
#quick .list ul:after { content: ''; display: block; clear: both; }
#quick .list li { float: left; width: 20%; }
#quick .list li a { display: block; text-align: center; position: relative; font-size: 18px; color: #333; padding: 20px 0 5px; }
#quick .list li a:before { content: ''; display: block; width: 69px; height: 63px; background: url("/images/committee/main/icon_quick.png") 0 0 no-repeat; margin: 0 auto; }
#quick .list li.item2 a:before { background-position-x: -69px; }
#quick .list li.item3 a:before { background-position-x: -138px; }
#quick .list li.item4 a:before { background-position-x: -207px; }
#quick .list li.item5 a:before { background-position-x: -276px; }
#quick .list ul li a:active:before, 
#quick .list ul li a:focus:before, 
#quick .list ul li a:hover:before { transform: rotateY(360deg); transition: 0.6s ease-out; }
#quick .list li a:after { content: ''; display: block; width: 1px; height: 100%; background-color: rgba(133, 105, 74, .2); position: absolute; right: 0; top: 0; bottom: 0; margin: auto; }
#quick .list li:last-child a:after { display: none; }
#quick .list li a span { display: block; margin-top: 10px; }
@media all and (max-width: 1220px) {
	#quick { margin-top: -29px; }
}
@media all and (max-width: 1024px) {
	#quick .list { padding: 0 5.5%; }
	#quick .list li a { padding: 10px 0 5px; font-size: 16px; }
}
@media all and (max-width: 768px) {
	#quick { margin-top: 0; padding-top: 30px; margin-bottom: 30px; }
	#quick .list { padding: 0; }
}
@media all and (max-width: 568px) {
	#quick .list li a { font-size: 14px; }
	#quick .list li a:before { width: 47px; height: 43px; background-size: auto 43px; }
	#quick .list li.item2 a:before { background-position-x: -47px; }
	#quick .list li.item3 a:before { background-position-x: -94px; }
	#quick .list li.item4 a:before { background-position-x: -141px; }
	#quick .list li.item5 a:before { background-position-x: -188px; }
}
@media all and (max-width: 425px) {
	#quick .list ul { padding: 0 20px; }
	#quick .list li { float: none; width: 100%; }
	#quick .list li a { padding: 10px 0; }
	#quick .list li a:before { position: absolute; left: 10px; top: 0; bottom: 0; margin: auto; }
	#quick .list li a:after { width: 100%; height: 1px; left: 0; top: auto; }
	#quick .list li a span { padding-left: 77px; line-height: 43px; margin-top: 0; text-align: left; }
}

/* board */
#board { position:relative; box-sizing:border-box; height: 284px; margin-bottom: 51px;}
#board .inner { height: 100%; }
#board li h4{line-height:0; padding:0; font-size:20px; width: 367px; position: relative; z-index: 2; }
#board li:first-child h4 { border-top: 3px solid #1e1f34; }
#board li h4 a{position:relative; display:block; height: 50px; line-height: 50px; font-weight: 400; font-size: 22px; color: #333; text-align: left; text-decoration:none; box-sizing: border-box; padding: 0 30px; transition: .3s }
#board li h4 a:hover,
#board li h4 a:focus,
#board li h4 a:active,
#board li.on h4 a { height: 68px; line-height: 68px; font-size: 25px; text-align: center; }
#board li h4 a:hover span,
#board li h4 a:focus span,
#board li h4 a:active span,
#board li.on h4 a span { color: #d4b165; }
#board ul ul{display:none; position:absolute; top: 0; right: 0; width:calc(100% - 427px); font-size:16px; box-sizing: border-box; height: 100%; border-top: 3px solid #1e1f34; }
#board ul .on ul{display:block;}
#board ul ul li { width: 100%; border-bottom: 1px solid #d5d5d5; box-sizing: border-box; padding: 0 35px 0 30px; }
#board ul ul li:after { content: ''; display: block; clear: both; }
#board ul ul li a{position:relative; display: block; box-sizing: border-box; }
#board ul ul li a:after { content: ''; display: block; clear: both; }
#board ul ul li a:hover .title,
#board ul ul li a:focus .title,
#board ul ul li a:active .title,
#board ul ul li a:hover > p,
#board ul ul li a:focus > p,
#board ul ul li a:active > p { text-decoration: underline; }
#board ul ul li a > p { float: left; width: 130px; font-size: 17px; color: #333; font-weight: 200; line-height: 68px; text-align: center; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#board ul ul li .title{display:block; float: left; max-width: calc(100% - 305px); line-height: 68px; font-size: 16px; color: #333; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#board ul ul li .new{display:inline-block; width:15px; height:15px; line-height:14px; font-size:10px; font-weight:bold; text-transform:uppercase; text-align:center; color:#fff; border-radius:50%; background:#a94a46; vertical-align: middle; margin-left: 10px; margin-top: 27px; }
#board ul ul li .date { float: left; width: 50px; font-size: 14px; color: #333; letter-spacing: -1px; text-align: center; line-height: normal; box-sizing: border-box; padding: 9px 0; }
#board ul ul li .date strong { display: block; font-size: 23px; font-weight: 800; color: #d3b065; }
#board ul ul li .more2 { display: block; float: right; width: 85px; height: 30px; line-height: 30px; text-align: center; color: #fff; font-size: 14px; font-weight: 200; background-color: #d4b165; margin: 20px 0 19px; }
#board .none{width:100%; text-align:center; border-bottom: none; background: none; line-height: 284px;}
#board .none:before,
#board .more{display:none;}
#board .more { width: 125px; height: 100px; position: absolute; right: calc(100% - 367px); bottom: 0px; z-index: 2; }
#board .more a { display: block; width: 100%; height: 100%; background-color: #1e1f34; box-sizing: border-box; padding: 20px; font-size: 20px; color: #fff; font-weight: 200; transition: .3s; }
#board .more a:before { content: ''; display: block; width: 1px; height: 19px; background-color: #fff; position: absolute; right: 26px; bottom: 18px; } 
#board .more a:after { content: ''; display: block; width: 19px; height: 1px; background-color: #fff; position: absolute; right: 17px; bottom: 27px; }
#board .more a:hover,
#board .more a:focus,
#board .more a:active { background-color: #2d2e4e; }
#board .on .more{display:block; }
@media all and (max-width: 1024px) {
	#board li h4 { width: 237px; }
	#board li h4 a { font-size: 19px; }
	#board li h4 a:hover,
	#board li h4 a:focus,
	#board li h4 a:active,
	#board li.on h4 a { height: 58px; line-height: 58px; font-size: 22px; }
	#board ul ul { width: calc(100% - 257px); }
	#board ul ul li .title { max-width: calc(100% - 270px); }
	#board ul ul li .more2 { width: 55px; }
	#board .more { right: calc(100% - 237px); }
}
@media all and (max-width: 768px) {
	#board { margin-bottom: 30px; }
	#board li h4 { width: 167px; }
	#board li h4 a { font-size: 17px; padding: 0 10px; }
	#board li h4 a:hover, 
	#board li h4 a:focus, 
	#board li h4 a:active, 
	#board li.on h4 a { font-size: 18px; }
	#board ul ul { width: calc(100% - 177px); }
	#board ul ul li { padding: 0 10px; }
	#board ul ul li a > p { font-size: 16px; }
	#board ul ul li .title { max-width: calc(100% - 205px); font-size: 16px; }
	#board ul ul li .more2 { display: none; }
	#board .more { width: 167px; right: auto; left: 0; }
	#board .more a { font-size: 18px; }
}
@media all and (max-width: 568px) { 
	#board { height: 334px; } 
	#board li { float: left; }
	#board li h4 { width: auto; }
	#board li:first-child h4 { border-top: none; }
	#board li h4 a:hover, 
	#board li h4 a:focus, 
	#board li h4 a:active, 
	#board li.on h4 a { height: 50px; line-height: 50px; }
	#board ul ul { top: 50px; width: 100%; }
	#board ul ul li a > p { width: 100px; font-size: 15px; }
	#board ul ul li .title { max-width: calc(100% - 175px); font-size: 15px; }
	#board .more { width: 25px; height: 25px; right: 0; left: auto; top: 13px; bottom: auto; }
	#board .more a { padding: 0; font-size: 0; }
	#board .more a:before { right: 12px; bottom: 3px; } 
	#board .more a:after { right: 3px; bottom: 12px; }  
}
@media all and (max-width: 375px) {
	#board li h4 a { padding: 0 5px; font-size: 16px; letter-spacing: -1px; }
	#board li h4 a:hover, 
	#board li h4 a:focus, 
	#board li h4 a:active, 
	#board li.on h4 a { font-size: 17px; }
}

/* gallery */
#gallery { position: relative; box-sizing: border-box; background: url("/images/committee/main/bg_gallery.jpg") center repeat; background-size: cover; padding: 40px 0 25px; }
#gallery .tit { margin-bottom: 22px; position: relative; box-sizing: border-box; padding-left: 25px; }
#gallery .tit:before { content: ''; display: block; width: 9px; height: 77px; background-color: #d4b165; position: absolute; left: 0; top: -60px; }
#gallery .tit h3 { font-size: 30px; color: #fff; font-weight: 800; line-height: normal; }
#gallery .tit p { line-height: normal; font-size: 17px; font-weight: 400; color: #fff; }
#gallery .list { margin-left: -15px; margin-right: -15px; overflow: hidden; position: relative; z-index: 2; }
#gallery .list .slick-track { margin-left: 0; margin-right: 0; }
#gallery .list .item { float: left; width: 25%; box-sizing: border-box; padding-left: 15px; padding-right: 15px; position: relative; }
#gallery .list .item .img { overflow: hidden; }
#gallery .list .item .img .wrap { padding-top: 75.17%; transition: .3s; }
#gallery .list .item .txt { width: 100%; box-sizing: border-box; padding: 15px 10px; text-align: left; }
#gallery .list .item .txt h5 { font-weight: 400; font-size: 17px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#gallery .list .item .txt p { font-size: 16px; font-weight: 200; color: #fff; }
#gallery .list .item a { display: block; position: relative; color: #fff; }
#gallery .list .item a:hover,
#gallery .list .item a:focus,
#gallery .list .item a:active {  }
#gallery .list .item a:hover .img .wrap,
#gallery .list .item a:focus .img .wrap,
#gallery .list .item a:active .img .wrap { transform: scale(1.1); }
#gallery .more { width: 126px; height: 45px; position: absolute; right: 0; top: 10px; }
#gallery .more a { display: block; width: 100%; height: 100%; line-height: 45px; position: relative; border-radius: 22px; background-color: #1e1f34; color: #fff; box-sizing: border-box; padding: 0 25px; transition: .3s; }
#gallery .more a:before { content: ''; display: block; width: 1px; height: 15px; background-color: #fff; position: absolute; right: 32px; top: 14px; }
#gallery .more a:after { content: ''; display: block; width: 15px; height: 1px; background-color: #fff; position: absolute; right: 25px; top: 21px; }
#gallery .more a:hover,
#gallery .more a:focus, 
#gallery .more a:active { background-color: #2d2e4e; }
@media all and (max-width: 768px) {
	#gallery .tit { padding-left: 15px; }
	#gallery .tit h3 { font-size: 24px; }
	#gallery .tit p { width: calc(100% - 111px); font-size: 15px; word-break: keep-all; }
	#gallery .list { overflow-x: scroll; width: 100%; }
	#gallery .list > .wrap { width: 800px; }
	#gallery .list .item .txt h5 { font-size: 16px; }
	#gallery .list .item .txt p { font-size: 15px; }
	#gallery .more { width: 106px; } 
	#gallery .more a { padding: 0 15px; }
	#gallery .more a:before { right: 22px; }
	#gallery .more a:after { right: 15px; }
}