@charset "utf-8";
/*
	Contents CSS _ 15.05.27
*/


/*공통*/
.bgbox{background:#fafafa; padding:20px 3%;}
.pdbox{padding:30px 20px; background:#ffffff}
.mEnter{display:block;}
.vab{vertical-align:bottom;}

.col-02{width:100%;}
.col-03{width:100%;}
.col-04{width:100%;}

.imgbox img{width:100%; max-width:530px;}
.w1400{max-width:1400px; margin: 0 auto;}
.w1000{max-width:1000px; margin: 0 auto;}
.w800{max-width:800px; margin: 0 auto;}

.perimg{text-align:center;}
.cb{clear:both;}
.mb50{margin-bottom:50px;}


.comm_table{width:100%; border-top:1px solid #323232; border-collapse:separate; font-size:0.9em}
.comm_table th, .comm_table td{border-bottom:1px solid #dcdcdc; padding:7px 5px; vertical-align:middle}
.comm_table .bl, .comm_table tr.bl td, .comm_table tr.bl th{border-left:1px solid #dcdcdc}
/*.comm_table tr.bl td:first-child, .comm_table tr.bl th:first-child{border-left:0px;}*/
.comm_table .bli{border-left:1px solid #dcdcdc !important}
.comm_table th{font-weight:bold; color:#323232; background:#f0f0f0}

.comm_table tr.bgc th, .comm_table tr.bgc td{ background:#e7e7e7; font-weight:500}
.comm_table .tal{text-align:left;}

/*.bd_table{border-right:1px solid #dcdcdc}*/
.bd_table th, .bd_table td{border-left:1px solid #dcdcdc}
.bln {border-left:none!important;}
.bbl {border-bottom:1px solid #828282!important;}


.content_table{width:100%; border-top:2px solid #6d6a60; border-collapse:collapse; border-bottom:2px solid #6d6a60}
.content_table th{padding:10px 5px}
.content_table th, .content_table td{border-bottom:1px solid #dcdcdc; padding:7px 3px; vertical-align:middle}
.content_table .bl, .content_table tr.bl td, .content_table tr.bl th{border-left:1px solid #dcdcdc}
/*.content_table tr.bl td:first-child, .content_table tr.bl th:first-child{border-left:0px;}*/
.content_table .bli{border-left:1px solid #dcdcdc !important}
.content_table th{font-weight:600; background:#dbdbdb; color:#323232; padding:12px 3px;}
.content_table .bgc{background:#fafafa; text-align:center}
.content_table .bgcc{background:#5a84c3; color:#ffffff}
.content_table tr.bgc th, .content_table tr.bgc td{ background:#fafafa}
.content_table .tal{text-align:left;}

.intra {margin:20px  }
.intra a { border:1px solid #CCCCCC; background:#000000; padding:5px 10px;width:150px}

@media all and (min-width:768px) {
.intra {float:right; }
}

@media all and (min-width:768px) {
.comm_table{font-size:1em}
}






.blackTxt{color:#000000}
.blTxt{color:#5a84c3 !important}
.blgrTxt{color:#345468}

.pDot{padding-left:15px; position:relative}
.pDot:before{content:''; width:8px; height:8px;border-radius:50px; position:absolute; right:0; top:3px; background:#00DBFF;}
.fsb{font-size:1.2em}
.bgGray{background:rgba(230,230,230,0.3);}
.bgbox{padding:30px 0; background:rgba(230,230,230,0.3);}
.pdbox{padding:30px 20px}
/*.point_txt:before{content:''; width:8px; height:8px;border-radius:50px; position:absolute; right:0; bottom:0px; background:#fbca4d}
.point_txt:after{content:''; clear:both;}*/
/*.redDot{display:inline-block; position:relative; padding-right:15px}
.redDot:before{content:''; width:8px; height:8px;border-radius:50px; position:absolute; right:0; bottom:0px; background:#fbca4d}
.redDot:after{clear:both;}*/

.pointTxt{background:#cef2ff;}
.redTxt{color:#d10000}
.blueTxt{color:#2159c0}
.bdLine{border-bottom:1px solid #e6e6e6; padding-bottom:20px; margin-bottom:20px;}

.dot_li{overflow:hidden; }
.dot_li li{background:url("../img/dot_li.gif") no-repeat 0px 10px; padding-left:8px; margin-bottom:3px;}
.dot_li li:last-child{margin-bottom:0;}

.tit_nm{font-size:1.4em; font-weight:600; letter-spacing:-0.06em; color:#000000;}
.tit_sm{font-size:1.2em;  font-weight:600; letter-spacing:-0.06em; color:#000000}
.tit_dot{color:#000000; font-size:1.3em; font-weight:600; letter-spacing:-0.065em; padding-left:26px; background:url(../img/tit_dot.png) no-repeat left center;}
.txt_line {display:inline-block;}
.txt_line:after {content:''; background:#00DBFF70; width:100%; display:block; height:15px; margin-top:-15px;}



/*탭리스트*/
.tablist {overflow:hidden; text-align:center; }
.tablist li{display:inline-block;  line-height:50px; text-align:center;}
.tablist li:last-child{border-right:0}
.tablist.list02 li{width:45%}
.tablist.list03 li{width:90%; margin-bottom:20px;}
.tablist.list04 li{width:20%}


@media all and (min-width:768px) {
.tablist.list03 li{width:30% }
}



.tablist li a{ display:block; text-align:center; border-bottom:1px solid #dcdcdc; color:#808080; }
.tablist li.active a{color:#5a84c3; font-weight:600; border-bottom:3px solid #5a84c3;}


/*탭홀더*/
#tabsholder .tabs li{background:#ffffff; color:#808080; border:1px solid #dcdcdc; cursor:pointer}
#tabsholder .tabs li.current{background:#34425c; color:#ffffff; border-color:#34425c}
#tabsholder .tabscontent {display:none;}

@media all and (min-width:540px) {

}




@media all and (min-width:768px) {
.bgbox{padding:60px 0;}
.pdbox{padding:60px 30px;}

.comm_table th{padding:20px 5px}
.comm_table td{padding:15px 5px;}

.content_table th{padding:20px 5px}
.content_table td{padding:15px 5px;}
.comm_dl dt{float:left; margin-right:1%; clear:both;}
.comm_dl dd{width:87%; float:right;}

.sub_con .col-02{width:47%;float:left; margin:0 1.5%;}
.sub_con .col-03{width:30.33%; margin:0 1.5%; float:left;}
.sub_con .col-04{width:22%; margin:0 1.5%; float:left;}
.bdLine{padding-bottom:40px; margin-bottom:40px;}

.mEnter{display:inline-block;}
.tEnter{display:block;}

.tit_nm{font-size:1.8em;}
.tit_sm{font-size:1.4em;}
.tit_dot{ font-size:1.5em;}

}

@media all and (min-width:1200px) {
.bgbox{padding:80px 0px;}
.pdbox{padding:80px 50px;}
.tEnter{display:inline-block;}
.pEnter{display:block;}
.bdLine{padding-bottom:60px; margin-bottom:60px;}

.tit_nm{font-size:2.5em;}
.tit_sm{font-size:1.6em;}
}

/*소개공통*/
.comm_top{position:relative; }
.deco:after{content:''; display:block; width:100%; position:absolute; bottom:0; height:8px; background:url(../img/line_bg.png) no-repeat;}
.comm_top h4{color:#29343f;  font-size:1.3em; line-height:1.3;}
@media all and (min-width:768px) {
.comm_top h4{font-size:1.8em;}
}



@-webkit-keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.1) translateY(-15px);
            transform: scale(1.1) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
}




@media all and (min-width:768px) {
.com_info{background-position:center bottom;}
.info_dl dl dt{font-size:1em}
.info_dl dl{width:25%; padding:20px 0px}
.info_dl dl:before{content:''; width:1px; height:70px; background:#c8c8c8; position:absolute; display:block; top:0; bottom:0; left:0; margin:auto}
.half_bg{padding-bottom:50px;}
.vision_li li b{font-size:1.4em}
.vision_li {text-align: center;}


}


@media all and (min-width:1200px) {
.vs_tit{font-size:3em;}
}

/*회사비전*/
.vision_ic {background:url(../img/vision_bg.jpg)no-repeat; text-align:center;}
.vision_ic img {width:100%}
@media all and (min-width:768px) {
.vision_ic img {width:80%; padding:80px 0 }
}

.vision_li ul {text-align:center;}
.vision_li li{width:100%;}
.vision_li h6 {font-size:1.5em; font-weight:bold; margin-bottom:20px; color:#5a84c3}
.vision_li h6:after {display:none;}
.mgt20 {display:block; padding:20px 10px; background:#5a84c3; color:#FFFFFF}
.pdn {padding:0px!important;}
.pdn img {width:100%}
.gboder {border:8px solid #ECECEC; padding:50px 30px;}


@media all and (min-width:768px) {
.vision_li h6 {margin-bottom:0px}
.vision_li h6:after {content:''; display:block; background:url(../img/vision_arrow.png)no-repeat 50% 100%; height:120px; background-size:50%}
.vision_li li{width:23%; margin:0 1%; padding:50px 0px; display:inline-block; text-align:center;}
}



.moto{text-align:center; background:url("../img/moto.jpg")no-repeat 100% 100%; padding:100px 50px; background-size:cover}
.moto img {}


/*그래프연혁*/
.hisGrap{position:relative; margin-top:100px;}
.hisGrap h4{text-align:center; position:relative; padding-bottom:30px;}
.hisGrap h4 b{font-size:2em; color:#5a84c3}
.hisGrap h4:after{content:'2000'; display:block; position:absolute; bottom:0; left:0; right:0; margin:auto; width:150px; height:150px; background:#5a84c3; border-radius:500px; line-height:150px; color:#ffffff; font-size:2em; font-weight:bold;}
.hisGrap h4 span{display:block; position:relative;}

.hisGrap ul{position:relative; padding:20px 0px; text-align:center;}
.hisGrap ul li{background:#ffffff; margin-bottom:10px; position:relative; padding:10px 0px;}
.hisGrap ul li span.date{display:block; font-weight:600;}


.hisGrap ul:before{content:''; display:block; width:1px; height:100%; background:#dcdcdc; position:absolute; top:0;  left:0; right:0; margin:auto}
.hisGrap ul:after{content:''; display:block; width:7px; height:7px; background:#5a84c3; position:absolute; bottom:0; left:0; right:0; margin:auto; border-radius:500px;  }

.hisGrap.his02 h4:before{background:#b0cf01}
.hisGrap.his02 ul:after{background:#b0cf01}

.hisGrap.his03 h4:before{background:#777e8f}
.hisGrap.his03 ul:after{background:#777e8f}


@media all and (min-width:768px) {
.hisGrap h4{position:relative; color:#ffffff; margin:0 auto;  color:#ffffff; text-align:center; padding-bottom:40px;}
.hisGrap h4 b{display:block; font-size:2.3em}
.hisGrap ul li{background:none; margin-bottom:0;}
.hisGrap ul li span{position:relative; display:block; padding-right:10%}
.hisGrap ul li span.date{padding-top:10px;}
.hisGrap ul li span.date:before{content:''; width:10%; height:1px; background:#dcdcdc; position:absolute; right:0;top:0;}
.hisGrap ul li span.date:after{content:''; width:7px; height:7px; background:#5a84c3; position:absolute; top:-2px; right:10%; border-radius:500px;}
.hisGrap ul .left{text-align:right; margin-right:50%;}
.hisGrap ul .right{text-align:left;}

.hisGrap ul .right{margin-left:50%;}
.hisGrap ul li.right span{padding-right:0; padding-left:10%}
.hisGrap ul li.right span.date:before{right:auto; left:0;}
.hisGrap ul li.right span.date:after{right:auto; left:10%}

.hisGrap.his02 ul li span.date:after{background:#b0cf01}
.hisGrap.his03 ul li span.date:after{background:#777e8f}
}

@media all and (min-width:1200px) {
.hisGrap h4 b{ font-size:2.6em}

}







/*오시는길*/

.map p {text-align:center}
.map .info {border:1px solid #dcdcdc; border-top:1px solid #4b4c55; height:150px;}
.map .info li {padding:10px; border-bottom:1px solid #dcdcdc; line-height:30px;}
.map .info li:last-child {border-bottom:none;}
.map .info li img {width:30px; margin:0 10px 0 0;}
.map .info li h3 {font-weight:700; display:inline-block; width:50px; margin:0 5px 0 0;}
.map .info li b {font-weight:500;}
.map .box ul.tab {border-right:1px solid #dcdcdc;}
.map .box ul.tab li {display:inline-block; width:50%; float:left; border:1px solid #dcdcdc; border-right:none;
	text-align:center; line-height:80px; font-size:1.25em; background:#f9f9f9; color:#999; position:relative;}
.map .box ul.tab li.on {border-bottom:none; border-top:none; background:#fff; color:#222; font-weight:700;}
.map .box ul.tab li.on:before {content:''; display:inline-block; width:100%; height:4px; background:#f18536;
	position:absolute; left:0; top:0;}
.map .box ul.tab li a {display:block;}
.map .box .addr {padding:40px 3%; position:relative;}
.map .box:before {width:100%; height:3px; background:#5a84c3; content:''; display:inline-block;}
.map .box .addr h4 {font-weight:700; font-size:1.75em; margin-right:10px; display:block; text-align:center; margin-top:-8px;}
.map .box .addr p {font-size:1.1em;}
.map .box .addr a {display:inline-block; width:100%; line-height:40px; background:#4b4c55; text-align:center; color:#fff; margin:20px 0 0;}
.map .box { margin-bottom: 60px;}


@media all and (min-width:768px) {
.map h1 {font-size:2.5em;}
.map .info li {display:inline-block; width:33.33%; float:left; text-align:center;
		border-bottom:none; border-right:1px solid #dcdcdc; padding:20px 10px;}
.map .info li:last-child {border-right:none;}
.map .info li img {width:40px; margin:0 0 10px;}
.map .info li h3 {display:block; width:100%; font-size:1.25em; margin:0;}
.map .box .addr a {width:100px; position:absolute; right:3%; top:calc(50% - 20px); line-height:40px; margin:0;}
.map .box .addr h4 {display:inline-block; float:left}

}



/*비즈니스*/

.busi_con ul {margin:0 auto; font-size:0;}
.busi_con ul li{width:100%; margin-bottom:20px; position:relative; box-shadow:5px 5px 10px hsla(0,0%,0%,0.2); display:block; padding:50px; font-size:14px; overflow:hidden; height:270px; background:#fff;}
.busi_con ul li h4 {margin-bottom:20px;}
.busi_con .click{margin:0 auto;}
.busi_con .click a{background:#fff; margin:0 auto ; text-align:center; width:150px; padding:10px 30px; display:block; border:1px solid #5a84c3; border-radius:50px;}
.busi_con .click a:hover{transform:scale(1.1); transition:0.5s; background:#5a84c3; color:#FFFFFF; }

.busi_con .busi_li li b{position:absolute; top:0; left:0; background:#5a84c3; color:#fff; font-weight:bold; width:40px; height:40px; text-align:center; line-height:40px;}
.busi_con .busi_box {margin-top:0px;}
.busi_con .busi_li {margin-top:0px;}

.small_box p span{font-weight:bold; margin-right:5px; position:relative;}
.small_box p span:before {font-family:'FontAwesome'; content:'\f105'; font-size:0.8em; position:absolute; top:2px; margin-left:-10px; color:#5a84c3;}
.busi_img {text-align:center;}
.busi_img img {width:100%;}

@media all and (min-width:500px) {
.busi_con ul li{height:200px; }
.busi_con .busi_li04 li{height:250px;}
.busi_img img {width:70%;}
}

@media all and (min-width:1200px) {
.busi_con ul li{width:30.33%; margin:3% 15px; display:inline-block; height:270px;}
.busi_con .busi_li04 li {width:47.33%}
.busi_con .busi_box {margin-top:150px;}
.busi_con .busi_li {margin-top:-200px;}
}

.busi_con .img_box ul {text-align:center;}
.busi_con .img_box ul li{box-shadow:none; padding:0; height:auto; margin:3% 0;}
.busi_con .img_box ul li img {width:100%;}

@media all and (min-width:768px) {
.busi_con .img_box ul li {margin:3% 5px;}
}




/*수출입포워딩_스텝*/
.busi_step ul {text-align:center;}
.busi_step ul li { height:auto; width:100%; border:1px solid #cdcdcd;}
.busi_step ul li:hover {border:1px solid #0033a0;}
.busi_step ul li dl dt {text-align:center; background:#0033a0; padding:20px; color:#fff; border-top-left-radius:30px; border-bottom-right-radius: 30px;
	margin-bottom:40px;}
.busi_step ul li dl dt h5{color:#fff;}
.busi_step ul li dl dd:after {content:''; background:#CDCDCD repeat; height:40px; width:1px; display:block; margin:0 auto;}
.busi_step ul li dl dd:last-child:after{display:none;}
.busi_step ul li dl dd span {background:#5a84c3; display:block; width:80px; height:80px; color:#fff; border-radius:500px; text-align:center; line-height:80px;  margin:0 auto; margin-bottom:10px;}
.after_none:after {content:''; display:none;}




@media all and (min-width:1200px) {
.busi_step ul{text-align:left;}
.busi_step ul li {width:47.33%; display:inline-flex;}
.busi_step ul li dl dd{margin:20px;}
.busi_step ul li dl dd:after {display:none; content:'';}
.busi_step ul li dl dd span {display:inline-block; position:relative; margin-right:20px;}
.busi_step ul li dl dd span:after {content:''; background:#CDCDCD repeat; height:40px; width:1px; position:absolute; top:100%; left:50%;}

}




/*CFS운용현황*/
.busi_com {position:relative;}
.busi_com .txt {background:#5a84c3; padding:30px 50px; position:absolute; top:0; left:0; color:#fff;}
.busi_com .txt h5,
.busi_com .txt p {color:#fff;}
.busi_com01_01 ul {display:inline-block; text-align:center;}
.busi_com01_01 li {width:100%; display:inline-block; ; position:relative; margin:0 2% 20px 0;}
.busi_com01_01 li p {background:#5a84c3; padding:10px; position:absolute; bottom:0; right:0; color:#fff;}


@media all and (min-width:768px) {
.busi_com01_01 li {width:47.333%; }
.busi_com01_01 li:last-child {margin-right:0;}
.busi_com01_01 li p {padding:15px;}
}

.busi_com_li05 li {width:100%;}

@media all and (min-width:768px) {
.busi_com_li05 li {width:30.33%;}

}

/*검*/
.round_box ul {text-align:center;}
.round_box li {border-radius:300px; width:150px; height:150px; background:#5a84c3; display:inline-block; }
.round_box li h5 {color:#fff; margin-top:30px; }
.round_box li h5 span {display:block; margin-top:10px;}
.round_box li b {position:relative;}
.round_box li b:after {content:''; width:20px; height:1px; background:#fff; position:absolute; bottom:0; display:block; left:10%;}






/*서브페이지 bx슬라이더 pager*/

.bsbox .bx-wrapper  .bx-has-controls-direction .bx-controls-direction a{display:none}
.bsbox  #bx-pager{position:absolute; color:#ffffff; overflow:hidden;  max-width:1200px;  width:94%; margin:0 auto; left:0; right:0; bottom:15%; text-align:center; min-height:25px; z-index:100}
.bsbox  #bx-pager li{display:inline-block; margin:0 3px; text-align:center; position:relative;}
.bsbox  #bx-pager li a{color:#ffffff; opacity:0.9; width:22px; height:22px; display:block}
.bsbox  #bx-pager li a:before{content:''; position:absolute; display:block; width:14px; height:14px; background:#ffffff;  top:0; left:0; bottom:0; right:0; margin: auto; border-radius:500px;}
.bsbox  #bx-pager li a.active{ transition:0.3s; opacity:1;}
.bsbox  #bx-pager li a.active:after{content:''; display:block; position:absolute;  width:100%; height:100%; border:1px solid #ffffff; left:0; top:0; bottom:0; right:0; margin:auto;  border-radius:500px; box-sizing:border-box}

.bsbox.dot_btn .bx-pager{position:absolute; color:#ffffff; overflow:hidden;  max-width:1200px;  width:94%; margin:0 auto; left:0; right:0; bottom:15%; text-align:center; min-height:25px; z-index:100; margin-bottom:-20px}
.bsbox.dot_btn .bx-pager .bx-pager-item{display:inline-block; margin:0 3px !important; text-align:center; position:relative; background:none;}
.bsbox.dot_btn .bx-pager .bx-pager-item a{color:#ffffff; opacity:0.9; width:22px; height:22px; display:block}
.bsbox.dot_btn .bx-pager .bx-pager-item a:before{content:''; position:absolute; display:block; width:14px; height:14px; background:#ffffff;  top:0; left:0; bottom:0; right:0; margin: auto; border-radius:500px;}
.bsbox.dot_btn .bx-pager .bx-pager-item a.active{ transition:0.3s; opacity:1; background:none}
.bsbox.dot_btn .bx-pager .bx-pager-item a.active:after{content:''; display:block; position:absolute;  width:100%; height:100%; border:1px solid #ffffff; left:0; top:0; bottom:0; right:0; margin:auto;  border-radius:500px; box-sizing:border-box}

@media all and (min-width:768px) {
.bsbox #subslider li{}
.bsbox .bx-wrapper .bx-has-controls-direction{bottom:130px;}
.bsbox  #bx-pager{width:84%; text-align:left;}
.bsbox.dot_btn .bx-pager{margin-bottom:-35px}

}

@media all and (min-width:1200px) {
.bsbox.dot_btn .bx-pager{margin-bottom:-50px}

}