@charset "utf-8";
@import url("common.css");
@import url("../../css/sub.css");
@import url("footer.css");

#introduce, #slogun, #ci, #ci .ci-intro{margin-left:auto; margin-right:auto;}

#introduce{max-width:1200px;  text-align:left; box-sizing:border-box; }
#introduce .titlegroup {float:left; width:400px; }
#introduce .titlegroup h4{ font-size:35px; line-height:50px; font-weight:700;  font-family:'Noto Serif KR', serif; color:#444;}
#introduce .titlegroup h4 .empty{display:inline-block; width:15px;}
#introduce .titlegroup hr{width:30px; height:5px; background:#c11a21; text-align:left; margin-left:17px; margin-top:40px; margin-bottom:40px; }
#introduce .titlegroup .title{font-size:18px;  line-height:35px; padding-left:15px; color:#666; font-weight:700; }
#introduce .text{float:right; width:750px; font-size:18px; line-height:30px; color:#666; }
#introduce .text p{width:80%; text-align:right; font-weight:700;}


#slogun{max-width:1200px; color:#444;}
#slogun h4{font-size:25px; font-weight:700;}
#slogun .sbicon{padding-top:29px;}
#slogun .sbicon img{width:21px; height:18px;}

#slogun .textbox{max-width:700px; height:148px; position:relative; margin-left:auto; margin-right:auto; margin-bottom:58px; font-family:'Noto Serif KR', serif; }
#slogun .textbox .mark-left{width:46px; position:absolute; top:25px; left:0; }
#slogun .textbox .text{width:100%; position:absolute; top:34px; left:0; font-size:35px; font-weight:500;}
#slogun .textbox .mark-right{width:46px; position:absolute; top:25px; right:0; }
#slogun .textbox .mark-left img,
#slogun .textbox .mark-right img{width:100%;}

#slogun .philosophy{max-width:930px; margin-left:auto; margin-right:auto; }
#slogun .philosophy .left{width:380px; float:left; text-align:left;}
#slogun .philosophy .left .pilbox{width:100%; }
#slogun .philosophy .left .pilbox .title{color:#c11a21; font-size:55px; font-weight:100;}
#slogun .philosophy .left .pilbox .title b{font-weight:700;}
#slogun .philosophy .left .pilbox hr{width:30px; height:3px; background:#c11a21; margin-top:10px; margin-bottom:20px; text-align:left;}
#slogun .philosophy .left .pilbox .description{font-size:17px; line-height:30px;}
#slogun .philosophy .left .pilbox .description .red{color:#c11a21;}
#slogun .philosophy .left .mark{ float:left; width:80px; margin-top:120px; }
#slogun .philosophy .left .mark img{width:100%; }
#slogun .philosophy .left .second{ float:right; width:280px; margin-top:50px; margin-bottom:50px; text-align:right;}
#slogun .philosophy .left .second hr{float:right;}
#slogun .philosophy .right{width:500px; float:right;}
#slogun .philosophy .right > img{width:100%; }



#ci .ci-intro{font-size:20px; font-weight:300; color:#444; margin-bottom:40px; }
#ci .bg{background:#f2f2f2;}
#ci .concept{padding-top:40px; padding-bottom:80px; color:#444; }
#ci .concept > h5{font-size:18px; color:#333; font-weight:700; margin-bottom:60px;}
#ci .concept > img{height:164px; }
#ci .concept .main_concept{font-size:25px; line-height:35px; margin-top:40px;  font-weight:700;transition:0.3s;}
#ci .concept > hr{ width:40px; height:1px; background:#c11a21; margin-top:30px; margin-bottom:30px; margin-left:auto; margin-right:auto; }
#ci .concept .sub_concept{font-size:16px; line-height:30px; transition:0.3s;}

#ci .concept .greedbox{width:100%; max-width:501px; background:url(../../img/logo/greed_bg.png); margin-left:auto; margin-right:auto; margin-bottom:30px; padding-top:27px; padding-bottom:28px; border:solid 1px #e7e6e6;}
#ci .concept .colorbox{width:100%; max-width:485px; color:#666; margin-left:auto; margin-right:auto; margin-bottom:80px; }
#ci .concept .colorbox .black,
#ci .concept .colorbox .red{float:left; text-align:left; }
#ci .concept .colorbox .black hr,
#ci .concept .colorbox .red hr{display:inline-block; width:25px; height:10px; margin-right:15px;}
#ci .concept .colorbox .black{width:220px;}
#ci .concept .colorbox .black hr{background:#000; }
#ci .concept .colorbox .red{width:265px;}
#ci .concept .colorbox .red hr{background:#c11a21;}
#ci .concept .space img:nth-child(1){margin-right:70px;}

