/* 탭메뉴 */
.P-scontent{position: relative; width: 100%; height: 600px; overflow: hidden; transition:all .5s ease;}
.top-menu{overflow:hidden; height:100%; text-align:center;}
.top-menu-title{font-size:40px; font-weight:800; color: #fff; text-align: left; position: absolute; left:23%; top: 250px;}
.blackBg {width:100%; height:100%; position:absolute; top:0; left:0; background:rgba(0, 0, 0, 0.75);}

.sub_tab_wrap{width: 100%; margin: auto;}
.sub_tab_wrap .sunghwaft_tab{text-align: left; line-height: 40px; padding:0 20px;}
.sunghwaft_tab.on a {color: #fff; font-weight: 700; transform:translateY(0px);}
.sunghwaft_tab a{color: rgba(255, 255, 255, 0.5); font-weight: 400; font-size: 20px;display: block;}
/* 탭메뉴 */

/* 회사소개 */
#sub_wrap { width: 100%; max-width: 1400px; padding: 130px 0; margin: 0 auto; }
#sub_wrap .sub_txt { margin-top: 60px; }
#sub_wrap .sub_txt h3 { font-size: 24px; font-weight: 600; margin-bottom: 35px; line-height:1.3em}
#sub_wrap .sub_txt p { font-size: 18px;  }
#sub_wrap .sub_txt .flex_wrap { display: flex; flex-wrap: wrap; justify-content: space-between;  }

.about_at .flex_wrap { align-items: center; }
.about_at .flex_wrap > div { width: 48%; }

/*about01*/
.about_01 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-around;
    flex-wrap: wrap;
} 
.about_img {
width:50%;
  padding: 10% 5%;  
}
.about_txt {
width:50%;  
  padding: 20% 10%;
}           
.about_txt > p {
 color:#fff;
}
/* 메뉴 */    
/* sub02 */
.menu_wrap { width: 100%; max-width: 1300px; display: flex; flex: wrap; justify-content: space-between; margin: 0 auto; padding: 40px 0 40px; }
.menu_wrap .side_left { width: 25%; overflow: hidden; }
.menu_wrap .side_right { width: 80%; overflow: hidden; }
.category_list .category { border: 1px solid #ffffff; }
.category_list .category .menu_tab {
    display: block;
    padding: 12px 25px;
    cursor: pointer;
    border: 0.5px solid #fff;
}
/* .category_list .category .menu_tab { display: block; padding: 12px 25px; cursor: pointer; border: 0.5px solid #000000 }*/
.category_list .category .menu_tab:hover {
    background: rgb(221 221 221 / 20%);
}
/*.category_list .category .menu_tab:hover { background: rgba(209,56,48,.2); } */
.menu_tab.active, .menu_tab.active:hover { background: #2E8027 !important; }
.category_list .category .menu_tab p { color: #fff; font-weight: 400; text-align: left; font-size: 18px; }
.category_list .category .menu_tab.active p { color: #fff; }


.menu_content { display: none;}
#menu_background {background-color: #333} 
.menu_content.active { display: block; padding: 5%;}
.menu_content .box2 {
    text-align: left;
    display: inline-block;
    width: 100%;
    font-size: 24px;
    font-weight: 600;
    line-height: 28px;
    padding: 1px;
    margin-bottom: 50px;
    color: #ffffff;
    border-left: 5px solid #2E8027;
    padding-left: 10px;
}
/*  .menu_content .box2 { display: inline-block;  font-size: 24px; font-weight: 600; line-height: 26px; text-align: center; padding: 15px 0; margin-bottom: 50px; color: #ffffff; border-bottom: 2px solid #000; }*/
.menu_content .box2 small { font-size: 13px; }
.menu_content .box4 { text-align: right; margin-top: -30px; }
.menu_content .box4 p { color: #C51F22; font-weight: 500; }
.menu_content .box5 { font-size: 17px; font-weight: 600; line-height: 26px; text-align: left; padding-left: 10px; margin-bottom: 20px; color: #fff; border-left: 4px solid #d13830;   }
.s_table04 { width: 100%; border-bottom: 2px solid #ffffff; margin-bottom: 60px; }
.s_table04 th { width: 80%; font-size: 20px;line-height:26px; text-align: left; font-weight: 500; border-bottom: 1px solid #ededed; padding: 18px 3px; vertical-align: top; color: #ffffff; }
.s_table04 tr { width:100%;}
/* 메뉴 이미지 */    
.s_table04 tr.img_tr { width: 60%; }
.s_table04 tr.img_tr img { width: 60%; display:block;}
.s_table04 th.img_th {border-bottom: 0px solid #ededed;}


.s_table04 th span { font-size: 14px; font-weight: 300; color: #ffffff; }
.s_table04 td { font-size: 18px; font-weight: 600; line-height: 26px; text-align: right; border-bottom: 1px solid #ededed; padding: 18px 15px; color: #ffffff; }

/* sub02 */

/* visit*/
div#sub_wrap.online_order {
   
    margin: auto; 
    background-color: #333;
    max-width: 100%;
}

.map_wrap {margin-bottom:200px;  padding: 0 10%;}
.map_box p { background: #2E8027; color:#fff; padding: 6px 12px; }
.map_box h3 { text-align: center; color:#fff;}
.location_at .flex_wrap > div { width: 50%; padding: 40px; border-left: 2px solid #fff; }
.location_at p,h3 { color:#fff; }
.location_at p { color:#fff; font-family: 'ZCOOL XiaoWei', serif;}   
.order_btnbox { margin: 0 auto; }
.order_btnbox .linkbtn { margin: 20px auto; }
.linkbtn { display: block; width: 145px; font-size: 18px; text-align: center; border-bottom: 2px solid #000; padding: 10px 0;  }
.sub_top, .scent_why, .scent_year {width:100%; }
/*.subtop01 { background:#fff url("../images/sub/subtop_03.png") no-repeat center / cover; background-attachment:fixed; }
.subtop02 { background:#fff url("../images/sub/subtop_04.png") no-repeat center / cover; background-attachment:fixed; }
.subtop03 { background:#fff url("../images/sub/subtop_05.png") no-repeat center / cover; background-attachment:fixed; }
.subtop04 { background:#fff url("../images/sub/subtop_06.png") no-repeat center / cover; background-attachment:fixed; }*/
  
.subtop01 { background:#fff url("../images/sub/sub_top_m1.webp") no-repeat center / cover; background-attachment:fixed; }
.subtop02 { background:#fff url("../images/sub/sub_top_m2.webp") no-repeat center / cover; background-attachment:fixed; }
.subtop03 { background:#fff url("../images/sub/sub_top_m3.webp") no-repeat center / cover; background-attachment:fixed; }
.subtop04 { background:#fff url("../images/sub/sub_top_m4.webp") no-repeat center / cover; background-attachment:fixed; }
.subtop05 { background:#fff url("../images/sub/sub_top_m5.webp") no-repeat center / cover; background-attachment:fixed; }
 

.sub_section_in {width:1400px; margin:auto; padding:15vh 0;}
.st_tit {display:block; margin:120px 0 40px; font-size:40px; font-weight:600; text-align:center; line-height:1.5; color:#fff;  
  font-family: 'ZCOOL XiaoWei', serif;
  /* font-family: 'Alice', serif;*/}
.st_txt {display:block; width: 100%; font-size:16px; font-weight:400; text-align:center; line-height:1.8; color:#fff;}

.scent_why {background:#fff;}
.scent_why .sub_section_in {padding:20vh 0 10vh;}
.sb_tit {font-size:50px; font-weight:bold; line-height:1.4; padding-bottom:50px;}
.sb_tit span {display:block;}
.scent_why li {padding:18px 0; border-bottom:1px solid #ccc; font-size: 17px; font-weight:300; line-height: 1.4; word-break:keep-all;}
.scent_why li span {color:#004650;}
.scent_why .left {width:48%; float:left;}
.scent_why .right {width:51%; float:right; margin-top: -92px;}
.why_in {position:relative; height:650px;}
.why_in div {position:absolute; top:0; left:50%; transform:translateX(-50%); width:290px; height:290px; border-radius:50%; background:#eaeceb; text-align:center;}
.why_in div img {margin-top:34px;}
.why_in div:nth-child(2) {top:50%; transform:translateY(-50%); right:0; left: inherit; background:rgba(0, 70, 80, 0.5);}
.why_in div:nth-child(3) {bottom:0; top: inherit; background:rgba(0, 70, 80, 0.8);}
.why_in div:nth-child(4) {left:0; top:50%; transform:translateY(-50%); bottom:0; background:rgba(0, 70, 80, 0.9);}
.why_in div h6 {font-size:22px; line-height: 1.4; margin-top: 10px; font-weight:700; text-align:center;}
.why_in div p {display:block; width:72%; margin:auto; font-size:16px; font-weight:400; line-height:1.6; text-align:center; word-break: keep-all;}
.why_in div:nth-child(2) h6, .why_in div:nth-child(2) p, .why_in div:nth-child(3)  h6, .why_in div:nth-child(3) p, .why_in div:nth-child(4) h6, .why_in div:nth-child(4) p {color:#fff;}
.scent_year {background:#f9f9f9;}
.scent_year .sb_tit {width:46%; float:left;}
.scent_year table {width:54%; float:left;}
.scent_year table td.year {font-size:22px; font-weight:700; color:#004650; border-top:2px solid #004650; vertical-align: top;}
.scent_year table td {font-size:16px; font-weight:400; padding:18px 8px; border-bottom:1px solid #ccc;}
.scent_year table tr:first-child {border-top:1px solid #ccc;}

.scent_why.effect .left li:first-child {font-size:24px; font-weight:700; color:#004650; border-bottom:2px solid #004650;}
.effect_list {display:flex; align-content:flex-start; flex-wrap:wrap;}
.effect_list li {width:50%; text-align:left; font-size:16px; font-weight:400; padding:34px 20px;}
.effect_list li img {margin-bottom:20px;}
.effect_list li div strong {color:#004650;}

.scent_process {background:#f9f9f9;}
.scent_process ul, .scent_clients ul, .sc_product {display:flex; align-content:flex-start; flex-wrap:wrap;}
.scent_process li {width:23.9%; margin: 0 10px;}
.scent_process li:first-child {margin-left:0;}
.scent_process li:last-child {margin-right:0;}
.scent_process .num {width:40px; height:40px; line-height:40px; border-radius:50%; background:#004650; font-size:16px; font-weight:bold; color:#fff; text-align:center; margin:auto;}
.scent_process .img_box {width:100%; height:200px; overflow:hidden; margin-top:14px;}
.scent_process .img_box div {width:100%; height:100%; -webkit-transition: transform .3s ease-out; -moz-transition: transform .3s ease-out; -ms-transition: transform .3s ease-out; -o-transition: transform .3s ease-out;}
.scent_process li:hover div div {-webkit-transform: scale(1.1); -moz-transform: scale(1.1);  -ms-transform: scale(1.1); /* IE 9 */ -o-transform: scale(1.1);  transform: scale(1.1);}
.txt_wrap {font-size:16px; font-weight:400; text-align:center; padding:14px 0;}

.scent_clients {background:#fff;}
.scent_clients li {width:25%; margin:0 auto; text-align:center;}
.scent_clients li:nth-child(5), .scent_clients li:nth-child(6), .scent_clients li:nth-child(7), .scent_clients li:last-child {margin-top:60px;}

.sc_product li {width:31%; background:#fff; border-radius:15px; padding:40px 0;}
.sc_product li:nth-child(2) {margin:0 30px;}
.pro_imgWrap {width:80%; margin: auto; height: 400px;}
.pro_imgWrap.one {width:60%}
.pro_imgWrap.two {width:80%}
.sc_product li h1 {font-size:26px; font-weight:700; color:#004650; text-align:center;}
.sc_product .st_txt {width:90%; min-height: 120px; margin:0 auto; color:#333; text-align:center; word-break: keep-all;}
.sc_product .st_txt small {display:block; font-size:15px; color:#5f5f5f;}
.sc_product div.st_txt {padding-top:10px; border-top:2px solid #004650; margin-top:10px; word-break: keep-all;}
.sc_product div.st_txt strong {color:#004650; font-weight:700; margin-right: 10px; display:inline-block;}
.sc_product div.st_txt a {position:relative;}
.sc_product div.st_txt a span {display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%;  height: 8px; background: #004650; opacity: 0.2;}

.sub_top.location {background:#fff;}
.sub_top.location .map {margin-bottom:100px;}
.sub_top.location  table {width:100%;}
.sub_top.location  table th {font-size:22px; font-weight:700; color:#004650; border-top:2px solid #004650; padding:0 16px;}
.sub_top.location  table td {font-size:16px; font-weight:400; padding:18px 8px; border-bottom:1px solid #ccc;}
.sub_top.location  table tr:first-child {border-top:1px solid #ccc;}

.sub_section_in:after {content:""; display:block; clear:both;}
.scent_year .sub_section_in:after {content:""; display:block; clear:both;}

/* 온라인오더 */
.order_btn { margin:0 auto;text-align:center; }
#order_btn { margin:0 auto;
  color:#fff; text-align:center;  display:inline-block;                
   margin-top: 30px;    
   font-size: 20px;
    font-weight: 400;
    border: 1px solid #fff;
    border-radius: 10px;
    padding: 15px 30px;
}      
#order_btn:hover {
  background-color: #2E8027;
  color: #fff;
}}



/*태블릿 [ ~ 1400px 적용] */
@media all and (max-width:1400px){  
	#sub_wrap { padding: 100px 5%; } 
  .sub_tabbox {left:17%;}

  .sub_section_in {width:90%;} 
  .scent_process li {width:23.5%;}
  .scent_why .left {width:39%;}
  .scent_why .right {width:56%;}
  .why_in {height:650px;}
	
}

@media all and (max-width:1078px){ 
  .st_tit {font-size:46px;}  
  .sb_tit {font-size:30px;}
  .scent_process li {width: 22%; margin: 0 2%;}
  .sc_product li:nth-child(2) {margin: 0 3%;}
}


@media all and (max-width:970px){ 
  #sub_wrap { padding: 80px 5%; } 
  #sub_wrap .sub_txt .flex_wrap { display: block; }
	#sub_wrap .sub_txt .flex_wrap > div { width: 100%; }
	#sub_wrap .sub_txt h3 { font-size: 20px; font-weight: 600; margin-bottom: 20px; }
	#sub_wrap .sub_txt p { font-size: 16px;  }
	.about_at .order_btnbox { display: flex; flex-wrap: wrap; justify-content: space-between; }
	.about_at .order_btnbox .linkbtn { width: 30%; }
	
	/* sub02 */
	.menu_wrap { display: block; padding: 60px 0; } 
	.menu_wrap .side_left { width: 100%; margin-bottom: 40px; }
	.menu_wrap .side_right { width: 100%; }

  .category_list .category {
    border-width: 1px;
    width: 90%;
    margin: 0 auto;
}
  /* 	.category_list .category { border-width: 1px;  }*/
	.category_list .category .menu_tab { padding: 8px 20px; }
	.category_list .category .menu_tab p { font-size: 15px; }
	.menu_content .box2 { font-size: 18px; padding: 8px 5px; margin-bottom: 30px;}
	.menu_content .box2 small { font-size: 12px; }
	.menu_content .box4 p {  font-size: 13px; }
	.menu_content .box5 { font-size: 15px; line-height: 22px; }
	.s_table04 th { font-size: 14px; line-height: 22px; padding: 8px 3px; }
	.s_table04 td { font-size: 14px; line-height: 22px; padding: 8px 3px;  }
	/* sub02 */
	
	.location_at .flex_wrap > div { padding: 30px; }
  .scent_why .sub_section_in, .sub_section_in {padding:13vh 0;}
  .scent_why .left, .scent_why .right, .scent_year .sb_tit, .scent_year table {width:100%; float:none;}
  .scent_why .right {margin-top:50px;}
  .why_in div h6 {font-size: 18px; margin-top: 54px;}
  .why_in div p {font-size:14px; margin-top:8px;}
  .why_in {height: 580px;}
  .why_in div {width:280px; height:280px;}
  .scent_year table td, .scent_why li, .txt_wrap, .sub_top.location table td{font-size:14px; line-height:1.6; word-break:keep-all;}
  .scent_process li {width:47%; margin-bottom:15px;}
  .scent_process li:nth-child(even) {margin-right:0;}
  .scent_clients li {width: 50%;}
  .scent_clients li:nth-child(5), .scent_clients li:nth-child(6), .scent_clients li:nth-child(7), .scent_clients li:last-child {margin-top:20px;}
  
/* 메뉴 이미지 */    
.s_table04 tr.img_tr { width: 80%; }
.s_table04 tr.img_tr img { width: 80%; display:block;}
.s_table04 th.img_th {border-bottom: 0px solid #ededed;}
  
  /*about01*/
.about_01 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-around;
    flex-wrap: wrap;
} 
.about_img {
width:50%;
  padding: 0%;  
}
.about_txt {
width:50%;  
  padding: 10% 10%;
}           
  
  
  
}

@media all and (max-width:640px){ 
  /*.sub_top {background: #004650 url("../images/sub/subtop_01_m.png") no-repeat right center / cover;}*/
	#sub_wrap .sub_txt { margin-top: 40px; }
  .st_tit {font-size: 30px; margin: 50px 0 20px; word-break: keep-all;}
  .st_tit small {display: block; margin-top:5px;}
  .st_txt {font-size:15px; width:90%; word-break:keep-all;}
  .scent_why.effect .left li:first-child {font-size:20px;}
  .sub_top.location table th {font-size:16px;}
  .why_in {height:auto;}
  .why_in div, .why_in div:nth-child(2), .why_in div:nth-child(3), .why_in div:nth-child(4) {position:relative; transform: inherit; top: inherit; left: inherit; margin: auto;}
  .why_in div h6 {margin:20px auto 0; padding-top: 69px;width: 80%; }
  .sc_product li {width:100%;}
  .sc_product li:nth-child(2) {margin:20px 0;}
  .sc_product li h1 {font-size:24px;}
  .pro_imgWrap {margin:20px auto;}
  .sc_product .st_txt {min-height:auto;}
	.linkbtn { font-size: 16px; }
  
  
  /* 메뉴 이미지 */    
.s_table04 tr.img_tr { width: 100%; }
.s_table04 tr.img_tr img { width: 100%; display:block;}
.s_table04 th.img_th {border-bottom: 0px solid #ededed; width:100%;}
  
  
  
    /*about01*/
.about_01 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-around;
    flex-wrap: wrap;
} 
.about_img {
width:100%;
  padding: 20% 10% 0% 10%;  
}
.about_txt {
width:100%;  
  padding: 10% 10%;
}           
  .about_txt h3 {
  font-size: 2em;
  }
  
  .map_box iframe{
   height:300px;dd
  }
  .map_wrap {margin-bottom:100px;}
  
}



@media all and (max-width:480px){
  .st_txt {font-size:14px;}
  .scent_clients li img {width:80%; margin:auto;}
  .pro_imgWrap {height:300px; margin:auto;}
  
  
  
  
}





