@charset "utf-8";

/* *********************************
	common
********************************* */

	.side { margin:0 10px; }
	.gray_box { padding:30px 40px; background-color:#f7f7f7; }
	.gray_box.small { padding:20px; }
	.gray_box .btn { background-color:#fff; }
	.gray_box .bbs_info { padding:25px 40px; background-color:#fff; }
	.gray_box .bbs_info td { padding:20px; }


/* *********************************
	content
********************************* */
/* ********* program ********* */
/* exhibit */
.exhibit_list { overflow:hidden; margin:0 0 0 -20px; }
.exhibit_list li { float:left; margin:0 0 20px 20px; width:calc(25% - 20px); height:188px; background:#000; }
.exhibit_list li.ready { background:#f7f7f7 url('../images/img_ready.png') center no-repeat; }
.exhibit_list li a { display:inline-block; width:100%; height:188px; }
.exhibit_list li figure { overflow:hidden; position:relative; width:100%; height:188px; }
.exhibit_list li figure img { position:relative; left:0; vertical-align:top;width:100%}
.exhibit_list li strong { position:absolute; top:0px; left:0px; display:none; width:100px; height:35px; line-height:35px; font-size:14px; color:#fff; font-weight:400; text-align:center; background-color:#1e2c5a; }
.exhibit_list li.end strong { background-color:#5c5c5c; }
.exhibit_list li dl { z-index:1; position:absolute; left:0px; bottom:0px; padding:5px 15px; width:100%; height:74px; box-sizing:border-box; }
.exhibit_list li dl:before { content:""; z-index:-1; position:absolute; left:0px; bottom:0px; display:inline-block; width:100%; height:80px; background:rgba(0, 0, 0, 0.5); }
.exhibit_list li dt { margin-bottom:10px; font-size:18px; color:#fff; font-weight:500;
	text-overflow:ellipsis;
	white-space:nowrap;
	word-wrap:normal;
	width:100%;
	overflow:hidden;
}
.exhibit_list li dd { color:#d6d6d6; line-height:1.2; }
.exhibit_list li dl dt .link {font-size:16px;}
.exhibit_list li dd {font-size:14px}
/* hover */
.exhibit_list li a:hover figure:before { content:""; z-index:2; position:absolute; left:50%; top:50px; margin:0 0 0 -21px; width:42px; height:42px; background:url('../images/list_view.png') no-repeat; }
.exhibit_list li a:hover dl:before { height:360px; background:rgba(0, 0, 0, 0.7); transition: all 0.3s ease-out; }

.gray_box.exhibit,
.gray_box.comment { position:relative; padding:20px; }

.gallery_slider img { display:inline-block; vertical-align:top; }
.gallery_slider .img_con { position:relative; margin-bottom:10px; width:590px; height:360px; }
.gallery_slider .img_con img { width:590px; height:360px; }
.gallery_slider .slider_btn a { position:absolute; top:155px; }
.gallery_slider .slider_btn a { display:inline-block; width:50px; height:50px; }
.gallery_slider .slider_btn a.prev { left:10px; background:url('../images/btn_prev.png') left top no-repeat; }
.gallery_slider .slider_btn a.next { right:10px; background:url('../images/btn_next.png') left top no-repeat; }
.gallery_slider .slider_btn a:hover { background-position:left bottom; }
.gallery_slider .slider_btn span { display:none; }
.gallery_slider .sum_img { overflow:hidden; }
.gallery_slider .sum_img li { float:left; }
.gallery_slider .sum_img li:first-child { margin-left:0px !important; }
.gallery_slider .sum_img li a { position:relative; display:block; }
.gallery_slider .sum_img li a:hover:before,
.gallery_slider .sum_img li.current a:before { content:""; position:absolute; left:0px; top:0px; display:inline-block; border:2px solid #469292; box-sizing:border-box; }
.gallery_slider .sum_img li img { }

.gray_box .gallery_con { position:absolute; top:30px; right:20px; width:540px; }
.gallery_con .tit { display:inline-block; margin-bottom:10px; padding:0 14px; min-width:84px; height:30px; line-height:30px; font-size:16px; font-weight:400; color:#fff; text-align:center; background-color:#1e2c5a; box-sizing:border-box; }
.gallery_con dl { margin-right:20px; }
.gallery_con dt { margin-bottom:25px; font-size:20px; color:#333; font-weight:500; line-height:1.4; }
.gallery_con li { margin-top:15px; padding-left:85px; color:#666; font-weight:400; line-height:1.4; }
.gallery_con li:first-child { margin-top:0px; }
.gallery_con li strong { display:inline-block; width:85px; margin-left:-85px; color:#469191; font-weight:500; }
.gallery_con dd p { line-height:1.8; }

.exhibit .gallery_slider .sum_img li { margin-left:10px; background-color:#e7e7e7; width:140px; height:90px; }
.exhibit .gallery_slider .sum_img li a { width:140px; height:90px; }
.exhibit .gallery_slider .sum_img li a:hover:before,
.exhibit .gallery_slider .sum_img li.current a:before { width:140px; height:90px; }
.exhibit .gallery_slider .sum_img li img { width:140px; height:90px; }

/* edu */
.edu_list { position:relative; overflow:hidden; margin:-50px 0 0 -20px; }
.edu_list li { overflow:hidden; float:left; margin:50px 0 0 20px; width:590px; height:360px; border:1px solid #dfdfdf; background:#f7f7f7 url('../images/img_logo.png') center 100px no-repeat; box-sizing:border-box; } /* 19.06.27 */
.edu_list li figure {position:relative;height:360px;line-height:360px;overflow: hidden;}
.edu_list li figure img { position:absolute; width:590px; /* height:230px; */ vertical-align:top; }
.edu_list li figcaption { position:relative; display:inline-block; padding:25px 20px; width:590px; height:130px; border-top:1px solid #dfdfdf; box-sizing:border-box; background-color:#fff; vertical-align:bottom; }  /* 19.06.27 */
.edu_list li figcaption .group { position:relative; position:absolute; top:-231px; left:-1px; }
.edu_list li figcaption .group strong { float:left; display:inline-block; padding:0 24px; min-width:80px; height:35px; line-height:35px; font-size:14px; box-sizing:border-box; }
.edu_list li figcaption .group .tit { color:#fff; text-align:center; background-color:#469191; }
.edu_list li figcaption .group .state { color:#ccc; text-align:center; background-color:#5c5c5c; }
.edu_list li figcaption dl dt { height:47px; font-size:18px; color:#000; font-weight:500; line-height:1.3;
	text-overflow:ellipsis;
	white-space:nowrap;
	word-wrap:normal;
	width:100%;
	overflow:hidden;
}
.edu_list li figcaption dl dd { color:#666; }
.edu_list li figcaption dl dd strong { padding-left:5px; color:#666; font-weight:500; line-height:1.4; }
.edu_list li figcaption a.btn.go { position:absolute; right:25px; bottom:20px; padding:0 47px 0 14px; width:auto; height:35px; line-height:35px; background:url('../images/btn_color_s.png') 90% center no-repeat; }

/* edu_program */
.gray_box.program { position:relative; padding:30px; }
.program .gallery_con { width:540px; top:50px; }
.program .img_con img { width:570px; height:360px; }

.program .white_box { position:relative; margin-top:30px; padding:10px 30px 35px 30px; background-color:#fff; }
.program .white_box .sel_area { width:665px; min-height:168px; border-bottom:2px solid #469191; }
.program .white_box .sel_area dl { padding:0px; position:absolute; top:45px; right:95px; border-top:0px; }
.program .white_box .btn.color.go { top:128px; right:98px; }

.program .gallery_con.big { position:static; margin:35px 25px 0; width:auto; }
.program .txt_pre { white-space:pre-wrap; }

.program .bbs_info { margin-top:30px; padding:0px; width:930px; background-color:#f7f7f7; }
.program .bbs_info thead th { padding:8px 0; border-top:1px solid #469191; }
.program .bbs_info tbody td em { font-weight:400; }
.program .bbs_info tbody td.txt_left { padding-left:90px; }
.program .bbs_info tbody td li { margin-top:5px; padding:0px; font-weight:300; }

.program .upload_file { margin:50px 0 10px; width:930px; border-top:1px solid #ddd; box-sizing:border-box; }
.program .upload_file dt { margin:0 0 0 -12%; width:12%; line-height:1.0; font-size:15px; color:#469191; background-position:70% center; }

/* ********* notice ********* */
/* notice */
	.bbs_btn { margin-top:20px; text-align:right; }
	.bbs_btn .btn { display:inline-block; width:100px; height:34px; line-height:32px; text-align:center; }


/* IE8 only */
@media \0screen {

	/* purpose */
	.purpose_con { padding-left:450px; }

}
/* /IE8 only */

@media all and (max-width:1200px) {
	/*===== 체험안내 =====*/
	.exhibit_list li {width: calc(33.3333% - 20px);}
}
@media all and (max-width:800px) {
	/*===== 체험안내 =====*/
	.exhibit_list li {width: calc(50% - 20px);}
}
@media all and (max-width:560px) {
	/*===== 체험안내 =====*/
	.exhibit_list li {width: 100%;height:300px;}
	.exhibit_list li a {height:300px;}
	.exhibit_list li figure {height:300px;}

}