/*FONT*/
@font-face{font-family:'Noto Thin';font-style:normal;src:url(../font/NotoSans-Thin.woff) format("woff")}
@font-face{font-family:'Noto Light';font-style:normal;src:url(../font/NotoSans-Light.woff) format("woff")}
@font-face{font-family:'Noto Regular';font-style:normal;src:url(../font/NotoSans-Regular.woff) format("woff")}
@font-face{font-family:'Noto Medium';font-style:normal;src:url(../font/NotoSans-Medium.woff) format("woff")}
@font-face{font-family:'Noto Bold';font-style:normal;src:url(../font/NotoSans-Bold.woff) format("woff")}
@font-face{font-family:'Noto Serif';font-style:normal;src:url(../font/NotoSerif-Regular.woff) format("woff")}

@font-face{font-family:'Gmarket Light';font-style:normal;src:url(../font/Gmarket-Light.woff2) format("woff2"),url(../font/Gmarket-Light.woff) format("woff")}


*{margin:0; padding:0; list-style:none;box-sizing: border-box; line-height:1.1;}
img{max-width: 100%;}

body::-webkit-scrollbar {width: 10px;}
body::-webkit-scrollbar-thumb {background-color: #002f87;}
body::-webkit-scrollbar-track {background-color: #ebecff;}

body{background: url(./../images/bg.png) center / cover no-repeat;}

#intro{ width:100%; height: 100vh; padding:0 30px;}
#intro .introgWrap{position: absolute;left: 50%;top:45%;transform: translate(-50%, -50%);text-align: center;min-width: 1300px;}
#intro .logo{margin-bottom:70px;}
#intro .introgWrap .banner-list > ul{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 40px; padding:0 20px;}
#intro .b-l{width: 100%;background: #fff;}
#intro .b-l .inner{text-align: left;}
#intro .b-l .inner p{text-align: center;font-size: 32px; font-family:'Gmarket Light'; background: #002f87 url(./../images/symbol-bg.png) left top no-repeat; color: #fff;padding: 50px 0;}
#intro .b-l .inner p a{display:block; text-decoration:none; color: #fff;} 

#intro .b-l:hover .inner p{background: #0070ce url(./../images/symbol-bg.png) left top no-repeat;}
#intro .b-l .inner ul{padding: 30px 20px;}
#intro .b-l .inner ul li a{position: relative;color:#000;font-family:'Noto Regular';font-size:20px;display:block;text-decoration: none;margin-bottom:15px;line-height: 1.4;padding-left: 15px;}
#intro .b-l .inner ul li a:before{content:'';width:5px;height:5px;position: absolute;left:0;top: 10px;display: block;background-color: #a2a2a2;border-radius: 100%;}
#intro .b-l .inner ul li a:hover{color:#0070ce;}
#intro .b-l .inner ul li a:hover:before{background-color: #0070ce;}

@media (max-width:1400px){
    #intro .introgWrap{min-width:100%;}
    #intro .logo{width: 330px; margin: 0 auto 70px;}
    #intro .b-l .inner p{font-size: 25px; padding:30px 0;}
    #intro .b-l .inner ul li a{font-size: 18px;}
}

@media (max-width:1024px){
    #intro{height: 100%;}
    #intro .introgWrap{position: relative; transform:inherit; top:0; left:0; padding-bottom: 80px;}
    #intro .introgWrap .banner-list > ul{grid-template-columns:1fr 1fr;}
}
@media (max-width:767px){
    #intro .introgWrap .banner-list > ul{grid-template-columns:1fr; padding: 30px 0;}
}