@charset "UTF-8";

/* sub_visual */

.sub_visual { position: relative; width: 100%; height: 500px; background-position: center; background-repeat: no-repeat; background-size: cover;}
.sub_visual h2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 40px; line-height: 58px; color: #fff;}

/* sub_visual image */

.sub_visual1 { background-image: url(../images/img-banner-sub_page.png);}
.sub_visual2 { background-image: url(../images/img-banner-sub2_page.png);}
.sub_visual3 { background-image: url(../images/img-banner-sub3_page.png);}
.sub_visual4 { background-image: url(../images/img-banner-sub4_page.png);}

/* sub_lnb */

.sub_lnb { width: 100%; border-bottom: 1px solid #E0E0E0;}
.sub_lnb > div { margin: 0 auto; width: 1240px; }
.sub_lnb > div > div { float: left; position: relative;}
.sub_lnb > div > div:after { content: ""; display: block; position: absolute; right: 0; top: 50%; transform: translate(0,-50%); width: 1px; height: 30px; background: #E0E0E0;}
.sub_lnb > div > div > a { display: block; padding: 0 32px; font-size: 16px; line-height: 48px; height: 48px;}
.sub_lnb > div > div:first-child > a { padding: 0;}
.sub_lnb > div > div.down > a { padding: 0 0 0 32px;}
.sub_lnb > div > div:last-child > a img { position: relative; top: -2px; transition: all 0.3s;}
.sub_lnb > div > div:last-child > a img.on { transform: rotate(-180deg);}
.sub_lnb > div > div:first-child > a img { position: relative; top: -2px;}
.sub_lnb > div > div ul { display: none; position: absolute; left: 0; top: 48px; z-index: 2; width: 100%; background: #fff;}
.sub_lnb > div > div ul li a { display: block; font-size: 16px; line-height: 48px; text-align: center; transition: all 0.2s;}
.sub_lnb > div > div ul li a:hover { background: #3550a3; color: #fff;}

/* sub_wrap */

.sub_wrap { width: 100%;}
.sub_wrap > div { margin: 0 auto; padding: 104px 0; width: 1240px;}

/* company1 */

.company1 { padding: 40px 0 0; text-align: center;}
.company1 > h3 { font-size: 32px; line-height: 46px;}
.company1 > p { position: relative; display: inline-block; margin: 40px 0; font-size: 16px; line-height: 26px; color: #212121; font-weight: 500;}
.company1 > p span:first-child { display: block; position: absolute; left: -15px; top: -3px; font-size: 24px; line-height: 35px; }
.company1 > p span:last-child { display: block; position: absolute; right: -15px; top: -3px; font-size: 24px; line-height: 35px; }
.company1 > span { display: block; font-size: 16px; line-height: 26px; color: #757575;}
.company1 > span:nth-of-type(1) { padding: 0 0 32px;}
.company1 > span:nth-of-type(2) { padding: 0 0 16px;}
.company1 > span:nth-of-type(3) { padding: 0 0 78px;}
.company1 > em { font-size: 18px; line-height: 26px; font-style: normal; font-weight: bold;}
.company1 > em img { padding: 0 0 0 18px;}

/* company2 */

.company2 h3 { padding: 0 0 128px; font-size: 40px; line-height: 58px; text-align: center;}
.company2 .history { position: relative;}
.company2 .history:after { content: ""; display: block; position: absolute; left: 50%; top: -90px; margin-left: -0.5px; width: 1px; height: 102%; background: #293D7C;}
.company2 .history:before { content: ""; display: block; position: absolute; left: 50%; top: -90px; margin-left: -3.5px;  width: 7px; height: 7px; border-radius: 7px; background: #293D7C;}
.company2 .history > div:last-of-type:before { content: ""; display: block; position: absolute; left: 50%; bottom: 52px; margin-left: -3.5px;  width: 7px; height: 7px; border-radius: 7px; background: #293D7C;}
.company2 .history > div:nth-of-type(odd) > div:last-child:after { content: ""; display: block; position: absolute; left: 37px; top: 0; margin-left: -13px;  width: 26px; height: 26px; border-radius: 26px; background: rgba(41, 61, 124, 0.4);}
.company2 .history > div:nth-of-type(odd) > div:last-child:before { content: ""; display: block; position: absolute; left: 37px; top:5px; margin-left: -8px;  width: 16px; height: 16px; border-radius: 13px; background: #293D7C;}
.company2 .history > div:nth-of-type(even) > div:first-child:after { content: ""; display: block; position: absolute; right: -50px; top: 0; margin-left: -13px;  width: 26px; height: 26px; border-radius: 26px; background: rgba(41, 61, 124, 0.4);}
.company2 .history > div:nth-of-type(even) > div:first-child:before { content: ""; display: block; position: absolute; right: -45px; top:5px; margin-left: -8px;  width: 16px; height: 16px; border-radius: 13px; background: #293D7C;}
.company2 .history > div { position: relative;}
.company2 .history > div:after { content: ""; display: block; clear: both;}
.company2 .history > div > div { position: relative; float: left; margin: 0 0 100px; width: calc(50% - 37px); }
.company2 .history > div:nth-of-type(odd) { text-align: right;}
.company2 .history > div:nth-of-type(odd) > div:last-child { padding-left: 74px;}
.company2 .history > div:nth-of-type(even) { }
.company2 .history > div:nth-of-type(even) > div:first-child { text-align: right;}
.company2 .history > div:nth-of-type(even) > div:last-child { padding-left: 74px;}
.company2 .history h4 { padding: 0 0 24px; font-size: 32px; line-height: 46px; font-weight: 500;}
.company2 .history ul li { padding: 0 0 16px; font-size: 16px; line-height: 24px; color: #616161;}
.company2 .history > div:nth-of-type(odd) > div:first-child,
.company2 .history > div:nth-of-type(even) > div:last-child { top: -10px;}

/* company3 */

.company3 { text-align: center;}
.company3 h3 { padding: 0 0 24px; font-size: 40px; line-height: 58px; text-align: center;}
.company3 > p { font-size: 16px; line-height: 24px; color: #616161;}
.company3 ul li { float: left; width: 19%; margin: 64px 0.5% 0;}

/* busines */

.business h3 { padding: 0 0 64px; font-size: 24px; line-height: 35px; font-weight: 500; text-align: center;}
.business ul li:after { content: ""; display: block; clear: both;}
.business ul li > div { float: left; width: 50%;}
.business ul li:nth-of-type(odd) > div:first-child { text-align: right;}
.business ul li:nth-of-type(odd) > div:last-child { padding: 85px 0 0 20px;}
.business ul li:nth-of-type(even) > div:first-child { padding: 85px 20px 0 0; text-align: right;}
.business.business_eng ul li:nth-of-type(odd) > div:last-child { padding: 65px 0 0 20px;}
.business.business_eng ul li:nth-of-type(even) > div:first-child { padding: 65px 20px 0 0; text-align: right;}
.business ul li h4 { padding: 0 0 16px; font-size: 32px; line-height: 38px; font-family: "Roboto";}
.business ul li p { font-size: 14px; line-height: 26px; color: #9E9E9E;}

/* come */

.come h3 { font-size: 24px; line-height: 35px; text-align: center; font-weight: 500;}
.come h3 b { font-weight: bold;}
.come ul { margin: 32px 0 64px; width: 100%; box-shadow: 0px 4px 12px #9E9E9E1F; text-align: center;}
.come ul li { display: inline-block; padding: 0 56px 0 0; font-size: 14px; line-height: 80px;}
.come ul li img { padding: 0 16px 0 0;}
.come iframe { width: 100%; height: 453px;}

/* email */

.email { padding: 150px 0; text-align: center;}
.email img { }
.email h3 { padding: 24px 0 16px; font-size: 24px; line-height: 35px; }
.email p { font-size: 18px; line-height: 30px;}

.sub_wrap #bo_list,
.sub_wrap #bo_v,
.sub_wrap #bo_w { font-size: 14px; line-height: 21px;}
.sub_wrap #bo_list tbody tr:hover { border-left: none;}
.sub_wrap #bo_list .td_name,
.sub_wrap .bo_tit { text-align: center;}

@media (min-width:0px) and (max-width:1200px) {

/* sub_visual */

.sub_visual { position: relative; margin-top: 79px; width: 100%; height: 250px;}
.sub_visual h2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 32px; line-height: 46px; color: #fff; text-align: center;}

/* sub_lnb */

.sub_lnb { width: 100%; border-bottom: 1px solid #E0E0E0;}
.sub_lnb > div { margin: 0; width: 100%; }
.sub_lnb > div > div { float: left; position: relative;}
.sub_lnb > div > div:after { content: ""; display: block; position: absolute; right: 0; top: 50%; transform: translate(0,-50%); width: 1px; height: 26px; background: #E0E0E0;}
.sub_lnb > div > div > a { display: block; padding: 0 20px; font-size: 14px; line-height: 40px; height: 40px;}
.sub_lnb > div > div:first-child > a { padding: 0;}
.sub_lnb > div > div.down > a { padding: 0 0 0 26px;}
.sub_lnb > div > div:last-child > a img { position: relative; top: -2px; transition: all 0.3s; width: 40px}
.sub_lnb > div > div ul { display: none; position: absolute; left: 0; top: 40px; z-index: 2; width: 100%; background: #fff;}
.sub_lnb > div > div ul li a { display: block; font-size: 14px; line-height: 40px; text-align: center; transition: all 0.2s;}

.sub_lnb_eng > div > div:nth-of-type(2) { display: none;}

/* sub_wrap */

.sub_wrap { width: 100%;}
.sub_wrap > div { margin: 0 auto; padding: 60px 16px; width: 100%;}

/* company1 */

.company1 { text-align: center;}
.company1 > h3 { font-size: 22px; line-height: 30px; word-break: keep-all;}
.company1 > p { position: relative; display: inline-block; margin: 30px 0; font-size: 14px; line-height: 22px; color: #212121; font-weight: 500;}
.company1 > p span:first-child { display: block; position: absolute; left: -15px; top: -3px; font-size: 22px; line-height: 35px; }
.company1 > p span:last-child { display: block; position: absolute; right: -15px; top: -3px; font-size: 22px; line-height: 35px; }
.company1 > span { display: block; font-size: 13px; line-height: 22px; color: #757575; word-break: keep-all;}
.company1 > span:nth-of-type(1) { padding: 0 0 24px;}
.company1 > span:nth-of-type(2) { padding: 0 0 12px;}
.company1 > span:nth-of-type(3) { padding: 0 0 60px;}
.company1 > em { font-size: 16px; line-height: 24px; font-style: normal; font-weight: bold;}
.company1 > em img { padding: 0 0 0 18px;}

.company1_eng h3 { font-size: 18px; line-height: 26px;}
.company1_eng > p { font-size: 13px; line-height: 18px;}

/* company2 */

.company2 h3 { padding: 0 0 60px; font-size: 32px; line-height: 46px; text-align: center;}
.company2 .history { position: relative;}
.company2 .history:after { content: ""; display: block; position: absolute; left: 50%; top: -30px; margin-left: -0.5px; width: 1px; height: 100%; background: #293D7C;}
.company2 .history:before { content: ""; display: block; position: absolute; left: 50%; top: -30px; margin-left: -3.5px;  width: 7px; height: 7px; border-radius: 7px; background: #293D7C;}
/* .company2 .history > div:last-of-type:before { content: ""; display: block; position: absolute; left: 50%; bottom: 52px; margin-left: -3.5px;  width: 7px; height: 7px; border-radius: 7px; background: #293D7C;} */
.company2 .history > div:last-of-type:before { display: none;}

.company2 .history > div:nth-of-type(odd) > div:last-child:after { content: ""; display: block; position: absolute; left: 17px; top: 0; margin-left: -6.5px;  width: 13px; height: 13px; border-radius: 26px; background: rgba(41, 61, 124, 0.4);}
.company2 .history > div:nth-of-type(odd) > div:last-child:before { content: ""; display: block; position: absolute; left: 17px; top:2px; margin-left: -4.5px;  width: 9px; height: 9px; border-radius: 13px; background: #293D7C;}

.company2 .history > div:nth-of-type(even) > div:first-child:after { content: ""; display: block; position: absolute; right: -23px; top: 0; margin-left: -6.5px;  width: 13px; height: 13px; border-radius: 26px; background: rgba(41, 61, 124, 0.4);}
.company2 .history > div:nth-of-type(even) > div:first-child:before { content: ""; display: block; position: absolute; right: -21px; top:2px; margin-left: -4.5px;  width: 9px; height: 9px; border-radius: 13px; background: #293D7C;}

.company2 .history > div { position: relative;}
.company2 .history > div:after { content: ""; display: block; clear: both;}
.company2 .history > div > div { position: relative; float: left; margin: 0 0 100px; width: calc(50% - 17px); }
.company2 .history > div:nth-of-type(odd) { text-align: right;}
.company2 .history > div:nth-of-type(odd) > div:last-child { padding-left: 35px;}
.company2 .history > div:nth-of-type(even) { }
.company2 .history > div:nth-of-type(even) > div:first-child { text-align: right;}
.company2 .history > div:nth-of-type(even) > div:last-child { padding-left: 35px;}
.company2 .history img { width: 100%;}
.company2 .history h4 { padding: 0 0 18px; font-size: 16px; line-height: 28px; font-weight: 500;}
.company2 .history ul li { padding: 0 0 12px; font-size: 12px; line-height: 20px; color: #616161; word-break: keep-all;}
.company2 .history > div:nth-of-type(odd) > div:first-child,
.company2 .history > div:nth-of-type(even) > div:last-child { top: -10px;}

/* company3 */

.company3 { text-align: center;}
.company3 h3 { padding: 0 0 24px; font-size: 32px; line-height: 46px; text-align: center;}
.company3 > p { font-size: 14px; line-height: 22px; color: #616161; word-break: keep-all;}
.company3 ul li { float: left; width: 49%; margin: 30px 0.5% 0;}
.company3 ul li img { width: 100%;}

/* busines */

.business h3 { padding: 0 0 40px; font-size: 20px; line-height: 35px; font-weight: 500; text-align: center; word-break: keep-all;}
.business ul li { margin: 0 0 30px;}
.business ul li:after { content: ""; display: block; clear: both;}
.business ul li > div { float: none; width: 100%;}
.business ul li:nth-of-type(odd) > div:first-child { text-align: left;}
.business ul li:nth-of-type(odd) > div:last-child { padding: 0 0 0 0;}
.business ul li:nth-of-type(even) { position: relative;}
.business ul li:nth-of-type(even) > div:first-child { padding: 170px 0 0 0; text-align: left;}
.business ul li:nth-of-type(even) > div:last-child { position: absolute; left: 0; top: 0;}
.business.business_eng ul li:nth-of-type(odd) > div:last-child { padding: 0;}
.business.business_eng ul li:nth-of-type(even) > div:first-child { padding: 170px 0 0; text-align: left;}
.business ul li h4 { padding: 20px 0 12px; font-size: 20px; line-height: 30px; font-family: "Roboto";}
.business ul li p { font-size: 12px; line-height: 24px; color: #9E9E9E; word-break: keep-all;}
.business ul li p br { display: none;}
.business ul li img { width: 100%; height: 170px;}

/* come */

.come h3 { font-size: 18px; line-height: 26px; text-align: center; font-weight: 500; word-break: keep-all;}
.come h3 br { display: none;}
.come h3 b { font-weight: bold; display: block;}
.come ul { margin: 24px 0 40px; padding: 0 0 0 32px; width: 100%; box-shadow: 0px 4px 12px #9E9E9E1F; text-align: left;}
.come ul li { display: block; padding: 12px 0; font-size: 12px; line-height: 28px;}
.come ul li img { padding: 0 16px 0 0;}
.come iframe { width: 100%; height: 250px;}

/* email */

.email { padding: 80px 0; text-align: center;}
.email img { }
.email h3 { padding: 18px 0 12px; font-size: 20px; line-height: 32px; }
.email p { padding: 0 16px; font-size: 14px; line-height: 28px; word-break: keep-all;}
.email p br { display: none;}

.sub_wrap #bo_list,
.sub_wrap #bo_v,
.sub_wrap #bo_w { font-size: 12px; line-height: 18px;}
.sub_wrap #bo_list tbody tr:hover { border-left: none;}
.sub_wrap #bo_list .td_name,
.sub_wrap .bo_tit { text-align: center; word-break: keep-all;}

.sub_wrap #bo_list thead th:nth-of-type(5),
.sub_wrap #bo_list thead th:nth-of-type(6) { display: none;}
.sub_wrap #bo_list tbody td:nth-of-type(5),
.sub_wrap #bo_list tbody td:nth-of-type(6) { display: none;}

}











/* /////////////////////////////////////// */