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

@media all and (max-height:800px){
	.AsToCon .AsCon,.AsToCon .TobeCon {
		height: auto;
	}
}
@media all and (max-height:700px){
	.section.two{
		margin-top:400px !important;	
	}
		
}

@media all and (max-width:1440px){
	.sectionInner .sectionContWrap{
		gap:0;
	}
	.LineImgCon .ImgBox{
		width: 84px;
		height: 84px;
	}
	.LineImgCon .ImgBox img{
		width: 70%;
	}
	.LineImgCon .TextBox{
		width: 60%;
	}
	.AsToConWarp .AsToCon, .section.two{
		margin-top: 7%;
	}
	
} 
@media all and (max-width:1279px) 
{
    section { height: inherit; padding: 150px 0; }
    /*.section .textWrap { width: 90%; }*/
    .sectionContWrap .TextCon{width: 90%;align-items: start; justify-content: center;}
      
     
    section.one .sectionConWrap { grid-template-columns: repeat(2, 1fr); }
    .sectionInner .sectionContWrap{
    	flex-direction: column;
    }
    .sectionInner .sectionContWrap{
    	gap: 40px;
    }
    .sectionContWrap .ImgCon{
    	width: 75%;
    	background-size: cover;
    }
    .AsToCon .AsCon,.AsToCon .TobeCon{
    	width: auto;
    	height: auto;
    	gap:24px;
    }
    .AsToConWarp .AsToCon{margin-top:10%;}
    .anthertwo .sectionContWrap{
    	height: 100vh;
    }
}

/* 테블릿 가로 (해상도 768px ~ 1023px)*/ 
@media all and (max-width:1023px) 
{ 
    section { height: inherit; padding: 100px 0; }
    .textWrap .subTitleCenter{align-items: start;}
    .section .sectionInner { flex-direction: column!important; gap:40px 0; padding: 0 40px; }
    .section .sectionImg, .sectionConWrap { width: 100%; }
    .sectionImg img { width: 100%!important; }
    .bannerInner br { display: none;}
    .bannerInner .numberWrap { grid-template-columns: repeat(2, 1fr); gap:40px;}
    .bannerInner .numberWrap .number .numberUp .number { font-size: 32px;}
	.section .sectionConWrap{width: 100%;}
    .AsToConWarp .AsToCon{margin-top:10%; flex-direction: column; gap: 40px 0;}
	.AsToCon .arrowBox img{    transform: rotate(90deg);}
    @keyframes moveLeftToRight {
	    0% {
	        transform: translateY(20px) rotate(90deg);
	    }
	    100% {
	        transform: translateY(-20px) rotate(90deg);
	    }
	}
	
	.AsToCon .arrowBox{flex-direction: row;}
	.AsToConWarp .AsToCon{padding-top:100px;}
	.sectionInner .sectionContWrap{width: 100%;}
	.LineImgCon .ImgBox{width: 60px; height: 60px;}
	.sectionContWrap .ImgCon{width: 90%;}
	.ImgCon .ImgConWrap{gap:24px 0;}
    .section.two{margin-top: 30%;}
	.anthertwo .sectionContWrap{gap:24px 0;}
    .selectCon .selector{
    	justify-content: space-between;
    }
} 

