@Charset "utf-8";
@import url("common.css");

.wrap_title {display:none;}

/* 탭 */
#sub #hcms_tab_area {display:none;}
#sub .boardTab {display:block !important;}
#float {display:none;}


#sub_title {position:relative; height:586px; background-image:url("/hcm/design/layout2021/a/res/img/sub_title01.png");}
#sub_title {background-repeat:no-repeat; background-position:center 0; background-size:100% auto;}
#sub_title .sub_title {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
#sub_title .sub_title {width:100%; max-width:1200px; padding:0 2%; line-height:60px; font-size:55px; font-weight:bold; color:#f4f4f4; text-align:center; box-sizing:border-box;}

@media only screen and (max-width:1920px) {
	#sub_title {background-size:auto 100%;}
}

#navi {position:absolute; bottom:0; left:0; width:100%; border-top:1px solid #f4f4f4;}
#navi .navi {position:relative; display:flex; max-width:1200px; margin:0 auto;}
#navi .navi .a1 {display:block; width:500px; font-size:20px; color:#ffffff; padding:18px 0 10px;}
#navi .navi .a1 span {display:block; line-height:35px; text-align:center; border-right:1px solid rgba(244,244,244,0.5);}
#navi .navi .a1:nth-child(1) span {border-left:1px solid rgba(244,244,244,0.5);}
#navi .navi .on {border-bottom:8px solid #1886e4; }


#navi .m_navi {position:relative; height:48px; line-height:48px; display:none;}
#navi .m_navi .home {float:left; width:49px; height:48px; border-right:1px solid #dfdfdf; overflow:hidden;}
#navi .m_navi .home a {display:table-cell; width:49px; height:48px; vertical-align:middle; text-align:center;}
#navi .m_navi .home a img {display:inline; margin-top:-5px;}
#navi .m_navi .navilist {float:left; width:calc(100% - 50px);}
#navi .m_navi .n1 {position:relative; float:left; padding:0 30px 0 20px; border-right:1px solid #dfdfdf; background:url("/hcm/design/layout2020/a/res/img/navi_bg.png") no-repeat 95% 19px; cursor:pointer;}
#navi .m_navi .n1 .a1 {display:block; min-width:80px; font-size:15px; font-weight:bold; color:#fff; padding-right:20px; white-space:nowrap;}
#navi .m_navi .n2 {position:absolute; width:100%; top:48px; left:0; background:#f0f0f0; text-align:left; white-space:nowrap; overflow:hidden; z-index:5;}
#navi .m_navi .n2 .a2 {display:block; font-size:14px; line-height:0; color:#313131; padding:0 20px; text-align:center; transition:0.3s;}
#navi .m_navi .n2 .a2:HOVER {background:#1886e4; color:#fff;}
#navi .m_navi .n2 .link img {display:none; margin-left:5px; transition:0.3s;}
#navi .m_navi .on1 .a2 {line-height:48px; border-bottom:1px solid #ddd;}
#navi .m_navi .on1 .link .off {display:inline;}
#navi .m_navi .on1 .link:hover .on {display:inline;}
#navi .m_navi .on1 .link:hover .off {display:none;}
#navi br {display:none;}




#sub {max-width:1200px; margin:0 auto; overflow:hidden;}
#sub .sub {padding:50px 2% 100px; min-height:550px; overflow:hidden;}

#sub .tab {display:flex; flex-wrap:wrap; margin-bottom:50px; border-left:1px solid #ddd; border-top:1px solid #ddd; overflow:hidden;}
#sub .tab a {display:inline-block; width:20%; font-size:18px; color:#848484; text-align:center; vertical-align:middle; border-right:1px solid #ddd; border-bottom:1px solid #ddd; box-sizing:border-box;}
#sub .tab a span {display:flex; align-items:center; justify-content:center; height:50px; padding:5px 10px; line-height:20px; text-align:center; box-sizing:border-box;}
#sub .tab .on span {color:#fff; background:#1886e4;}
@media only screen and (max-width:1000px) {
	#sub .tab a {width:25%;}
}
@media only screen and (max-width:600px) {
	#sub .tab a {width:33.3%;}
}


.basic {overflow:hidden;}


.bt {padding-left:12px; font-weight:bold; background:url("/hcm/design/layout2021/a/res/img/bt18.png") no-repeat 0 6px;}

.t35 {font-size:35px; font-weight:500; line-height:40px;}
.t22 {font-size:22px; line-height:30px;}
.t20 {font-size:22px; line-height:30px;}
.t18 {font-size:18px; line-height:30px;}
.t16 {font-size:16px; line-height:25px;}


.img+.t20 {margin-top:30px;}
.t16+.t20 {margin-top:30px;}
.t20+.t16 {margin-top:10px;}
.t16+.t18 {margin-top:30px;}
.t18+.t16 {margin:10px 0 0 14px;}

.tb {font-weight:bold !important;}

