@charset "utf-8";

/* 서브 페이지 작업 시 top.html에서 content.css 연결 필요 */
#sub_visual{ position: relative; height: 350px; background: 50% / cover; text-align: center; color: #fff; z-index: 1; }
#sub_visual .inr{ display: flex; justify-content: center; align-items: center; position: relative; height: 100%; }
#sub_visual::before{ content: '';  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); mix-blend-mode: multiply; }
#sub_visual.about{ background-image: url(../images/content/img_sub_visual_1.jpg); }
#sub_visual.business{ background-image: url(../images/content/img_sub_visual_2.jpg); }
#sub_visual.brand{ background-image: url(../images/content/img_sub_visual_3.jpg); }
#sub_visual.product{ background-image: url(../images/content/img_sub_visual_4.jpg); }
#sub_visual.customer{ background-image: url(../images/content/img_sub_visual_5.jpg); }
#sub_visual h2 b{ display: block; font-size: 40px; }
#sub_visual h2 span{ font-size: 20px; font-weight: 300; letter-spacing: .05em; }
.sub_navi{ display: flex; position: relative; margin-top: -30px; z-index: 1; }
.sub_navi::before{ content: ''; position: absolute; inset: 0 100% 0 -50vw; -webkit-inset: 0 100% 0 -50vw; background: #3e62aa;}
.sub_navi > *{ display: flex; justify-content: center; align-items: center; }
.sub_navi .home{ position: relative; margin-left: -10px; flex: 0 0 60px; height: 60px; background: #3e62aa }
.sub_navi p{ padding: 0 54px; background: #333; text-transform: uppercase; color: #fff }

.sub h3{line-height:1.2; font-size:40px; font-weight:400;}
.sub h3 > span{color:#f26c3c; font-weight:600;}
.sub h4{font-size:35px; font-weight:600;}
.red_txt{color:#b7111b;}

.snb{margin:30px 0 100px;}
.snb ul{font-size:0; text-align:center;}
.snb ul li{display:inline-block; padding:0 80px;}
.snb ul li a{display:block; position:relative; padding:0 3px; font-size:20px; color:#555;}
.snb ul li a.on{color:#333; font-weight:bold;}
.snb ul li a.on:before{content:''; display:block; position:absolute; bottom:0; left:0; width:100%; height:40%; background:rgba(223,146,46,0.6); z-index:-1;}

/* 카테고리 변형되어 수정 */
.web > .sub{margin-top:120px;}
.sub{/* margin-top:120px; */ text-align:center;}
.sub.mt0{margin-top:0;}
.company{text-align:center;}
.company .txt_box{margin-top:100px; font-size:0; text-align:left;}
.company .txt_box h5{display:inline-block; width:40%; margin-right:10%; font-size:26px; color:#080808; font-weight:600;}
.company .txt_box p{display:inline-block; width:50%; font-size:16px; font-weight:300; vertical-align:top;}
.company .txt_list{margin-top:100px; font-size:0; text-align:center;}
.company .txt_list li{position:relative; display:inline-block; width:130px; height:130px; margin-right:20px; border:1px solid #b7111b; box-sizing:border-box; vertical-align:top; border-radius:50%;}
.company .txt_list li:last-child{margin-right:0; background:#b7111b; color:#fff;}
.company .txt_list li p{position:absolute; top:50%; left:50%; width:90%; transform:translate(-50%, -50%); font-size:16px; line-height:1.2;}

.history{position:relative; text-align:center;}
.history:before{content:''; display:block; position:absolute; bottom:-320px; left:0; width:1920px; height:1003px; background:url(/images/content/img_history_bg.png)no-repeat 50% 50%; background-size:cover;}
.history_cont{position:relative;}
.history_cont:after{content:''; display:block; position:absolute; top:-150px; right:80px; width:301px; height:301px; background:url(/images/content/img_history_bg2.png)no-repeat 50% 50%; background-size:cover; z-index:-1;}
.history_cont ul{position:relative; width:650px; margin:0 auto;}
.history_cont ul:after{content:''; display:block; clear:both;}
.history_cont ul:before{content:''; display:block; position:absolute; top:0; left:50%; width:3px; height:100%; background:rgba(47,47,47,0.1); transform:translateX(-50%);}
.history_cont ul li{position:relative; width:275px; margin-bottom:40px; clear:both;}
.history_cont ul li:last-child{margin-bottom:0;}
.history_cont ul li:after{content:''; display:block; position:absolute; top:5px; width:5px; height:5px; background:#fff; border:5px solid #c50018; border-radius:50%;}
.history_cont ul li:before{content:''; display:block; position:absolute; width:255px; height:270px; background-repeat:no-repeat; background-size:cover; background-position:50% 50%;}
.history_cont ul li:nth-child(1):before{background-image:url(/images/content/img_history01.jpg); right:-250px; top:0;}
.history_cont ul li:nth-child(4):before{background-image:url(/images/content/img_history02.jpg); left:-250px; top:-80px;}
.history_cont ul li:nth-child(7):before{background-image:url(/images/content/img_history03.jpg); right:-250px; top:-110px;}
.history_cont ul li.right:after{left:-58px;}
.history_cont ul li.right{float:right; margin-left:50px; text-align:left;}
.history_cont ul li.left{float:left; margin-right:50px; text-align:right;}
.history_cont ul li.left:after{right:-57px;}
.history_cont ul li dl dt{position:relative; line-height:1; padding-bottom:10px; font-size:35px; font-weight:600; color:#333;}
.history_cont ul li dl dt:before{content:''; display:block; position:absolute; top:12px; width:40px; height:0px; border:1px dashed #808080;}
.history_cont ul li.right dl dt:before{left:-50px;}
.history_cont ul li.left dl dt:before{right:-50px;}
#content h2.none:before{display:none;}

.chart{position:relative; margin-top:120px;}
.chart:before{content:''; display:block; position:absolute; bottom:150px; left:0; width:487px; height:551px; background:url(/images/content/img_chart_bg.png)no-repeat 50% 50%; z-index:10;}
.chart > .inr2{z-index:100;}

.distri{position:relative; margin-top:120px;}
.distri:before{content:''; display:block; position:absolute; right:0; bottom:0; width:249px; height:359px; background:url(/images/content/img_distri_bg.png)no-repeat 50% 50%;}
.distri .distri_txt{overflow:hidden;}
.distri .distri_txt .img_box{float:left;}
.distri .distri_txt .txt_box{float:right; text-align:left;}
.distri .distri_txt .txt_box ul{padding-top:50px;}
.distri .distri_txt .txt_box ul li{position:relative; padding-left:10px;}
.distri .distri_txt .txt_box ul li:before{content:''; display:block; position:absolute; top:50%; left:0; width:3px; height:3px; border-radius:50%; background:#080808; transform:translateY(-50%);}

.greet .txt_box p{padding-top:40px;}
.greet .txt_box p .br{display:block;}
.greet .img_area{margin-top:100px; overflow:hidden;}
.greet .img_area img{float:left; width:50%;}

.map_area{position:relative;}
.map_area .map_txt{text-align:left;}
.map_area .map_txt h6{position:relative; display:inline-block; margin-bottom:10px; padding-left:25px; font-size:28px; font-weight:300;}
.map_area .map_txt h6:before{content:''; display:block; position:absolute; top:5px; left:0; width:20px; height:26px; background:url(/images/content/icon_map.png)no-repeat 50% 50%;}
.map_area .map_txt ul li{display:inline-block; padding-right:20px;}
.map_area .map_txt ul li p{font-size:18px; color:#666;}
.map_area .map_txt ul li p span{display:inline-block; color:#333; font-weight:600;}
.map_area .map_mark{position:absolute; top:0; right:0; width:430px; height:230px; background:#3e62aa; z-index:10;}
.map_area .map_mark:before{content:''; display:block; position:absolute; top:50%; left:50%; width:218px; height:120px; background:url(/images/content/icon_mark.png)no-repeat 50% 50%; transform:translate(-50%, -50%);}
.map_box{margin-top:80px;}

.business{text-align:center;}
.business .tit_txt{margin:40px 0;}
.business .txt_box{padding:30px 110px; overflow:hidden;}
.business .txt_box.bg{background:#f6f6f6;}
.business .txt_box .txt_area{float:left; padding-top:100px; text-align:left;}
.business .txt_box .txt_area h5{position:relative; display:inline-block; padding-left:50px; line-height:1; font-size:32px; font-weight:600; color:#333;}
.business .txt_box .txt_area h5:before{content:''; display:block; position:absolute; top:50%; left:0; width:45px; height:2px; background:#333; transform:translateY(-50%);}
.business .txt_box .txt_area span{display:inline-block; padding-left:30px; font-size:16px; color:#448469; font-weight:500; vertical-align:6px;}
.business .txt_box .txt_area p{padding-top:40px; padding-left:50px;}
.business .txt_box .img_area{float:right; box-shadow:5px 10px 20px rgba(0,0,0,0.2);}

.lacena{height:auto; padding:55px 0; background:url(/images/content/img_lacena_bg.jpg)no-repeat 50% 50%; background-size:cover; text-align:left; box-sizing:border-box;}
.baekdoo{background:url(/images/content/img_backdo_bg.jpg)no-repeat 50% 50%; background-size:cover;}
.lacena h4{display:inline-block; font-size:36px; font-weight:600; color:#333;}
.lacena span{display:inline-block; padding-left:20px; font-size:16px; color:#9b1921; font-weight:500; vertical-align:8px;}
.lacena.baekdoo span{color:#1f62af;}
.lacena h5{padding-top:80px; font-size:30px; color:#9b1921; font-weight:500;}
.lacena.baekdoo h5{color:#1f62af;}
.lacena p{padding-top:40px; font-size:20px; font-weight:300; letter-spacing:-1px;}
.lacena p > em{color:#9b1921; font-size:24px; font-weight:500;}

.brand2{margin-top:80px; text-align:left;}
.brand2 h4{font-size:26px; margin-bottom:50px;}

.product_sub{position:relative; width:1300px; margin:80px auto 0;}
.product_sub:before{content:''; display:block; position:absolute; bottom:-40px; left:50%; width:100%; height:180px; background:#f6f6f6; border-top-left-radius:100px; border-top-right-radius:100px; transform:translateX(-50%);}
.product_sub ul{overflow:hidden;}
.product_sub ul li{width:50%; float:left; margin-bottom:60px;}
.product_sub ul li .img_area{float:left; height:250px;}
.product_sub ul li .txt_area{float:left; width:30%; padding-top:80px; margin-left:50px;}
.product_sub ul li .txt_area p{padding-bottom:20px; font-size:17px; font-weight:300; color:#666;}
.product_sub ul li .txt_area span{display:block; font-size:26px; color:#333; font-weight:600;}
.swiper-button-next,
.swiper-button-prev{width:20px; height:40px; margin-top:0; background:url(/images/common/icon_arrow.png)no-repeat 50% 50%; opacity:0.4;}
.swiper-button-next{right:-40px;}
.swiper-button-prev{left:-40px;}
.swiper-button-prev{transform:rotate(-180deg);}
.swiper-button-next:after,
.swiper-button-prev:after{display:none;}
.btn_area{margin-top:60px;}

.product_swiper{overflow:hidden;}
.product_sub .swiper-slide .img_area{float:left; height:250px;}
.product_sub .swiper-slide .txt_area{float:left; width:30%; padding-top:80px; margin-left:50px;}
.product_sub .swiper-slide .txt_area p{padding-bottom:20px; font-size:17px; font-weight:300; color:#666;}
.product_sub .swiper-slide .txt_area span{display:block; font-size:26px; color:#333; font-weight:600;}

.services_area{padding:80px 0; background:#f6f6f6;}
.services_area h4{margin-bottom:20px; font-size:35px; font-weight:600;}
.services_area ul{font-size:0;}
.services_area ul li{display:inline-block; width:32%; height:300px; margin-right:2%; margin-top:2%; padding:50px 20px; background:#fff; border:1px solid #c8c8c9; box-sizing:border-box; box-shadow:10px 0px 20px rgba(0,0,0,0.1); vertical-align:top;}
.services_area ul li:nth-child(3),
.services_area ul li:last-child{margin-right:0;}
.services_area ul li i{display:block; width:71px; height:50px; margin:0 auto; background-repeat:no-repeat; background-size:contain; background-position:50% 50%;}
.services_area ul li:nth-child(1) i{background-image:url(/images/content/icon_baek01.png);}
.services_area ul li:nth-child(2) i{background-image:url(/images/content/icon_baek02.png);}
.services_area ul li:nth-child(3) i{background-image:url(/images/content/icon_baek03.png);}
.services_area ul li:nth-child(4) i{background-image:url(/images/content/icon_baek04.png);}
.services_area ul li:nth-child(5) i{background-image:url(/images/content/icon_baek05.png);}
.services_area ul li span{display:block; margin:20px 0; font-size:18px; font-weight:500;}
.services_area ul li p{font-size:15px; font-weight:300; color:#666;}


/* 상세페이지 이미지 */
.area_shopView .product-slider-view div {height: 500px;overflow:hidden;}
.area_shopView .product-slider-view .slick-slide img {object-fit: cover; width:500px; height:500px;margin: 0 auto;}
.area_shopView .product-slider-nav {margin-top:15px;}
.area_shopView .product-slider-nav .slick-list {margin:0 -10px 0 0;}
.area_shopView .product-slider-nav .slick-slide {overflow:hidden; margin-right:10px; height:105px;cursor: pointer;}
.area_shopView .product-slider-nav .slick-slide img {object-fit: cover; width:100%; height:100%;}
.area_shopView .product-slider-nav .slick-dots{display:none;}

span#simple_info {color: #2e72d9;text-align: left;}

@media all and (max-width:1100px){

.area_shopView .product-slider-view .slick-slide img {width:100%; height:100%;}

}


@media (max-width:1300px){
    .product_sub{width:96%;}
}

@media (max-width: 1279px){
	#sub_visual{ height: 280px }
	#sub_visual h2 b{ font-size: 34px }
	#sub_visual h2 span{ font-size: 18px }
}

@media (max-width:1180px){
    .business .txt_box{padding:30px;}
    .swiper-button-next{right:0px;}
    .swiper-button-prev{left:0px;}
}

@media (max-width:1080px){
    .history_cont ul li:before{display:none;}
    .distri .distri_txt .img_box,
    .distri .distri_txt .txt_box{float:none;}
    .lacena,
    .baekdoo{background-position:70% 50%;}
    .lacena h5{padding-top:40px; font-size:24px;}
    .lacena p{font-size:18px;}
    .lacena p > em{font-size:20px;}
	.area_shopView .product-slider-view div {height: auto}
}

@media (max-width:770px){
    .product_sub:before{display:none;}
    .product_sub ul li{position:relative; float:none; width:100%; margin-bottom:40px;}
    .product_sub ul li:after{content:''; display:block; clear:both;}
    .btn_area{margin-top:0;}
}

@media (max-width: 767px){
	#sub_visual{ height: 240px }
	#sub_visual h2 b{ font-size: 28px }
	#sub_visual h2 span{ font-size: 16px }
	.sub_navi .home{ margin-left: -15px; flex: 0 0 50px; height: 50px; }
	.sub_navi p{ padding: 0 45px }
    
    .snb ul li{padding:0 20px;}
    
    .sub h3 br{display:none;}
    .company .txt_box h5{width:100%; margin-right:0; margin-bottom:30px;}
    .company .txt_box p{width:100%;}
    
    .chart:before{display:none;}
}

#content{padding:81px 0;}
#content h2{position:relative; display:inline-block; line-height:1; margin-bottom:40px; font-size:35px; color:#111; font-weight:700; text-align:center; word-break:keep-all;}
#content h2:before{content:''; display:block; position:absolute; bottom:-30px; left:50%; width:50px; height:1px; margin-left:-25px; background:#555;}
@media ( max-width: 1279px ){
	#content{ padding: 60px 0 }
}
/* 일미소개 */
.area_about{max-width:1100px; margin:30px auto 0;}
.area_about:after{content:''; display:block; clear:both;}
.area_about .box_img{width:100%; padding-top:332px;}
.area_about .box_img{background:url(../images/content/img_about01.jpg) no-repeat 50% 50%; background-size:cover;}
.area_about .tit{font-size:22px; font-weight:500;}
.box_txt{position:relative; max-width:1100px; margin:0 auto; padding:60px 0;}
.box_txt h3{font-size:28px; font-weight:500; color:#333; word-break:keep-all; line-height:1.5em;}
.box_txt p{padding:15px 0; font-size:16px; font-weight:400; color:#666; letter-spacing:-1px; line-height:1.7em; word-break:keep-all;}
.box_txt p > span.red_bg{background:#e84950; color:#fff;}
.box_txt strong{color:#111; font-weight:500;}
.box_txt b{font-size:17px; font-weight:500; color:#111;}



@media screen and (max-width:1150px){
	.area_about .box_img{padding-top:28.8695652173913vw;}
	.box_txt{padding:40px 0 0;}
	.box_txt p br{display:none;}
}

@media screen and (max-width:1024px){
    .business .txt_box .txt_area{float:none; padding:40px 0; text-align:center;}
    .business .txt_box .img_area{float:none; box-shadow:none;}
    .business .txt_box .txt_area h5{display:block; padding-left:0; margin-bottom:30px;}
    .business .txt_box .txt_area h5:before{top:inherit; left:50%; bottom:-15px; transform:translate(-50%, 0);}
    .business .txt_box .txt_area span{display:block; padding-left:0;}
    .business .txt_box .txt_area p{padding-left:0;}
    .business .txt_box .txt_area p br{display:none;}
}

@media screen and (max-width:940px){
    .map_area .map_mark{position:relative; width:100%; margin-top:20px;}
    .services_area ul li{width:49%;}
    .services_area ul li:nth-child(3){margin-right:2%;}
    .services_area ul li:nth-child(2n){margin-right:0;}
    .lacena{background-position:60% 50%;}
}

@media screen and (max-width:800px){
    .lacena, 
    .baekdoo{background-position:20% 50%;}
}

@media screen and (max-width:680px){
	#content h2{font-size:30px;}
	.area_about .box_img.right{margin-left:10px;}
    .certification_area ul li{width:49%;}
    .certification_area ul li:nth-child(2){margin-right:0;}
    
    .business .txt_box .txt_area h5{font-size:24px;}
    .business .txt_box .txt_area{padding:0 0 30px;}
    .business .txt_box .txt_area p{padding-top:20px;}
    .business .tit_txt br{display:none;}
    
    .lacena h5 br,
    .lacena p br{display:none;}
}

@media screen and (max-width:650px){
    .sub{margin-top:60px;}
    .history:before{display:none;}
    .history_cont ul{width:100%;}
    .history_cont ul:before{left:2%;}
    .history_cont ul li.right,
    .history_cont ul li.left{float:none;}
    .history_cont ul li.left{text-align:left; margin-right:0; margin-left:50px;}
    .history_cont ul li.right:after{left:-46px;}
    .history_cont ul li.left:after{left:-46px; right:inherit;}
    .history_cont ul li.right dl dt:before{left:-46px;}
    .history_cont ul li.left dl dt:before{right:inherit; left:-46px;}
    .greet .img_area img{float:none; width:100%;}
    .history_cont:after,
    .distri:before{display:none;}
    .company .txt_box{margin-top:40px;}
    .company .txt_list{margin-top:40px;}
    
    .sub h3{font-size:30px;}
    .sub h4{font-size:26px;}
    .company .txt_box h5{font-size:20px;}
    
    .services_area ul li{width:100%; margin-right:0; height:auto;}
    .lacena h4{font-size:26px;}
    .lacena span{vertical-align:4px;}
    .lacena h5{font-size:20px;}
    .lacena p{font-size:15px;}
    .lacena p > em{font-size:17px;}
}

@media screen and (max-width:480px){
    .line_list li{width:49%;}
    .line_list li:nth-child(2n){margin-right:0;}
    .line_list li:last-child{margin-right:0 !important;}
    .line_list li:nth-child(3n){margin-right:2%;}
    
    .map_area .map_txt h6{font-size:22px;}
    .map_area .map_txt h6:before{top:0;}
    .map_area .map_txt ul li p{font-size:14px;}
}

@media screen and (max-width:450px){
    .company .txt_list li{width:100%; padding:25px 0; margin-right:0; height:auto; border-radius:0; margin-bottom:20px;}
    .company .txt_list li:last-child{margin-bottom:0;}
}

@media screen and (max-width:420px){
	#content{padding-bottom:40px;}
	#content h2{margin-top:30px;}
    .product_sub ul li .img_area{float:none; height:auto; text-align:center;}
    .product_sub .swiper-slide .img_area{float:none; height:auto; text-align:center;}
    .product_sub ul li .txt_area{float:none; width:100%; padding-top:30px; margin-left:0; text-align:center;}
    .product_sub .swiper-slide .txt_area{float:none; width:100%; padding-top:30px; margin-left:0; text-align:center;}
}

@media screen and (max-width:370px){
	#content h2{font-size:25px;}

	.area_about .box_img{float:none; width:100%; padding-top:40.54054054054054vw;}
	.area_about .box_img{margin-right:0;}
    
    .snb ul li{padding:0 10px;}
    .snb ul li a{font-size:18px;}
}