/* 노트북 & 테블릿 가로 (해상도 1024px ~ 1279px)*/ 

@media all and (max-width:1440px){

	.sectionWrap .sectionCon .textCon .textLeft .textLeftCon .title{
		font-size:var(--title);
	}
	section.anther .conWrap .con, section.anther .conWrap .con.two{
		width: 40%;
	}
	.conImageBox{
		width: 250px;
		height: 250px;
	}
	.fistimgbox {
		
		width: 350px;
		height: 350px;
	}
	.secondimgbox{
		width: 450px;
		height: 450px;
	}

}

@media all and (min-width:1024px) and (max-width:1279px) 
{ 
    :root 
    {
        --banner-title : 56px;
        --title:32px;
        --subtitle:18px;
        --font : 14px;
	    --textEvent:48px;   
    }
    section { min-height: inherit; padding: 120px 0; }
    .con.two .sectionCon:nth-child(1),
    .con.two .sectionCon:nth-child(3)
     {
    	align-items: start !important;
    }
    .con .sectionCon:nth-child(1),
    .con .sectionCon:nth-child(3){
	    align-items: end !important;
    }
    section.three .sectionCondiv { grid-template-columns: repeat(3, 1fr); }
	section.four{padding:120px 0 0 0;} 
    section.four .sectionCondiv .sectionCon .sectionConImg { height: 240px; }
    section.four .sectionCondiv .sectionCon .sectionConImg img { width: 70%; }
    section.four .sectionCondiv.icon .sectionCon.icon span { width:64px; height:64px; }
    .section.four .sectionCondiv.icon { margin-top: 100px;} 

    @keyframes changeBorderColor {
        0% {
            width: 0;
        }
        100% {
            width: calc(100% - 200px);
        }   
    }
	.sectionCon .textWarp{
		padding: 18px 100px;
	}
	.BtnBox .Btn{
        padding: 10px 10px;
	}
    section.five .tabWrap .tab { padding: 16px 20px; }
    section.six .sectionConWrap .sectionCon.bottom { margin: 80px 0;}
    .sectionSixImg { top: -59%; }
    .sectionSixImg img { width: 600px; }
    .sectionSixText .title a { font-size: 20px; }
    .sectionSixText .subTitle { font-size: 13px; }
    section.seven .tabWrap { gap: 0 28px; }
    .sectionCon .videoCon{
	    width:250px;
    	height:250px;
	}
	section.two .sectionConWraps{
    	 display: grid;
		 grid-template-columns: repeat(3, 1fr); /* 3칸 */
		 grid-template-rows: repeat(2, 1fr);    /* 2줄 */
		 gap: 40px; /* 선택사항: 간격 추가 */
    }
    .secondimgbox{
		width: 400px;
        height: 400px;
    }
    .fistimgbox{
       	width: 300px;
    	height: 300px
    }
    .conImageBox{			
		width: 250px;
        height: 250px;
    }
    
    .con.two .sectionCon .iconSubtitle, .con .sectionCon .iconSubtitle{
    	font-size:var(--font);
    }
        .sectionWrap .sectionCon .imgWrap{height: 60vh;}
} 

