@charset "UTF-8";

@import url("reset.css");
/* *********************************

메인 CSS
작성일 : 22.08.05

********************************* */
html{scroll-behavior: smooth;}
.introWrap{box-sizing: border-box;font-weight: 300;}
.introWrap .upper{background: url('../../images/intro/wrapbg.jpg') no-repeat center top;min-height: 950px;background-size: cover;height: 100vh;scroll-snap-align: start;}
.introWrap .top{border-bottom: 1px solid rgba(255,255,255,0.4);height: 79px;}
.introWrap .top .logo{margin-left:60px;display:inline-block;vertical-align: middle;padding-top: 15px;}
.introWrap .top .portal{float:right;background: #b10a60 url('../../images/intro/portal.png') no-repeat left top;display:inline-block;vertical-align: middle;}
.introWrap .top .portal > a{font-size: 18px;color:#fff;display: block;height: 80px;padding: 30px 30px 0 110px;box-sizing: border-box;}

.introWrap .contsWrap{max-width:1600px;padding: 140px 10px 0;margin:0 auto;box-sizing: border-box;}
.introWrap .slogan{display: inline-block;vertical-align: top;letter-spacing: -.5px;float: left;width: calc(100% - 600px);line-height: 1;}
.introWrap .slogan > p{color:#fff;font-size: 36px;line-height: 1.1;}
.introWrap .slogan > span{color:#fff;font-size: 72px;font-weight: 450;display: block;line-height: 1.2;font-family: Noto 'Noto Medium';}
.introWrap .slogan > strong{color:#fff;font-size: 72px;display: block;line-height: 1;font-family: Noto Bold;}
.introWrap .slogan > strong > span{position: relative;z-index: 1;display: inline-block;padding: 0 10px;font-family: 'Noto Bold';}
.introWrap .slogan > strong > span:before{content:'';width:100%;height: 32px;background: #005ebe;position: absolute;bottom:0;left:0;z-index: -1;}

.introWrap .btnbox{display: inline-block;vertical-align: top;padding-top: 60px;float:right;}
.introWrap .btnbox > ul{}
.introWrap .btnbox > ul > li + li{margin-top:40px;}
.introWrap .btnbox a{padding:40px 30px;display: block;text-align: left;color: #fff;background: rgba(0,0,0,0.4);border: 1px solid #fff;width:525px;box-sizing: border-box;position: relative;line-height: 1;}
.introWrap .btnbox a > p{font-size: 14px;line-height: 1.5;margin-bottom: 15px;}
.introWrap .btnbox a > strong{font-size: 50px;display: block; color:#fff;font-weight: normal;line-height: 1.2;}
.introWrap .btnbox a > span{font-size: 40px;display: block;font-weight: 300;}
.introWrap .btnbox a:before{content:'';width:42px;height: 42px;background: #fff;transition: all ease .5s;border-radius: 50%;position: absolute;bottom:35px;right:35px;}
.introWrap .btnbox a:after{content:'';width:115px;height: 25px;background: url('../../images/intro/arrow.png') no-repeat left top;position: absolute;bottom: 52px;right: -52px;}

.introWrap .btnbox a:hover{background:rgba(0,0,0,0.75);transition: all ease .5s;}
.introWrap .btnbox a:hover:before{background: #005ebe;}
.introWrap .btnbox a:hover:after{background: url('../../images/intro/arrow_on.png') no-repeat left top;animation:1.2s arrow;}

@keyframes arrow {
  0%{right:-52px;}
  25%{right:-25px;}
  70%{right:-58px;}
  100%{right:-52px;}
}

@media all and (max-width: 1700px){
.introWrap .contsWrap{padding:140px 70px 0 30px;}
}

@media all and (max-width: 1400px){
.introWrap .upper{height: auto;}
.introWrap .slogan > p{font-size: 32px;}
.introWrap .slogan > span{font-size:62px;margin-bottom: 10px;}
.introWrap .slogan > strong{font-size:62px;}
}

@media all and (max-width: 1200px){
.introWrap .contsWrap{padding:80px 100px 100px 60px;}
.introWrap .slogan{display: block;float:none;width:auto;}
.introWrap .btnbox{display: block;float:none;}
.introWrap .btnbox a{width:100%;}
}

@media all and (max-width: 767px){
.introWrap .top{height:64px;}
.introWrap .top .logo{margin-left:30px;}
.introWrap .top .logo img{width:140px;}
.introWrap .top .portal{background-size:65px;}
.introWrap .top .portal > a{height: 65px;width: 65px;padding: 0;text-indent: -9999px;}
.introWrap .contsWrap{padding:80px 30px 60px;}
.introWrap .slogan > p{font-size:24px;margin-bottom: 20px;}
.introWrap .slogan > span{font-size: 38px;margin-bottom: 15px;}
.introWrap .slogan > strong{font-size: 38px;line-height: 1.3;}
.introWrap .slogan > strong > span:before{height: 20px;}
.introWrap .btnbox a{padding: 35px;}
.introWrap .btnbox a > p{margin-bottom: 12px;}
.introWrap .btnbox a > strong{font-size: 38px;}
.introWrap .btnbox a > span{font-size: 28px;}
.introWrap .btnbox a:before{bottom: 20px;right: 25px;width: 25px;height: 25px;}
.introWrap .btnbox a:after{bottom: 19px;right: -20px;width: 60px;background-size:contain;}
.introWrap .btnbox a:hover:after{animation: none;background-size: contain;}
}

.introWrap .inner{max-width: 1600px;margin:0 auto;}
.introWrap .footer{background:#222935;}
.introWrap .footer .footerTop{padding: 32px 0 30px;border-bottom:1px solid #32353c;}
.introWrap .footer .footerTop .top-link{display: inline-block;vertical-align: top;}
.introWrap .footer .footerTop .top-link ul{line-height: 1.6;}
.introWrap .footer .footerTop .top-link ul li{display: inline-block;vertical-align: top;}
.introWrap .footer .footerTop .top-link ul li + li{margin-left:10px;padding-left:12px;position: relative;}
.introWrap .footer .footerTop .top-link ul li + li:before{content:'';width:1px; height:11px;background: #6b717d;position: absolute;top: 7px;left:0;}
.introWrap .footer .footerTop .top-link ul li a{font-size: 15px;color:#fff;position: relative;}
.introWrap .footer .footerTop .top-link ul li a:after{content:'';width:0;height:1px;position: absolute;bottom:-3px;left:0;background: #fff;transition: all ease .5s;}
.introWrap .footer .footerTop .top-link ul li a:hover:after{width:100%;}

.introWrap .footer .footerTop .bottom-related{float:right;display: inline-block;vertical-align: top;margin-top: -8px;}
.introWrap .footer .footerTop .bottom-related > ul > li{display: inline-block;vertical-align: middle;}
.introWrap .footer .footerTop .bottom-related > ul > li > a{display: block;text-align: left;font-size: 15px;color:#fff;padding:12px 15px;width:220px;background: #323338 url('../../images/intro/plus.png') no-repeat 95% center;}
.introWrap .footer .footerTop .bottom-related > ul > li > ul{display: none;}
.introWrap .footer .footerTop .bottom-related > ul > li > ul::-webkit-scrollbar {width: 10px;}
.introWrap .footer .footerTop .bottom-related > ul > li > ul::-webkit-scrollbar-thumb {background-color: rgba(255,255,255,.2);border-radius: 3px;}
.introWrap .footer .footerTop .bottom-related > ul > li > ul::-webkit-scrollbar-track {background-color: #3b3b3e;border-radius: 3px;}


.introWrap .bottom-related .relate_site {}
.introWrap .bottom-related .relate_site em.hidden{display: none;}
.introWrap .bottom-related .relate_site:after {content:""; display:block; clear:both;}
.introWrap .bottom-related .relate_site>li{position:relative;background: #2b313d;display: inline-block;vertical-align: top;}
.introWrap .bottom-related .relate_site>li + li{margin-left:5px;}
.introWrap .bottom-related .relate_site>li>a {display:block;box-sizing:border-box;position:relative;}
.introWrap .bottom-related .relate_site li ul.first_depth {box-sizing:border-box;padding: 20px;box-sizing:border-box;position:absolute;left:0;bottom: 38px;z-index:200;background:#3b3b3e;width:100%;display:none;max-height:210px;overflow:auto;}
.introWrap .bottom-related .relate_site li ul.first_depth li{margin-bottom:10px;}
.introWrap .bottom-related .relate_site li ul li a{display:block;cursor: pointer;color:#fff;font-size: 15px;}
.introWrap .bottom-related .relate_site li ul.first_depth li ul li{position:relative; margin-bottom:7px;}
.introWrap .bottom-related .relate_site li ul.first_depth li.middleTitle{margin:30px 0 15px;}
.introWrap .bottom-related .relate_site li ul.first_depth li.middleTitle > h3{color:#999;font-size: 20px;font-weight: 500;display: block;}
.introWrap .bottom-related .relate_site li ul.first_depth li.middleTitle.first_h3{margin-top:0;}

.introWrap .footer .footerBottom{padding:25px 0 20px;}
.introWrap .footer .footerBottom .footerLogo{display: inline-block;vertical-align: middle;}
.introWrap .footer .footerBottom .adress{display: inline-block;vertical-align: middle;padding-left:30px;}
.introWrap .footer .footerBottom .adress .adress-detail{font-size: 15px;color:#919191;}
.introWrap .footer .footerBottom .adress .phone-detail{font-size: 15px;color:#777;}

.introWrap .copyright{padding:27px 0;background:#1f1f1f;border-top:1px solid #4c4c4c; }
.introWrap .copyright .inner p{font-size: 15px;color:#919191;}


@media all and (max-width: 1650px){
.introWrap .footer .footerTop{padding:35px 30px 30px;}
.introWrap .footer .footerBottom{padding:25px 30px 20px;}
.introWrap .copyright{padding:30px;}
}

@media all and (max-width: 1400px){
.introWrap .footer .footerTop,
.introWrap .footer .footerBottom{text-align: center;}
.introWrap .footer .footerTop .top-link{display: block;}
.introWrap .footer .footerTop .bottom-related{float:none;display: block;margin-top:30px;}
.introWrap .copyright{text-align: center;}
}

@media all and (max-width: 767px){
.introWrap .footer .footerTop{padding:25px 35px 30px;}
.introWrap .footer .footerTop .top-link ul li a{font-size:14px;}
.introWrap .footer .footerTop .bottom-related > ul > li{display: block;width:100%;}
.introWrap .footer .footerTop .bottom-related > ul > li + li{margin-top:10px;margin-left:0;}
.introWrap .footer .footerTop .bottom-related > ul > li > a{width:100%;}
.introWrap .footer .footerBottom .adress{margin-top:20px;}
.introWrap .copyright .inner p{line-height: 1.6;}
.introWrap .copyright .inner p i{display: block;}
}