@font-face {
    font-family: 'notosanskr-bold_0';
    src: url('webfont/notosanskr-bold_0.otf') format('opentype');
}
@font-face {
    font-family: 'notosanskr-regular_0';
    src: url('webfont/notosanskr-regular_0.otf') format('opentype');
}
@font-face {
    font-family: 'notoserifkr-light';
    src: url('webfont/notoserifkr-light.otf') format('opentype');
}

@font-face {
    font-family: 'nanumsquareneo-brg';
    src: url('fonts/nanumsquareneo-brg.ttf') format('truetype');
}
@font-face {
    font-family: 'nanumsquareneo-cbd';
    src: url('fonts/nanumsquareneo-cbd.ttf') format('truetype');
}
@font-face {
    font-family: 'nanumsquareneo-deb';
    src: url('fonts/nanumsquareneo-deb.ttf') format('truetype');
}
@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}
@keyframes move {
    from {
        transform: translateX(20px) scale(1.2);
        animation-timing-function: cubic-bezier(.2,0,.8,1);
    }

    to {
        transform: translateX(0px) scale(1);
    }
}
@-webkit-keyframes updown {
    0% {
        bottom: 0;
    }

    100% {
        bottom: 15px;
    }
}

@-webkit-keyframes spinspin {0% {-webkit-transform: rotate(0deg);}100% {-webkit-transform:rotate(180deg);}}
@keyframes spinspin {0% {transform: rotate(0deg);}100% {transform:rotate(180deg);}}

:root{--gap1:55px;--gap2:65px;--gap3:30px;}

body *{font-family: 'notosanskr-regular_0';}
.notosanskrBold{font-family: 'notosanskr-bold_0';}
.notosanskrLight{font-family: 'notoserifkr-light';}

.nanumsquareneoBrg{font-family: 'nanumsquareneo-brg';}
.nanumsquareneoCbd{font-family: 'nanumsquareneo-cbd';}
.nanumsquareneoDeb{font-family: 'nanumsquareneo-deb';}

/* common */
a{text-decoration:none!important;color:inherit;}
#main-slider{position:relative;}



