[CSS] 혼자 할 수 있을 때 까지

<div className="main">
            <section className="section_1"></section>
            <section className="section_2">
                <div className="inner">
                    <h4>
                        란?
                    </h4>
                    <p>다양한 목적의 기업형 메시지를 구축없이 전용라인을 통해 안정적으로 대량 발송할 수 있는 Web기반의 멀티 플랫폼입니다. </p>
                    <ul>
                        <li>
                            <div><img src={sec2_icon1} alt="" /></div>
                        </li>
                        <li>
                            <div><img src={sec2_icon2} alt="" /></div>
                        </li>
                        <li>
                            <div><img src={sec2_icon3} alt="" /></div>
                        </li>
                        <li>
                            <div><img src={sec2_icon4} alt="" /></div>
                        </li>
                    </ul>
                    <p className="clear"></p>
                    <div><img src={sec2_img} alt="" className="section2Image"/></div>
                </div>
            </section>

            <section className="section_3">
                <div className="inner">
                    <h4>
                        소개
                    </h4>
                    <ul>
                        {contentList.map((val) =>
                            <li className={val.id === activeContentId ? "active" : null} key={val.id} onClick={function (e) {
                                setActiveContent(val.id)
                            }}>
                               
                                <span> <img src={val.id===activeContentId? val.activeIcon : val.icon} alt=""></img>{val.title}</span>
                            </li>

                        )}
                    </ul>
                     <p className="clear"></p>
                   
                    {contents}
                </div>
            </section>

            <section className="section_4">
                <div className="inner">
                    <h4>
                        알아보기
                    </h4>
                    <p>다년간의 사업 노하우를 통한 안정적인 서비스 제공</p>
                    <ul>
                        <li>
                            <img src={sec4_icon1} alt=""></img>
                            <p>고객에게 맞는<br/> 메시지 형태 제공</p>
                        </li>
                        <li>
                            <img src={sec4_icon2} alt=""></img>
                            <p>편리한 UI구성</p>
                        </li>
                        <li>
                            <img src={sec4_icon3} alt=""></img>
                            <p>저렴한 비용</p>
                        </li>
                        <li>
                            <img src={sec4_icon4} alt=""></img>
                            <p>24/365 안정적인 서비스</p>
                        </li>
                        <li>
                            <img src={sec4_icon5} alt=""></img>
                            <p>다양한 확장성<br />(Web/Agent/API)</p>
                           
                        </li>
                        
                    </ul>
                     <p className="clear"/>
                </div>
            </section>
            <section className="section_5">
                <div className="inner">
                    <h4>
                        활용하기
                    </h4>
                    <p>기업메시지의 모든 것, MBP에서 경험해 보세요</p>
                    <ul>
                        <li>
                            <div><img src={sec5_img1} alt=""/></div>
                            <p>LMS</p>
                        </li>
                        <li>
                            <div><img src={sec5_img2} alt=""/></div>
                            <p>알림톡</p>
                        </li>
                        <li>
                            <div><img src={sec5_img3} alt=""/></div>
                            <p>친구톡</p>
                        </li>
                        <li>
                            <div><img src={sec5_img4} alt=""/></div>
                            <p>RCS-Carousel</p>
                        </li>
                    </ul>
                    <p className="clear"/>
                 </div>
            </section>
            <p className="clear"></p>
        </div>

