@charset "utf-8";

#introPage { position: relative; width: 100%; overflow: hidden; }
#introPage > div { position: relative; width: 33.33%; float: left; overflow:hidden;  box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
#introPage .part1 { border-top: 8px solid transparent;-moz-linear-gradient(-45deg, #ff8500 0%, #ee7c00 100%);
	-webkit-border-image: -webkit-linear-gradient(-45deg, #ff8500 0%, #ee7c00 100%);
	border-image: linear-gradient(135deg, #ff8500 0%, #ee7c00 100%);
	border-image-slice: 1; }

#introPage .part2 { border-top: 8px solid transparent; -moz-linear-gradient(-45deg, #25aae1 0%, #283891 100%);
	-webkit-border-image: -webkit-linear-gradient(-45deg, #25aae1 0%, #283891 100%);
	border-image: linear-gradient(135deg, #25aae1 0%, #283891 100%);
	border-image-slice: 1; }

#introPage .part3 { border-top: 8px solid transparent;-moz-linear-gradient(-45deg, #ff8500 0%, #ee7c00 100%);
	-webkit-border-image: -webkit-linear-gradient(-45deg, #ff8500 0%, #ee7c00 100%);
	border-image: linear-gradient(135deg, #ff8500 0%, #ee7c00 100%);
	border-image-slice: 1; }


#introPage h1 { width: 100%; text-align:center; overflow: hidden; padding: 6% 0 5%; }
#introPage .part2 h1 { border-right: 1px solid #ededed; border-left:1px solid #ededed}


.part1 .introCont { background:url("/images/intro/introBG1.png") no-repeat; background-size: cover; }
.part2 .introCont { background:url("/images/intro/introBG2.png") no-repeat right center; background-size: cover; }
.part3 .introCont { background:url("/images/intro/introBG3.png") no-repeat right center; background-size: cover; }

.introCont { clear: both; overflow: hidden; height: 580px; color:#fff; padding: 120px 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }

.introBox { width: 80%; text-align: center; padding: 50px 0;  margin:0 auto;} 
.introBox p { font-size: 1.17em; }
.introBox h2 { font-family: 'Arita-buriSB'; font-size: 2.94em; border-bottom: 1px solid rgba(255,255,255,0.3); display: inline-block; margin-bottom: 7%;  }
.introBox a { clear: both; display: block; color:#fff; font-size: 1em; border: 1px solid #fff; padding: 15px 0; line-height: 1em; width:55%; margin:0 auto;}
.introBox a:hover { background-color:#fff; }

.part1 .introBox { background-color:rgba(255,133,0,0.8); }
.part2 .introBox { background-color:rgba(0,83,158,0.8); }
.part3 .introBox { background-color:rgba(255,133,0,0.8); }

.part1 .introBox a:hover { color:#ff8500; }
.part2 .introBox a:hover { color:#00539e; }
.part3 .introBox a:hover { color:#ff8500; }

#introFoot { position:relative; width:100%; overflow: hidden; text-align: center; font-size:0.88em; padding: 2% 0; }
#introFoot dl { color:#0c0c0c; line-height: 1.5em; margin-bottom: 1.5%; font-family:'Noto Sans KR', 'Noto Sans Korean', sans-serif; }
#introFoot dl dt { font-size: 1em; }
#introFoot dl dd { font-size: 1.875em; }
#introFoot ul { overflow: hidden; }
#introFoot ul li { display: inline-block; *zoom: 1; *display: block; background: url("/images/common/f_dsline.png") no-repeat left center; padding: 0 15px; font-family: 'Spoqa Han Sans';  }
#introFoot ul li:first-child { background: none; }



@media screen and (max-width:1399px) {

#introPage h1 img { width: 70%; }
.introCont { height: 450px; padding: 100px 0; }
.introBox { width: 60%; padding: 6% 3%; }

}


@media screen and (max-width:1199px) {
.introBox h2 { font-size: 2.5em; }
.part2 .introCont { background-position: 75% center;}
}

@media screen and (max-width:1024px) {

.introCont { height: 45vw; }
.introBox { width: 70%; }
.introBox a { font-size: 1.0em; width:70%}

}

@media screen and (max-width:767px) {

#introPage > div { width: 100%; border-top: 5px solid transparent !important; border-left:0; border-right:0; border-bottom:0;  }
#introPage h1 { float: none !important; margin: 0 auto; padding: 4% 0 3%; width: 40%; }
#introPage .part1 h1 { border:0; }
#introPage .part2 h1 {border:0; }
.introBox { width: 70%; padding: 6% 5%; float: none !important; margin: 0 auto; }
.introCont { padding: 10% 0; height: auto; }
#introFoot dl  { margin-bottom: 3%; }

}