/* *******************************************************
* filename : common.css
* description : 서브 css
* date : 2022-03-02
******************************************************** */
@charset "UTF-8";

/*---------- 공통 css ----------*/
.sub_visual {width: 100%; height: 470px; background-repeat: no-repeat; background-size: cover; background-position: center;}
.sub_visual.visual1 {background-image: url(../img/sub_visual01.png);}
.sub_visual.visual2 {background-image: url(../img/sub_visual02.png);}
.sub_visual.visual3 {background-image: url(../img/sub_visual03.png);}
.sub_visual.visual4 {background-image: url(../img/sub_visual04.png);}
.sub_visual.visual5 {background-image: url(../img/sub_visual05.png);}
.sub_visual.visual6 {background-image: url(../img/sub_visual03.png);}

.sub_visual .inner {width: 1300px; min-width: 1300px; margin: 0 auto; height: 100%; padding-top: 90px; display: flex; flex-direction: column; justify-content: center;}
.sub_visual .navi_wrap {color: #fff; display: flex; height: 20px;}
.sub_visual .navi_wrap .ic_home {margin-right: 40px; font-size: 16px; position: relative;}
.sub_visual .navi_wrap .ic_home::before {content:" "; display: block; width:1px; height: 14px; background:#fff; opacity:.3; position: absolute; right: -20px; top: 2px;}
.sub_visual .navi_wrap .depth {width: 180px; position: relative; margin-right: 40px; background: url(../img/arrow-down.png) no-repeat center right / 12px;}
.sub_visual .navi_wrap .depth::before {content:" "; display: block; width:1px; height: 14px; background:#fff; opacity:.3; position: absolute; right: -20px; top: 2px;}
.sub_visual .navi_wrap .depth:last-child::before {display: none;}
.sub_visual .navi_wrap .depth.prd_depth2, .sub_visual .navi_wrap .depth.prd_depth3 {width: 240px;}
.sub_visual .navi_wrap .depth_tit {cursor: pointer; font-size: 16px; font-weight: 300; margin-bottom: 8px;}
.sub_visual .navi_wrap .depth_menu {width: 100%; height: auto; display: none; background: rgba(255, 255, 255, 0.8); padding: 10px 0;}
.sub_visual .navi_wrap .depth_menu > li {padding: 8px 10px;}
.sub_visual .navi_wrap .depth_menu > li > a {font-size: 15px; color: #444; transition: color .2s;}
.sub_visual .navi_wrap .depth_menu > li > a:hover {color: #292f70;}

.sub_visual .visual-tit {font-weight:400; font-size:56px; line-height:1.2; letter-spacing: -2px; color: #fff; margin-top: 20px;}


/* 페이지 제목 */
.page_container {width: 100%;}
.page_container .page_tit {margin-top: 118px; margin-bottom: 95px;}
.page_container .page_tit h3 {font-size: 40px; font-weight: 600; position: relative; text-align: center;}
.page_container .page_tit h3::before {content:" "; display: block; position: absolute; left: 50%; bottom: -40px; transform: translateX(-50%); width: 8px; height: 8px; background-color: #292f70; border-radius: 50%;}



/*---------- vision 비전 ----------*/
.vision {width: 100%;}

.vision .img_wrap {width: 100%; height: 508px; background: url(../img/vision-bg01.png) no-repeat center / cover; text-align: center;}
.vision .img_wrap .inner {width: 1300px; min-width: 1300px; height: 100%; margin: 0 auto; display: flex; justify-content: center; align-items: center;}
.vision .img_wrap span {font-size: 22px; color: #8085c8; line-height: 1.4;}
.vision .img_wrap span:nth-of-type(1) {text-align: right; margin-right: 40px;}
.vision .img_wrap strong {background-color: #383aa9; margin-right: 40px; color: #fff; font-size: 22px; font-weight: 300; display: block; width: 166px; height: 166px; line-height: 1.6; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.vision .img_wrap strong b {display: block; font-weight: 500;}
.vision .img_wrap h4 {font-size: 38px; width: 296px; height: 296px; border-radius: 50%; background: #fff; font-weight: 500; margin-right: 40px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.vision .img_wrap h4::before {content: " "; display: block; width: 115%; height: 115%; border: 5px dotted rgba(255, 255, 255, 0.2); border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.vision .img_wrap h4 span {color: #292f70; font-size: 38px; margin-right: 0 !important; line-height: 1.2;}

.vision .table_wrap {width: 1300px; min-width: 1300px; margin: 0 auto; padding: 82px 0 115px;}
.vision .table_wrap table {width: 100%;}
.vision .table_wrap caption {font-size: 28px; font-weight: 600; color: #292f70; text-indent: 10px; text-align: left; margin-bottom: 40px;}
.vision .table_wrap tr {border-top: 1px solid rgba(0, 2, 20, 0.2);}
.vision .table_wrap tr:last-child {border-bottom: 1px solid rgba(0, 2, 20, 0.2);}
.vision .table_wrap th {width: 45%; font-size: 22px; text-align: left; padding: 0 10px;}
.vision .table_wrap th b { font-weight: 600; line-height: 1.6;}
.vision .table_wrap th span {font-weight: 400; line-height: 1.6;}
.vision .table_wrap td {width: 55%; font-size: 18px; color: #777777; line-height: 1.6; padding: 48px 0;}
.vision .table_wrap em {font-size: 28px; font-weight: 300; color: #333333;}
.vision .table_wrap b {font-weight: 400;}
.vision .table_wrap strong {font-weight: 600;}
.vision .table_wrap p {margin-top: 30px;}