@charset 'utf_8';
/* 서브 비주얼과 제목 */
.sub_visual_sec {display: table; width: 100%; height: 30vh; background-position: center top; background-size: no-repeat; color: #fff; text-align: center; background-image: url('../images/sub-visual.jpg');}
.sub_visual_wrap { display: table_cell; width: 100%; height: 100%; padding-top: 100px; vertical-align: middle;}
.sub_visual_wrap h2 {padding-top: 20px; font-weight: 500; font-size: 2em;}
.sub_visual_wrap h3 { font-size: 1.4em;}
.sub_idea_sec h3, .sub_value_sec h3, .sub_vision_sec h3, .sub_cl_sec h3 { font-size: 1.8em;}
.sub_idea_sec h4 {padding-top: 60px; font-size: 1.2em;}
.sub_idea_sec { padding: 80px 0;}

/* lnb */
.sub_lnb_sec { background-color: #fff; border-bottom: 1px solid #e0e0e0; z-index: 100;}
.sub_lnb_sec.fixed { position: fixed; left: 0; top: 0; width: 100%; border-top: 1px solid #e0e0e0;}

.sub_lnb > li { float: left; width: 200px;}
.sub_lnb > li > a { line-height: 60px;}
.sub_lnb a { display: block; color: #000;}
.sub_lnb a:hover { color: #103997;}

.sub_lnb > .home {width: 60px; line-height: 0;}
.sub_lnb > .home > a { background-color: #000; color: #fff; text-align: center;}
.lnb_depth1 { position: relative;}
.lnb_depth1 > a { padding: 0 30px; border-right: 1px solid #e0e0e0; font-size: 1.1em;}
.lnb_depth1 > a > i { float: right; line-height: inherit;}
.lnb_depth2 { display: none; position: absolute; left: 0; width: 100%; padding: 10px 0 40px; border: 1px solid #e0e0e0; background-color: #fff; z-index: 1;}
.lnb_sub_menu .lnb_depth2 { width: calc(100% + 1px); left: -1px;}
.lnb_depth2 a { padding-left: 10px; line-height: 2;}
.lnb_btn.inverse i { transform: rotate(180deg);}

/* idea_sec */
h3 + p {font-size: 1.2em; color: #103997; text-align: center;}
.wh h3 + p, h3.wh + p {color: #fff0e0;}
.sub_idea_sec { width: 100%; padding: 60px 0 120px;}
.sub_idea_sec > p { padding-bottom: 60px; text-align: center;}
.sub_idea_sec p {}
.sub_idea1 { padding-bottom: 40px;}
.sub_idea2 li {float: left; width: 32%;}
.sub_idea2 li:nth-child(2) {margin: 0 2%;}
.sub_idea2 dl {padding: 32px;}
.sub_idea2 dt {margin-bottom: 10px; font-size: 1.2em; font-weight: 500; color:#fff0e0;}
.sub_idea2 dt:before {content: ''; display: block; width: 40px; height: 1px; background-color:#fff0e0; margin-bottom: 8px; opacity: 0.5;}
.sub_idea2 dd {color: #fff;}
.bl1 { background-color: #1e2643; }
.bl2 { background-color: #202b55; }
.bl3 { background-color: #1b2960; }

/* value_sec */
.sub_value_sec { padding: 80px 0 0; background: url('../images/s2_img.jpg') no-repeat; background-size: cover; background-position: center top; text-align: center; color: #fff;}
.sub_value_con { position: relative;}
.sub_value_con p { text-align: center;}
.sub_value { }
.sub_value_wrap {height: 100%; padding: 30px 0 70px;}
.sub_value_wrap li { float: left; width: 18%; margin: 1%;}
.sub_value_wrap dl { position: relative; overflow: hidden; margin-bottom: 50px;}
.sub_value_wrap img { width: 50%; padding: 20px 0 ;}
.sub_value_wrap .value_subject {font-size: 1.2em; color: #fff0e0;}
.sub_value_wrap dd{ padding-top: 20px; color: #fff;}

/* vision_sec */
.sub_vision_sec {position: relative; width: 100%; height: 700px; background-color: #f5f5f5;}
.sub_vision_sec h3 {padding: 70px 0 40px 100px; text-align: left;}
.sub_vision_sec .wrap {}
.vision_info {float: left; width: 400px; padding: 30px 0; padding-left: 100px; margin-right: 60px;}
.sub_vision_wrap {position: absolute; left: calc((100% - 1560px) / 2 + 460px); top: 150px; width: calc(100% - ((100% - 1560px) / 2 ) - 460px);}
.sub_vision_wrap .slick-list { padding: 10px !important;}
.sub_vision .sub_vision_img {width: 360px; height: 400px; margin: 0 20px;  background-repeat: no-repeat; background-position: center top; background-size: contain; box-shadow: 3px 3px 5px  rgba(0,0,0,0.2);} 
.sub_vision .sub_vision_img:before {content: ''; display: block; width: 100%; height: 50%; background-position: center top; background-size: cover; }

.slick-wrap {}
.slick-item {background-color: #fff; }
.sub_vision .sv1:before {background-image: url('../images/vision_1.jpg');}
.sub_vision .sv2:before {background-image: url('../images/vision_2.jpg');}
.sub_vision .sv3:before {background-image: url('../images/vision_3.jpg');}
.sub_vision .sv4:before {background-image: url('../images/vision_4.jpg');}
.sub_vision .sv5:before {background-image: url('../images/vision_5.jpg');}
.accent_txt {padding: 24px 24px 10px; color: #1E2643; font-weight: 700; font-size: 1.1em;}
.slogan {padding: 0 24px;}
.sub_vision li span {display: block; word-break:keep-all;}
.arrows {position: relative; width: 88px; height: 40px; margin-top: 30px;}
.slick-arrow {width: 40px; height: 40px;  border: 1px solid #ddd;   font-size: 0;  text-indent: 0;  cursor: pointer; z-index: 100;}
.slick-prev {position: absolute; bottom: 0; left: 0; background: url('../images/v_prev_grey.png')no-repeat;  background-size: 50%; background-position: center center; }
.slick-next {position: absolute; bottom: 0; right: 0; background: url('../images/v_next_grey.png')no-repeat; background-size: 50%; background-position: center center; }
.slick-dots {position: absolute; bottom: -30px; left: 10px;}
.slick-dots li {display: inline-block; margin-right: 6px;}
.slick-dots button { width: 24px; height: 4px; border:transparent; font-size: 0; text-indent: -999; line-height: 0; background-color: #ddd;}
.slick-dots .slick-active button {width: 36px; background-color: #1E2643;}


/* cl_sec */
.sub_cl_sec {height: 680px; background-image: url('../images/cl_bg.png'); background-repeat: no-repeat; background-size: cover; }
.sub_cl_sec .wrap {width: 1200px; padding: 150px 0;}
.sub_cl_box {float: left; padding: 40px 70px 70px 40px; border: 3px solid #03277D; background-color: #fff;}
.sub_cl_sec h3 {  text-align: left;}
.sub_cl_sec p {font-size: 1.2em;}
.sub_cl_wrap {float: left; margin-left: 60px;}
.sub_cl_wrap dt img {width: 200px;}
.sub_cl_wrap dd {line-height: 25px; }

.sub_cl_wrap dd:first-of-type {padding-top: 40px; padding-bottom: 30px; font-size: 1.2em;}
.sub_cl_wrap dd span {color: #0F3183; font-weight: bold;}
.sub_cl_wrap dd em {font-style: normal; font-size: 1.2em; line-height: 2.4; color: #03277D; font-weight: 500;}

@media screen and (max-width:1439px) {
    .sub_vision_wrap {position: absolute; left: calc((100% - 1280px) / 2 + 460px); top: 150px; width: calc(100% - ((100% - 1280px) / 2 ) - 460px);}

}