.c1 {color:#1886e4;}
.c2 {color:#3759b0;}


.lain {border-bottom:1px solid #ddd; height:25px; margin-bottom:30px; overflow:hidden;}


.btn {overflow:hidden;}
.btn a {display:inline-block; min-width:150px; height:42px; line-height:42px; font-size:16px; font-weight:bold; color:#fff; text-align:center; border-radius:5px; padding:0 10px; background:#1886e4;}
.btn a+a {margin-left:7px;}
.btn .bg1 {background:#3759b0;}


.imgbox {overflow:hidden;}
.imgbox .box {padding:30px 0;}
.imgbox .box+.box {border-top:1px solid #ddd;}
.imgbox .box .img {float:left; margin:0 20px 20px 0; overflow:hidden;}
.imgbox .box .text {position:relative; min-height:180px; padding-bottom:60px; min-width:300px; overflow:hidden;}
.imgbox .box .text .btn {position:absolute; bottom:0; left:0; overflow:hidden;}
.imgbox .box .text2 {position:relative; min-height:180px; min-width:300px; overflow:hidden;}


.course {border-top:2px solid #1886e4; overflow:hidden;}
.course .tb {background:#f4f4f4;}
.course .t16 {padding:15px 15px; border-bottom:1px solid #ddd;}
.course .t16.tb.c1 {font-size:18px; color:#313131; font-weight:400 !important;}


.staff {margin:0 -12px; overflow:hidden;}
.staff .box {float:left; width:calc(50% - 56px); min-height:160px; margin:0 12px 20px; padding:20px 15px; border:1px solid #dfdfdf; border-top:2px solid #1886e4;}
.staff .box .img {float:left; width:95px; overflow:hidden;}
.staff .box .img img {width:95px; max-height:200px; overflow:hidden;}
.staff .box .t16 {padding-left:20px; overflow:hidden;}
.staff .box .t16 .name {height:40px; font-size:25px; font-weight:bold; border-bottom:1px solid #ddd; margin-bottom:10px;}
@media only screen and (max-width:1016px) {
	.staff .box {float:none; width:calc(100% - 56px);}
}


.w2 {margin:0 -10px; overflow:hidden;}
.w2 .box {float:left; width:calc(50% - 20px); margin:0 10px 20px; overflow:hidden;}





caption {font-size:0; height:0;}
.tw {overflow:auto;}

.pr {position:relative;}
.pr .on {position:absolute; bottom:20px; right:20px; padding:20px 20px; font-size:15px; font-weight:bold; color:#fff; line-height:30px; border-radius:15px; background:#313131; opacity:0.6; display:none;}
.pr .on img {margin-top:-3px;}
.pr .on2 {position:absolute; bottom:20px; right:20px; padding:20px 20px; font-size:15px; font-weight:bold; color:#fff; line-height:30px; border-radius:15px; background:#313131; opacity:0.6;}
.pr .on2 img {margin-top:-3px;}

.table01 {width:100%; border-top:1px solid #1886e4; border-collapse:collapse;}
.table01 th {padding:10px 10px; height:30px; font-size:16px; font-weight:bold; line-height:25px; color:#1886e4; border-right:1px solid #ddd; border-bottom:1px solid #ddd; background:#f8f8f8;}
.table01 td {padding:10px 10px; height:30px; font-size:16px; line-height:24px; color:#505050; border-right:1px solid #ddd; border-bottom:1px solid #ddd; word-break:break-all}
.table01 th+th {border-left:1px solid #ddd;}
.table01 td+td {border-left:1px solid #ddd;}
.table01 th:LAST-CHILD {border-right:none;}
.table01 td:LAST-CHILD {border-right:none;}

/* 
.table02 {width:100%; border-top:2px solid #1886e4; border-collapse:collapse;}
.table02 th {padding:10px 10px; height:30px; font-size:16px; font-weight:bold; line-height:30px; color:#1886e4; white-space:nowrap; vertical-align:top; border-bottom:1px solid #dddddd;}
.table02 td {padding:10px 10px; height:30px; font-size:15px; line-height:30px; color:#313131; border-bottom:1px solid #dddddd; word-break:break-all;}
.table02 td b {padding-right:20px;}
 */

.p0505 th {padding:5px 5px; height:20px; line-height:20px;}
.p0505 td {padding:5px 5px;}

.p1020 th {padding:10px 20px;}
.p1020 td {padding:10px 20px;}

.p1520 th {padding:15px 20px;}
.p1520 td {padding:15px 20px;}

.p2020 th {padding:20px 20px;}
.p2020 td {padding:20px 20px;}


.ti10 {text-indent:-10px; padding-left:10px;} 
.ti10l li {text-indent:-10px; padding-left:12px;} 
.ti15 {text-indent:-15px; padding-left:15px;} 
.ti15l li {text-indent:-15px; padding-left:17px;} 
.ti20 {text-indent:-20px; padding-left:20px;} 
.ti20l li {text-indent:-20px; padding-left:22px;} 


.tibl li {overflow:hidden;}
.tibl li b {float:left; overflow:hidden;}
.tibl li b+span {display:block; padding-left:5px; overflow:hidden;}


@media only screen and (max-width:1316px) {
}
@media only screen and (max-width:1216px) {
}
@media only screen and (max-width:1016px) {
	#sub_title .sub_title {line-height:40px; font-size:40px;}

	#sub #lnb {display:none;}
	#navi .navi {display:none;}
	#navi .m_navi {display:block;}
	
	#sub {border:none;}
	#sub .sub {padding:30px 2% 50px;}
	
	.w2 .box {float:none; width:calc(100% - 20px);}
	
}
@media only screen and (max-width:820px) {
	.pr .on {display:block;}
	
	#sub .tab2 a {padding:10px 0;}
	#sub .tab2 a span {padding:0 10px;}
	
}
@media only screen and (max-width:640px) {
	#sub .tab a {font-size:15px; letter-spacing:-0.15em;}
}
@media only screen and (max-width:480px) {
}
@media only screen and (max-width:360px) {
}