﻿/* 메인 컨테이너 */
#container { position:relative;}
#container:before {content:''; position:absolute; width:55rem; height:41.5rem; left:-10rem; top:-4rem; background:url('/images/bohun/template/E1/main/flower_bg.png') no-repeat 0 100%; z-index:-1;}
#container:after {content:''; position:absolute; width:25rem; height:50%; left:0; bottom:0; background:#f7f8f0; z-index:-2;}

.MC_wrap1 {margin:4rem 0;}
.MC_wrap1 .MC_box1 {display:flex; justify-content:space-between;}
.MC_wrap1 .MC_box1 .title {display: flex; flex-direction: column; gap: 0; line-height: 1.2;}
.MC_wrap1 .MC_box1 .title p {font-size:2.5rem; font-weight:300; color:#111;}
.MC_wrap1 .MC_box1 .title p strong {font-weight:700;}
.MC_wrap1 .MC_box1 .title p.tit {font-size:3.5rem;}
.MC_wrap1 .MC_box1 .title p.tit strong.black {font-weight:800; color:#273000;}
.MC_wrap1 .MC_box1 .title p.tit strong.black_02 {font-weight:800; color:#000;}
.MC_wrap2 {position: relative;}
.MC_wrap2 .MC_box2 {position:relative; padding:2.5rem 0;}
.MC_wrap2 .MC_box2 .title .heading {white-space: nowrap; line-height:1.1; font-size: 1.2rem; color: #fff; overflow: hidden; font-weight: 700; display:block; margin-right:7rem;}
.MC_wrap2 .MC_box2:before {content:''; position:absolute; width:100vw; top:0; left:-4rem; height:100%; background:#273000 url('/images/bohun/template/E1/main/box2_bg.png') repeat 50% 50%; z-index:-1;}
.MC_wrap2 .MC_box2 .slider-box {overflow:hidden; width:100vw;}
.MC_wrap2 .MC_box2 .slider-box .control {position: absolute; right: 0rem; top: 2rem; display: flex; align-items: center; gap:0.25rem;}
.MC_wrap2 .MC_box2 .slider-box .control a {flex-shrink:0; font-size: 1.15rem; width:2.5rem; height:2.5rem; display:flex; color:#fff; border:1px solid #fff; align-items:center; justify-content:center; border-radius:50%; background:transparent;}
.MC_wrap2 .MC_box2 .slider-box .control a.play,
.MC_wrap2 .MC_box2 .slider-box .control a.stop { display: none; }
.MC_wrap2 .MC_box2 .slider-box .control a.play.on,
.MC_wrap2 .MC_box2 .slider-box .control a.stop.on{ display: flex;}
.MC_wrap2 .MC_box2 .slider-box .control a.play,
.MC_wrap2 .MC_box2 .slider-box .control a.stop { margin: 0 0.5rem; font-size: 0.9rem; }
.MC_wrap2 .MC_box2 .slider-box .control a.more {background:#5c4a34; color:#fff; box-shadow:none;}

.MC_wrap3 {position:relative;}
.MC_wrap3 .container {display:flex;}
.MC_wrap3 .container .con_wrap {padding:4rem 0;}
.MC_wrap3 .container .con_wrap:nth-child(1) {width:21.5rem; background:#f7f8f0;}
.MC_wrap3 .container .con_wrap:nth-child(2) {width:calc(100% - 25rem); margin-left:auto;}



@media screen and (max-width: 1800px){
	.MC_wrap2 .MC_box2:before {left:-10rem; width:calc(100vw + 10rem);}
}

@media screen and (max-width: 1600px){
	.MC_wrap1, 
	.MC_wrap3 .container {padding:0 1rem;}
	.MC_wrap2 .MC_box2 {padding:2.5rem 1rem;}
	.MC_wrap2 .MC_box2 .slider-box .control {right:1rem;}
}


@media screen and (max-width: 1460px){	
	#container:before {top: -15rem;}
	.MC_wrap1 .MC_box1 {flex-direction:column; gap:2rem;}
	.MC_wrap1 .MC_box1 .title {align-items:center; justify-content:center;}
	.MC_wrap2 .MC_box2:before {left:0;}
	.MC_wrap2 .MC_box2 .slider-box {padding: 0 1rem;}	
	.MC_wrap3 .container .con_wrap:nth-child(1) {padding-left:1rem;}
	
}

@media screen and (max-width: 1280px){	
	.MC_wrap3 .container {flex-direction:column; padding:0;}
	.MC_wrap3 .container .con_wrap:nth-child(1) {width:100%; padding:1.5rem 1rem;}
	.MC_wrap3 .container .con_wrap:nth-child(2) {width:100%; padding:4rem 1rem;}
	#container:after {display:none;}
}

@media screen and (max-width: 1024px){	
	/* header */
	#header {border-bottom:1px solid #ddd;}
}

@media screen and (max-width: 620px){
	.MC_wrap1 {margin: 4rem 0 2rem;}
	.MC_wrap1 .MC_box1 .title p {font-size:1.2rem;}
	.MC_wrap1 .MC_box1 .title p.tit {font-size:1.8rem;}
	.MC_wrap2 .MC_box2 {padding:1.5rem 1rem;}
	.MC_wrap2 .MC_box2 .slider-box {padding:0rem;}	
	.MC_wrap2 .MC_box2 .slider-box .control {right: 1rem; top: 1.25rem;}
	.MC_wrap2 .MC_box2 .slider-box .control a {width:1.75rem; height:1.75rem;}
	.MC_wrap3 .container .con_wrap:nth-child(2) {padding:2rem 1rem;}
	
}



@media screen and (max-width: 630px){
	.MC_wrap2 .MC_box2 .slider-box{ width:100%;}

	.MC_wrap2 .MC_box2 .slider-box .control a.play, 
	.MC_wrap2 .MC_box2 .slider-box .control a.stop{ margin:0 0.25rem;}
}






@media screen and (max-width: 320px){
	.MC_wrap2 .MC_box2 .slider-box {padding:0;}
	.MC_wrap2 .MC_box2 .slider-box .control {right:1rem;}
}





