/*
	Theme Name: RESPONSIVE ARTICLES FOR BUSINESS LICENSE
	Theme URL: http://www.designersol.co.kr
	Author: Sangok Lee
	Version: 1.0
	License URL: http://www.designersol.co.kr
 	Copyright 2014~ DESIGNSOL
*/

/* text-align:center */
.must .cnt-img,
.boss3 h4,
.team h4,
.service1 h3,
.service2 .cnt-txt,
.article4 h4,
.article1 h4 {text-align:center}

.service1,
.service2 {margin-bottom:40px}

.narrow {margin:25px auto !important}
@media (min-width:768px) {.narrow {width:80%}}
@media (min-width:992px) {.narrow {width:60%}}

/* fnt-color */
.fnt-blue {color:#199fd1}

/* cnt-fa bgcolor */
.bg-mint {background:#91c2c6}
.bg-navy {background:#3a4050}
.bg-coral {background:#f28f89} 
.bg-ivory {background:#eee9e0}
.bg-black {background:#333; color:#fff}

/* margin-bottom:20 */
.boss3 .cnts,
.team1 .cnts,
.team2 .cnts,
.team3 .cnts {margin-bottom:20px}

/* img-max */
.must .cnt-img .img-max {display:inline-block; max-width:100%; height:auto}
.must .cnt-img .img-max1 {display:inline-block;width:100%; height:auto}

/* boss */
.boss1 {position: relative; margin-bottom:110px}
.boss1 .cnt-profile {text-align: center; position: absolute; left:0; right:0; bottom:-100px}
.boss1 .cnt-profile img {border-radius: 50%; background:#fff; padding:5px}
.boss3 .cnt-img{margin:5px}
@media (max-width: 480px) {
	.boss1 .cnt-img {height:200px}
	.boss1 .cnt-profile img {width:140px; height:140px}
}
@media (min-width: 481px) {
	.boss1 .cnt-img {height:250px}
	.boss1 .cnt-profile img {width:160px; height:160px}
}
@media (min-width: 768px) {
	.boss1 .cnt-img {height:300px}
	.boss1 .cnt-profile img {width:200px; height:200px}
}
@media (min-width: 992px) {
	.boss1 .cnt-img {height:350px}
}

/* team */
.team1 h4,
.team2 h4 {margin-top:10px; margin-bottom:0px}
.team2 .cnt-img img {border-radius:50%}
.team3 .cnt-img img {width:100%; padding:0 5px}
.team3 .cnt-caption {padding:10px 15px; background:#3a4050; margin:0 5px; color:#fff}
@media (max-width: 480px){
	.team1 img,
	.team2 img {width:110px; height:110px} 	
} 
@media (min-width: 481px) {
	.team1 img,
	.team2 img {width:130px; height:130px} 
}
@media (min-width: 992px) {
	.team1 img,
	.team2 img {width:160px; height:160px} 
}

/* service */
.service2 .cnt-img {width:100%; color:#fff; background-color:#3a4050}
.service2 .fa {font-size:18px}
.service2 h4 {margin-top:0}
@media (max-width: 767px) {
	.service2 .cnt-img {padding-top:20px}
	.service2 .cnt-img .cnt-txt div {height:80px}	
}
@media (min-width: 768px) {.service2 .cnt-img {height:150px}}

/* .cnt-fa */
.cnt-fa .fa,
.cnt-fa h4 {display:inline-block}
.cnt-fa {margin-bottom:10px}
.cnt-fa .fa {padding:7px 15px; color:#fff; margin-right:15px; border-radius: 2px}

/* .art-col-2 */
.img-two {padding-right:0; padding-left:0}
.img-two .cnt-img {margin:2px}
@media (min-width: 481px) and (max-width: 767px) {
	.webz1-l {width:65%}
	.webz1-r {width:35%}	
	.webz1-l.cnt-txt {padding-right:20px}
	.webz1-l,
	.webz1-r {float:left}
}
@media (min-width: 768px) and (max-width: 991px) {
		.webz1-l,
		.webz1-l {width:100%}
}
@media (min-width: 992px) {	
	.webz1-l {width:65%}
	.webz1-r {width:35%}	
	.webz1-l.cnt-txt {padding-right:20px}
	.webz1-l,
	.webz1-r {float:left}
}
@media (min-width: 481px) {
	.webz2-l {width:65%}
	.webz2-r {width:35%}	
	.webz2-l.cnt-txt {padding-right:20px}
	.webz2-l,
	.webz2-r {float:left}
}
@media (max-width: 480px) {
	.art-col-2 .cnt-l,
	.art-col-2 .cnt-r {padding-left:0; padding-right:0} 
}
@media (min-width: 481px) {
	.art-col-2 .cnt-l {padding-left:0; padding-right:15px} 
	.art-col-2 .cnt-r {padding-left:15px; padding-right:0} 
}
@media (max-width: 767px) {
	.art-col-2-noxxs .cnt-l,
	.art-col-2-noxxs .cnt-r  {padding-left:0; padding-right:0} 
}
@media (min-width: 768px) {
	.art-col-2-noxxs .cnt-l {padding-left:0; padding-right:15px} 
	.art-col-2-noxxs .cnt-r {padding-left:15px; padding-right:0} 
}

/* table */
table.table-bg1 {border-spacing:1px; border-collapse:separate}
table.table-bg1 tr th {background:#ddd}
table.table-bg1 tr td {background:#eee; border-top:0; padding:8px 10px}
table.table-bg1 tr td.td-h {background:#ddd}
table.table-bg2 {border-spacing:1px; border-collapse:separate}
table.table-bg2 tr th {background:#545863; color:#fff; border-top:0}
table.table-bg2 tr td {background:#eee; border-top:0; padding:8px 10px}
table.table-bg2 tr td.td-h {background:#545863; color:#fff}
table.table-nobg .th-h1 {border-bottom:2px solid #EF766E}
table.table-nobg .th-h2 {border-bottom:2px solid #878787}
table.table-nobg tr th {border-top:0}
@media (min-width: 768px) {
	table.table-bg1 tr th,
	table.table-bg2 tr th {text-align:center}
}

/* article */
.article3 .cnt-img {height:370px}
.article4 {height:350px}
.article4 .cnt-txt {background-color:rgba(255,255,255,0.8); padding:0 15px; border-radius:3px}
@media (min-width: 768px) {
	.article4 .cnt-txt {height:200px}
}
@media (max-width: 767px) {
	.article1 .cnts {margin-bottom:40px}
	.article4 .narrow {padding:0 20px}	
	.article4 .cnt-txt {height:250px}
	.article5 .cnt-img {height:250px}	
	.article5 .cnts {padding:15px}
} 
@media (min-width: 768px) {
	.article5 .cnt-r {position:relative}
	.article5 .cnts {position:absolute; bottom:0; left:0; right:0; padding:30px}
	.article5 .cnt-img,
	.article5 .cnt-r {height:inherit} 
	.article5 {height:400px}
}
@media (min-width: 992px) {.article5 {height:350px}}
.article5 .cnt-l,
.article5 .cnt-r {padding-left:0; padding:0}

/* sample-collapse*/
.article2 ul {border:1px solid #ddd; border-bottom:0}
.article2 ul li {background: rgba(0,0,0,0.05)}
.article2 ul li a {
	display:block;
	padding:12px 20px 12px 20px;
	border-bottom:1px solid rgba(0,0,0,0.1);
}
.article2 ul li ul{padding:0}
.article2 ul li > ul > li> ul > li > a{padding:12px 20px 12px 60px}
.article2 ul li a p {
	margin:0;
	float:left;
}
.article2 ul li a p.has-children {width:90%}
.article2 ul li a p.has-fa {
	width:10%;
	margin-top:5px;
}
.article2 ul li a:hover,
.article2 ul li a:focus,
.article2 ul .active > a {
	 background:rgba(0,0,0,0.05);
	text-decoration: none
}
#sample1-collapse .fa,
#sample2-collapse .fa,
#sample3-collapse .fa {color:#f27242; margin-right:10px}

/* must-buttn */
.must-buttn {
    display: inline-block;
    font-weight: bold;
    border-width: 3px;
    border-style: solid;
    padding:5px 20px;
    margin:2px
}
.buttn-gray-empt {
	border-color:#666;
	color:#666 !important
}
.buttn-gray-empt:hover {
	color:#f27242 !important;
	border-color:#f27242
}
.buttn-black {
	border-color:#333;
	background:#333;
	color:#fff !important
}
.buttn-black:hover {
	color:#f27242 !important;
	background:none;
	border-color:#f27242
} 

/* article6 */
@media (max-width: 767px) {
	.article6 .cnt-l {height:250px} 
	.article6 .cnts {padding:20px 15px} 
}
@media (min-width: 768px) {
	.article6 .cnt-l,
	.article6 .cnt-r {height:350px} 
	.article6 .cnts {padding:0 50px} 
}

/* article7 */
@media (max-width: 767px) {.article7 .cnt-l {margin-bottom:40px}}
@media (max-width: 991px) {
	.article7 .cnt-img {height:250px}
	.article7 .cnts {padding:20px}
}
@media (min-width: 992px) {
	.article7 .cnt-img {height:350px}
	.article7 .cnts {padding:50px}
}

/* must-carousel */
#must-carousel1 a {display:block; padding:0 10px}
#must-carousel1 h5 {text-align:center}
#must-carousel1 .clickable {text-align:center}
@media (max-width: 767px) {
	.article6 #must-carousel2 .item {height:250px} 
}
@media (min-width: 768px) {
	.article6 #must-carousel2 .item {height:350px} 
}
#must-carousel2 .clickable {position:absolute; left:0; right:0; bottom:15px}
#must-carousel1.owl-theme .owl-controls .owl-page.active span,
#must-carousel1.owl-theme .owl-controls.clickable .owl-page:hover span,
#must-carousel2.owl-theme .owl-controls .owl-page.active span,
#must-carousel2.owl-theme .owl-controls.clickable .owl-page:hover span{
	filter: Alpha(Opacity=100);/*IE7 fix*/
	opacity: 1;
	background: #f27242;
}

/* must-tab */
.must-tab .nav-tabs {border-bottom:none}
.must-tab .nav>li>a {background-color:#666;border:1px solid #666; padding:10px 30px; color:#bbb; margin-right:1px}
.must-tab .nav>li>a:hover,
.must-tab .nav-tabs>li.active>a, 
.must-tab .nav-tabs>li.active>a:focus, 
.must-tab .nav-tabs>li.active>a:hover,
.must-tab .nav>li>a:hover,
.must-tab .nav-tabs>li.active>a, 
.must-tab .nav-tabs>li.active>a:focus, 
.must-tab .nav-tabs>li.active>a:hover {background-color:#e8e8e8;border: 1px solid #e8e8e8;border-bottom-color: transparent; font-weight:bold; color:#333}
.must-tab .tab-content {background:#e8e8e8; padding:15px}
@media (max-width: 480px) {
	.must-tab	.nav-tabs > li {float: none; margin-bottom:1px}
	.must-tab .nav-tabs > li >a {margin-right:0; border-radius:2px}
}
@media (min-width: 481px) {
	.must-tab .nav-tabs > li {float:left}
	.must-tab .nav>li>a {border-radius:2px 2px 0 0}
}