@charset "utf-8";
@import url('http://fonts.cdnfonts.com/css/work-sans');
/*공통바디부분 시작*/
body {background: url("../images/bg.jpg") center top;}
.visual {width:1180px; margin: 20px auto 0; display: flex; justify-content: space-between;}
.visual>.introduce {margin-top:130px;}
.visual>.introduce>h1 { background: url("../images/visual_symbol.png") right; background-repeat: no-repeat;  line-height: 1; padding-right: 110px; display: block;}
.visual>.introduce>h1>span {font-family: 'Work Sans', sans-serif; font-style: normal;font-weight: 700; font-size: 95px;background: linear-gradient(115deg, rgba(255,255,255,1) 0%, rgba(73,191,255,1) 50%, rgba(147,26,255,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.visual>.introduce>h1::after {content:""; display: block; height: 3px; width: 107px; background:#aeebff ; border-radius: 3px; margin-top: 10px; margin-left: 6px; }
.visual>.introduce>.desc {font-family: 'Noto Sans KR', sans-serif ; margin-top:46px; margin-left:7px; color:#E4E4E4; font-size: 15px;font-weight: 500;  }
.visual>.introduce>.desc>strong {color: #E4E4E4; font-weight: 500;}

.wrap-content {width:1180px; margin: 0 auto 0; display: flex; justify-content: space-between; flex-wrap: wrap;}
.wrap-content>.links {width: 48.5%; padding:35px; box-sizing: border-box;  margin: 20px 0;   border-radius:15px;   background: rgba(100,100,100,0.2);    backdrop-filter: blur(10px);    box-shadow: 2px 7px 15px 8px rgba(0,0,0,0.7);transition: all ease 0.3s;}
.wrap-content>.links:hover{ background: linear-gradient(145deg, rgba(160,160,160,0.5) 0%, rgba(0,0,0,0.1) 20%); }

.wrap-content>.links>h2{font-family: 'Work Sans', sans-serif; font-weight: 500; font-size: 22px; line-height: 1; color: #DFFAFF; margin-bottom:20px;}
/*.wrap-content>.links>h2::before{content:""; display: inline-block; height: 14px; line-height: 17px; width: 3px; background: #DFFAFF; border-radius: 3px; margin-top: 6px; margin-right: 10px; }*/
.wrap-content>.links>ul>li a{ display: block; white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;line-height: 55px;height: 55px;  padding: 0 16px;  background: rgba(200,200,200,0.1); font-family: 'Noto Sans KR', sans-serif; font-weight: 400; font-size: 14px; color: #E7E7E7;border-radius:7px; margin-top: 10px;transition: all ease 0.3s ;}
.wrap-content>.links>ul>li .link {  font-weight: 100; font-size: 15px; color:#909090; margin-left: 10px;}
.wrap-content>.links>ul>li a:hover{ background: #000000;color: #e3e3e3; }


#header{ width:100%; height: 100px; }
#header > .wrap{ width:1080px; margin:0 auto; position:relative; }
#header > .wrap > .notice {	position: absolute;	top: 0;	left: 0px;}
#header > .wrap > .logo {	position: absolute;	top: 30px;	left: 0px;}
#gnb {position:absolute; top:14px; right:0px;}
#gnb li { float:left; margin-right:2px; border-left:1px #CCC solid;line-height:9px; padding:0 7px;}
#gnb li:first-child { border-left:0;}
#gnb li a{   font-size:11px; line-height:9px; color:#666666;}

#lnb { position:absolute; top:46px; left:200px; z-index:999;  width: 880px; }



footer{ width:100%; margin-top: 80px; background: #030207;   }
footer>.wrap{width:1180px; height: 80px;margin: 0 auto 0;  display:flex; justify-content: space-between; align-items: center;  font-size:13px;  color:#424141;}
footer>.wrap>.sns>a {margin-left: 5px; line-height: 0;}

footer>.wrap>.sns>a img {  filter:grayscale(100%); opacity: 50%}
footer>.wrap>.sns>a img:hover { filter:grayscale(0); opacity: 100%} 


@media all and (max-width:640px) {

body {background: url("../images/bg.jpg") center top, #050209; background-size: contain; background-repeat: no-repeat;}  
.visual {width:100%; margin: 0 auto 0; display: flex; justify-content:center; flex-wrap: wrap;}
.visual>.introduce {margin-top:80px;}
.visual>.introduce>h1 { width: 92%; margin: 0 auto;background: url("../images/visual_symbol.png") right; background-size: contain; background-repeat: no-repeat;  line-height: 1; padding-right: 0; display: block; box-sizing: border-box;}
.visual>.introduce>h1>span {font-size: 15vw;}
.visual>.introduce>h1::after {content:""; display: block; height: 2px; width: 17vw; margin-top: 2vw; margin-left: 5px; }
.visual>.introduce>.desc {width: 92%; margin: 23px auto 0; font-size: 15px;font-weight: 400; padding-left: 2vw;  }
.visual>.introduce>.desc>strong {font-size: 1.2em;color: #C5C5C5; font-weight: normal;}
    .visual>.pic {width: 90%; margin: 2vh auto 0;}
    .visual>.pic>img {width: 95%;}

.wrap-content {width: 92%; margin: 0 auto; margin: 0 auto 0; display: flex; justify-content: space-between; flex-wrap: wrap;}
.wrap-content>.links {width: 100%; padding:4vw; box-sizing: border-box;  margin: 2vw 0; border: 1px #222222 solid;  border-radius:10px;   background: linear-gradient(145deg, rgba(160,160,160,0.1) 0%, rgba(0,0,0,0.1) 60%);    backdrop-filter: blur(10px);    box-shadow: 2px 7px 15px 8px rgba(0,0,0,1);transition: all ease 0.3s;}
.wrap-content>.links:hover{ background: linear-gradient(145deg, rgba(160,160,160,0.5) 0%, rgba(0,0,0,0.1) 40%); border: 1px #333333 solid; }

.wrap-content>.links>h2{font-family: 'Work Sans', sans-serif; font-weight: 500; font-size: 19px; line-height: 1; color: #9BBCE9; margin-bottom:20px;}
.wrap-content>.links>h2::before{content:""; display: inline-block; height: 14px; line-height: 17px; width: 3px; background: rgba(73,191,255,1); border-radius: 3px; margin-top: 6px; margin-right: 8px; }
.wrap-content>.links>ul>li a{ display: block; white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;line-height: 10vw;height: 10vw;  padding: 0 16px; border: 1px rgba(255,255,255,0.1) solid;   font-family: 'Work Sans', sans-serif; font-weight: 500; font-size: 15px; color: #999999;border-radius:7px; margin-top: 10px;transition: all ease 0.3s ;}
.wrap-content>.links>ul>li .link {  font-weight: 100; font-size: 15px; color:#5F5F5F; margin-left: 10px;}
.wrap-content>.links>ul>li a:hover{ background: #000000;color: #e3e3e3; border: 1px rgba(255,255,255,0.3) solid; }


#header{ width:100%; height: 100px; }
#header > .wrap{ width:1080px; margin:0 auto; position:relative; }
#header > .wrap > .notice {	position: absolute;	top: 0;	left: 0px;}
#header > .wrap > .logo {	position: absolute;	top: 30px;	left: 0px;}
#gnb {position:absolute; top:14px; right:0px;}
#gnb li { float:left; margin-right:2px; border-left:1px #CCC solid;line-height:9px; padding:0 7px;}
#gnb li:first-child { border-left:0;}
#gnb li a{   font-size:11px; line-height:9px; color:#666666;}

#lnb { position:absolute; top:46px; left:200px; z-index:999;  width: 880px; }



footer{ width:100%; margin-top: 2vw; background: #030207;   }
footer>.wrap{width:92%; height: 80px;margin: 0 auto 0;  display:flex; justify-content: space-between; align-items: center;  font-size:13px;  color:#424141;}
footer>.wrap>.sns>a {margin-left: 5px;}

    
     
}