/* header */
.subhead_wrap .wrap .title_logo{
    background-image: url("/resources/newimg/control/e.y.e_logo.png");
}
/* //header */

.auto{
    margin: 0 auto;
}
#sec_two ul.padding_w{
    padding: 0 30px;
}
/* 브랜드 관제란? */
/*#sec_one p{
    font-size: 15pt;
    font-weight: 700;
    color: #727272;
}
.black{
    font-size: 19pt;
    font-weight: 900;
    color: #000;
}
#sec_one strong{
    font-size: 30pt;
    color: #000;
    font-weight: 900;
}
.box_size{
    width: 60%;
}*/
/* //브랜드 관제란? */

/* 히든태그 eye 2025/11/04 */
#sec_one .img_wrap {
	position: relative;
	display : flex;
	justify-content: center;
	align-items: center;
}

#sec_one .img_wrap .button_box {
	position: absolute;
	top : 50%;
	left : 50%;
	transform: translate(-50% , -50%);
	display : flex;
	justify-content: center;
	align-items: center;
}

#sec_one .img_wrap .button_box button {
    border: none;
    border-radius: 1rem;
    background-color: #017CC2;
    color: #fff;
    width: 14.6vw;
    height: 3vw;
    font-size: 1.4vw;
    display: inline-flex;
    align-items: center;
    justify-content: center;
	box-shadow:
	  0 0 12px 0 rgba(26, 32, 57, 0.25),
	  0 0 20px 0 rgba(26, 32, 57, 0.3),
	  inset 4px 4px 24px 0 rgba(1, 90, 160, 0.4),
	  inset 4px 4px 4px 0 #a0e0ff,
	  inset 2px 2px 6px 0 #29a7ff,
	  inset -2px -2px 14px 0 rgba(0, 60, 130, 0.9),
	  inset -6px -6px 10px 0 rgba(0, 45, 100, 0.8),
	  inset -8px -8px 11px 0 #c2f0ff;
    animation: eyeBtnfadeInOut 2s ease-in-out infinite;
    cursor: pointer;
}

@keyframes eyeBtnfadeInOut {
    0%, 100% {
        opacity: 0;         /* 완전히 안 보임 */
        visibility: hidden;
    }
    50% {
        opacity: 1;         /* 완전히 보임 */
        visibility: visible;
    }
}

#sec_one .img_wrap img {
	width: 80%;
	object-fit: scale-down;
}

#sec_two {
	height: unset !important;
	padding-bottom : 200px;
}

#sec_two .ex_wrap ul {
	display : flex;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	row-gap: 60px;
	column-gap: 60px;
	flex-wrap: wrap;
}

#sec_two .ex_wrap ul li {
	width: 32%;
}

#sec_two .ex_wrap ul li .tit_wrap {
	display : flex;
	justify-content: flex-start;
	align-items: center;
	gap : 2px;
	margin-bottom : 10px;
}

#sec_two .ex_wrap ul li .tit_wrap img {
	width: 40px;
	height: 40px;
}

#sec_two .ex_wrap ul li .tit_wrap h3 {
	font-size: 24px;
}

#sec_two .ex_wrap ul li .txt_wrap {
	padding-left : 42px;
}

/* 시스템 설명 */
.h{
    height: 100%;
    background-color: #0097ff;
    border-radius: 50px;
}
.ele li{
    display: none;
}
.ele li > div{
    width: 100%;
}
.ele li.active{
    display: flex;
}
.st{
    position: sticky;
    top: calc(50% - 450px/2);
}
/* //시스템 설명 */

/* flex 관련 */
.flex{
    display: flex;
    justify-content: center;
    align-items: center;
}
.column{
    flex-direction: column;
    align-items: flex-start;
}
.around{
    justify-content: space-around;
}
/* //flex 관련 */


/* font 관련 */
.main_title{
    font-size: 35pt;
    text-align: center;
    padding: 50px 0;
}
.middle_title{
    font-size: 25pt;
    text-align: left;
}
.align_center{
    text-align: center;
}
.txt{
    font-size: 17pt;
    font-weight: 500;
}
.color_w{
    color: white;
}
/* //font 관련 */

/* 이미지 관련 */
.img_box{
    height: 600px;
    width: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.img_box img{
    width: 100%;
}
/* //이미지 관련 */

/* 여백 관련 */
.space_r{
    margin-right: 50px;
}
.space_b_x{
    margin-bottom: 50px;
}
.space_b{
    margin-bottom: 30px;
}
/* //여백 관련 */

#sec_three p{
    font-size: 15pt;
    font-weight: 700;
    color: #727272;
}
#sec_four p{
    font-size: 15pt;
    font-weight: 700;
    color: #727272;
}

