@charset "utf-8";
/* *******************************************************
 * filename : content.css
 * description : 서브페이지 컨텐츠 CSS
 * date : 2018-01-16
******************************************************** */

/* ******************  서브공통 ********************** */
/* -------- 서브공통 :: 타이틀 -------- */
.sub-tit-style1{margin-bottom:1.375rem;}
.sub-tit-style1 strong{color:#222; font-weight:400; font-size:1.125rem; letter-spacing:-0.027em;  font-weight:400; font-family:'Roboto','Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif; } 
.sub-tit-style1 strong:after{display:inline-block; width:5px; height:5px; border-radius:5px; background-color:#ed1c2a; margin-left:5px; content:"";}

/* -------- 서브공통 :: 레이아웃 -------- */
.sub-content-box{margin-bottom:5rem}
/* 서브공통 ::상단텍스트 */
.cm-sub-content-top{text-align:center; margin-bottom:2.5rem; word-break:keep-all;}
.cm-sub-content-top .cm-sub-top-txt{color:#222; letter-spacing:-0.01em; font-size:1.75rem; font-weight:300; line-height:1.428em; }
.cm-sub-main-tit{position:relative; }
.cm-sub-main-tit h3{font-family: 'Raleway', sans-serif; color:#fff; font-weight:900; font-size:9.375rem; line-height:1.2; text-shadow:10px 10px 15px rgba(0, 0, 0, .02);}
.cm-sub-main-tit .font-170{font-size:170px;}
.cm-sub-main-tit .font-130{font-size:126px;}
.cm-sub-main-up-txt{position:absolute; top:50%;left:0px; width:100%; text-align:center;  -webkit-transform:translateY(-50%); transform:translateY(-50%); }
.cm-sub-main-up-txt .up-txt1{font-size:2.5rem; letter-spacing:0.4em; font-weight:300; color:#222; }
.cm-sub-main-up-txt .up-txt1 br{display:none;}
.cm-sub-main-up-txt .up-txt2{font-size:20px; letter-spacing:-0.025em; line-height:1.8em; font-weight:300; color:#222; }
.cm-sub-content-top .red-text{color:#ed1c2a; font-weight:300;}

/* 서브 공통 :: 스크롤바 */
.custom-scrollbar-wrapper{}

/* 서브공통 :: 그라데이션 */
.cm-gradient{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ee403f+0,ff6f37+100 */
	background: rgb(238,64,63); /* Old browsers */
	background: -moz-linear-gradient(left, rgba(238,64,63,1) 0%, rgba(255,111,55,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(238,64,63,1) 0%,rgba(255,111,55,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(238,64,63,1) 0%,rgba(255,111,55,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee403f', endColorstr='#ff6f37',GradientType=1 ); /* IE6-9 */
}

/* 서브공통 :: 탭 */
.sub-cm-tab-list{height:50px; margin-bottom:18px;}
.sub-cm-tab-list li{float:left; width:50%;}
.sub-cm-tab-list li a{display:block; height:48px; line-height:48px; text-align:center; border-top:1px solid #e9e9e9; border-bottom:1px solid #e9e9e9; background-color:#fff; color:#222; font-size:15px; letter-spacing:-0.5px;}
.sub-cm-tab-list li.selected a{border-color:#ed1c2a}

/* ******************  회사소개 ********************** */
/* -------- 회사소개 :: 인사말 -------- */
.greeting-top img{max-width:100%}
.greeting-bottom{position:relative; margin-top:70px}
/* 인사말 :: 왼쪽 인사말 */
.greeting-txt-lf{float:left; width:45%; padding-right:5%}
.greeting-txt-lf h4{font-weight:300; font-size:36px; letter-spacing:-0.75px; color:#383838; line-height:1.33; word-break:keep-all}
.greeting-txt-lf h4 b{font-weight:600}
/* 인사말 :: 오른쪽 텍스트 */
.greeting-txt-rt{float:right; width:50%}
.greeting-txt-rt .greeting-txt{/*margin-bottom:60px*/margin-bottom:11%}
.greeting-txt-rt .greeting-txt span{position:relative; display:block}
.greeting-txt-rt .greeting-txt span:after{	
	position:absolute; display:inline-block; content:""; width:calc(100% - 142px); height:1px;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00a9ce+0,0044ce+100 */
	background: rgb(40,84,245); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(0,169,206,1) 0%, rgba(106,114,251,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(0,169,206,1) 0%,rgba(106,114,251,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(0,169,206,1) 0%,rgba(106,114,251,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a9ce', endColorstr='#0044ce',GradientType=1 ); /* IE6-9 */
	right:0; top:12px
}
.greeting-txt-rt .greeting-txt span strong{display:inline-block; font-weight:500; font-size:24px; letter-spacing:-0.75px; color:#000; background-color:#f5f5f5}
.greeting-txt-rt .greeting-txt p{font-weight:300; font-size:18px; letter-spacing:-0.5px; color:#555; line-height:1.88; word-break:keep-all; margin-top:15px}
.greeting-txt-rt .greeting-txt p b{font-weight:500}
.greeting-txt-rt .ceo-txt{text-align:right; font-weight:400; font-size:20px; letter-spacing:-0.75px; color:#000}
.greeting-txt-rt .ceo-txt strong{position:relative; display:inline-block;}
.greeting-txt-rt .ceo-txt strong:after{	
	position:absolute; display:inline-block; content:""; width:100%; height:13px;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00a9ce+0,0044ce+100 */
	background: rgb(40,84,245); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(40,84,245,1) 0%, rgba(106,114,251,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(40,84,245,1) 0%,rgba(106,114,251,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(40,84,245,1) 0%,rgba(106,114,251,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a9ce', endColorstr='#0044ce',GradientType=1 ); /* IE6-9 */
	bottom:-3px; left:0; opacity:0.3; z-index:-1
}
/* 인사말 :: 하단 이미지 */
.greeting-bt-img{position:absolute; bottom:0; left:0; width:45%}
.greeting-bt-img img{max-width:100%}


/* -------- 회사소개 :: 연혁 -------- */
.history-list-box-style02 .history-year-box{position:relative; padding-left:250px}
.history-list-box-style02 .history-year-box h4{position:absolute; left:0; top:0;  color:#222; font-size:30px; font-weight:600; letter-spacing:-1.5px; }
.history-list-box-style02 .history-year-box h4:after{position:absolute; top:15px; left:110px; content:""; width:56px; height:3px; background-color:#2854f5; }
.history-list-box-style02 .history-year-box .history-year-item {position:relative; padding-bottom:30px}
.history-list-box-style02 .history-year-box .history-year-item:last-child{padding-bottom:0}
.history-list-box-style02 .history-year-box .history-year-item:before{position:absolute; top:15px; left:120px; width:1px; bottom:-23px; background-color:#ddd; content:"";}
.history-list-box-style02 .history-year-box:last-child .history-year-item:last-child:before{display:none;}
.history-list-box-style02 .history-year-box .history-year-item .history-year{position:absolute; top:0; left:0px; width:120px;}
.history-list-box-style02 .history-year-box .history-year-item .history-year:after{position:absolute; display:block; content:""; top:50%; right:-4px; width:7px; height:7px; margin-top:-3px; background-color:#2854f5; -webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;border-radius:5px;}
.history-list-box-style02 .history-year-box .history-year-item .history-year strong{color:#1e1e1e; font-weight:600; font-size:23px;font-style:italic}
.history-list-box-style02 .history-year-box .history-year-item .history-info-con{padding-left:140px; }
.history-list-box-style02 .history-year-box .history-year-item:last-child .history-info-con{  padding-bottom:50px;}
.history-list-box-style02 .history-year-box:last-child .history-year-item:last-child .history-info-con{  padding-bottom:0px;}
.history-list-box-style02 .history-year-box .history-year-item .history-info-con p{position:relative; margin-bottom:10px; padding-left:30px; color:#5b5b5b; font-size:15px; font-weight:300; letter-spacing:-0.5px; line-height:1.4; word-break:keep-all}
.history-list-box-style02 .history-year-box .history-year-item .history-info-con p:first-child{margin-top:7px}
.history-list-box-style02 .history-year-box .history-year-item .history-info-con p .history-month{position:absolute; top:0px; left:0px;color:#333; font-weight:600; }
.history-list-box-style02 .history-year-box .history-year-item .history-info-con p span{}
 

/* -------- 회사소개 :: 조직도 -------- */
.org-img{display:block; text-align:center}
.org-img img{max-width:100%}
.org-img img.pc-img{display:inline-block}
.org-img img.mb-img{display:none}

/* -------- 회사소개 :: 오시는 길 -------- */
/* 오시는길 :: 상단 */
.map-script-wrapper{position:relative; overflow:hidden; margin:0px auto; height:500px; border:1px solid #ddd}
.map-script-wrapper .map-script-con{position:absolute; top:50%; left:50%; width:1100px; height:500px; margin:-250px 0 0 -550px;}
.map-script-wrapper .map-script-con .root_daum_roughmap,
.map-script-wrapper .map-script-con .wrap_map{height:100% !important;}
.map-iframe-wrapper{position:relative; border:1px solid #ddd; margin:0px auto; }
/* 오시는길 :: 하단정보1 */
.map-tbl-con{margin-bottom:70px;}
.map-tbl{width:100%;}
.map-tbl th,.map-tbl td{padding:15px; letter-spacing:-0.3px; font-size:15px; line-height:1.5}
.map-tbl th{width:140px; border-bottom:1px solid #000; color:#333; text-align:left; font-weight:500; }
.map-tbl td{border-bottom:1px solid #d8d8d8; color:#333; font-weight:300; }
.map-tbl td p{margin-top:5px}
.map-tbl td p:first-child{margin-top:0}


/* ******************  사업분야 ********************** */
/* -----사업분야:: 리스트----- */
.business-list-con{margin-top:10px}
.business-list{margin:0 -1%}
.business-list li{float:left; width:48%; margin:1%}
.business-list li a{display:block;}
.business-list li .list-img{position:relative; border:1px solid #ddd; border-bottom:0}
.business-list li .list-img:after{position:absolute; display:inline-block; content:""; width:100%; height:100%; top:0; left:0; background:url("/images/content/business_over_bg.png") no-repeat; background-size:cover; z-index:0; opacity:0; transition:all 0.3s}
.business-list li .list-img span{position:relative; display:block; padding-top:66.5%}
.business-list li .list-img span img{position:absolute; top:0; left:0; width:100%; height:100%}
.business-list li .list-img .list-hover-icon{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:70px; height:70px; border-radius:50%; background-color:#fff; text-align:center; z-index:1; opacity:0; transition:all 0.3s}
.business-list li .list-img .list-hover-icon i{line-height:70px; color:#02a9ce; font-size:35px}
.business-list li .list-tit{background-color:#fff; border:1px solid #ddd}
.business-list li .list-tit p{font-weight:400; font-size:16px; letter-spacing:-0.75px; color:#333; line-height:1.4; text-align:center; padding:20px 5%}


/* -----사업분야:: 상세 팝업------ */
#businessPop {position:relative; margin:100px auto 60px; max-width:960px; width:90%}
#businessPop .modal-close-btn{top:0; margin-top:-37px; right:0;  text-align:center}
#businessPop .modal-close-btn i{font-size:30px;}
#businessPop .business-pop-inner{}
/* 상세 팝업 :: 슬라이드 */
.business-slide li{position:relative;}
.business-slide li span{position:relative; display:block; padding-top:66.7%}
.business-slide li span img{position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%}
.business-slide .slick-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:9; width:62px; height:175px; background-color:rgba(0,0,0,0.5); text-align:center}
.business-slide .slick-arrow.slick-next{right:0}
.business-slide .slick-arrow.slick-prev{left:0}
.business-slide .slick-arrow i{font-size:36px; color:#fff}
.business-slide .slick-arrow.slick-next i{margin-right:-5px}
.business-slide .slick-arrow.slick-prev i{margin-left:-5px}
.business-slide .slick-dots{position:absolute; bottom:0; left:0;width:100%; text-align:center; margin-bottom:20px}
.business-slide .slick-dots li{display:inline-block; margin:0 5px}
.business-slide .slick-dots li button{font-size:0; width:104px; height:3px; background-color:#fff}
.business-slide .slick-dots li.slick-active button{background-color:#00a9ce}
/* 상세 팝업 :: 하단정보 */
.business-info-con{font-family:'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}
.business-info-con .info-tit{	
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0e6b8a+0,0f2e55+100 */
	background: #2854f5; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #6a72fb 0%, #6a72fb 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #2854f5 0%,#6a72fb 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #2854f5 0%,#6a72fb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2854f5', endColorstr='#6a72fb',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	padding:30px 6.3%
}
.business-info-con .info-tit strong{display:inline-block; font-weight:400; font-size:18px; letter-spacing:-0.75px; color:rgba(255,255,255,0.8); margin-bottom:8px} 
.business-info-con .info-tit h4{font-weight:600; font-size:40px; letter-spacing:-0.75px; color:#fff; line-height:1.35; word-break:keep-all}
.business-info-con .info-list{background:url("../images/content/business_info_bg.jpg") no-repeat 100% 0; background-size:cover !important; padding:30px 6.3%}
.business-info-con .info-list li{margin-bottom:20px}
.business-info-con .info-list li:last-child{margin-bottom:0}
.business-info-con .info-list li span,
.business-info-con .info-list li p{display:inline-block; margin:0 -1px; vertical-align:top; line-height:1.5; font-size:18px; letter-spacing:-0.75px;}
.business-info-con .info-list li span{position:relative; font-weight:500; color:#333; width:100px; padding-left:24px; }
.business-info-con .info-list li span:before{position:absolute; display:inline-block; content:""; width:14px; height:15px; background-size:cover !important; left:0; top:5px}
.business-info-con .info-list li.info-address span:before{background:url("../images/content/business_info_address.jpg")}
.business-info-con .info-list li.info-scale span:before{background:url("../images/content/business_info_scale.jpg")}
.business-info-con .info-list li.info-use span:before{background:url("../images/content/business_info_use.jpg")}
.business-info-con .info-list li.info-date span:before{background:url("../images/content/business_info_date.jpg")}
.business-info-con .info-list li p{font-weight:300; color:#666; width:calc(100% - 124px)}