/* 테블릿 가로 (해상도 768px ~ 1023px)*/ 
@media all and (min-width:768px) and (max-width:1023px) 
{ 
    :root 
    {
        --banner-title : 65px;
        --title:28px;
        --subtitle:16px;
        --list--subtitle:16px;
        --textEvent:48px;
    }
    header .headerInner ul{
    	display:none;
    }
    section.two .sectionConWraps{
    	 display: grid;
		 grid-template-columns: repeat(2, 1fr);
		 grid-template-rows: repeat(3, 1fr);   
		 gap: 40px; /* 선택사항: 간격 추가 */
    }
    section.four{padding: 120px 0 0 0;}
 	.ImgCon .leftImg{ display:none }
    .sectionWrap .sectionCon .imgWrap .ImgCon .rightImg, 
    .ImgCon .ScrollBox{
    	width: 100%;
    }
    .patnerBanner{
    	padding:120px 0;
    }
	#IconDatabase{
        top: 40%;
        right: 47.5%;
	}
	
	#IconCloud{
	    top: 6%;
	    right: 27.3%;
	}
	#IconProtocol{
		top: 78%;
        right: 33%;
	}
	#scrolldatabase{
		right: 48%;
        top: 33%;
	}
	#scrollcloud{
        right: 27.8%;
        top: 2%;
	}
	#scrollprotocol{
		bottom: 29%;
        right: 33.6%;
	}
    .sectionCon .videoCon{
    	width: 300px;
    	height: 300px
    }
    section.one { 
        width: 100%;
        background-image: url(../../images/banner_bg2.svg);
        background-position: center;
        background-size: contain;
        background-position-x: center;
        background-position-y: top;
        height: auto;
    }
    section { min-height: inherit; padding: 120px 0; }
    section.one .sectionWrap { flex-direction: column-reverse ;}
    section.one .sectionWrap .sectionCon { width: 100%;}
    section.one .sectionWrap .sectionCon.left { margin-top: 40px;  width: 100%;}
       

	
    .sectionWrap .sectionCon .textCon .textLeft,
    .sectionWrap .sectionCon .textCon .textLeft .textLeftCon .title,
    .sectionWrap .sectionCon .textCon .textRight,
    .textLeftCon
    {
        width: 100%;
    }
    section.one .sectionWrap .sectionCon .buttnWrap button, section.four .sectionConWrap .sectionCon .buttnWrap button { padding: 16px 20px; }
    section.four .sectionWrap .sectionCon .textCon{
        flex-direction: column;
        gap: 12px 0;
    }
    section.one .sectionCon.right img{
        width: 100%;
    }
    section.two .sectionConWrap{
    	flex-direction: column;
    } 
    .sectionCon .textWarp{
	    padding: 20px 132px;
    }
    section.three .sectionCondiv { grid-template-columns: repeat(3, 1fr); }    
    
    section.four .sectionCondiv .sectionCon .sectionConImg { height: 200px; padding:24px;}
    section.four .sectionCondiv .sectionCon .sectionConImg img { width: 100%; }
    section.four .sectionConWrap .sectionCon.left .title a { letter-spacing: -1.5px;}
    section.four .sectionCondiv.icon .sectionCon.icon span { width:64px; height:64px; }
    section.five .sectionCondiv {grid-template-columns: repeat(3, 1fr); }
    .section.four .sectionCondiv.icon { margin-top: 60px;} 
    @keyframes changeBorderColor {
        0% {
            width: 0;
        }
        100% {
            width: calc(100% - 200px);
        }   
    }
    section.five .tabWrap { gap: 0 24px; }
    section.five .tabWrap .tab { padding: 16px; font-size: 14px;}
    section.five .sectionCon { height: 340px; }
    section.six .sectionConWrap .sectionCon.bottom { margin: 140px 0 80px;}
    section.six .sectionConWrap .sectionCon.top { z-index: 99;}
    .sectionSixImg { top: -59%; }
    .sectionSixImg img { width: 600px; }
    .sectionSixText { width: 100%; flex-direction: row;}
    .sectionSixText .title{ min-width: 200px;}
    .sectionSixText .title a { font-size: 20px; }
    .sectionSixText .subTitle { font-size: 14px; }
    .sectionSixTextWrap { display: flex; flex-direction: column; gap:40px 0; margin-top: 120px; align-items: start; }
    .sectionSixTextWrap::after { top: 57px;}
    .sectionSixText:nth-child(2n) { text-align: left;}

    section.seven .tabWrap { gap:0 24px; margin:0 auto;}
    section.seven .tabWrap .tab { padding: 12px 24px; }
    .swiper { padding-bottom :60px!important;}
    .bannerInner .numberWrap{
        margin-top: 40px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        gap: 40px;
    }
   .secondimgbox{
       	width: 300px;
    	height: 300px
    }
    .fistimgbox{
	    width: 225px;
        height: 225px;
    }
    .conImageBox{
     	width: 200px;
    	height: 200px
    }
    .conImageBox img{
    	width: 200px;
    	height: 200px;
    }
    .sectionWrap .sectionCon .imgWrap{height: 50vh;}
    .sectionWrap .sectionCon .textCon .textRight,
    .sectionWrap .sectionCon .textCon .textLeft
    {
	    width: 100%;
    }
} 

