html, body {
    font-size: 13px;  font-family: 'NanumSquare';
}

#dimodePage{background: #e8f2f6;}
.introgate-container{max-width:800px;     margin: 0 auto;} 
.gate-section{overflow:hidden;}
.flex{display:flex; align-items: center;}
a, a:hover {color:black; text-decoration:none;}

/*gate-logo*/
.gate-logo{ aspect-ratio:80/17;      align-items: center;    justify-content: center;}


/*gate-slider*/
.gate-slider-area .each-img img {    border-radius: 20px;}
.gate-slider-area {    padding: 0;}

/*gate-section1*/
.gate-section1{padding:30px 0;}
.gate-section1 .section1-center >div{aspect-ratio:1; background: #fff; width: calc(20% - 20px);    display: flex; border-radius: 20px; transition: all 0.3s linear;}
.gate-section1 .section1-center {justify-content: space-between;}
.gate-section1 .section1-center >div >a{display: flex;     
    flex-direction: column; 
    width: 100%;     align-items: center;
    justify-content: center;transition: all 0.3s linear;
}

.gate-section1 .section1-center >div:hover{background: #45a7da;}
.gate-section1 .section1-center >div:hover a{color: #fff;}
 
/*gate-section2*/
.gate-section2{ background: url("../Images/intro/2_live.png"); background-size: cover;aspect-ratio:80/35; font-family: NanumSquareEB; }
.gate-section2 .section2-left  >p {font-weight: bold;    color: white;     margin: 0;}
.gate-section2  .section2-img {    display: flex;    align-items: flex-end;    justify-content: center;    gap: 20px;}
.gate-section2  .section2-left {    padding: 60px 60px 140px;}
.gate-section2  .section2-right{    padding: 0 15px;}
 .gate-section2 .section2-center {  justify-content: space-between;     align-items: flex-end;}

.gate-section2 .section2-right a:hover img{ transform:translateY(-10px);}
.gate-section2 .section2-right a img{transition: all 0.3s linear;}
/*gate-section3*/
.gate-section3{padding: 0 40px; margin:30px 0;  background: url("../Images/intro/3_link_bg.png");aspect-ratio:80/18;  background-size: cover;   align-items: center;    justify-content: flex-end;}
.gate-section3 .section3-center >div{display:flex;     border: solid 1px #1a313c8f;        aspect-ratio: 200 / 85;
    width: 50%;
    display: flex;
    justify-content: center; transition: all 0.3s linear;}
.gate-section3 .section3-center {    gap: 20px; width: 60%;}
.gate-section3 .section3-center >div >a{  gap: 10px;}
 
.gate-section3 .section3-center >div:hover{background:#00000044;}
.gate-section3 .section3-center >div:hover a{color:#fff;}

/*gate-section4*/
.gate-section4{padding: 0; }
.gate-section4 .section4-center >div{aspect-ratio:185/130; background: #fff;     display: flex; border-radius: 20px;     flex-direction: column;
    align-items: center;     width: calc(25% - 15px);
    justify-content: center;}
.gate-section4 .section4-center {justify-content: space-between; font-weight:bold;}
.gate-section4 .section4-center >div >a{display: flex;     margin: 30px;   
    flex-direction: column; 
    width: 100%;     align-items: center;
    justify-content: center; 
}
.gate-section4 .section4-center hr{ width:30px; border-top: 1px solid #999999; margin:0px 0 10px;}
.gate-section4 .section4-center span{color: #0097e1;}
.gate-section4 .section4-center p{color: #656565; transition: all 0.3s linear;}
 
.gate-section4 .section4-center >div:hover >a p{ transform: scale(1.05); }

/*gate-section5*/
.gate-section5{padding: 0;}
.gate-section5-1{padding: 30px 0;}
.gate-section5-2{padding: 0;}
.gate-section5-1 .section5-center >div{aspect-ratio:185/130; display: flex; border-radius: 20px; width: calc(25% - 15px);} 
.gate-section5-2 .section5-center >div{aspect-ratio:390/130; display: flex; border-radius: 20px; width: calc(50% - 10px);}
.gate-section5 .section5-center {justify-content: space-between; font-weight:bold;}
.gate-section5 .section5-center >div >a{display: flex;     margin: 30px;
    flex-direction: column; 
    width: 100%;     align-items: center;
    justify-content: center;  
}
.gate-section5-1 .section5-center >div:nth-of-type(1){background: url("../Images/intro/5_edu_box_01.png");        background-size: cover; } 
.gate-section5-1 .section5-center >div:nth-of-type(2){background: url("../Images/intro/5_edu_box_02.png");         background-size: cover;} 
.gate-section5-1 .section5-center >div:nth-of-type(3){background: url("../Images/intro/5_edu_box_03.png");         background-size: cover;} 
.gate-section5-1 .section5-center >div:nth-of-type(4){background: url("../Images/intro/5_edu_box_04.png");         background-size: cover;} 
.gate-section5-2 .section5-center >div:nth-of-type(1){background: url("../Images/intro/5_edu_box_05.png");         background-size: cover;} 
.gate-section5-2 .section5-center >div:nth-of-type(2){background: url("../Images/intro/5_edu_box_06.png");         background-size: cover;} 

.gate-section5 .section5-center hr{ width:30px; border-top: 1px solid #fff; margin:0px 0 10px;}
.gate-section5 .section5-center span{color: #fff;}
.gate-section5 .section5-center p{color: #fff;}

.gate-section5 .section5-center >div:hover >a p{ transform: scale(1.05); }
.gate-section5 .section5-center >div  >a p{ transition: all 0.3s linear;}


/*gate-section6*/
.gate-section6{padding: 50px 0;}
.gate-section6 .section6-center >div{       display: flex; border-radius: 20px;      width: calc(20% - 16px);} 
.gate-section6 .section6-center {justify-content: space-between;}
.gate-section6 .section6-center >div >a{display: flex;      
    flex-direction: column; 
    width: 100%;     align-items: center;
    justify-content: center;
}

.gate-section6 .section6-center .section6-img{background:white;    
    border-radius: 70px;
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center; transition: background-color 0.3s linear;}
.gate-section6 .section6-center p{margin-top: 10px;}




/*gate-section7*/
.gate-section7{padding:   0; border-radius: 15px;}
.gate-section7 .section7-center >div{aspect-ratio:16/10; background: #fff;     display: flex;     width: 20%;}
.gate-section7 .section7-center {justify-content: space-between;  }
.gate-section7 .section7-center >div >a{display: flex;     margin: 0px;
        flex-direction: row;
    width: 100%;
    align-content: center;
    justify-content: center;
    align-items: center; gap:5px;
}
.gate-section7 .section7-center >div >a p{     margin: 0px; font-weight:bold;  }
.gate-section7 .section7-center >div{border-left:1px solid #eee;}
.gate-section7 .section7-center >div:nth-of-type(1){border:0px;}



/*gate-footer*/
.gate-footer{padding:  30px 0; color: #555; font-weight:bold;}
.gate-footer .gatefooter-center{   justify-content: center;}
.gate-footer .gatefooter-center .gate-foot_info {flex-direction: column;}
.gate-footer .gatefooter-center .gate-foot_info img{margin:30px;}
 
 

@media (max-width:1319px) {
    
}
@media(max-width:1199px){
    
}
@media(max-width:991px) {
     
}

@media(max-width:767px){
     .gate-section1 .section1-center >div >a {        margin: calc(100vw / 800 * 10);    }
	 .gate-section1 .section1-center >div >a img {        width: calc(100vw / 800 * 60);    }
	 .gate-section1 .section1-center >div >a p {        font-size: calc(100vw / 800 * 22);    }
	 .gate-section1 {    padding: calc(100vw / 800 * 30) 0;}
	  p {margin: 0!important;}
	 
	 .gate-slider-area {    padding: 0 15px;}
	 .gate-logo img{    width: calc(100vw / 800 * 300); }
	 .gate-section {     margin-left: 15px !important;    margin-right: 15px !important;}
	.gate-section1 .section1-center >div { width: calc(20% - 2vw);     border-radius: calc(100vw / 800 * 20); }
	.gate-slider-area .each-img img {    border-radius: calc(100vw / 800 * 20); }

	.gate-section2 .section2-left {     padding: calc(100vw / 800 * 60)   calc(100vw / 800 * 60)   calc(100vw / 800 * 140);   }
	.gate-section2 .section2-left >p{    font-size: calc(100vw / 800 * 42); }
	.gate-section2 .section2-left  .section2-img img:nth-of-type(1){    width: calc(100vw / 800 * 160); }
	.gate-section2 .section2-left  .section2-img img:nth-of-type(2){    width: calc(100vw / 800 * 130); }
	.gate-section2 .section2-right a img{    width: calc(100vw / 800 * 70); }
	.gate-section2 {padding:0;}
	.gate-section2 .section2-right {    padding: 0 calc(100vw / 800 * 15); }

	.gate-section3 {    padding: 0  calc(100vw / 800 * 20) 0; margin: calc(100vw / 800 * 30) 0;}
	.gate-section3 .section3-center {   width: 70%; gap: calc(100vw / 800 * 20);     }
	.gate-section3 .section3-center img{    width: calc(100vw / 800 * 40);     }
	.gate-section3 .section3-center span{    font-size: calc(100vw / 800 * 25);     }
	.gate-section3 .section3-center >div >a {    gap: calc(100vw / 800 * 10);}
 
.gate-section4 .section4-center >div >a { margin :calc(100vw / 800 * 30);     }
.gate-section4 .section4-center p, .gate-section4 .section4-center span{    font-size: calc(100vw / 800 * 23);     }
.gate-section4 .section4-center hr , .gate-section5 .section5-center hr{    width: calc(100vw / 800 * 30);     margin: calc(100vw / 800 * 10) 0  ;}
.gate-section4 .section4-center >div {    border-radius: calc(  100vw / 800 * 20 ); width: calc(25% -  100vw / 800 * 15 ); }

.gate-section5-1 {    padding: calc(  100vw / 800 * 30 ) 0;}
.gate-section5-1 .section5-center >div {     border-radius: calc(  100vw / 800 * 20 );    width: calc(25% -  100vw / 800 * 15);}
.gate-section5-2 .section5-center >div {     border-radius: calc(  100vw / 800 * 20 );    width: calc(50% - 100vw / 800 * 10);}
.gate-section5 .section5-center >div >a p, .gate-section5 .section5-center span{ font-size: calc(100vw / 800 * 23);     }
.gate-section5 .section5-center >div >a{ margin :calc(100vw / 800 * 30);     }

.gate-section6 {    padding: calc(  100vw / 800 * 50 ) 0;}
.gate-section6 .section6-center p{    font-size: calc(100vw / 800 * 23);     }
.gate-section6 .section6-center .section6-img {     border-radius: calc(100vw / 800 * 70);     }
.gate-section6 .section6-center .section6-img img{     width: calc(100vw / 800 * 60);     }

.gate-section6 .section6-center >div {     border-radius: calc(100vw / 800 * 20);    width: calc(20% -  100vw / 800 * 16 );}
.gate-section6 .section6-center p {    margin-top: calc(100vw / 800 * 10);}
.gate-section6 .section6-center >div >a { gap: calc(100vw / 800 * 10);}


.gate-section7 .section7-center >div >a p{font-size: calc(100vw / 800 * 17);}
.gate-section7 .section7-center >div >a img {    height: calc(100vw / 800 * 50);}
.gate-section7 .section7-center >div >a {    gap: calc(100vw / 800 * 5);}

.gate-footer .gatefooter-center .gate-foot_info img {    margin: calc(100vw / 800 * 0) auto calc(100vw / 800 * 60);        width: calc(100vw / 800 * 230);}
.gate-section7 {     border-radius: calc(100vw / 800 * 15);}
.gate-footer .gatefooter-center .gate-foot_info{    font-size: calc(100vw / 800 * 25);     }
.gate-footer .gatefooter-center .gate-foot_info {align-items: flex-start;}
}

@media(max-width:450px) {
    
    
}