@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 */
.section1 ul{
	display: flex;
	flex-wrap: wrap;
}

.section1 ul li {
    position: relative;
    border-radius: 30px;
    width: calc(100%/4 - 26px*3/4);
    margin-right: 25px;
    margin-top: 25px;
    overflow: hidden;
	border: 2px solid #fff;
	transition: all 0.3s;
}

.section1 ul li:hover{
	border: 2px solid var(--mainCol);
}

.section1 ul li::before,
.section1 ul li::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 30px;
    transition: opacity 0.4s;
}

.section1 ul li::before {
    background: repeating-linear-gradient(90deg, #feddca, #fef4ef);
	background: #f6f8fa;
    opacity: 1;
}

.section1 ul li::after {
    background: repeating-linear-gradient(90deg, #ff5b01, #fc7d38);
	background: #fff;
    opacity: 0;
}

.section1 ul li:hover::after {
    opacity: 1;
}

.section1 ul li a{
	text-align: center;
	display: block;
	padding: 50px 5%;
	position: relative;
	z-index: 2;
}

.section1 ul li a .imgBox{
	width: 70px;
	margin: auto;
	position: relative;
	margin-bottom: 20px;
}

.section1 ul li a .imgBox .on{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.section1 ul li a .imgBox img{
	transition: opacity 0.4s;
}

/* .section1 ul li:hover a .imgBox .on{
	opacity: 1;
}

.section1 ul li:hover a .imgBox .off{
	opacity: 0;
} */

.section1 ul li a p{
	color: #1c1c1c;
	font-size: 22px;
	line-height: 1;
	font-weight: 600;
	transition: all 0.4s;
}

.section1 ul li:hover a p{
	/* color: #fff; */
	/* color: var(--mainCol); */
}

.section1 ul li:nth-child(4n){
	margin-right: 0;
}

.section1 ul li:nth-child(-n+4){
	margin-top: 0;
}




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


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

.subNavi{
	display: none !important;
}

/* section1 */
.section1 ul li{
	background-position: center top;
	background-size: 120% auto;
	border-radius: 4vw;
	width: calc(100%/3 - 4vw/3);
	margin-right: 2vw !important;
	margin-top: 2vw !important;
	box-shadow: rgba(0,0,0,0.03) 0 0 2vw;
}

.section1 ul li::before,
.section1 ul li::after {
    border-radius: 4vw;
}

.section1 ul li a {
    padding: 7vw 3vw;
    position: relative;
    z-index: 2;
}

.section1 ul li a .imgBox {
    width: 40%;
    margin-bottom: 3vw;
}

.section1 ul li a p{
	width: 100%;
	font-size: 3vw;
	box-sizing: border-box;
}

.section1 ul li:nth-child(3n){
	margin-right: 0 !important;
}

.section1 ul li:nth-child(-n+3){
	margin-top: 0 !important;
}




}