@charset "utf-8"; /* *******************************************************
 * filename : sub-style.css
 * description : 서브 페이지 전체 레이아웃 CSS
 * date : 2021-01-11
******************************************************** */
.point_tx { color: #a0d103; font-weight: 500; font-style: normal; } 
/* ****************** SUB LAYOUT COMMON ********************** */
/* SUB LAYOUT :: 비주얼 */
#sub_content { padding-bottom:100px; } 
#visual { position:relative; overflow:hidden; height:380px } 
#visual .visual-inner { overflow:hidden; position:relative; height:100%; } 
#visual .visual-img-con { position:absolute; top:0px; left:0px; width:100%; height:100%; background-size:cover !important; -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); -webkit-transition:transform 5000ms ease-in-out; transition:transform 5000ms ease-in-out; background-repeat:no-repeat; background-position:50% 0 } 
#visual .visual-txt-con { position:relative; z-index:1; display:table; width:100%; height:100%; color:#fff; } 
#visual .visual-txt-con .table-cell-layout { /*vertical-align:bottom; */ } 
#visual .visual-txt-container { position:relative; width:100%; text-align:center; } 
#visual .visual-tit,#visual .hs_top_tit, #visual .visual-subtitle,
#visual .visual-sub-txt { overflow:hidden; opacity:0; } 
#visual .visual-subtitle { font-size:15px; display:block; margin-bottom:18px; text-transform: uppercase; letter-spacing:2px } 
#visual .visual-tit,#visual .hs_top_tit { font-weight:500; font-size:45px; letter-spacing:-1px; -webkit-transition-delay:0.3s; transition-delay:0.3s; } 
#visual .visual-sub-txt { font-size:18px; font-weight:300; margin-top:20px; -webkit-transition-delay:0.5s; transition-delay:0.5s; color:rgba(255,255,255,0.8); } 
#visual .visual-tit,#visual .hs_top_tit, .char, #visual .visual-subtitle .char,
#visual .visual-sub-txt .word { display:inline-block; opacity:0; } 
#visual .visual-tit,#visual .hs_top_tit,.splitting, #visual .visual-subtitle.splitting,
#visual .visual-sub-txt.splitting { opacity:1.0; } 
#visual .visual-tit,#visual .hs_top_tit,.splitting .char, #visual .visual-subtitle.splitting .char,
#visual .visual-sub-txt.splitting .word { animation: slide-up 1.25s cubic-bezier(.5,.2,0,1); animation-fill-mode: both; animation-delay: calc( .5s + (.05s * var(--char-index)) ); } 
#visual .visual-sub-txt.splitting .word { animation-delay: calc( .5s + (.05s * var(--word-index)) ); } 
@keyframes slide-up { 
 from { opacity:0; transform: translateY(125%); } 
to { opacity:1.0; transform: translateY(0); } 
 }
/* SUB LAYOUT :: 상단효과 active */
#visual.active .visual-img-con { -webkit-transform: scale(1.0,1.0) rotate(0.002deg); transform: scale(1.0,1.0) rotate(0.002deg); } 
/* SUB LAYOUT :: 비주얼 이미지*/
#visual.sub_visual1 .visual-img-con { background-image:url(../../img/sub_visual01.jpg); } 
#visual.sub_visual2 .visual-img-con { background-image:url(../../img/sub_visual02.jpg); } 
#visual.sub_visual3 .visual-img-con, #visual.sub_visual4 .visual-img-con { background-image:url(../../img/sub_visual03.jpg); } 
#visual.sub_visual5 .visual-img-con { background-image:url(../../img/sub_visual05.jpg); } 

/* hspump - sub menu */
/* sub 중단메뉴 hspump 수정 */
.main_depth { width: 100%; height: 60px; position: relative; border-bottom: 1px solid #dddddd; background: #fff; } 
.main_depth_wrap { width: 1200px; height: 60px; margin: 0 auto; position: relative; } 
.main_depth .home_box { width: 60px; height: 60px; float: left; border-left: 1px solid #ddd; border-right: 1px solid #ddd; background-color: #3383d0; } 
.main_depth .home_box a { display: block; width: 100%; height: 100%; background: url(../../img/home_icon.png) no-repeat center; } 
.main_depth .main_selector { width: 214px; height: 60px; float: left; border-right: 1px solid #dddddd; position: relative; z-index: 8; font-weight: 500; font-family: 'Noto Sans KR'; } 
.main_depth .main_selector a { display: block; width: 100%; height: 100%; padding: 0 0 0 25px; font-size: 16px; line-height: 60px; color: #222; } 
.main_depth .depth1>a { background: #fff url(../../img/gnb_bg.gif) no-repeat 180px center; border-bottom: 1px solid #dddddd; } 
.main_depth .depth2>a { background: #ffffff; color: #282828; background: url(../../img/gnb_bg.gif) no-repeat 180px center; } 
.main_depth .depth3>a { background: #ffffff; color: #282828; background: url(../../img/gnb_bg.gif) no-repeat 180px center; } 
.main_depth .main_selector.depth2 a.blue { color: #3383d0; } 
.main_depth .main_selector.depth3 a.blue { color: #3383d0; } 
.main_depth .sub_selector { display: block; width: 100.5%; height: auto; padding: 10px 0; background: #fff; position: absolute; top: 60px; left: 0; display: none; border: 1px solid #dddddd; border-top: none; } 
.main_depth .sub_selector a { line-height: 50px; color: #222; font-weight: 400; } 
.main_depth .sub_selector a:hover { color: #3383d0; } 
.main_depth .depth2.depth_pro .sub_selector { width: 285px; } 
.main_depth .depth2 .sub_selector { background: #fff; } 
.main_depth .depth_pro .sub_selector { background: #3383d0; } 
.main_depth .main_selector:hover > a { color: #3383d0; } 

/* SUB LAYOUT :: 서브메인 타이틀(스타일) */
.title-area { position:relative; margin-top:80px; margin-bottom:50px } 
.ptit01,.ptit02,.ptit_sub { display:inline-block; position:relative; font-size:43px; letter-spacing:-1.2px; color:#222 } 
.ptit01:after, .ptit02:after, .ptit_sub:after { content:''; display:inline-block; width:10px; height:10px; position:absolute; bottom:-5px; vertical-align:bottom; border-radius:3px; background:#3383d0; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); opacity:0; -webkit-animation:underline 1s 0.2s 1 forwards linear; animation:underline 1s 0.2s 1 forwards linear; -webkit-transform:rotate(0); -ms-transform:rotate(0); transform:rotate(0) } 
.ptit01.none-mark::after, .ptit02.none-mark::after { content:none } 
@-webkit-keyframes underline { 
 0% { opacity:0.3; width:0; left:0; -webkit-transform:rotate(0); transform:rotate(0); -webkit-animation-timing-function:cubic-bezier(0.04, 0.59, 0.29, 1.01); animation-timing-function:cubic-bezier(0.04, 0.59, 0.29, 1.01) } 
35% { opacity:0.5; width:100%; left:0; -webkit-transform:rotate(0); transform:rotate(0); -webkit-animation-timing-function:cubic-bezier(0.04, 0.59, 0.29, 1.01); animation-timing-function:cubic-bezier(0.04, 0.59, 0.29, 1.01) } 
90% { opacity:0.7; width:10px; left:100%; margin-left:15px; -webkit-transform:rotate(0); transform:rotate(0) } 
100% { opacity:1; width:10px; height:10px; left:100%; margin-left:15px; -webkit-transform:rotate(45deg); transform:rotate(45deg) } 
 }
@keyframes underline { 
 0% { opacity:0.3; width:0; left:0; -webkit-transform:rotate(0); transform:rotate(0); -webkit-animation-timing-function:cubic-bezier(0.04, 0.59, 0.29, 1.01); animation-timing-function:cubic-bezier(0.04, 0.59, 0.29, 1.01) } 
35% { opacity:0.5; width:100%; left:0; -webkit-transform:rotate(0); transform:rotate(0); -webkit-animation-timing-function:cubic-bezier(0.04, 0.59, 0.29, 1.01); animation-timing-function:cubic-bezier(0.04, 0.59, 0.29, 1.01) } 
90% { opacity:0.7; width:10px; left:100%; margin-left:15px; -webkit-transform:rotate(0); transform:rotate(0) } 
100% { opacity:1; width:10px; height:10px; left:100%; margin-left:15px; -webkit-transform:rotate(45deg); transform:rotate(45deg) } 
 }
.sub_title2 h2 { color: #222; font-size: 35px; } 
.sub_title2 h2 span { color:#3383d0; font-size:40px } 
.sub_title2 p { font-size: 17px; line-height: 1.5; margin-top:15px } 
.title-area .pro_info { position:absolute; right:0; bottom:0; font-size:14px; font-weight:500; color:#c00 } 

/* SUB LAYOUT :: 서브 탭 버튼(스타일) */
.tab_area, .cm-tab-con { width:100%; box-sizing:border-box; } 
.tab_area ul, .cm-tab-con ul { width:100%; } 
.tab_area ul li, .cm-tab-con ul li { float:left; box-sizing:border-box; border:1px solid #ddd; margin-left:-1px } 
.tab_area ul li a, .cm-tab-con ul li a { display:block; line-height:50px; font-size:16px; color:#666; font-weight:400; text-align:center; } 
.tab_area ul li a#bo_cate_on, .cm-tab-con ul li.selected a { color:#fff; background:#3383d0; border-color:#3383d0; } 
.tab_area ul li:hover a, .cm-tab-con ul li:hover a { background:rgba(233,233,233,0.6) } 

/* ****************** SUB LAYOUT 개별적 ********************** */
/* SUB LAYOUT :: ceo 인사말 */
.greeting-content { position:relative; } 
.greeting-content:after { width:100%; content:""; display:block; height:57%; background:#f1f1f1; position:absolute; left:0; bottom:0; z-index:-1 } 
.greeting-content > div > div { float:left; width:57%; box-sizing:border-box; } 
.greeting-content > div > div.img_area { width:43% } 
.greeting-content > div > div.img_area > img { max-width:100%; } 
.greeting-content > div > div.text_area .top_box { padding:40px 0; } 
.greeting-content > div > div.text_area h3 { font-size: 23px; color: #333; padding: 50px 45px 45px 125px; line-height: 1.5; border: 1px solid #ccc; border: 1px solid #ddd; position: relative; left: -50px; width:calc(100% + 50px); margin-bottom: 30px; } 
.greeting-content > div > div.text_area h3 span { color:#3383d0 } 
.greeting-content > div > div.text_area h3 > p { position:relative; } 
.greeting-content > div > div.text_area h3 >p:before, .greeting-content > div > div.text_area h3 >p:after { content:""; display:block; position:absolute; background:url(../../img/slg_dot.png) no-repeat center; width:50px; height:43px; z-index:-1 } 
.greeting-content > div > div.text_area h3 >p:before { left: -22px; top: -16px; } 
.greeting-content > div > div.text_area h3 >p:after { right: 35px; bottom: -10px; transform: rotate(-180deg); } 
.greeting-content > div > div.text_area .top_box > p { font-size:17px; color:#333; line-height:1.7; } 
.greeting-content > div > div.text_area .top_box > p, .greeting-content > div > div.text_area .bottom_box { padding-left:50px; box-sizing:border-box; } 
.greeting-content > div > div.text_area .bottom_box { padding: 30px 0 60px 50px; } 
.greeting-content > div > div.text_area .bottom_box h4 { color: #3383d0; font-size: 18px; padding-bottom: 60px; } 
.greeting-content > div > div.text_area .bottom_box p { font-size:16px; line-height:1.7; word-break:keep-all; } 
.greeting-content > div > div.text_area .bottom_box p.sign { text-align:right; font-size:23px; color:#444; } 
.greeting-content > div > div.text_area .bottom_box p.sign strong { font-weight:500; color:#333; margin: 0 35px 0 15px; } 
.vision_area { padding-top:100px } 
.vision_area ul { margin-top:65px } 
.vision_area ul li { float:left; width:calc(33.333% - 28px); box-sizing:border-box; border:1px solid #ddd; padding:35px 20px; text-align:center; min-height:340px } 
.vision_area ul li:first-child~* { margin-left:40px } 
.vision_area ul li .icon { box-sizing:border-box; } 
.vision_area ul li dl dt { font-size:22px; font-weight:600; color:#444; margin: 20px 0; } 
.vision_area ul li dl dt span { color:#3383d0 } 
.vision_area ul li dl dd { font-size:17px; line-height:1.5; color:#333; word-break:keep-all; } 

/* SUB LAYOUT :: 연혁 */
.history-content .conwrap { } 
.history-content .conwrap .titlearea { height: 310px; background:url(../../img/img_history_banner.jpg) no-repeat center; background-size: cover; text-align: center; display:table; width:100% } 
.history-content .conwrap .titlearea > div { display:table-cell; vertical-align:middle; height:100%; width:100%; } 
.history-content .conwrap .titlearea h4 { font-size: 53px; color: #fff; font-weight: 600; position:relative; padding-bottom:15px; margin-bottom:15px } 
.history-content .conwrap .titlearea h4:after { position: absolute; bottom: -1px; left: 50%; width: 0; height: 3px; background-color:#3383d0; content: ""; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; -ms-transition: all 0.4s; transition: all 0.4s; transform:translateX(-50%); transition-delay:1s } 
.history-content .conwrap .titlearea h4.aos-animate:after { width:45px; } 
.history-content .conwrap .titlearea p { font-size:16px; color:#fff; line-height:1.7; margin-top:10px } 
.history-content .conwrap .history { position:relative; padding: 70px 0 220px 0; border-bottom: 1px solid #ddd; overflow:hidden; } 
.history-content .conwrap .history:after { content: "HISTORY"; display: block; position: absolute; left: 50%; bottom: 0; font-size: 220px; color: #e5e5e5; opacity: 0.2; transform: translateX(-50%); font-weight: 900; letter-spacing: -1px; margin-bottom: -40px; } 
.history-content .conwrap .history:before { display:block; content:""; width:1px; height:100%; border-right: 2px dotted #e3e3e3; position:absolute; left:50%; top:0; } 
.history-content .conwrap .history>ul { } 
.history-content .conwrap .history>ul>li { box-sizing:border-box; position:relative; width:50%; margin-bottom:65px; } 
.history-content .conwrap .history>ul>li:before { display:block; content:""; width:4px; height:4px; border:4px solid #3383d0; position:absolute; top:16px; z-index:1; box-sizing:content-box; background:#fff; } 
.history-content .conwrap .history>ul>li:after { display: block; content: ""; width: 48px; height: 1px; background: #c3c3c3; position: absolute; top: 21px; } 
.history-content .conwrap .history>ul>li:nth-child(odd) { margin-left:50%; text-align:left; padding-left:75px; } 
.history-content .conwrap .history>ul>li:nth-child(even) { margin-right:50%; text-align:right; padding-right:75px; } 
.history-content .conwrap .history>ul>li:nth-child(odd):before { left:-5px; } 
.history-content .conwrap .history>ul>li:nth-child(even):before { right:-7px; } 
.history-content .conwrap .history>ul>li:nth-child(odd):after { left:0 } 
.history-content .conwrap .history>ul>li:nth-child(even):after { right:0 } 
.history-content .conwrap .history>ul>li .year { margin:0 0 30px; font-size:40px; color:#3383d0; font-weight:600; position:relative; } 
.history-content .conwrap .history>ul>li .year:after { } 
.history-content .conwrap .history>ul>li .list { } 
.history-content .conwrap .history>ul>li .list p { font-size:18px; color:#333; margin-bottom: 20px; padding-right: 10px; } 
.history-content .conwrap .history>ul>li .list p span { color:#3383d0; font-weight:bold; font-size: 18px; } 
.history-content .conwrap .history>ul>li .right p span { padding-right: 10px; } 
.history-content .conwrap .history .his_right_txt { position: relative; } 
.history-content .conwrap .history .his_right_txt>p { position: absolute; right: 20px; font-size:18px; color:#333; } 
.history-content .conwrap .history .his_right_txt>span { position: absolute; right: 0; color:#3383d0; font-weight:bold; font-size: 18px; } 
.history-content .conwrap .history>ul>li .left .his_right_txt:nth-child(2) { top: 2.5rem; } 
.history-content .conwrap .history>ul>li .left .his_right_txt:nth-child(3) { top: 5rem; } 





/* 조직도 */
.oraganization-area { width: 1100px; margin: 0 auto; } 
.oraganization-area>img { width: 100%; } 

/* SUB LAYOUT :: 찾아오시는 길 */
table.contentsTable { width:100%; border-top:2px solid #3383d0; margin-top: 40px; } 
table.contentsTable thead { font-weight:400; background:#fff; } 
table.contentsTable thead th { padding:10px; border-bottom:1px solid #d9d9d9; border-right:1px solid #d9d9d9; vertical-align:middle; color:#4c4c4c; font-size:16px; } 
table.contentsTable thead th:last-child { border-right:0 } 
table.contentsTable tbody { vertical-align:middle; text-align:center; } 
table.contentsTable tbody tr { border-bottom:1px solid #d9d9d9; } 
table.contentsTable tbody tr th { padding:10px; border-right:1px solid #d9d9d9; vertical-align:middle; font-size:16px; color:#4c4c4c; background:#f8f8f8; font-weight: 400; } 
table.contentsTable tbody tr td { font-size: 0.9rem; padding:10px; border-right:1px solid #d9d9d9; vertical-align:middle; line-height:1.6; color:#666; font-weight: 400; text-align:left; text-indent:15px } 
table.contentsTable tbody tr td:last-child { border-right: none; } 

/* SUB LAYOUT :: as 정책 */
.gray_round { display: table; width: 100%; background: #f4f4f4; padding: 24px 30px 20px; border-radius: 47px; } 
.gray_round .label_area { display: table-cell; position: relative; width: 180px; font-size: 20px; font-weight: 700; color: #222; text-align: center; padding-right: 10px; vertical-align: middle; } 
.gray_round .ic_loc { width: 37px; height: 36px; background:url(../../img/iconFaq_off.png) no-repeat; margin-right: 8px; position: relative; top: -2px; display:inline-block; vertical-align:middle } 
.gray_round .label_area:after { content: ""; display: block; position: absolute; top: 50%; margin-top: -25px; right: 0; width: 1px; height: 50px; background: #e2e2e2; } 
.gray_round .txt_area { display: table-cell; vertical-align: middle; padding-left: 50px; font-size:16px } 
.cs_way { margin-top:45px } 
.cs_way .tt { font-size: 21px; font-weight: 500; color: #2c2c2c; margin-bottom: 15px; border-bottom: 1px solid #ddd; } 
.cs_way .tt span { display:inline-block; padding-bottom: 15px; border-bottom:3px solid #222 } 
.cs_way .txt { font-size: 16px; color: #666; margin-bottom: 50px; line-height: 1.7; word-break: keep-all; padding-right: 10%; } 
.as_btn_box { padding: 20px; border: 1px solid #ccc; } 
.as_btn_box .txt { float: left; line-height: 60px; font-size: 17px; color: #777; padding-left: 35px; background: url(../../img/as_txt_icon.png) no-repeat left center; } 
.as_btn_box .btn_inc { float: right; width: 150px; background:#3383d0; color:#fff; display: inline-block; text-align: center; width: 160px; height: 60px; line-height: 60px; box-sizing: border-box; font-size: 16px; font-weight: 700; color: #fff; } 


/* SUB LAYOUT :: 온라인문의 */
.inquiry-style07-agree-con { margin-bottom:50px; } 
.inquiry-style07-agree-con .agree-tit { color:#444; font-size:22px; letter-spacing:-0.75px; font-weight:500; padding-bottom:15px; } 
.inquiry-style07-agree-box { border:1px solid #cecece; height:130px; overflow-y:auto; overflow-x:hidden; background-color:#fff; } 
.inquiry-style07-agree-con .agree-txt { font-size:15px; line-height:20px; padding:13px 25px; letter-spacing:-0.65px; color:#414141; background-color:#f1f1f1; border:1px solid #cecece; border-top:0; } 
.inquiry-style07-agree-box textarea { display: block; width: 100%; height: 100%; border: 0; padding: 20px; box-sizing: border-box; line-height: 1.8; } 
.inquiry-style07-agree-con .agree-txt span { color:#0066cc; font-weight:500; } 
.inquiry-style07-essential-txt { text-align:right; color:#373737; font-size:13px; letter-spacing:-0.3px; padding-bottom:15px; } 
.inquiry-style07-essential-icon { color:#0066cc; font-size:15px; } 
/* 문의하기 01 :: 쓰기, 문의폼 :: 작성영역 */
.inquiry-tbl-style07 { width:100%; } 
.inquiry-tbl-style07 .write-input,
.inquiry-tbl-style07 .write-select,
.inquiry-tbl-style07 .write-textarea { height:50px; border:0px; width:50%; background-color:#fff; border:1px solid #d2d2d2; font-size:14px; vertical-align:middle; } 
.inquiry-tbl-style07 .write-input:focus { border-color:#333; } 
.inquiry-tbl-style07 .write-input { text-indent:10px; } 
.inquiry-tbl-style07 .write-select { height:54px; } 
.inquiry-tbl-style07 .write-textarea { width:100%; height:200px; resize:none; padding:20px 10px; text-indent:0px; } 
.inquiry-tbl-style07-container { width:100%; } 
.inquiry-tbl-style07-con { width:100%; padding:20px 0; } 
.inquiry-tbl-style07-con dt { font-size:20px; color:#444; font-weight:500; letter-spacing:-0.65px; padding-bottom:6px; } 
.inquiry-tbl-style07-2col { display:table; width:100%; } 
.inquiry-tbl-style07-2col > .inquiry-tbl-style07-con { display:table-cell; vertical-align:top; width:33.333%; padding-left:3%; } 
.inquiry-tbl-style07-2col > .inquiry-tbl-style07-con:first-child { padding-left:0; /*padding-right:3%; */ } 
.inquiry-tbl-style07-2col > .inquiry-tbl-style07-con .write-input { width:100%; } 

/* 문의하기 01 :: Custom checkbox */
.inquiry-style04-custom-checkbox { margin:0 -15px; } 
.inquiry-style04-custom-checkbox .checkbox-item { display:inline-block; vertical-align:middle; margin:3px 15px; } 
.inquiry-style04-custom-checkbox .checkbox-item input[type="radio"] { display:none; } 
.inquiry-style04-custom-checkbox .checkbox-item label { display:inline-block; position:relative; vertical-align:middle; color:#949494; font-size:15px; line-height:27px; letter-spacing:-0.65px; } 
.inquiry-style04-custom-checkbox .checkbox-item label i { font-size:24px; margin-right:5px; position:relative; top:-1px; } 
.inquiry-style04-custom-checkbox .checkbox-item input[type="radio"]:checked + label { color:#f36f21; } 
.cm-btn-controls { overflow: hidden; text-align: center; padding-top: 30px; } 
.cm-btn-controls input, .cm-btn-controls a { display: inline-block; width: 268px; height: 64px; border: 0; color: #fff; background-color:#3383d0; font-size: 18px; margin: 0 2px 5px 2px; cursor: pointer; vertical-align: top; text-align: center; font-weight: 400; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; } 

.top_area .pro_infoWrap p span { color:#666; } 
.top_area .pro_infoWrap p span i { color: #a0d103; font-weight: 500; font-style:normal } 
.top_area .pro_infoWrap p span i.xi-error-o { position: relative; top: 3px; font-size: 19px; } 
.top_area .pro_infoWrap p span em { font-size:15px; margin-top:10px } 

/* 제품소개 product */
.product-content { width: 1200px; margin: 0 auto; } 
.product-content .product-top { display: flex; } 
.product-content .product-top .img-area { width: 50%; border: solid #3333 1px; } 
.product-content .product-top .img-area>img { border: 0; display: block; margin: 40px auto; padding: 50px;} 

.product-top .text-area .top-box>h3 { font-size: 28px; color: #3383d0; padding-bottom: 20px; } 
.product-top .text-area .top-box>p {font-size: 35px;padding-bottom: 12px;display: inline-block;word-break: keep-all;text-decoration: underline;text-underline-position: under;text-decoration-thickness: 1px;text-decoration-color: #3383d0;}
.product-top .text-area { width: 50%; margin-left: 5%; } 

.product-top .bottom-box>h4 { font-size: 24px; padding: 20px 0; } 
.product-top .bottom-box>h5 { font-size: 16px; padding: 20px 0; } 
.product-top .bottom-box>p { font-size: 18px; padding-bottom: 16px; } 

.product-bottom .feature-area>h4 { font-size: 30px; padding: 50px 0 20px; } 
.sub-title { font-size: 20px; color: #3383d080; padding-left: 0.3rem; } 
.product-bottom .feature-area>h5 { font-size: 22px; padding-bottom: 1.5rem; padding-top: 1rem; } 
.product-bottom .feature-area>h6 { font-size: 18px; padding-bottom: 1rem; padding-top: 1rem; } 
.product-bottom .feature-area>p { font-size: 18px; padding-bottom: 16px; } 

.pro-circle { display: inline-block; width: 6px; height: 6px; background-color: #3383d0; border-radius: 50%; margin-right: 8px; position: relative; top: -4px; } 

.pump-info { font-size: 18px; text-align: center; vertical-align: middle; width: 48.5%; height: 50px; background-color: #014099; color: #fff; line-height: 50px; margin-top: 16px; } 
.pump-info>a { color: #fff; display: block; } 

.list-box { width: 268px; height: 64px; background-color: #707070; color: #fff; font-size: 18px; text-align: center; line-height: 64px; margin: 60px auto 0; } 
.info-area { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; /*margin-top: 50px;*/} 
.list-box>a { color: #fff; display: block; } 
.list-box>a:hover { background-color: #3383d0; } 

.designation>img { display: block; margin: 1rem auto 2rem; } 
.spec-body .spec-title { text-align: center; } 
.spec-body>tr>td { text-align: left; font-size: 18px; padding: 0.8rem; }
tbody>tr>td{font-size: 18px;}

.inverter-des { border: 1px #999999 solid; padding: 2rem; margin: 1rem; margin-bottom: 2.5rem; } 
.inverter-des-1 { padding: 1.5rem; margin-right: 2rem; } 

.inverter-des>p { font-size: 18px; line-height: 1.5; word-break: keep-all; padding-left: 25px; text-indent: -18px; } 
.inverter-img { padding: 3rem 0; } 
.inverter-img>img { display: block; margin:0 auto; } 

.flex50 { display: flex; } 
.flex50>.feature-area { width: 50%; } 

.flex50>.inverter-img { width: 50%; margin: 0 1.5rem; } 
.flex50>.inverter-img>img { width: 100%; height: 439px; } 
.flex50>.flex-box-1 { width: 70%; } 
.flex50>.flex-box-2 { width: 25%; } 
.flex-des { border: none; padding: 0.5rem; margin: 0 1.5rem; margin-bottom: 2.5rem; } 
.flex-des-sub { padding-top: 0.5rem; } 

.flex50>.sujung-oper-1, .flex50>.sujung-oper-2 { margin: 1rem; height: 230px; } 
.flex50>.sujung-oper-1>img, .flex50>.sujung-oper-2>img { height: 100%; } 

/* 특수펌프류 */
.special-flex { display: flex; flex-wrap: wrap; } 
.special-box { text-align: center; width: 25%; padding: 1rem; transition: 1s; } 
.special-box .special-img { transition: 0.5s; } 
.special-box .special-img:hover { box-shadow: 3px 2px 7px 1px #cececf; } 
.special-box .special-img>img { width: 100%; } 
.special-box h4 { font-size: 18px; padding-top: 1rem; } 
.special-box h5 { font-size: 16px; font-weight: 300;} 


/* 제품소개 product-list */
.product-number { font-size: 18px; border-bottom: #666 solid 1px; border-bottom: 1px solid #666; padding-bottom: 20px; margin-bottom: 115px; } 
.product-number .product-list-number { color: #3383d0; } 

.product-list { display: flex; border: #666 solid 1px; margin-bottom: 50px; } 
.product-img-box { width: 25%; } 
.product-img-box>img { display: block; margin: 1rem auto; width: 70%; } 

.product-list> .text-area { } 
.product-bottom .text-area { border-left: solid 1px #666; border-right: solid 1px #666; width: calc(100% - 28% - 10%); padding: 40px; } 
.product-list .text-area .top-box h3 { font-size: 24px; color: #3383d0; padding-bottom: 15px; } 
.product-list .text-area .top-box p { font-size: 22px; padding-bottom: 14px; font-weight: 600; } 
.product-list .text-area .bottom-box p { font-size: 18px; line-height: 1.5; } 


.plus-icon-box { width: 15%; transition: all 1s; background-color: #f7f7f7; } 
.plus-icon-box:hover { background-color: #3383d0; } 
.plus-icon-box:hover .horizon { background-color: #fff; } 
.plus-icon-box:hover .vertical { background-color: #fff; } 
.plus-icon-box .plus-icon { position: relative; width: 100%; height: 100%; } 
.horizon { display: block; position: absolute; width: 20px; height: 2px; background: #666; top: 50%; left: 50%; transform: translate(-50%, -50%); } 
.vertical { display: block; position: absolute; width: 2px; height: 20px; background: #666; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

/* 인증서 certification */
.certi-content { width: 1200px; margin: 0 auto; } 
.certi-bottom { display: flex; flex-wrap: wrap; } 

.certi-number { font-size: 18px; border-bottom: #666 solid 1px; border-bottom: 1px solid #666; padding-bottom: 20px; margin-bottom: 70px; } 
.certi-number .certi-list-number { color: #3383d0; } 

.certi-list { display: flex; margin-bottom: 80px; justify-content: center; width: 50%; } 
.certi-img-box { margin: 0 auto; position: relative; } 
.certi-img-box>img { display: block; margin: 0 auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } 

.certi-list .text-area { word-break: keep-all; } 
.certi-bottom .text-area { width: 60%; height: 230px; padding: 10px 0 10px 0; } 
.certi-list .text-area .top-box h3 { font-size: 20px; color: #3383d0; padding-bottom: 10px; } 
.certi-list .text-area .bottom-box h4 { font-size: 18px; color: #666; padding: 15px 0 10px; } 
.certi-list .text-area .top-box p { font-size: 18px; padding-bottom: 20px; font-weight: 400; line-height: 1.3; word-break: keep-all; } 
.certi-list .text-area .bottom-box p { font-size: 16px; line-height: 1.5; word-break: keep-all; padding-left: 10px; text-indent: -10px; } 

.btn-more a { font-size: 15px; text-decoration: underline; color: #666; } 

/* 인증서 test */
.certi-content { width: 1200px; margin: 0 auto; } 
.certi-bottom_test { display: flex; flex-wrap: wrap; } 
.certi-number { font-size: 18px; border-bottom: #666 solid 1px; border-bottom: 1px solid #666; padding-bottom: 20px; margin-bottom: 70px; } 
.certi-number .certi-list-number { color: #3383d0; } 

.certi-list_test .text-area_test .top-box_test h3 { font-size: 18px; color: #333; text-align: center; } 
.certi-list_test .text-area_test .top-box_test p { font-size: 15px; color: #333; text-align: center; } 
.certi-list_test { width: 25%; } 
.certi-img-box_test>img { width: 70%; display: block; margin: 0 auto; } 
.certi-list_test .text-area_test { padding: 1rem 0 3rem; } 


@media screen and (max-width: 1080px) { /* 회사소개 */
 .title-area { padding: 0 2rem; } 
 .greeting-content { padding: 0 2rem; } 
 .vision_area { padding-left: 2rem; padding-right: 2rem; } 
 .vision_area ul { display: flex; flex-direction: column; } 
 .vision_area ul li { float: unset; width: 100%; min-height: unset; margin: 1rem 0; } 
 .vision_area ul li:first-child~* { margin-left: 0; } 
 .greeting-content > div > div.img_area { width: 43%; float: left; } 
 .greeting-content > div > div { float: unset; width: unset; } 
 .greeting-content .text_area .top_box { width: 57%; float: right; } 
 .greeting-content .text_area .bottom_box { float: left; } 
 .greeting-content > div > div.text_area .bottom_box { padding: 30px 0 60px 0; } 

 /* 회사연혁 */
 .history-content .conwrap .history>ul>li .year { font-size: 34px; } 
 .history-content .conwrap .history { padding: 70px 0 220px; } 
 .history-content .conwrap .history>ul>li .list p { word-break: keep-all; font-size: 16px; text-indent: -30px; } 
 .history-content .conwrap .history>ul>li .left .his_right_txt { left: 2rem; } 
.history-content .conwrap .history>ul>li .left .his_right_txt:nth-child(1) { }
.history-content .conwrap .history>ul>li .left .his_right_txt:nth-child(2) { top: 2.5rem; } 
.history-content .conwrap .history>ul>li .left .his_right_txt:nth-child(3) { top: 5rem; } 
.history-content .conwrap .history>ul>li .left .his_right_txt.absol_top_m {top: 3rem;}
.history-content .conwrap .history>ul>li .left .his_right_txt.absol_top { top:6.3rem; } 

 /* 조직도 */
 .oraganization-area { width: unset; } 
 /* 인증서 */
 .certi-content { width: unset; } 
 .certi-number { margin: 0 2rem 70px; } 
 .certi-list { width: 100%; } 
 /* 제품소개 */
 .product-content .product-top { position: relative; height: 405px; } 
 #sub_content { padding-left: 2rem; padding-right: 2rem; } 
 .product-content { width: 100%; } 
 .product-content .product-top .img-area>img { width: 70%;} 
 .info-area { position: absolute; left: 50%; transform: translate(-50%); width: 100%; top: 90%; } 
 .product-bottom { margin-top: 150px; } 
 .product-bottom .feature-area>p { text-indent: -15px; padding-left: 23px; word-break: keep-all; line-height: 1.5; } 
 .designation>img { width: 100%; } 
 .product-bottom .feature-area>h6 { line-height: 1.5; } 
 .inverter-img>img { width: 100%; } 
 .product-top .text-area .top-box>p { word-break: keep-all; } 
 .product-top .bottom-box>p { line-height: 1.5; padding-bottom: 8px; text-indent: -16px; padding-left: 16px; } 
 .product-img-box>img { width: 100%; } 
 .evm_bottom { margin-top: 250px; } 
 .special-box h4{font-size: 16px;}
 .special-box h5{font-size: 15px; font-weight: 300;}
 }

@media screen and (max-width: 768px) { 
/* 회사소개 */
 .greeting-content { padding: 0 1rem; } 
 .ptit01, .ptit02, .ptit_sub { font-size: 28px; } 
 #visual .visual-tit,#visual .hs_top_tit{ font-size: 30px; } 
 #visual .visual-sub-txt { font-size: 16px; } 
 #visual .visual-txt-container { top: 25px; } 
 /* 메뉴 */
 .main_depth { display: block; }
 .title-area { margin-top: 38px; margin-bottom: 38px; padding: 0 1rem; } 
 .main_depth_wrap{display: flex; width: 100%;}
 .main_depth .home_box{width: 10%;}
 .main_depth .depth1{width: 25%;}
 .main_depth .depth2{width: 28%; border-bottom:1px solid #dddddd ;}
 .main_depth .depth3{width: 40%; border-bottom:1px solid #dddddd ;}
 .main_depth .main_selector>a{padding: 0 0 0 10px;}
 /* .main_depth .main_selector.depth3>a{background:#fff url(../../img/gnb_bg.gif) no-repeat 128px center;} */
 .main_depth .main_selector a{font-size: 14px; padding: 0 0 0 0 ; text-align: center; word-break: keep-all; background: none;}
 .main_depth .sub_selector{width: 102%; left: -1px;}

 /* 회사소개 */
 .greeting-content > div > div{display: flex; flex-direction: column;}
 .greeting-content .text_area .top_box { width: 80%;} 
 .greeting-content > div > div.img_area > img { display: none; } 
 .greeting-content > div > div.text_area .top_box {margin: 0 auto; } 
 .greeting-content > div > div.text_area h3 { border: unset; font-size: 18px; width: unset; padding: 0; left: 0%; } 
 .greeting-content > div > div.text_area .bottom_box {background: #f1f1f1; padding: 20px 10px;} 
 .greeting-content > div > div.text_area .bottom_box h4{padding-bottom: 20px;}
 .sub_title2 h2 { font-size: 28px; word-break: keep-all; } 
 .sub_title2 h2 span { font-size: 28px; } 
 .greeting-content > div > div.text_area h3 > p { position: relative; max-width: 100%; left: 50%; transform: translateX(-50%); } 
 .greeting-content:after {height: 0; }
 .vision_area{padding-top: 56px;}
 .vision_area ul { margin-top: 1rem; }
 /* 회사연혁 */
 .history-content .conwrap .history>ul>li .list p {font-size: 15px;} 
 .history-content .conwrap .history>ul>li{margin-bottom: 80px;}
 .history-content .conwrap .history>ul>li .year{font-size: 22px;}
 .history-content .conwrap .history>ul>li:nth-child(odd){padding-left: 55px;}
 .history-content .conwrap .history>ul>li:nth-child(even){padding-right: 55px; padding-bottom: 150px}

 .history-content .conwrap .history>ul>li .left .his_right_txt:nth-child(2){top: 50px;}
 .history-content .conwrap .history>ul>li .left .his_right_txt:nth-child(3){top: 100px;}
 .history-content .conwrap .history>ul>li .left .his_right_txt.absol_top_m {top: 62px;}
 .history-content .conwrap .history>ul>li .left .his_right_txt.absol_top{top: 140px;}


 /* 인증서 */
 .certi-list_test { width: 50%; } 
 .certi-list_test .text-area_test .top-box_test h3 { word-break: keep-all; } 
 .certi-list_test .text-area_test .top-box_test p { word-break: keep-all; } 

 /* 제품소개 */
 #sub_content { padding: 0 1rem; padding-bottom: 100px; } 
 .product-content .product-top { flex-direction: column; height: unset; } 
 .product-content .product-top .img-area>img{padding: 0;}
 .product-top .text-area { margin-left: 10px; width: 100%; } 
 .product-top .text-area .top-box>p { font-size: 20px; } 
 .product-top .bottom-box>h4 { font-size: 14px; } 
 .product-top .bottom-box>p { font-size: 16px; } 
 .sub-title { font-size: 16px; } 

 .product-content .product-top .img-area { margin-bottom: 2rem; width: 100%; } 
 .product-number { margin-bottom: 50px; } 

 .product-bottom { margin-top: 0; } 
 .product-list { flex-direction: column; } 
 .product-img-box { width: 100%; } 
 .product-bottom .text-area { width: unset; border-left: unset; border-right: unset; border-top: 1px solid #666; border-bottom: 1px solid #666; } 
 .plus-icon-box { width: 100%; height: 60px; } 

 .info-area { position: relative; margin-top: 20px; top: 0; left: calc(50% - 10px); } 
 .product-bottom .feature-area>h4 { font-size: 20px; } 
 .product-bottom .feature-area>h5 { font-size: 17px; padding-left:30px; text-indent: -30px; } 
 .product-bottom .feature-area>h6 { font-size: 16px; padding-left: 30px; text-indent: -25px; } 

 .product-bottom .feature-area>p { font-size: 16px; } 
 .inverter-des>p { font-size: 15px; padding-bottom: 15px; padding-left: 10px; } 

 table { width: 100%; } 
 .spec-body>tr>td { font-size: 15px; padding: 0.5rem; } 
 .spec-body>tr>td { width: 18%; } 
 .product-img-box>img { width: 70%; } 
 .product-bottom .text-area { padding: 20px; } 
 .product-list .text-area .top-box h3 { font-size: 22px; padding-bottom: unset; } 
 .product-list .text-area .top-box p { font-size: 18px; padding-bottom: 0;} 
 .product-list .text-area .bottom-box p { font-size: 16px; word-break: keep-all; } 

 .special-box{width: 50%; padding:0.5rem;}
 .special-box h4{font-size: 16px;}
 .special-box h5{font-size: 15px; font-weight: 300;}

 .flex50{flex-direction: column;}
 .flex50>.feature-area{width: 100%;}
 .flex50>.inverter-img{width: unset; margin: 1rem 1.5rem;}
 .flex50>.inverter-img>img{height: auto;}
 .flex50>.flex-box-1{width: 100%;}
 .flex50>.flex-box-2{width: 100%;}
 .inverter-img>img{width: 80vw;}
 .inverter-img{padding: 0;}
 
 /* 온라인문의 */
 .inquiry-tbl-style07-2col { display: flex; flex-direction: column; } 
 .inquiry-tbl-style07-2col > .inquiry-tbl-style07-con { width: 100%; padding-left: 0; } 

}
@media screen and (max-width: 450px) { 
/* 회사연혁 */
.history-content .conwrap .history>ul>li .left .his_right_txt:nth-child(2){top: 80px;}
.history-content .conwrap .history>ul>li .left .his_right_txt:nth-child(3){top: 140px;}
.history-content .conwrap .history>ul>li .left .his_right_txt.absol_top_m {top: 75px;}
.history-content .conwrap .history>ul>li .left .his_right_txt.absol_top{top: 180px;}
}