/* 모바일 가로 & 테블릿 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px){
    :root 
    {
        --main-color: #003D8F;
        --subtitle-color: #767676;
        --background-gray1 : #F7F7FB;
        --background-deppgray: #f1f1f5;
        --banner-title : 85px;
        --title : 28px;
        --subtitle : 18px;
        --list-subtitle : 16px;
        --btn-font: 14px;
        --menu-font: 16px;
        --font-24:24px;
    }
    .start {
    	align-items: start !important;
    }
    .AsToCon .AsLine, .TobeBox .ToLine{
    	align-items: baseline;
    }
    section .textWrap .title { letter-spacing: 0;}
    br{ display: none;} 
    .bannerInner { align-items: start;}
    .bannerTitle { text-align: left; letter-spacing: -2px;}   
    .bannerSubTitle { text-align: left; letter-spacing: -2px;}   
    .bannerInner .numberWrap .number .numberUp .number { font-size: 24px;}
    .section .sectionConWrap { width: 100%; }
    .section .sectionInner { 
	    flex-direction: column!important; 
	    gap: 40px;
	    width: 100%; 
    }
    section.antherone .sectionInner{
    	padding:24px;
    }
    section.antherone .sectionInner .sectionContWrap{
    	align-items: start;
    }
    .sectionImg .plusWrap{width: 300px; height: 270px;}
	section.two .textWrap .subTitle{letter-spacing: 0;}
    .sectionImg .plusWrap .plus:nth-child(1) { top: 4%; left: 8%; }
    .sectionImg .plusWrap .plus:nth-child(2) { top: 34%; right: 20%; }
    .sectionImg .plusWrap .plus:nth-child(2) p.plusScript { left: -140px; }
    .sectionImg .plusWrap .plus:nth-child(3) { top: 55%; right: 20%;}
    .sectionImg .plusWrap .plus:nth-child(3) p.plusScript { left: -140px; }
    .sectionImg .plusWrap .plus:nth-child(4) { top: 13%; right: 4%; }    
    .sectionImg .plusWrap .plus:nth-child(4) p.plusScript { left: -140px; }
    .sectionImg .plusWrap .plus:nth-child(2) p.plusScript:before,
    .sectionImg .plusWrap .plus:nth-child(3) p.plusScript:before ,
    .sectionImg .plusWrap .plus:nth-child(4) p.plusScript:before   
    {
        transform: rotate(60deg);
        right: -12px;
        left: initial; 
        top: 46%;
    }
    .sectionImg .plusWrap .plus p.plusScript { width: 120px; z-index: 1;}
    .section.one .sectionConWrap .sectionCon .iconSubtitle { font-size: 14px; width: 100%; margin-bottom: 20px;}
    .section.one .sectionConWrap .sectionCon .icon { width: 48px; height: 48px; margin-top: auto;}
    .section.one .sectionConWrap .sectionCon .icon img { width: 24px; height: 24px;}
    .sectionCon.protocol { gap: 0 40px; flex-direction: row;}
    section.one .sectionConWrap{grid-template-columns: repeat(2, 1fr);}
    /**/
    .AsToConWarp .AsToCon{
    	width: 80%;
    }
    .sectionInner .sectionContWrap{
    	width: 90%;
    }
    .sectionContWrap .ImgCon{
    	width: auto !important;
    }
    .textWrap .subTitleCenter{
    	gap: 12px;
    	align-items: start;
    }
    .textWrap .subTitleCenter{
    line-height: 1.5;
    }

    .section.one .sectionConWrap .sectionCon .iconSubtitle{
		letter-spacing: 0;
	}
	.sectionCondiv.icon{
		align-items: start;
	}
	.sectionCondiv.icon .sectionCon.icon{
		width: 23%;
	}
	.sectionCon .iconName{
		text-align: center;
	}
	.sectionCondiv.icon::before, .sectionCondiv.icon::after{
		display: none;
	}
	.TextConWarp .Cloud ul, .TextConWarp .Database ul{
		flex-direction: column;
	}
	.Text .selectText{
		font-size:var(--list-subtitle);
	}
}

/* 모바일 세로 (해상도 ~ 479px)*/ 
@media all and (max-width:479px) 
{  
	
	section.one{width: 90%;}
	section .textWrap .subTitle{letter-spacing: -.6px}
	.section .sectionInner { padding: 48px;}       
    section.one .sectionConWrap { grid-template-columns: repeat(1, 1fr); }
    .section.one .sectionConWrap .sectionCon .icon { width: 40px; height: 40px;}
    .section.one .sectionConWrap .sectionCon .icon img { width: 28px; height: 28px;}
    .section.one .sectionImg img { width: 300px!important; height: 270px !important;}
    section.one .sectionConWrap{grid-template-columns: repeat(1, 1fr);}
    .sectionImg .plusWrap .plus span img{
    	width: 16px !important;
    	height: 16px !important;
    }
    .textWrap .subTitleCenter{
    	line-height: 1.5;
    }
    .Text .selectText{
	    font-size: var(--list-subtitle);
	    padding: 12px 8px;
    }
    section{
    	position: relative;
    }
    .AsToConWarp .selectCon{
    	flex-direction: row;
    	width: 90%;
    }
    .anthertwo .sectionContWrap{
    	width: 90%;
    }
    section.anthertwo{
    	padding: 50px 0;
    }
    .sectionCondiv.icon{
    	gap:40px 0px;
    	flex-direction: column;
    	justify-content: center;
    	align-items: center;
    }
    .sectionCondiv.icon .sectionCon.icon span{
    	width: 80px; height: 80px; 
    }
    .sectionCondiv.icon::after,.sectionCondiv.icon::before{
    	display: none;
    }
    .AsToConWarp .AsToCon{
    	padding-top:100px;
    }
	.section.two{
		margin-top:400px;	
	}
}