/* 공통 */
.mtd20 {margin-top:2rem;}

/* 바로가기 */
.M_banner .title {display:flex;}
.M_banner .heading {max-width:15rem; white-space: nowrap; font-size: 1.2rem; color: #111111; line-height: 1; overflow: hidden; font-weight: 400; display:inline-block; vertical-align: middle;}
.M_banner .heading strong {font-weight:700; font-size:1.4rem;}
.M_banner ul {position:relative; display:flex; gap:1rem;}
.M_banner ul li {flex: 1 1 30%;}
.M_banner ul li a {overflow:hidden; display: flex; width:9.75rem; position:relative; height:9.75rem; flex-direction:column; align-items: center; gap:0.5rem; background:#fff; justify-content: center; font-size: 0.8rem; border:2px solid #cbcbcb; transition:all 0.3s; z-index:0;}
.M_banner ul li a .img {position:relative;}
.M_banner ul li a .img img{display: block; transition: 0.2s;}
.M_banner ul li a .txt {font-size:0.9rem; font-weight:700; color:#222; overflow: hidden; text-align:center; position:relative; z-index:0;}
.M_banner ul li a:hover .img img,
.M_banner ul li a:focus .img img { transform: rotateY(180deg); }
.M_banner ul li a:hover,
.M_banner ul li a:focus {border-color:#000; outline:1px solid #000; box-shadow:5px 0 0 rgba(118,118,118,0.3);}

/* 리스트배너 */
.M_list {width:100%; height:100%; margin-top:2rem; max-width:92rem; overflow: hidden;}
.M_list .title {display:flex;}
.M_list .heading {max-width:10rem; white-space: nowrap; font-size: 1.2rem; color: #fff; line-height: 1; overflow: hidden; font-weight: 700; display:inline-block; vertical-align: middle;}
.M_list .heading strong {font-weight:900;}
.M_list .heading p {font-size:1rem; color:#111;}
.M_list .slick-list {overflow:inherit;}
.M_list .item.slick-slide.slick-current + .slick-slide + .slick-slide + .item.slick-slide {transition:all 0s; opacity:0.8;}
.M_list .swiper-slide{ width:22rem;}
.M_list .box {width:100%; max-width:30rem; position:relative; background:#fff; height:calc(100% - 4rem); padding:2rem; color:#333; display:flex; flex-direction:column; gap:0;}
.M_list .box .title {display:flex; justify-content:space-between; margin-bottom:2rem;}
.M_list .box .title p strong {font-size:1.2rem; font-weight:900;}
.M_list .box .section p,
.M_list .box .section em {font-size:0.9rem; font-weight:400;}
.M_list .box .section span {font-size:0.9rem; font-weight:400;}
.M_list .box .section .name {height:3.85rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis;}
.M_list .box a {position:relative; margin-top:2rem; height:3rem; width:100%; display:flex; font-size:0.9rem; color:#000000; align-items:center; justify-content:center; font-weight:500; background:#f4f4f4; transition:all 0.3s; z-index:0;}
.M_list .box a:before {content:''; position:absolute; width:7rem; height:7rem; right:0; bottom:3rem; background:url('/images/bohun/template/E1/main/flower_icon.png'); z-index:-1; transition:all 0.3s; transform:translateY(10px); opacity:0;}
.M_list .box a:hover,
.M_list .box a:focus {background:#000; color:#fff;}
.M_list .box a:hover:before,
.M_list .box a:focus:before {transform:translateY(0px); opacity:1;}
.M_list .swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide {opacity: 0.8;}

.M_list .box.no_data{ display: flex; justify-content: center; max-width:100%; height:10rem; color:#fff; font-size: 1rem; font-weight: 200; padding:0; background:none; }

/* 바로가기 */
.M_link {width:100%;} 
.M_link ul{ position:relative; display:flex; justify-content:space-between; padding:0 2rem; top:1rem;}
.M_link ul li a {display: flex; flex-direction:column; align-items: center; gap:1.5rem; justify-content: center; font-size: 0.8rem;}
.M_link ul li a .img {position:relative; top:0rem; transition:all 0.3s;}
.M_link ul li a .img:before {content:''; position:absolute; width:4rem; height:4rem; border-radius:50%; left:50%; top:50%; background:#f4f4f4; transform:translate(-50%, -50%); transition:all 0.3s;  z-index:-1;}
.M_link ul li a .img img{display: block;}
.M_link ul li a .txt {font-size:0.9rem; font-weight:700; color:#222; overflow: hidden; position:relative; z-index:0;}
.M_link ul li a .txt:before {content:''; position:absolute; bottom:0; left:0; width:0%; height:0.5rem; background:rgba(0,0,0,0.2); transition:all 0.3s; border-radius:1rem; z-index:-1;}
/* 바로가기 : active */
.M_link ul li a:hover .img,
.M_link ul li a:focus .img {top:0.25rem;}
.M_link ul li a:hover .img:before,
.M_link ul li a:focus .img:before {background:rgba(0,0,0,0.4);}
.M_link ul li a:hover .txt:before,
.M_link ul li a:focus .txt:before {width:100%;}

/* 고객센터 */
.M_info {width:100%; max-width:16.5rem;}
.M_info .title h2 {max-width:10rem; white-space: nowrap; font-size: 1.2rem; color: #000; line-height: 1; overflow: hidden; font-weight: 700; display:inline-block; vertical-align: middle;}
.M_info ul {margin-top:0.75rem; display:flex; flex-direction:column; gap:0.25rem;}
.M_info ul li {display:flex; line-height:1.4; gap:0.75rem;}
.M_info ul li p.tit {flex-shrink:0; width:4.5rem; height:2rem; display:flex; align-items:center; justify-content:center; border-radius:0.9rem; background:#273000; color:#fff; font-size:0.9rem; font-weight:600;} 
.M_info ul li p.tel {font-size:1.5rem; font-weight:700;}



@media screen and (max-width: 1460px){
	.M_banner ul {justify-content:space-between; padding: 0 1rem;}
	.M_banner ul li {flex:1 0 auto;}
	.M_banner ul li a {width:100%;}	
	.M_info {max-width:100%;}
	.M_info .title {display:flex; justify-content:center; align-items:flex-start; flex-direction:column; gap:1rem;}
	.M_info ul {flex-direction:column; margin:0; gap:0.5rem;}
	.M_list .box > .section {position:relative; z-index:1;}
	.M_list .box a:before {width:5rem; height:5rem; background-size: cover;}
	.M_list .box .section .name {max-width:20rem;}
}

@media screen and (max-width: 1450px){
	.M_list .swiper-slide-active + .swiper-slide + .swiper-slide {opacity: 0.8;}
}

@media screen and (max-width: 1280px){	
	.M_info .title {flex-direction:row; justify-content:space-between; align-items:center;}
	.M_info ul {flex-direction:row; gap:1rem}	
	
	
}

@media screen and (max-width: 1100px){
	.M_list .swiper-slide-active + .swiper-slide {opacity: 0.8;}
}

@media screen and (max-width: 768px){
	.M_info .title {flex-direction:column; align-items:flex-start; gap:1rem; justify-content:flex-start;}
	.M_info ul {width:100%; justify-content:space-between;}
	
}


@media screen and (max-width: 620px){
	.M_banner ul {flex-wrap:wrap; padding:0; gap:0.5rem;}
	.M_banner ul li {flex:1 1 40%;}
	.M_banner ul li a {flex-direction:row; height:100%; justify-content:flex-start; padding:0 0.5rem; gap:0.25rem;}
	.M_banner ul li a .img {flex-shrink:0; width:2rem; height:2rem;}
	.M_banner ul li a .img img {width:100%;}
	.M_banner ul li a .txt { align-items: center; display: flex; justify-content: flex-start; text-align:left; display: -webkit-box; -webkit-box-orient: vertical; font-size:0.75rem;}
	
	.M_list .slider .slick-slide {margin-right: 10px; width: calc(50% - 5px);}
	
	.M_info ul {flex-direction:column; gap:0.25rem;}
	.M_list {margin-top:1rem;}
	.M_link ul {flex-wrap:wrap; padding:0; gap:1.5rem 0; top:0;}
	.M_link ul li {flex:1 1 33.33%;}
	.M_info ul li p.tel {font-size:1rem; display: flex; align-items: center;}
	
}


@media screen and (max-width: 450px){
	.M_list .box {padding:1rem;}
	.M_list .slick-slide {margin:0 0.5rem;}
	
}

@media screen and (max-width: 320px){
	.M_list .box {padding:1rem;}
}