/* footer */
#footer{position:fixed; bottom:0; width:100%; height:40px; color:#959595; text-align:center; font-size:0.8em; z-index:999999999;}
#sub_box #footer{position:relative;}

/*=== THE ===*/
#sub_box{width:100%; background:#f4f4f4;     }
#sub_box .the_01, #sub_box .the_02, #sub_box .the_03, #sub_box .the_04{
	width:100%; height:100vh; display:flex; align-items:center;
    position: relative; 
}
#sub_box .the_01{background:url('../image/sub/the_bg01.jpg')no-repeat center / 110%; background-size: cover;}
#sub_box .the_02{background:url('../image/sub/the_bg02.jpg')no-repeat center / 110%; background-size: cover;}
#sub_box .the_03{background:url('../image/sub/the_bg03.jpg')no-repeat center / 110%; background-size: cover;}
#sub_box .the_04{background:url('../image/sub/the_bg04.jpg')no-repeat center / 110%; background-size: cover;}
#sub_box .the_02 .text_area{color:#2c2a2c;}
#sub_box .the_04 .text_area{color:#2c2a2c;}
.THE .text_area{color:#fff; text-align:center; position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 60px);}
.THE .text_area h2{font-size:1.7em; margin-bottom:7%; font-weight:400;}
.THE .text_area h2 span{font-size:1em; font-weight:600;}
.THE .text_area h4{font-size:1em; font-weight:400; margin-bottom:5%;}
.THE .text_area h4 span{font-weight:600; font-size:1.5em;}
.THE .text_area p{font-size:1em; width:80%; word-break: keep-all; margin:0 auto; line-height:1.8; font-weight:300;}


/*=== THE Service===*/
#sub_box .service_tit{width:100%; padding:30% 10% 20%; text-align:center; word-break:keep-all;}
#sub_box .service_tit h2{color:#fff; font-size:1.7em; font-weight:400; margin-bottom:5%;}
#sub_box .service_tit p{color:#fff; line-height:1.8; font-weight:300;}
#sub_box .service_tit h3{font-size:1.2em; color:#dbb7e4; font-weight:300; margin:10% 0 5%;}
#sub_box .sv_list{width:100%;}
#sub_box .sv_list li{width:100%; color:#fff; padding:2% 0;}
#sub_box .service_con{width:100%; background:#f4f4f4; padding:5%; font-size:0.8em;}
#sub_box .service_con .svc_tit{text-align:center; padding-top:30px; margin-bottom:20px;}
#sub_box .service_con .svc_tit span{display:block; background:#dbb7e4; width:30px; height:2px; margin:0 auto 10px;}
#sub_box .service_con .svc_tit h3{color:#2c2a2c; font-weight:400; font-size:1.5em; margin:3% 0 5%;}
#sub_box .service_con .sv_text_box{
	width: 100%; 
	padding:3% 7%;
	background:#fff; 
	box-shadow: 4px 5px 10px rgba(0, 0, 0, 0.1)  ; 
	-webkit-box-shadow: 4px 5px 10px rgba(0, 0, 0, 0.1)  ; 
	-moz-box-shadow: 4px 5px 10px rgba(0, 0, 0, 0.1)  ;
	margin-bottom:30px;
}
#sub_box .service_con h4{
	color:#8446ad; font-weight:500; font-size:1em;
	padding:5px 0 5px 8%; margin-bottom:10px;
}
#sub_box .service_con h4.sv_name{
	font-size:1.3em; padding-left:0;
	/*background:url('../image/sub/the_sv_sebu_icon04.png')no-repeat center left /6%;*/
}
#sub_box .service_con .sv_text_box h4.sv_kind{
	background:url('../image/sub/the_sv_sebu_icon05.png')no-repeat center left /6%;
}
#sub_box .service_con .sv_text_box h4:nth-of-type(2){margin-top:40px;}
#sub_box .service_con .sv_text_box p{color:#2c2a2c; word-break:keep-all; line-height:1.6;}
#sub_box .service_con .sv_text_box .gray_txt{background:#ebebeb; padding:3%; font-size:0.9em; word-break:keep-all;}
#sub_box .service_con .sv_text_box .gray_txt span{color:#2c2a2c; display:block;}
#sub_box .service_con .sv_text_box ul li{
	background:url('../image/sub/the_sv_sebu_li_icon.png')no-repeat center left;
	color:#2c2a2c; padding-left:15px; margin-bottom:10px;
}
#sub_box .sv01{background:url('../image/sub/sv01_bg.jpg')no-repeat center /cover;}
#sub_box .sv02{background:url('../image/sub/sv02_bg.jpg')no-repeat center /cover;}
#sub_box .sv03{background:url('../image/sub/sv03_bg.jpg')no-repeat center /cover;}
#sub_box .sv04{background:url('../image/sub/sv04_bg.jpg')no-repeat center /cover;}
#sub_box .sv05{background:url('../image/sub/sv05_bg.jpg')no-repeat center /cover;}
#sub_box .sv06{background:url('../image/sub/sv06_bg.jpg')no-repeat center /cover;}


