@charset "utf-8";

body { font-family:"SCDream"; word-break:keep-all; letter-spacing:-1px; background: url('../../images/intro/intro_bg_B_02.png') no-repeat; background-size: cover; background-attachment: fixed;}
.intro_wrap {width: 100%; max-width: 1400px; height: 1030px; margin: 0 auto;}

/*logo*/
.intro_wrap .logo{padding: 1.5rem 0;}

/*title*/
.intro_wrap .title{position: relative; text-align: center; color: #fff; transition: .3s;}
.intro_wrap .title::before{content: ''; display: block;  position: absolute;bottom: -1rem; left: 50%; transform: translateX(-50%); width: 26.5rem; height: 9rem; background: url('../../images/intro/title_bg.png') no-repeat; background-size: cover;}
.intro_wrap .title span {display: block; text-shadow: 0 0 10px rgba(0, 0, 0, 0.300);}
.intro_wrap .title span.tit01 {font-size: 2.25rem; font-weight: 400;}
.intro_wrap .title span.tit02 {font-size: 2.5rem; font-weight: 700;}

/*contents*/
.intro_wrap .content {position: relative;margin: 0 auto;padding: 1.5rem;text-align: center;}
.intro_wrap .content .link_01 li, .intro_wrap .content .link_02 li{display: inline-block; vertical-align: text-top; text-align: center; color: #fff; transition: .3s;}
.intro_wrap .content .link_01 li {width: 19.9rem; padding: 1.7rem 0; background-color: rgb(0, 112, 217, 0.8); box-shadow: 0 0 10px rgba(0, 0, 0, 0.300); min-height: 15rem;}
.intro_wrap .content .link_01 li a {display: block;}
.intro_wrap .content .link_01 li a p {margin-top: 1rem; font-size: 1.2rem; font-weight: 600;}
.intro_wrap .content .link_01 li a span{position: relative; display: block; width: 10rem; margin: 1rem auto 0; padding: 0.6rem 1.5rem; border: 2px solid #fff; font-size: 0.9rem; text-align: left; transition: .3s;}
.intro_wrap .content .link_01 li a span i{position: absolute; top: 50%; right: 1.5rem; transform: translateY(-50%); transition: .3s;}
.intro_wrap .content .link_01 li:first-child{margin-right: 1.5rem; background-color: rgb(0, 152, 217, 0.8);}

.intro_wrap .content .link_02 {margin-top: 1.5rem;}
.intro_wrap .content .link_02 li {position: relative; width: 19.9rem; padding: 0.75rem 1.5rem; font-size: 1rem; border: 2px solid #fff; text-align: left; transition: .3s;}
.intro_wrap .content .link_02 li:first-child{margin-right: 1.5rem;}
.intro_wrap .content .link_02 li a {display: block;}
.intro_wrap .content .link_02 li a i {position: absolute; top: 50%; right: 1.5rem; transform: translateY(-50%); transition: .3s;}

/*221221 추가*/
.intro_wrap .content > div{width: 100%;max-width: 41.5rem; position: relative; padding: 1rem 1rem 0.75rem;background:rgba(255, 255, 255, 0.9);box-shadow:0 0 10px rgba(0,0,0,.2);margin: 2rem auto 0;}
.intro_wrap .content > div h3 {font-weight: bold;/* margin-bottom: 0.5rem; */background: rgb(0, 112, 217);position: absolute;width: 8rem;/* height: 3.5rem; */color: #fff;/* border-radius: 8px; */font-size: 0.8rem;padding: 0.5rem;vertical-align: middle;top: -1rem;left: 0;}
.intro_wrap .content > div h3.tit2{background: rgb(0, 152, 217);}
.intro_wrap .content > div ul {text-align: left;overflow: hidden;margin: 0.5rem -.25rem;/* padding-left: 9rem; */}
.intro_wrap .content > div ul li{padding: 0.1rem;font-weight: 600;}
.intro_wrap .content > div ul li em {font-size: 0.9rem; font-weight: 900; color: rgb(0, 152, 217);;}
.intro_wrap .content > div ul strong{font-weight: bold;margin-right: 0.25rem;}

/*hover*/
.intro_wrap .content .link_01 li:hover {background-color: rgb(0, 112, 217);}
.intro_wrap .content .link_01 li:first-child:hover{background-color: rgb(0, 152, 217);}
.intro_wrap .content .link_01 li:hover span{ font-weight: 600;}
.intro_wrap .content .link_01 li:hover span i {right: 1.3rem;}
.intro_wrap .content .link_02 li a:hover i{right: 1.3rem;}

/*copy*/
.intro_wrap .copy { font-size: 0.8rem; text-align: center; color: #fff;}
.intro_wrap .copy p {/* margin-bottom: 0.6rem; */}

@media(max-width: 1440px){
    .intro_wrap{width: 90%; height: auto;}
    .intro_wrap .content {padding:2rem 0}
    .intro_wrap .copy{margin-bottom: 2rem;}
}


@media (max-width:1280px){ 
     .intro_wrap .content .link_01 li, .intro_wrap .content .link_02 li {width: 22rem;}
     
     /*221221 추가*/
     .intro_wrap .content > div{max-width: 45.7rem;}
}


@media (max-width:1024px){
    .intro_wrap .content .link_01 li, .intro_wrap .content .link_02 li{display: block; margin-bottom: 1.5rem;}
    .intro_wrap .content .link_01 li, .intro_wrap .content .link_02 li {width: 100%;}
    .intro_wrap .content .link_02{/* margin-top: 0; */}
    .intro_wrap .content .link_02 li:last-child{margin-bottom: 0;}

      /*221221 추가*/
      .intro_wrap .content > div{max-width: none;}
 }
   

 @media (max-width:920px){ 


 
 }
   
@media (max-width:768px){ 
    .intro_wrap .title span.tit01 {font-size: 2rem;}
    .intro_wrap .title span.tit02 {font-size: 2.25rem;}

}
@media (max-width:580px){ 
    .intro_wrap .logo{padding: 2rem 0 1rem 0; text-align: center;}
    .intro_wrap .title span.tit01 {font-size: 1.75rem;}
    .intro_wrap .title span.tit02 {font-size: 2rem;}
    .intro_wrap .title::before{width: 15rem; height: 5rem; bottom: 50%; transform: translate(-50%, 50%);}
} 

@media (max-width:480px){ 

    .intro_wrap .title span.tit01 {font-size: 1.5rem;}
    .intro_wrap .title span.tit02 {font-size: 1.75rem;}
    .intro_wrap .content .link_02 li{padding: 0.75rem 2.75rem 0.75rem 1.5rem;}
} 

@media (max-width:320px){ 
    .intro_wrap .content .link_01 li a p{font-size: 1rem;}
    .intro_wrap .content .link_01 li a span{width: 8rem;}

    .intro_wrap .title span.tit01 {font-size: 1.5rem; font-weight: 400;}
    .intro_wrap .title span.tit02 {font-size: 1.75rem; font-weight: 700;}
}