@charset "UTF-8";

.intro-wrap {position: relative;background:#000; height:100%;}
.intro-wrap::before {content:''; width:100%; height:100%; position: absolute; top:0; left:0; background:url('../images/intro-bg.jpg') no-repeat center / cover; opacity:0.65;}
.intro-wrap .inner {position: relative; height:100%;}
.intro-wrap .container {max-width:1720px; width:100%; margin:0 auto;}
/* Header */
.intro-wrap .intro-header{background:rgba(0,0,0,0.2); position: absolute; width:100%; z-index: 1;}
.intro-wrap .intro-header .container {display: flex; justify-content: space-between; align-items: center;}
.intro-wrap .intro-header .link-box ul{display: flex; align-items: center; justify-content: center;}
.intro-wrap .link-box li {}
.intro-wrap .link-box li a {color:#fff; font-family: 'Dream Medium'; font-size: 20px; line-height: 30px; letter-spacing: -.05em; padding:27px 30px; display: inline-block; }
.intro-wrap .link-box li a span {display: inline-block; padding-left:50px; position: relative;}
/* header link color */
.intro-wrap .link-box li:nth-child(1) {background:#E5368E;}
.intro-wrap .link-box li:nth-child(2) {background:#23B2E8;}
.intro-wrap .link-box li:nth-child(3) {background:#C5D700;}
/* header link icon */
.intro-wrap .link-box li:nth-child(1) a span {background:url('../images/header-icon1.png') no-repeat left center;}
.intro-wrap .link-box li:nth-child(2) a span {background:url('../images/header-icon2.png') no-repeat left center;}
.intro-wrap .link-box li:nth-child(3) a span {background:url('../images/header-icon3.png') no-repeat left center;}

/* [S] Main */
.intro-wrap .intro-main {position: relative; height:100%; display: flex; align-items: center; justify-content: center; padding:0 20px;}
.intro-wrap .intro-main .logo-box {text-align: center; padding:0px 0 95px 0;}
.intro-wrap .con-list ul {display:flex; margin:0 -22px;}
.intro-wrap .con-list li {width:calc(100% / 6); margin:0 22px; text-align: center;}
.intro-wrap .con-list li a {display:inline-block; width:100%; border-radius:10px; overflow:hidden; box-shadow: 0 0 0 rgba(0,0,0,0.4); transition: box-shadow .3s;}
.intro-wrap .con-list li a:hover {box-shadow: 5px 5px 10px rgba(0,0,0,0.4);}
.intro-wrap .con-list .box {padding:50px 0 35px 0;}
.intro-wrap .con-list .img-box {margin-bottom:20px}
.intro-wrap .con-list .text-box {height:56px; display: flex; align-items: center; justify-content: center; ;}
.intro-wrap .con-list .text-box p {font-size: 20px; line-height: 28px; letter-spacing: -.05em; color:#fff; font-family: 'Dream Medium';}
.intro-wrap .con-list .shortcut {height:50px; display: flex; align-items: center; justify-content: center;}
.intro-wrap .con-list .shortcut span{font-size: 12px; font-family: 'Dream Light'; letter-spacing: 0.05em; color:#fff;}
.intro-wrap .con-list .shortcut span::after {content:''; width:24px; height:5px; background:url('../images/intro-arrow.png') no-repeat center; display: inline-block; position: relative; left:-2px; bottom:-1px; transition:left .3s;}
.intro-wrap .con-list li a:hover .shortcut span::after {left:10px;}
/* List Color */
.intro-wrap .con-list li:nth-child(1) .box{background:rgba(120,0,255,0.8);}
.intro-wrap .con-list li:nth-child(2) .box{background:rgba(0,61,234,0.8);}
.intro-wrap .con-list li:nth-child(3) .box{background:rgba(0,183,229,0.8);}
.intro-wrap .con-list li:nth-child(4) .box{background:rgba(56,139,0,0.8);}
.intro-wrap .con-list li:nth-child(5) .box{background:rgba(255,144,0,0.8);}
.intro-wrap .con-list li:nth-child(6) .box{background:rgba(201,16,107,0.8);}
/* Shortcut BG */
.intro-wrap .con-list li:nth-child(1) .shortcut{background:rgba(60,0,128,0.8);}
.intro-wrap .con-list li:nth-child(2) .shortcut{background:rgba(0,34,132,0.8);}
.intro-wrap .con-list li:nth-child(3) .shortcut{background:rgba(0,127,186,0.8);}
.intro-wrap .con-list li:nth-child(4) .shortcut{background:rgba(35,87,0,0.8);}
.intro-wrap .con-list li:nth-child(5) .shortcut{background:rgba(202,76,0,0.8);}
.intro-wrap .con-list li:nth-child(6) .shortcut{background:rgba(149,0,73,0.8);}
/* [E] Main */

/* [S] Footer */
.intro-footer {position: absolute; bottom:30px; left:0; width:100%; z-index: 1; text-align: center;}
.intro-wrap  .intro-footer .container {text-align: center;}
.intro-footer .info {display: flex;}
.intro-footer .info .info-inner {display: flex; margin:0 auto;}
.intro-footer .info p {font-size: 14px; font-family: 'Dream Regular'; line-height: 25px; letter-spacing: -.05em; color:#fff; margin-right:35px;}
.intro-footer .info p:last-child {margin-right:0;}
.intro-footer .copyright {font-size: 12px; line-height: 20px; font-family: 'Gmarket Light'; color:#fff; text-transform: uppercase;}
/* [E] Footer */
@media (max-width:1800px) {
  .intro-wrap .intro-header .logo{margin-left:20px;}
}
@media (max-width:1400px) {
  .intro-wrap {height:auto;}
  .intro-wrap .intro-header {position: relative; }
  .intro-wrap .intro-main .logo-box {padding:70px 0 95px 0;}
  .intro-wrap .con-list ul {flex-wrap:wrap; margin:0;}
  .intro-wrap .con-list li {width:calc(100% / 3); margin: 0 0 20px 0; padding:0 20px;}
  .intro-footer {position: relative; margin:30px 0 0 0; bottom:0; padding-bottom:50px;}
}
@media (max-width:1023px) {
  .intro-wrap .intro-header .logo {width:180px;}
  .intro-wrap .link-box li a {font-size: 17px; padding:25px 20px;}
  .intro-wrap .link-box li a span {padding-left:0;}
  .intro-wrap .link-box li:nth-child(1) a span {background:none;}
  .intro-wrap .link-box li:nth-child(2) a span {background:none;}
  .intro-wrap .link-box li:nth-child(3) a span {background:none;}

}
@media (max-width:768px) {
  .intro-wrap .intro-main .logo-box {padding:40px 0 50px 0;}
  .intro-wrap .con-list li {width:calc(100% / 2);}
  .intro-wrap .con-list .text-box p {font-size: 17px;}
  .intro-footer .info .info-inner {flex-wrap:wrap; justify-content: center; margin-bottom: 10px;}
  .intro-footer .info .info-inner p {width:100%; margin:unset; margin-bottom: 5px;}
  .intro-footer .info .info-inner p.tel,
  .intro-footer .info .info-inner p.fax {width:auto; margin:0 10px;}
}
@media (max-width:650px) {
  .intro-wrap .intro-header .logo {width:150px;}
  .intro-wrap .link-box li a {font-size: 14px; padding:15px 10px;}
  .intro-wrap .con-list .box {padding:30px 0 20px 0;}
  .intro-wrap .con-list .img-box {margin-bottom:10px;}
}