/* 모바일 가로 & 테블릿 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px)
{
    :root 
    {
        --banner-title:42px;
        --title:28px;
        --subtitle:16px;
        --list--subtitle:14px;
        --textEvent:36px;
    }
    header .headerInner ul{
    	display:none;
    }
    section.anther .conWrap{
    	flex-direction: column;
    }
    
    .conImageBox{
    	width: 500px;
    	height: 500px;
    }
    .ImgCon .leftImg{    display:none }
    .sectionWrap .sectionCon .imgWrap .ImgCon .rightImg, .ImgCon .ScrollBox{
    	width: 100%;
    }

	#IconDatabase{
	    top: 41%;
	    right: 47%;
	}
	
	#IconCloud{
		top: 6%;
	    right: 18.3%;
	}
	#IconProtocol{
	    top: 81%;
	    right: 28%;
	}
	#scrolldatabase{
	    right: 48.6%;
	    top: 37%;
	}
	#scrollcloud{
	    right: 20%;
	    top: 2%;
	}
	#scrollprotocol{
	    bottom: 25%;
	    right: 29.6%;
	}
	section.anther .textWrap h3{
		font-size:var(--title);
	}
	section.anther .textWrap p{
		font-size: var(--subtitle)	
	}
    section.anther .conWrap .con .sectionCon, 
    section.anther .conWrap .con.two .sectionCon,
    section.anther .conWrap .con,
    section.anther .conWrap .con.two{flex-direction: row; width: 100%;}
    .con.two .sectionCon .iconTitle, .con .sectionCon .iconTitle{    font-size:18px;   text-align: center; }
    section.anther .conWrap .con, section.anther .conWrap .con.two{gap:24px 0; align-items: start;}
    .con.two .sectionCon .iconSubtitle, .con .sectionCon .iconSubtitle{font-size:14px}
    .sectionWrap .sectionCon .imgWrap{height: 40vh;}
    section.one { background-image: url(../../images/banner_bg2.svg); background-size: contain; }
    section.one, section.two { padding: 100px 0 ;}
    section { min-height: inherit; padding: 100px 0; }
    section.one .sectionWrap { flex-direction: column-reverse ;}
    section.one .sectionWrap .sectionCon { width: 100%; }
    section.one .sectionWrap .sectionCon.left { margin-top: 40px; width: 100%; }
    section.one .sectionWrap .sectionCon .buttnWrap button, section.six .sectionConWrap .sectionCon .buttnWrap button { padding: 10px 12px;}
    section.two .sectionConWrap, section.three .sectionCondiv { grid-template-columns: repeat(2, 1fr); }    
    .section.two .sectionConWrap .sectionCon .icon{ width:60px; height: 60px; }
    .section.two .sectionConWrap .sectionCon .icon img { width: 30px;}
    section.two { gap: 24px 0; }
    .patnerBanner{padding:100px 0;}
    section.one{        height: auto;}
    section.one .sectionWrap .sectionCon .buttnWrap button, section.four .sectionConWrap .sectionCon .buttnWrap button { padding: 16px 20px; }
	section.one .sectionWrap { flex-direction: column-reverse ;}
    .sectionWrap .sectionCon .textCon{         flex-direction: column;         gap: 12px 0;    }
    section.one .sectionWrap .sectionCon.left,    section.one .sectionWrap .sectionCon.Right,
    .sectionWrap .sectionCon .textCon .textRight,
    .sectionWrap .sectionCon .textCon .textLeft    { width: 100%;}
    section.two .sectionConWrap{flex-direction: column;}
    section.six .sectionConWrap{ margin: 80px 0; }
    section.four .sectionCondiv .sectionCon:nth-child(3) { display: none;}
    section.four .sectionCondiv { grid-template-columns: repeat(2,1fr);}    
    section.four .sectionCondiv .sectionCon .sectionConImg { height: 200px; padding:24px;}
    section.four .sectionCondiv .sectionCon .sectionConImg img { width: 100%; }
    section.four .sectionConWrap .sectionCon.left .title a { letter-spacing: -1.5px;}
    section.four .sectionCondiv.icon .sectionCon.icon span { width:60px; height:60px; border-radius: 6px; font-size: 30px;}
    .section.four .sectionCondiv.icon { margin-top: 60px; display: grid; grid-template-columns: repeat(2,1fr); gap: 40px;} 
    .section.four .sectionCondiv.icon::before,.section.four .sectionCondiv.icon::after {display: none; }
    
    section.five .sectionCondiv {grid-template-columns: repeat(3, 1fr); }
    section.five .tabWrap { gap: 0 24px; }
    section.five .tabWrap .tab { padding: 16px; font-size: 14px;}
    section.five .sectionCon { height: 340px; }

    section.six br { display: block!important;}
    section.six .sectionConWrap .sectionCon.bottom { margin: 0;}
    section.six .sectionConWrap .sectionCon.top { z-index: 99;}
    .sectionSixImg { top: -10%; }
    .sectionSixImg img { width: 400px; }
    .sectionSixText { width: 100%; flex-direction: row;}
    .sectionSixText .title{ min-width: 140px;}
    .sectionSixText .title a { font-size: 16px; }
    .sectionSixText .subTitle { font-size: 14px; }
    .sectionSixTextWrap { display: flex; flex-direction: column; gap:28px 0; margin-top: 200px; align-items: start; }
    .sectionSixTextWrap::after { top: 168px;}
    .sectionSixText:nth-child(2n) { text-align: left;}

    section.seven { width: calc((1580 / 1920)* 100%); margin:0 auto;}
    section.seven .tabWrap { gap:24px; margin:0 auto; display: grid; grid-template-columns: repeat(2, 1fr);}
    section.seven .tabWrap .tab { padding: 12px; }
    .sectionCon .videoCon{
	    width:300px;
    	height:300px;
	}
    .swiper-button-next, .swiper-rtl .swiper-button-prev,
    .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after, .swiper-pagination { display: none!important;}
    .swiper { padding-bottom :0!important;}
    .bannerInner .numberWrap .number .numberUp .number{
    	font-size:28px;
    }
    .bannerInner .numberWrap{
    	grid-template-columns: repeat(2,1fr);
    	gap:40px;
    }
    .sectionCon .textWarp{
	    padding: 18px 120px;
    	border-radius: 10px;
    }
    section.two .sectionConWraps{
    	 display: grid;
		 grid-template-columns: repeat(1, 1fr);
		 grid-template-rows: repeat(6, 1fr);   
		 gap: 40px; 
    }

	.TopBtn{
		display: none;
	}
}   
/* 모바일 세로 (해상도 ~ 479px)*/ 
@media all and (max-width:479px) 
{   
    :root 
    {    
        --banner-title:36px;    
        --title:24px;
        --subtitle:14px;
        --textEvent:28px;
    }
    section.one .sectionWrap{ margin-top: -70px; }
    br { display: block;}
    .BtnBox{display: flex;    gap: 8px;  }
	.BtnBox .Btn{padding: 12px 16px; font-size:12px;}
    section { padding: 60px 0; }
    section.one { margin-top: 64px; }
    section.two .sectionConWraps{
    	 grid-template-rows: repeat(1, 1fr);
    }
    .secondimgbox{
		width: 275px;
        height: 275px;
    }
    .fistimgbox{
       	width: 225px;
    	height: 225px
    }
    .conImageBox{
     	width: 300px;
    	height: 300px
    }
    .conImageBox img{
    	width: 200px;
    	height: 200px;
    }
    .bannerInner{
    	width: 80%;
    }
    section.anther .conWrap .con .sectionCon, 
    section.anther .conWrap .con.two .sectionCon, 
    section.anther .conWrap .con, 
    section.anther .conWrap .con.two{
    	flex-direction: column;
        align-items: center !important;
        gap: 24px 0;
    }
    section.anther .conWrap{
    	gap:50px 0;
    }
    section.six .sectionConWrap .sectionCon .buttnWrap{
    	align-items: start;
    }
    .textRightcon .textBox{font-size:var(--subtitle);}
    .sectionWrap .sectionCon .textCon .textLeft .textLeftCon .title{
		flex-direction: column;
	}
	.title .TextEvent{
		margin-left: 0;
	}
	.BtnBox{
		flex-direction: column;
	}
	section.seven .sectionCon{
	}
    section.one .sectionWrap .sectionCon .title a { line-height:1.1;}
    section.one .sectionWrap .sectionCon .subTitle { font-weight: 500; width: 100%; }
    section.one .sectionWrap .sectionCon .feature { font-weight: 400; font-size: 14px; gap: 8px 0; }
    section.one .sectionWrap .sectionCon.left { gap: 20px 0; }
    section.one .sectionWrap .sectionCon .feature li .listIcon { background: none; }
    section.one .sectionWrap .sectionCon .feature li .listIcon:after { background-color: #111;}
    section.one .sectionWrap .sectionCon .buttnWrap, section.six .sectionConWrap .sectionCon .buttnWrap { flex-direction: column; gap: 24px 0; }
    section.one .sectionWrap .sectionCon .buttnWrap button, section.four .sectionConWrap .sectionCon .buttnWrap button { width: 100%; }
    .sectionCon .videoCon{
	    width:250px;
    	height:250px;
	}
	section.anther .textWrap h3{
		font-size:var(--title);
	}
	section.anther .textWrap p{
		font-size:var(--subtitle);
	}
    section.two br { display: none;}
    section.two .sectionConWrap, section.three .sectionCondiv { grid-template-columns: repeat(1, 1fr); }
    .section.two .sectionConWrap .sectionCon:hover { transform: none; } 	
	.bannerInner .numberWrap .number .numberUp .number
    section.four .sectionCondiv { grid-template-columns: repeat(1, 1fr); gap: 24px 0; }
    section.four .sectionCondiv .sectionCon .sectionConImg { height: 160px; }
    section.four .sectionCondiv .sectionCon .sectionConImg img { width: 60%; }
    .section.four .sectionCondiv.icon { margin-top: 40px; }

    section.five .sectionCondiv { grid-template-columns: repeat(2, 1fr); }
    
    .sectionSixImg { top: -4%; overflow: hidden;}
    .sectionSixImg img { width: 400px; }
    .sectionSixTextWrap { margin-top: 250px;}
    .sectionSixTextWrap::after { top: 190px; }
    .bannerInner .numberWrap{
	    margin-top: 40px;
	    display:flex;
	    flex-direction:column;
	    width: 100%;
	    gap: 24px;
    }
    .sectionSixText:nth-child(2n),.sectionSixText{
    	display: flex;
    	flex-direction: column;
    }
    .sectionWrap .sectionCon .imgWrap{
    	height: 50vh;
    }
    .sectionWrap .sectionCon .textCon{
    	padding :12px 0 ;
    }
    .sectionCon .textWarp{
        padding: 18px 120px;
        border-radius: 10px;
    }
    .ImgCon .leftImg{    display:none }
    .sectionWrap .sectionCon .imgWrap .ImgCon .rightImg, .ImgCon .ScrollBox{
    	width: 100%;
    }
	.sectionWrap .sectionCon .imgWrap .ImgCon .rightImg, .ImgCon .ScrollBox{
		padding:24px
	}
	.sectionWrap .sectionCon .textCon .textRight .textRightcon{
		gap:40px;
	}
	.sectionContWrap .TextCon{
		display: flex;
	    align-items: start;
	}
	#IconDatabase{
    top: 41%;
    right: 43%;
	}
	
	#IconCloud{
		top: 21%;
		right: 24.3%;
	}
	#IconProtocol{
		top: 61%;
		right: 21%;
	}
	
	
	#scrolldatabase{
		right: 43%;
		top: 37%;
	}
	#scrollcloud{
		right: 24%;
	    top: 13%;
	}
	#scrollprotocol{
		top: 54%;
		right: 21%;
	}
}