#ci .concept .signature{max-width:1000px;  margin-left:auto; margin-right:auto; }
#ci .concept .signature .family {float:left; text-align:left; width:412px; }
#ci .concept .signature .family:nth-child(1){margin-right:146px;}
#ci .concept .signature .family hr{width:100%; height:1px; background:#dcdcdc; margin-bottom:30px;}
#ci .concept .signature .family img{height:54px; margin-top:15px;  padding-left:30px;}


#ci .download-btn > h5{font-size:18px; color:#333; font-weight:700; margin-bottom:30px;}
#ci .download-btn{padding-top:40px; padding-bottom:80px; color:#444; }
#ci .download-btn .btns {max-width:1000px;  margin-left:auto; margin-right:auto; }
#ci .download-btn .btns a{display:inline-block; width:200px; height:35px; line-height:35px; font-size:18px; text-align:center;  background:#ececec; color:#333;}
#ci .download-btn .btns a:nth-child(2){margin-left:40px; margin-right:40px;}
#ci .download-btn .btns a:hover{background:#c1262d; color:#fff;}


#family_introduce{max-width:950px; margin-left:auto; margin-right:auto;  color:#555; text-align:left;}

#family_introduce > div{margin-bottom:80px;}
#family_introduce > div > .introgroup > .logo{margin-bottom:30px;}

#family_introduce .sb .logo,
#family_introduce > div > .introgroup{float:left; width:370px; }
#family_introduce .sb .text,
#family_introduce > div > .introgroup > .text{font-size:18px; line-height:35px; font-weight:300;}

#family_introduce .sb .logo img,
#family_introduce > div .introgroup .logo img{height:64px;}

#family_introduce .sb .text,
#family_introduce > div .images{float:right; width:550px; }

#family_introduce > div .images img{width:100%;}


#contact{max-width:1200px; margin-left:auto; margin-right:auto; text-align:left; color:#555;}
#contact .info{font-size:18px; margin-bottom:15px;}
#contact .info .left,
#contact .info .center,
#contact .info .right,
#contact .info > div .title,
#contact .info > div .description{float:left;}
#contact .info > div .title{width:50px; font-weight:700;}
#contact .info > div > hr,
#contact .info > div .title hr{width:30px; height:3px; background:#c11a21; text-align:left; margin-bottom:15px;}
#contact .info > div .description{font-weight:300; padding-top:20px;}
#contact .info .center{margin-left:30px; margin-right:190px;}
#contact .info .center .title,
#contact .info .center .description{padding-top:20px;}
#contact .info .right .title{width:80px;}


@media (max-width: 1199px){
	#introduce,
	#slogun,
	#ci .ci-intro,
	#ci .concept .main_concept,
	#ci .concept .sub_concept,
	#family_introduce,
	#contact{width:90%; max-width:600px; }
	#ci{width:100%;}
	
	#introduce .titlegroup {float:none; width:100%; }
	#introduce .text{float:none; width:100%; padding-left:15px; margin-top:30px; }	
	#introduce .text p{width:100%;}
	

	#slogun .textbox{max-width:350px; height:210px; margin-bottom:40px; }
	#slogun .textbox .mark-left{width:30px;}
	#slogun .textbox .text{font-size:31px;}
	#slogun .textbox .mark-right{width:30px; }
	
	#slogun .philosophy .left{width:100%; float:none; margin-bottom:30px;}
	#slogun .philosophy .right{width:100%; float:none;}
	
	#slogun .philosophy .left .mark{ margin-top:60px;}
	#slogun .philosophy .left .second{ margin-top:-10px; margin-bottom:-20px;}
	
	#ci .concept{padding-bottom:40px; }
	#ci .concept > img{height:120px; }
	#ci .concept > h5{margin-bottom:30px;}
	#ci .concept > hr{ margin-top:20px; margin-bottom:20px;}
	#ci .concept .main_concept,
	#ci .concept .sub_concept{margin-left:auto; margin-right:auto; }
	#ci .concept .main_concept{font-size:20px; line-height:30px; margin-top:20px;  }	
	
	#ci .concept .space{width:390px; margin-left:auto; margin-right:auto; }
	#ci .concept .space img:nth-child(1){margin-right:0; margin-bottom:20px;}

	#ci .concept .signature{max-width:412px; }
	#ci .concept .signature .family {width:100%; float:none;}
	#ci .concept .signature .family:nth-child(1){margin-right:0; margin-bottom:20px;}
	
	#family_introduce .sb .logo,
	#family_introduce > div > .introgroup > .logo{margin-bottom:10px;}

	#family_introduce .sb .logo,
	#family_introduce > div > .introgroup{float:none; width:100%;  }
	#family_introduce .sb .text,
	#family_introduce > div > .images{float:none; width:100%; margin-top:10px;}
	
	#family_introduce .sb .text,
	#family_introduce > div > .introgroup > .text{font-size:16px; line-height:30px;}
	
	#contact .info .left{margin-bottom:40px;}
	
	#contact .info > div{width:100%; }
	#contact .info .left .title{width:15%; min-width:65px; }	
	#contact .info .left .description{width:85%;  padding-top:0;}	
	#contact .info .right .title{width:100%; float:none; margin-bottom:10px;}
	#contact .info .right .description{width:100%;  padding-top:0;}
	#contact .info > div .title hr{margin-bottom:10px;}
}

