@charset "utf-8";

/* 내용관리 */
#ctt {width:1000px; margin:0 auto; padding:20px;background:#fff}
.ctt_admin {text-align:right;display: none;}
#ctt header h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ctt_con {padding:10px 0;line-height:1.6em}
#ctt_con img{max-width:100%;height:auto}
.ctt_img {text-align:center}

/* section1 */
.section .imgBox{
	background: #f7f7f7;
	background: url(/include/img/sub0101_bg.jpg) no-repeat center / cover;
	background-attachment: fixed;
}

.section .inner{
	max-width: 750px;
}

.section1 .txtBox{
	max-width: 1800px;
	box-sizing: border-box;
	font-size: 18px;
	line-height: 1.8;
	margin: auto;
	margin-top: 45px;
	/* white-space: pre-line; */
	/* text-align: center; */
}

.section1 .txtBox .highl{
	display: inline-block;
	background: var(--mainCol);
	color: #fff;
	line-height: 1.4;
	padding: 0 3px;
}

.section1 .txtBox .sign{
	display: flex;
	align-items: center;
	margin-top: 50px;
}

.section1 .txtBox .sign img{
	margin-left: 15px;
}

/* 플러팅버튼 */
a{text-decoration:none;}

.quickArea{
	/* display: none; */
}

.box{
  position:relative;
  width: 300px; height:300px;
  border: 2px solid #ccc;
  padding: 20px; 
  dispaly:block;
  margin: 50px auto;
  overflow:hidden;
}
.menu{
  position:fixed;
  width: 250px; 
  height:250px;
}
.floatingBtn{
  right:-70px;
  bottom:-70px;
}
.menu-btn{
  position: absolute;
  top:50%; left:50%;
  display:block; 
  width: 80px; height: 80px;
  border-radius:50%;
  text-align:center;
  line-height:70px;
  color:#fff;
  transform:translate(-50%,-50%);
  box-shadow: rba(0,0,0,0.1) 0 0 10px;
  transition: box-shadow 0.5s;
	background-image: url(/include/img/quick_off.png);
    background-color: var(--mainCol);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.menu-round-box{
  position:absolute;
  width: 250px; 
  height:250px;
  border-radius: 50%; 
  background : #fbf6f5;
  transform:scale(0,0);
  transition: transform 0.5s;
}
.menu-round-box li{
  position:absolute;
  text-align:center;
  transform: scale(0.8,0.8);
  transition: transform ease-in 0.1s;
}

.menu-round-box li:nth-child(1){
  top: 20px;right: 100px;
}
.menu-round-box li:nth-child(2){
  top: 50px;right: 155px;
}
.menu-round-box li:nth-child(3){
  top: 110px;right: 180px;
}
.menu-round-box li:nth-child(4){
  top: 20px;right: 100px;
}
.menu-round-box li:nth-child(5){
  top: 20px;right: 100px;
}

.menu-round-box li a{
	display: block;
}

.menu-round-box li .icon{
	display: flex;
	align-items: center;
	justify-content: center;
	width:40px;
  height: 40px;
  border-radius:50%;
  background: rgba(178,52,39,0.8);
  color:#fff;
}

.menu-round-box li img{
	width: 60%;
}

.menu-round-box li p{
	line-height: 1;
	font-size: 12px;
	font-weight: 500;
	color: #333;
}

.floatingBtn .open{
  animation: menuBtn1 0.5s linear 1;
  
  transition: all 0.5s;
  transform:scale(1,1);
}
@keyframes menuBtn1{
  0%{
    transform:scale(0,0);
  }
  100%{
    transform:scale(1,1);
  }
}

.open ~ .menu-btn{
  box-shadow:none;
}
.open li{
  transition-delay:0.5s;
  transform: scale(1,1);
}


.floatingBtn2{
  bottom: -50px;
  right: -50px;
  /* transform:translate(-50%,-50%); */
}
.floatingBtn2 .menu-round-box{
  top:0; left:0;
   transfrom: scale(0,0) rotate(-360deg);
  
  animation: menuBtn2Ani2 0.5s linear 1;
}
.floatingBtn2 .open{
  animation: menuBtn2 0.5s linear 1;
  transform:scale(1,1) rotate(0);
}
@keyframes menuBtn2{
  0%{
    transform:scale(0,0) rotate(-360deg);
  }
  100%{
    transform:scale(1,1) rotate(0);
  }
}
@keyframes menuBtn2Ani2{
  0%{
    transform:scale(1,1) rotate(0);
  }
  100%{
    transform:scale(0,0) rotate(360deg);
  }
}





/* ---------------------------------------------------------- 1000 */
@media screen and (max-width: 1000px){
	
}


/* ---------------------------------------------------------- 720 */
@media screen and (max-width: 720px){

/* section1 */
.section .imgBox{
	background: url(/include/img/sub0101_bg_m.jpg) no-repeat center / cover;
	background-attachment: fixed;
}

.section1 .txtBox{
	padding: 6vw 0vw;
	font-size: 3.5vw;
	border-radius: 3vw;
	margin-top: 0;
	text-align: left;
}

.section1 .txtBox strong span{
	padding: 0 1vw;
}

.section1 .txtBox .sign{
	display: flex;
	align-items: center;
}

.section1 .txtBox .sign img{
	margin-left: 1vw;
	width: 16vw;
}



}