.nav-tabs {border-bottom:none;}
.plus { position:absolute; top:0; right:0;}
.plus:hover { opacity:0.8; transition:0.3s all ease;}
.slider .move-btn{top:50%!important;}
.slider .slider-wrapper .slide p{display: flex;}
.slider .slider-wrapper .slide img{width: 100%;}
.slider .slider-dots .each-dot{width:20px!important;height:20px!important;background-color:rgba(255,255,255,.5)!important;transition:0.3s all ease;border:none!important;}
.slider .slider-dots .each-dot.active{width:55px!important;height:20px!important;background-color:#fff!important;transition:0.3s all ease;border-radius:50px;border:1px solid #fff!important;}
.box{display:inline-block; position:relative; opacity:0; top:50px; }
.flexBox{display: inline-flex;flex-direction: column;flex-wrap: wrap;align-content: center;justify-content: center;align-items: center;text-align:center;}
.black{color:#000!important;text-decoration:none;}
.white{color:#fff!important;text-decoration:none;}

.view-more {
    display: inline-block;
    text-decoration: none;
    overflow: hidden;
    vertical-align: middle;
    background: transparent;
    overflow: hidden;
    -webkit-transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    z-index: 1;
    font-weight: 100;
}

.view-more:hover:before {
-webkit-transform: translateX(0) skewX(-17.62deg);-ms-transform: translateX(0) skewX(-17.62deg);
transform: translateX(0) skewX(-17.62deg);-webkit-transform-origin: left top;
-ms-transform-origin: left top;transform-origin: left top;}

a:hover .view-more:before {
-webkit-transform: translateX(0) skewX(-17.62deg);-ms-transform: translateX(0) skewX(-17.62deg);
transform: translateX(0) skewX(-17.62deg);-webkit-transform-origin: left top;
-ms-transform-origin: left top;transform-origin: left top;}

.view-more:before {
z-index: -1;content: "";display: block;width: 135%;height: 105%;position: absolute;left: 0;top: 0;
-webkit-transform-origin: right top;-ms-transform-origin: right top;transform-origin: right top;-webkit-transform: translateX(-101%) skewX(-17.62deg);
-ms-transform: translateX(-101%) skewX(-17.62deg);transform: translateX(-101%) skewX(-17.62deg);-webkit-transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1),  -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-backface-visibility: hidden;backface-visibility: hidden;}

.page-content{background-image: url('../images/gate/1_bg.jpg');}
#gate-logo{padding:100px 0 90px;}
#gate-logo .gateLM{display:grid;grid-template-columns: 1fr 1fr;gap:20px;}
#gate-logo .gateLM .gateLRM{}
#gate-logo .gateLM .gateRRM{display: flex;justify-content: center;align-items: center;}
#gate-logo .gateLM .gateRRM .gateRBT{display: flex;flex-direction: column;gap: 20px;}
#gate-logo .gateLM .gateRRM .gateRBT a{display: flex;align-items: center;gap: 10px;text-decoration:none;}
#gate-logo .gateLM .gateRRM .gateRBT a h1{margin:0;font-size:1.5rem;color:#000;}


#gate1{padding: 0 0 50px;}
#gate1 .gate1M{display:grid;grid-template-columns: 1fr 1fr;gap:20px;}
#gate1 .gate1M .gate1L{position:relative;border-radius: 20px;}
#gate1 .gate1M .gate1L h1{position: absolute;transform: translate(0%, -50%);top: 50%;left: 0;width: 100%;margin: 0;text-align: center;font-size:1.8rem;color:#fff;}
#gate1 .gate1M .gate1R{display:grid;grid-template-columns: 1fr;gap:20px;}
#gate1 .gate1M .gate1R .gate1RT{padding:80px;position:relative;border-radius: 20px;}
#gate1 .gate1M .gate1R .gate1RT h1{margin:0;position: absolute;transform: translate(0%, -50%);top: 50%;left: 0;width: 100%;margin: 0;text-align: center;font-size:1.8rem;color:#fff;}
#gate1 .gate1M .gate1R .gate1RB{padding:80px;position:relative;border-radius: 20px;}
#gate1 .gate1M .gate1R .gate1RB h1{margin:0;position: absolute;transform: translate(0%, -50%);top: 50%;left: 0;width: 100%;margin: 0;text-align: center;font-size:1.8rem;color:#fff;}

#gate2{padding: 0 0 50px;}
#gate2 .gate2M{display:grid;grid-template-columns: 1fr 1fr 1fr 1fr;gap:20px;}
#gate2 .gate2M a{padding:87.5px;position:relative;background-color:#fff;border-radius:20px;color:inherit;text-decoration:none;}
#gate2 .gate2M a img{position: absolute;transform: translate(50%, -50%);top: 35%;right: 50%;}
#gate2 .gate2M a h1{margin:0;position: absolute;transform: translate(0%, -50%);bottom: 10%;left: 0;width: 100%;font-size:1.5rem;text-align: center;color:#000;}

#gate3{padding: 0 0 50px;}
#gate3 .gate3M{display:grid;grid-template-columns: 1fr 1fr;gap:20px;}
#gate3 .gate3M a{padding:125px;position:relative;border-radius:20px;text-decoration:none;color:inherit;}
#gate3 .gate3M a h1{position: absolute;transform: translate(0%, -50%);top: 50%;left: 0;width: 100%;margin: 0;text-align: center;font-size:1.8rem;color:#fff;}

#gate4{padding: 0 0 100px;}
#gate4 .gate4M{display:grid;grid-template-columns: 1fr 1fr 1fr;gap:20px;}
#gate4 .gate4M a{padding:87.5px;position:relative;background-color:#fff;border-radius:20px;}
#gate4 .gate4M a img{position: absolute;transform: translate(50%, -50%);top: 35%;right: 50%;}
#gate4 .gate4M a h1{margin:0;position: absolute;transform: translate(0%, -50%);bottom: 10%;left: 0;width: 100%;font-size:1.5rem;text-align: center;color:#000;}




html, body {  font-size:18px;}    /* PC (해상도 1024px)*/ /*폰트사이즈 */
.font-9xl{ font-size:5rem; }
.font-8xl{ font-size:4rem; }
.font-7xl{ font-size:3rem; }
.font-6xl{ font-size:2.75rem; }
.font-5xl{ font-size:2.4rem; }
.font-4xl{ font-size:2rem; }
.font-3xl{ font-size:1.75rem; }
.font-2xl{ font-size:1.5rem; }
.font-xl{ font-size:1.25rem; }
.font-l{ font-size:1.125rem;  }
.font-d{font-size:1rem; } /*본문*/
.font-m{font-size:1.1rem; }
.font-s{font-size:0.9rem; }
.font-xs{font-size:0.8rem; }
.font-2xs{font-size:0.7rem; }  
@media(max-width:1023px) {/* 타블렛 가로형 sm*/
html, body { font-size:16px; }
}
@media(max-width:767px) {/* 타블렛 세로형 xs */
html, body { font-size:15px; }
.font-9xl{ font-size:4rem; }
.font-8xl{ font-size:3.5rem; }
.font-7xl{ font-size:3rem; }
.font-6xl{ font-size:2.5rem; }
  .font-5xl{ font-size:2.2rem; }
.font-4xl{ font-size:1.5rem; }
   .font-s{font-size:1rem; }
   .font-xs{font-size:1rem; }
   .font-2xs{font-size:0.9rem; } 

}
@media(max-width:467px) { /*모바일*/
html, body { font-size:14px; }
   .font-s{font-size:1rem; }
   .font-xs{font-size:1rem; }
   .font-2xs{font-size:1rem; } 
}

@media(min-width:800px) {
    .container {
        width: 800px;
    }
}

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

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

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

@media (max-width:992px) {
	#gate2 .gate2M a {padding: 80.5px;}
}

@media (max-width:767px) {
	#gate-logo {padding: 3rem 10px 20px;}
	/* #gate-logo .gateLM{grid-template-columns:1fr;} */
	#gate-logo .gateLM .gateRRM .gateRBT{gap:10px;}
	#gate1 {padding: 0 10px 20px;}
	/* #gate1 .gate1M{grid-template-columns:1fr;}
	#gate1 .gate1M .gate1L{padding: 25vw;background-repeat: no-repeat;background-position: center;background-size: cover;} */
	#gate1 .gate1M .gate1L{padding: 12vw;background-repeat: no-repeat;background-position: center;background-size: cover;} 
	#gate2 {padding: 0 10px 20px;}
	/* #gate2 .gate2M{grid-template-columns:1fr 1fr;} */
	#gate3 {padding: 0 10px 20px;}
	/* #gate3 .gate3M{grid-template-columns:1fr;} */
	#gate4 {padding: 0 10px 5rem;}
	/* #gate4 .gate4M{gap:5px;} 
	#gate4 .gate4M a{padding:0;aspect-ratio: 1 / 1.3;}*/
	#gate4 .gate4M a{padding:0;aspect-ratio: 1 / 1;}
}

@media (max-width:467px) {
	#gate-logo .gateLM .gateRRM .gateRBT a h1 {font-size: 1rem;}
	#gate-logo .gateLM .gateRRM .gateRBT a img {width: 25px;}
	#gate1 .gate1M .gate1L h1{font-size: 1.2rem;}
	#gate1 .gate1M .gate1R .gate1RT {padding: 40px;}
	#gate1 .gate1M .gate1R .gate1RT h1{font-size: 1.2rem;}
	#gate1 .gate1M .gate1R .gate1RB {padding: 40px;}
	#gate1 .gate1M .gate1R .gate1RB h1{font-size: 1.2rem;}
	#gate2 .gate2M{gap: 10px;}
	#gate2 .gate2M a {padding: 50px 10px;}
	#gate2 .gate2M a img {width: 50px;top: 31%;}
	#gate2 .gate2M a h1{font-size: 0.8rem;}
	#gate3 .gate3M a {padding: 52px 50px;}
	#gate3 .gate3M a h1{font-size: 1.2rem;}
	#gate4 .gate4M{gap:10px;}
	#gate4 .gate4M a img {width: 40px;}
	#gate4 .gate4M a h1 {font-size: 1rem;}
	
}



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