@media (max-width: 999px){
	.pc2{display:none;}
	.mbl2{display:block;}
	
	#introduce,
	#slogun,
	#ci .ci-intro,
	#ci .concept .main_concept,
	#ci .concept .sub_concept,
	#ci .concept .greedbox,
	#ci .concept .colorbox,
	#ci .concept .space,
	#family_introduce,
	#contact{max-width:400px; }
	
	#slogun .philosophy .left .mark{ margin-top:78px;}
	#slogun .philosophy .left .second{ margin-top:30px; margin-bottom:30px;}	
	#slogun .philosophy .left .pilbox .title{font-size:35px;}		
	#slogun .philosophy .left .pilbox hr{margin-top:5px; margin-bottom:10px; }
	
	#ci .concept .colorbox .black{margin-bottom:10px;}	
	#ci .concept .colorbox .black,
	#ci .concept .colorbox .red{float:none; }
	#ci .concept .greedbox {padding-top:27px; padding-bottom:28px;}
	
	
	#contact .info .left{margin-bottom:20px;}
	#contact .info > div .title,
	#contact .info > div .description{float:none;}	
	#contact .info .left .title{width:100%; }	
	#contact .info .left .description{width:100%;  padding-top:0; margin-bottom:10px;}	
}
@media (max-width: 599px){	
	#introduce,
	#slogun,
	#ci .ci-intro,
	#ci .concept .main_concept,
	#ci .concept .sub_concept,
	#ci .concept .greedbox,
	#ci .concept .colorbox,
	#ci .concept .space,
	#family_introduce,
	#contact{max-width:270px; }
	
	#introduce .titlegroup h4{ font-size:27px; line-height:45px; }
	#introduce .titlegroup h4 .empty{width:12px;}
	#introduce .titlegroup hr{margin-top:20px; margin-bottom:20px; }
	#introduce .titlegroup .title{font-size:17px;  line-height:30px; }	
	#introduce .text{font-size:16px; line-height:30px; }

	#slogun .textbox{height:170px;}	
	#slogun .textbox .mark-left{width:20px;}	
	#slogun .textbox .text{top:28px; font-size:25px;  line-height:35px;}	
	#slogun .textbox .mark-right{width:20px; }
	
	#slogun .philosophy .left .mark{ margin-top:40px; }
	#slogun .philosophy .left .second{ margin-top:-60px; margin-bottom:40px;}
	
	#ci .concept > img{height:100px; }	
	#ci .concept .greedbox img{height:80px;}
	#ci .concept .colorbox{margin-bottom:40px; }
	#ci .concept .space img{width:100%;  }

	#ci .concept .signature{max-width:270px;  }
	#ci .concept .signature .family img{height:41px; margin-top:15px;  padding-left:0;}
	
	#ci .concept .main_concept{font-size:16px; line-height:26px; }	
	#ci .concept .sub_concept{font-size:15px; line-height:26px;}
	#ci .concept .greedbox {padding-top:27px; padding-bottom:27px;}	
	
	#family_introduce .sb .logo img,
	#family_introduce > div .introgroup .logo img{height:48px;}
	
	#contact .info{font-size:16px; margin-bottom:15px;}
}
@media (max-width: 399px){
	#introduce,
	#slogun,
	#ci .ci-intro,
	#ci .concept .main_concept,
	#ci .concept .sub_concept,
	#ci .concept .greedbox,
	#ci .concept .colorbox,
	#ci .concept .space,
	#family_introduce,
	#contact{max-width:250px; }
	
	#introduce .titlegroup h4{ font-size:25px; line-height:35px; }
	#introduce .titlegroup .title{font-size:15px;  line-height:25px; }	
	#introduce .text{font-size:15px; line-height:25px; }
	
	#slogun .textbox .text{top:28px; font-size:23px;  line-height:35px;}
	#slogun .philosophy .left .pilbox .description{font-size:15px; line-height:25px;}
}