/*****************************  Main  ****************************/
.main {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.main section {
  width: 100%;
  position: relative;
  float: left;
  text-align: center;
}
.main section .inner {
  width: 1200px;
  margin: 200px auto;
}
.main section ul{
  width: 100%;
}
.main section h4 {
  font-size:48px;
  font-weight:bold;
  color:#222222;
  margin-bottom:60px;
  text-align: center;
}
.main section h4::before{
  content: '';
  display: inline-block;
  width: 150px;
  height: 45px;
  margin-right: 10px;
  clear: both;
  background: url("assets/images/footLogo.png") no-repeat center center;
  background-size: contain;
}
.main section p {
  font-size:20px;
  font-weight:500;
  color:#444444;
  line-height:34px;
  margin-bottom: 50px;
}

.main .section_1 {
  height: 450px;
  overflow: hidden;
  background-color:#625af6;
}

.main .section_2{
  background-color: rgba(247, 247, 255);
  height: 1100px;
  overflow: hidden;
} 

.main .section_2 ul {
  width : 100%;
  height: 130px;
  text-align: center;
}


.main .section_2 ul li{
  float: left;
  width: 25%;
  height: 100%;
}
.main .section_2 ul li div{
    margin: 0 auto;
    width: 130px;
    height: 100%;
    background-color: white;
    border-radius: 15px;
    box-shadow: 5px 5px 20px rgba(02,02,02,0.13);
    padding:20px;
    
}
.main .section_2 ul li:nth-child(2) div{
  padding: 27px 20px;
}

.main .section_2 ul li div img{
  max-width: 100%;
  max-height: 100%;
  height: auto;
}
.main .section_2 .inner>div{
  position: absolute;
  bottom: 0;
  
  transform: translate(65%,0);
}
.main .section_2 .inner>div::before{
  width: 1300px;
  height: 1300px;
  background: linear-gradient(to right,#6cb5ff,#a094ff);
  border-radius: 100%;
  box-sizing: border-box;
  display: block;
  content: '';
  clear: both;
  position : absolute;
  top :150px;
  transform: translate(-26%,0);
  z-index: -1;

}
.main .section_3{
  background-color: #f5f5f5;
}

.main .section_3 ul li{
  width: 33.3%;
  line-height: 43px;
  float: left;
  margin-bottom: 10px;
  
  
}
.main .section_3 ul li span{
  cursor: pointer;
  font-size:20px;
  font-weight:500;
  color:#444444;
  line-height:34px;
  padding: 12px 29px;
  border-radius: 10px;  
}
.main .section_3 u l li span img{
  padding-right: 10px;
  width: 6.5%;
}

.main .section_3 ul li.active span{
  box-shadow: 5px 5px 20px rgba(02,02,02,0.13);
  background-color: #fff;
  color : #625af6;
}

.main .section_3 .content p:first-child{
  font-size:26px;
  font-weight:bold;
  color:#222222;
}

.main .section_3 .content p:nth-child(2){
  font-size:20px;
  font-weight:500;
  color:#444444;
  line-height:34px;
}

.main .section_3 .content div {
  width: 50%;
  margin: 0 auto;
}

.main .section_4 ul li{
  float: left;
  width: 20%;
}
.main .section_4 ul li img{
  height: 150px;
}
.main .section_4 ul li p{
  line-height:34px;
}
.main .section_5 ul::after{
  content: '';
  display: block;
  clear: both;
}
.main .section_5 ul li{
  float: left;
  width: 25%;
  height: 577px;
  position: relative;
}
.main .section_5 ul li p{
  margin: 0;
}
.main .section_5 ul li div {
    width: 90%;
}

.main .section_5 ul li:last-child div{
  width: 100%;
}

.main .section_5 ul li:last-child div img{
  position: absolute;
  top: 0;
  left: 0;
  width: 186%;
  max-width: none;
}
.main .section_5 ul li:last-child p{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.container {
  width: 1100px;
  min-height: calc(100vh - 200px);
  margin: 40px auto;
  overflow: hidden;
}

.container::after {
  display: block;
  content: "";
  clear: both;
}
.container .page-title {
  color: #000000;
  margin: 45px 0 40px 0;
  font-weight: 500;
  font-size: 24px;
}
.container .page-subtitle {
  color: #000000;
  margin: 60px 0 35px 0;
  position: relative;
}
.container .page-subtitle span.rfloat {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
}
.container .searchbox button {
  position: relative;
  top: 1px;
}