
/* 구분 start -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {

.MAIN_01_SRO {
  position: relative; height: 480px; overflow: hidden ; background-color: #fcfcfc; margin-top: -100px; z-index: 2;  display: flex;
 justify-content:center;  align-items: center; flex-direction:column; box-sizing: border-box; 
}
.MAIN_01_SRO:before {
 width:921px; height:495px;   position: absolute; left: -5%; top:0px; content: "";  background: url( "/_img/img/SRO/main_01_img01.png") no-repeat center center;  background-size:cover;
opacity: 0.9
}

.MAIN_01_SRO:after {z-index: -1;
 width:370px; height:441px;   position: absolute; right:15%; bottom:0px; content: "";    background: url( "/_img/img/SRO/main_01_img02.png") no-repeat center center;  background-size:cover;
opacity: 0.9
}
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.MAIN_01_SRO {
  position: relative; height:auto; overflow: hidden ; background-color: #fcfcfc; margin-top: 0px; z-index: 2;  display: flex;
 justify-content:center;  align-items:center; flex-direction:column; box-sizing: border-box;  padding:80px 0px 30px
}
.MAIN_01_SRO:before {
 width:450px; height:100%;   position: absolute; left: -40%;  bottom:0px; content: "";     background: url( "/_img/img/SRO/main_01_img01.png") no-repeat center center;  background-size: auto 100%;;
opacity: 0.9
}

.MAIN_01_SRO:after {z-index: -1;
 width:200px;  height:100%;    position: absolute; right:-10%; bottom:0px; content: "";    background: url( "/_img/img/SRO/main_01_img02.png") no-repeat center center;  background-size:cover;
opacity: 0.9
}

}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/











/* 구분 start -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
.MAIN_01_SRO .contents-container{  width: 100%; 

}	
.MAIN_01_SRO .contents-container .contents-inner	{
width: 100%;  display: flex;
 justify-content:center;  align-items: center; flex-direction:column; box-sizing: border-box; 
}


.MAIN_01_SRO .info_tt {
width: auto; padding: 10px 20px; border-radius: 50px; background-color: var(--primary); 
font-family: 'NanumSquare'; font-weight: 700;
color: #fff; font-size:calc(var(--tit-mds-size) * 0.8);  line-height: 110%; letter-spacing: -1px;  margin-bottom:40px	;position: relative
}
.MAIN_01_SRO .info_tt:before{width:56px; height:28px;   position: absolute; left: 50%; bottom:-26px; content: "";    font-family: unicons-line; background: url( "../../../../../_img/img/SRO/main_01_img03.png") no-repeat center center;  background-size:56px;
margin-left: -28px}	
	
	
	
.MAIN_01_SRO .info_tt2 {
width: 100%; text-align: center; font-family: 'NanumSquare'; font-weight: 900;
color: #333; font-size:calc(var(--tit-md-size) * 1.4);  line-height: 130%; letter-spacing: -1px;  margin-bottom:30px	
}
.MAIN_01_SRO .info_tt2 em{
 font-family: 'NanumSquare'; font-weight: 900;
color: var(--primary);  font-size:calc(var(--tit-md-size) * 1.4);  line-height: 130%; letter-spacing: -1px; 
}

.MAIN_01_SRO .info_tx {
width: 100%; text-align: center; font-family: 'NanumSquare'; font-weight: 500;
color: #333; font-size:calc(var(--tit-mds-size) * 0.9);  line-height: 150%; letter-spacing: -1px; 
}



.MAIN_01_SRO .more_btn{
width: 170px;  height: 170px; background-color:#7993e7;   border-radius: 100%; display: flex;
justify-content:center;  align-items: center; flex-direction:column; box-sizing: border-box; 
font-family: 'NanumSquare'; font-weight: 700; text-align: center;
color: #fff; font-size:calc(var(--tx-sm-size) * 1.0);  line-height: 130%; letter-spacing: -1px; 
position: absolute; right:12%;  top:20%; 
}

.MAIN_01_SRO .more_btn span{
 position: relative
}


.MAIN_01_SRO .more_btn span:before{ z-index: -1; width: 50px; height: 50px;  border-radius: 100%; position: absolute; left:-80px; top:-120px; background-color: #e3e8fa; content: "";  transition: all 0.5s;
-moz-transition: all 0.5s; /* Firefox 4 */
-webkit-transition: all 0.5s; /* Safari and Chrome */
-o-transition: all 0.5s; /* Opera */  

