/* 메인 컨테이너 */
#container { position:relative;}
.section .inner {position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; height:calc(100% - 3rem);}

.section1 .inner {height:calc(100% - 9rem); justify-content:flex-start;}
.section1 .inner .control {position: absolute; left: 50%; bottom:calc(50% - 10rem); display: flex; align-items: center; pointer-events:visible; transform:translate(-50%, 0); gap:0.4rem;}
.section1 .inner .control a {color:#000; font-size: 1.15rem; background:#fff; width:2.5rem; height:2.5rem; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.section1 .inner .control a.play,
.section1 .inner .control a.stop {position: relative; background:none; margin:0 0.1rem; z-index: 4;}
.section1 .inner .control a.play {display: none;}
.section1 .inner .control .progress-circle{ position:relative; display: inline-block; vertical-align: top;}
.section1 .inner .control .progress{ position:absolute; left:0; top:-0.35rem; width:3rem; height:3rem; z-index: 3; transform: rotate(-90deg); overflow:hidden;}
.section1 .inner .control .progress circle { fill: #fff; stroke: #177254; stroke-width: 3;  stroke-dasharray:160; stroke-dashoffset:160;}

.section2 {background:url('/images/bohun/template/H2/main/section2_bg.png'); background-size:100% 100%; overflow:hidden;}
.section2 .inner {height:100%;}
.section2.active .inner {transition: height 0.5s ease 0.5s; height:calc(100% - 3rem)!important;}
.section4 {background:#f3f7fd;}
.section4 .inner {gap:3rem;}

.MC_wrap1 {width:100%;}
.MC_wrap2 {width:100%;}
.MC_wrap2 .title {display:flex; justify-content:space-between; max-width:38rem;}
.MC_wrap2 .title .control {display:flex; gap:0.3rem;}
.MC_wrap2 .title .control a {display:flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; border-radius: 50%; border:1px solid #d6d5d5; color: #7a7376; font-size:1.2rem; transition: 0.15s;}
.MC_wrap2 .title .control a:hover,
.MC_wrap2 .title .control a:focus { border-color: #c8056c; color:#c8056c;}


.MC_wrap2 .heading {max-width:10rem; white-space: nowrap; font-size: 1.5rem; color: #111111; line-height: 1; overflow: hidden; font-weight: 700; display:inline-block; vertical-align: middle;}
.MC_wrap3 {position:relative; width:100%; max-width:80rem;}

.MC_box4 {margin-bottom:3rem;}
.MC_box6 {width:100%;}
.MC_box7 {width:100%; display:flex; align-items:center; justify-content:space-between; gap:2rem;}
.MC_box7 > div {width:25%; flex-grow:1;}



@media screen and (max-width: 1600px){
	.section .inner {padding:0 1rem;}
	
}

@media screen and (max-width: 1280px){	
	.MC_wrap2 .title {max-width:100%;}
	.section2 .inner {padding: 3rem 1rem;}
	.section3 .inner,
	.section4 .inner {padding: 3rem 1rem;}
	.MC_box4 {margin-bottom:1.5rem;}
	.MC_box7 {flex-wrap:wrap;}
	.MC_box7 > div {width:calc(50% - 2rem);}
}

@media screen and (max-width: 768px){
	.section1 .inner .control  {bottom: calc(50% - 20%);}	
    .section4 .inner { gap: 1rem;}
    
	.MC_box7 > div {width:50%;}
    .MC_box7 { gap: 1rem;}
}



@media screen and (max-width: 620px){
    .MC_wrap2 .heading { font-size: 1.3rem;}
    .MC_wrap2 .title .control a { width: 2rem; height: 2rem; }
 
    .section2 { background: none;}

    .MC_box4 { margin-bottom: 1rem;}
    .MC_box7 > div.M_banner { width: 100%;}
   

}

@media screen and (max-width: 400px){
	.MC_box7 {gap:1rem;}
	.MC_box7 > div { width:calc(50% - 1rem); justify-content:space-between;}
    .MC_box7 > div.M_banner { width: 100%; margin: 0;}
}