@media all and (max-width:1400px) {
    /* font 관련 */
    .middle_title{
        font-size: 2.2vw;
        text-align: left;
    }
    .align_center{
        text-align: center;
    }
    .txt{
        font-size: 1.7vw;
        font-weight: 500;
    }
    .color_w{
        color: white;
    }
    /* //font 관련 */

    /* 여백 관련 */
    .space_r{
        margin-right: 30px;
    }
    /* //여백 관련 */
}
@media all and (max-width:1300px) {
    /* font 관련 */
    .align_center{
        text-align: center;
    }
    .color_w{
        color: white;
    }
    /* //font 관련 */

    /* 이미지 관련 */
    .img_box{
        height: 450px;
        width: 450px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /* 이미지 관련 */
}

@media all and (max-width:1023px) {
        /* 브랜드 관제란? */
    /*#sec_one p{
        font-size: 13pt;
        font-weight: 700;
        color: #727272;
    }
    .black{
        font-size: 15pt;
        font-weight: 900;
        color: #000;
    }
    #sec_one strong{
        font-size: 20pt;
        color: #000;
        font-weight: 900;
    }
     //브랜드 관제란? 
    #sec_three p{
        font-size: 13pt;
        font-weight: 700;
        color: #727272;
    }
    #sec_four p{
        font-size: 13pt;
        font-weight: 700;
        color: #727272;
    }
    .h{
        padding-bottom: 50px;
    }
    span.no{
        display: inline;
    }
    #sec_two .middle_title{
        font-size: 3.5vw;
        text-align: left;
    }
    .align_center{
        text-align: center;
    }
    .txt{
        font-size: 2.3vw;
        font-weight: 500;
        text-align: center;
        margin-right: 0;
    }
    .color_w{
        color: white;
    }

    #sec_two .ele li > div.flex{
        flex-direction: column-reverse;
    }
    #sec_two .ele li > div.flex .column{
        align-items: center;
        margin: 0;
        margin-top: 10px;
    }
     이미지 관련 
    .img_box{
        height: unset;
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
     이미지 관련 */
    #sec_one .img_wrap img {
		width: 100%;
	}
	#sec_one .img_wrap .button_box button {
		width: 27.6vw;
    	height: 5vw;
    	font-size: 2.4vw;
	}
	#sec_two {
		padding-bottom : 160px;
	}
	#sec_two .ex_wrap ul li .tit_wrap img {
		width: 4vw;
		height: 4vw;
	}
	#sec_two .ex_wrap ul li .tit_wrap h3 {
		font-size: 2.4vw;
	}
	#sec_two .ex_wrap ul li .txt_wrap p {
		font-size: 2vw;
	}
}

@media all and (max-width:767px) {
     /* 브랜드 관제란? */
     /*#sec_one p{
        font-size: 10pt;
        font-weight: 700;
        color: #727272;
    }
    .black{
        font-size: 12pt;
        font-weight: 900;
        color: #000;
    }
    #sec_one strong{
        font-size: 15pt;
        color: #000;
        font-weight: 900;
    }
     //브랜드 관제란? 
    #sec_three p{
        font-size: 10pt;
        font-weight: 700;
        color: #727272;
    }
    #sec_four p{
        font-size: 10pt;
        font-weight: 700;
        color: #727272;
    }
    .main_title{
        font-size: 28pt;
    }
    .st{
        position: sticky;
        top: calc(50% - 415px/2);
    }
    .box_size{
        width: 90%;
    }
    .img_box{
        height: unset;
        width: 60%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #sec_two .middle_title{
        font-size: 4vw;
        text-align: left;
    }
    .align_center{
        text-align: center;
    }
    .txt{
        font-size: 2.8vw;
        font-weight: 500;
        text-align: center;
        margin-right: 0;
    }*/
}

@media all and (max-width:550px) {
    /* 브랜드 관제란? */
    /*#sec_one p{
        font-size: 10pt;
        font-weight: 700;
        color: #727272;
    }
    #sec_three p{
        font-size: 10pt;
        font-weight: 700;
        color: #727272;
    }
    #sec_four p{
        font-size: 10pt;
        font-weight: 700;
        color: #727272;
    }
    .black{
        font-size: 12pt;
        font-weight: 900;
        color: #000;
    }
    #sec_one strong{
        font-size: 12pt;
        color: #000;
        font-weight: 900;
    }
     //브랜드 관제란? 
    .img_box{
        height: unset;
        width: 80%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .st{
        position: sticky;
        top: calc(50% - 385px/2);
    }
    .space_b_x{
        margin-bottom: 30px;
    }
    .space_b{
        margin-bottom: 10px;
    }*/
    #sec_one .img_wrap .button_box button {
		width: 180px;
    	height: 30px;
    	font-size: 14px;
	}
	#sec_two .ex_wrap ul {
		column-gap: 20px;
	}
	#sec_two .ex_wrap ul li {
		width: 45%;
	}
	#sec_two .ex_wrap ul li .txt_wrap {
		padding-left : 16px;
	}
	#sec_two .ex_wrap ul li .tit_wrap img {
		width: 24px;
		height: 24px;
	}
	#sec_two .ex_wrap ul li .tit_wrap h3 {
		font-size: 14px;
	}
	#sec_two .ex_wrap ul li .txt_wrap p {
		font-size: 12px;
	}
}
@media all and (max-width:479px){
    /*#sec_one p{
        font-size: 8pt;
        font-weight: 700;
        color: #727272;
    }
    .black{
        font-size: 9pt;
        font-weight: 900;
        color: #000;
    }
    #sec_one strong{
        font-size: 10pt;
        color: #000;
        font-weight: 900;
    }
    .main_title{
        font-size: 20pt;
        padding: 20px 0;
    }
    .img_box{
        height: unset;
        width: 95%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #sec_two .middle_title{
        font-size: 4.5vw;
        text-align: left;
    }
    #sec_three p{
        font-size: 8pt;
        font-weight: 700;
        color: #727272;
    }
    #sec_four p{
        font-size: 8pt;
        font-weight: 700;
        color: #727272;
    }
    .txt{
        font-size: 3.2vw;
        font-weight: 500;
        text-align: center;
        margin-right: 0;
    }
    .st{
        position: sticky;
        top: calc(50% - 374px/2);
    }*/
}