/*=== THE_People ===*/
.wat_con01{
	padding:5%; background:url('../image/sub/weare_bg01.jpg')no-repeat center /cover;
	height:100vh; display:flex; justify-content:center; align-items:center;
}
.wat_con01 h2{font-size:1.7em; font-weight:400; color:#fff; text-align:center;}
.wat_con01 .three_con{position:relative; display:flex; justify-content:center;}
.wat_con01 .three_con ul{width:100%;}
.wat_con01 .three_con ul li{width:30%; height:150px; float:left; display:table; padding-top:40px; position:relative; margin-right:4%;}
.wat_con01 .three_con ul li:last-of-type{margin-right:0;}
.wat_con01 .three_con ul li div.icon{width:100%; text-align:center; position:absolute; bottom:0; left:50%; margin-left:-50%;}
.wat_con01 .three_con ul li div.icon img{width:40px;}
.wat_con01 .three_con ul li:last-of-type div.icon img{width:30px;}
.wat_con01 .three_con ul li div.icon p{font-size:1em; margin-top:15px; color:#fff;}
.wat_con01 .three_con ul li div.icon p span{font-size:1.5em; font-weight:600;}
.wat_con01 .three_con ul li div.t_bg{
	background:url('../image/sub/wat_3con_01bg.png')no-repeat center top /60%; height:100%; width:100%; position:absolute;
	top:0; left:-50%; margin-left:50%; z-index:99; opacity:0.4;
}
.wat_con01 .three_con ul li div.h_bg{
	background:url('../image/sub/wat_3con_02bg.png')no-repeat center top /60%; height:100%; width:100%; position:absolute;
	top:0; left:-50%; margin-left:50%; z-index:99; opacity:0.4;
}
.wat_con01 .three_con ul li div.e_bg{
	background:url('../image/sub/wat_3con_03bg.png')no-repeat center top /45%; height:100%; width:100%; position:absolute;
	top:0; left:-50%; margin-left:50%; z-index:99; opacity:0.4;
}
.wat_con01 .con01_txt{width:100%; text-align: center; margin-top:30px; color:#fff; word-break:keep-all;}
.wat_con01 .con01_txt p{font-size:1em; line-height:1.8; font-weight:300;}
.wat_con01 .con01_txt h4{font-size:1.2em; line-height:1.8; font-weight:400; margin-top:15px;}

	/* THE People / The Career */
.wat_con02{
	padding:5% 5% 10% 5%; background:url('../image/sub/weare_bg02.jpg')no-repeat center /cover;
	display:flex; justify-content:center; align-items:center;
}
.wat_con02 h1{font-size:1.7em; font-weight:400; color:#fff; line-height:62px; text-align:center;}
.wat_con02 h1 span{font-weight:600;}
.wat_con02 .h1_p{font-size:1em; font-weight:300; color:#fff; text-align:center; word-break:keep-all; line-height:1.8;}
.wat_con02 .con02{margin:2% auto;}
.wat_con02 .con02 table{border-spacing:0; border:0; padding:0; border-collapse:collapse; width:100%;}
.wat_con02 .con02 table th, .wat_con02 .con02 table td{border:1px solid #ccc; text-align:center; padding:2% 0; color:#fff;}
.wat_con02 .con02 table tbody th{color:#fff; /*background:rgba(44,42,44,.8);*/}
.wat_con02 .con02 ul{width:90%; margin:0 auto;}
.wat_con02 .con02 ul li{
	color:#fff;
	border-bottom:1px solid rgba(255,255,255,.4);
	padding:5% 0;
	text-align:center;
	min-height:10%;
	display: flex;
	align-items: center;
}
.wat_con02 .con02 ul li:first-of-type{
	border:0;
	border-bottom:1px solid #fff;
	font-weight:600;
	display:flex;
	align-items:center;
	justify-content:center;
	/*margin-bottom:5%;*/
}
.wat_con02 .con02 ul li div{
	width:33.33%;
	float:left;
	height:20px;
	position:relative;
	display: flex;
    align-items: center;
    justify-content: center;
}
.wat_con02 .con02 ul li div:nth-of-type(1) p{position:absolute; right:0;}
.wat_con02 .con02 ul li div:nth-of-type(3) p{position:absolute; left:0;}
.wat_con02 .con02 ul .arrow_area{width:100%; height:24px; margin-top:3%; text-align:center;}
.wat_con02 .con02 ul .arrow{transform: rotate(90deg);}
.wat_con02 .con02 ul.key li{margin-bottom:24px;}
.wat_con02 .con02 ul.key li:first-of-type{margin-bottom:5%;}


/* 320px ���� ����̽�*/
@media ( max-width: 320px ) {
	*{font-size:12px;}
	#sub_box .sv01{background:url('../image/sub/sv01_bg.jpg')no-repeat center /250%;}
	.THE_people{
		padding:5%; background:url('../image/sub/weare_bg03.jpg')no-repeat center /310%;
		height:100vh; display:flex; justify-content:center; align-items:center;
	}
}





/* THE Library */
/* ---- Insight / Notice - list---- */
#contents .subTop_area{margin:100px auto 10px; width:100%; text-align:center;}
#contents .subTop_area .subTit{
	font-size:18px; color:#707070; padding:0 15px; z-index:999; background:#fff; position:relative;
}
#contents .con_box{padding:5%;}
#contents .con_box .notice_list{width:100%; border-top:2px solid #5d0e8b; table-layout:fixed;}
#contents .con_box .notice_list thead th{
	padding:10px 0; background:#ebebeb; font-weight:400; color:#2c2a2c;  border-bottom:1px solid #ccc; font-size:0.8em;
}
#contents .con_box .notice_list thead th:nth-of-type(1){width:11%;}
#contents .con_box .notice_list thead th:nth-of-type(2){width:64%;}
#contents .con_box .notice_list thead th:nth-of-type(3){border-right:0; width:25%;}
#contents .con_box .notice_list tbody td{border-bottom:1px solid #ccc; padding:2%; text-align:center; font-weight:300; font-size:0.8em;}
#contents .con_box .notice_list tbody tr td:nth-of-type(2){text-align:left; height:26px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#contents .con_box .notice_list tbody tr td:nth-of-type(2) a{color:#2c2a2c;}
#contents .con_box .notice_list tbody tr td:nth-of-type(2) a:hover{text-decoration:underline;}

/* page num */
#contents .con_box .page_num{margin:40px 0 50px 0; display:flex; justify-content:center;}
#contents .con_box .page_num ul li{float:left; display:flex; justify-content:center; align-items:center; height:25px;}
#contents .con_box .page_num ul li:first-of-type{margin-right:20px;}
#contents .con_box .page_num ul li:last-of-type{margin-left:20px;}
#contents .con_box .page_num ul li a{float:left; width:25px; height:25px; line-height:25px; text-align:center; margin-right:5px; color:#969696;}
#contents .con_box .page_num ul li:nth-of-type(2) a:last-of-type{margin-right:0;}
#contents .con_box .page_num ul li a.on{background:#8446ad; color:#fff;}

/* Search_area */
#contents .con_box .Search_area{width:100%; height:50px; margin:0 auto 100px; border-bottom:1px solid #ccc; transition:all 0.5s;}
#contents .con_box .Search_area:hover{
	border-bottom:1px solid #fff !important; padding:0; transition:all 0.5s;
	-webkit-box-shadow: 0 0 25px rgba(0,0,1,.3);
	-moz-box-shadow: 0 0 25px rgba(0,0,1,.3);
	box-shadow: 0 0 25px rgba(0,0,1,.3);
}
#contents .con_box .Search_area input{width:80%; border:0; height:100%; float:left; padding:0 20px; font-size:1em;}
#contents .con_box .Search_area button{
	width:10%; height:100%; border:0; background:url('../image/insight/search_icon.png')no-repeat center; float:right; margin-right:10px;
}
.active{
	border-bottom:1px solid #fff !important; padding:0; transition:all 0.5s;
	-webkit-box-shadow: 0 0 25px rgba(0,0,1,.3);
	-moz-box-shadow: 0 0 25px rgba(0,0,1,.3);
	box-shadow: 0 0 25px rgba(0,0,1,.3);
}

/* ---- Insight / Notice - view ---- */
#contents .con_box .notice_view{width:100%; border-top:2px solid #5d0e8b; table-layout:fixed;}
#contents .con_box .notice_view thead th{background:#f4f4f4; padding:5% 3%; text-align:left;}
#contents .con_box .notice_view thead th h4{font-size:1.1em; font-weight:400; width:100%; }
#contents .con_box .notice_view tbody td {padding:5% 3%;}
#contents .con_box .notice_view tbody tr:first-of-type td{border-bottom:1px solid #ccc;}
#contents .con_box .notice_view tbody td .file{width:70%; float:left; font-size:0.8em; font-weight:300;}
#contents .con_box .notice_view tbody td .file p{margin-bottom:10px;}
#contents .con_box .notice_view tbody td .file a{margin-bottom:10px; background:url('../image/insight/file_down.png')no-repeat left center; padding-left:25px; color:#2c2a2c;}
#contents .con_box .notice_view tbody td .file a:hover{text-decoration:underline;}
#contents .con_box .notice_view tbody td .date{float:left; text-align:right; width:30%;}
#contents .con_box .notice_view tbody td .date span{font-size:0.8em; font-weight:400;}
#contents .con_box .notice_view tbody td .date span:last-of-type{color:#8446ad; margin-left:20px;}
#contents .con_box .notice_view tbody td.textbox{ border-bottom:1px solid #ccc; padding-bottom:50px;}
#contents .con_box .notice_view tbody td.textbox div{min-height:200px;}
#contents .con_box .notice_view tbody td.textbox div img{width:auto; max-width:100%;}

/* button_area */
.button_area{margin-top:20px; margin-bottom:100px;}
.button_area button{
	font-size:0.8em; width:100px; color:#2c2a2c; height:45px; border:1px solid #ccc; background:#fff;
	border-radius:5px; float:left; margin-right:10px; transition:all 0.5s;
}
.button_area button:hover{background:#f4f4f4;}
.button_area a div{
	font-size:0.8em; width:100px; color:#2c2a2c; text-align:center; line-height:45px; border:1px solid #ccc; 
	background:#fff; border-radius:5px; float:right; transition:all 0.5s;
}
.button_area a div:hover{background:#f4f4f4;}


/* ---- Insight / gallery - list ----*/
#contents .con_box ul.news li{float:left; width:100%;}
#contents .con_box ul.news li:nth-of-type(3n){margin-right:0;}
#contents .con_box ul.news li .picbox{
	width:100%; height:260px; background:#ebebeb url('../image/insight/picbox_noimage.png')no-repeat center; display:inline-block;
	margin-bottom:20px;
}
#contents .con_box ul.news li p{
	font-size:1.1em; color:#2c2a2c; height:26px; line-height:26px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:7px 0 10px 0;
}
#contents .con_box ul li span.date{color: #8446ad; font-size:0.8em; font-weight:500;}




/* ---- Insight / gallery - view ----*/
#contents .con_box .gallery_view{width:100%; border-top:2px solid #5d0e8b; table-layout:fixed;}
#contents .con_box .gallery_view thead th{background:#f4f4f4; padding:20px 30px; text-align:left;}
#contents .con_box .gallery_view thead th h4{font-size:18px; font-weight:400; width:100%; }
#contents .con_box .gallery_view tbody td {padding:5% 3%; border-bottom:1px solid #ccc;}
#contents .con_box .gallery_view tbody td img{max-width:100%;}
#contents .con_box .gallery_view tbody tr:first-of-type td{border-bottom:1px solid #ccc;}
#contents .con_box .gallery_view tbody td .file{width:70%; float:left; font-size:14px; font-weight:300;}
#contents .con_box .gallery_view tbody td .file p{margin-bottom:10px;}
#contents .con_box .gallery_view tbody td .file a{margin-bottom:10px; background:url('../image/insight/file_down.png')no-repeat left center; padding-left:25px; color:#2c2a2c;}
#contents .con_box .gallery_view tbody td .file a:hover{text-decoration:underline;}
#contents .con_box .gallery_view tbody td .date{float:right; text-align:right; width:30%;}
#contents .con_box .gallery_view tbody td .date span{font-size:0.8em; font-weight:400;}
#contents .con_box .gallery_view tbody td .date span:last-of-type{color:#8446ad; margin-left:20px;}
#contents .con_box .gallery_view tbody td.textbox{padding-bottom:50px;}
#contents .con_box .gallery_view tbody td.textbox div{min-height:200px;}
#contents .con_box .gallery_view tbody td.textbox div img{width:auto; max-width:100%;}
#contents .con_box .gallery_view tbody td.textbox .con_img{width:auto; height:auto; display:flex; background:#ccc; margin:30px auto;}