-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;}	



.MAIN_01_SRO .more_btn span:after{
width: 75px;  height: 75px; background-color:#1a1a1a;   border-radius: 100%; display: flex;
justify-content:center;  align-items: center; flex-direction:column; box-sizing: border-box; 
content: "\e98c";  color:var(--primary);   font-family: unicons-line; font-size: 25px;
position: absolute; left:-90px; top:20px; cursor: pointer
}

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.MAIN_01_SRO .contents-container{  width: 100%; 

}	
.MAIN_01_SRO .contents-container .contents-inner	{
width: 100%;  display: flex;
 justify-content:center;  align-items:center; flex-direction:column; box-sizing: border-box;margin-top: -20px
}


.MAIN_01_SRO .info_tt {
width: auto; padding: 10px 20px; border-radius: 50px; background-color: var(--primary); 
font-family: 'NanumSquare'; font-weight: 700;
color: #fff; font-size:calc(var(--tit-mds-size) * 0.8);  line-height: 110%; letter-spacing: -1px;  margin-bottom:40px	;position: relative
}
.MAIN_01_SRO .info_tt:before{width:56px; height:28px;   position: absolute; left: 50%; bottom:-26px; content: "";    font-family: unicons-line; background: url( "../../../../../_img/img/SRO/main_01_img03.png") no-repeat center center;  background-size:56px;
margin-left: -28px}
	
	
	
.MAIN_01_SRO .info_tt2 {
width: 100%; text-align: center; font-family: 'NanumSquare'; font-weight: 900;
color: #333; font-size:calc(var(--tit-md-size) * 1.0);  line-height: 130%; letter-spacing: -1px;  margin-bottom:20px	
}
.MAIN_01_SRO .info_tt2 em{
 font-family: 'NanumSquare'; font-weight: 900;
color: var(--primary);  font-size:calc(var(--tit-md-size) * 1.0);  line-height: 130%; letter-spacing: -1px; 
}

.MAIN_01_SRO .info_tx {
width: 100%; text-align: center; font-family: 'NanumSquare'; font-weight: 500;
color: #333; font-size:calc(var(--tit-mds-size) * 0.9);  line-height: 150%; letter-spacing: -1px; margin-bottom:30px
}



.MAIN_01_SRO .more_btn{
width: 170px;  height: 170px; background-color:#7993e7;   border-radius: 100%; display: flex;
justify-content:center;  align-items: center; flex-direction:column; box-sizing: border-box; 
font-family: 'NanumSquare'; font-weight: 700; text-align: center;
color: #fff; font-size:calc(var(--tx-sm-size) * 1.0);  line-height: 130%; letter-spacing: -1px; 
position:relative; 
}

.MAIN_01_SRO .more_btn span{
 position: relative
}


.MAIN_01_SRO .more_btn span:before{ z-index: -1; width: 50px; height: 50px;  border-radius: 100%; position: absolute; left:-80px; top:-120px; background-color: #e3e8fa; content: "";  transition: all 0.5s;
-moz-transition: all 0.5s; /* Firefox 4 */
-webkit-transition: all 0.5s; /* Safari and Chrome */
-o-transition: all 0.5s; /* Opera */  

-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;}	



.MAIN_01_SRO .more_btn span:after{
width: 75px;  height: 75px; background-color:#1a1a1a;   border-radius: 100%; display: flex;
justify-content:center;  align-items: center; flex-direction:column; box-sizing: border-box; 
content: "\e98c";  color:var(--primary);   font-family: unicons-line; font-size: 25px;
position: absolute; left:-90px; top:20px; cursor: pointer
}

}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/





