@charset "utf-8";

/* -- 메인 콘텐즈 영역 : START -- */
.mainContainer{width:100%; height:auto; display:block; margin-top:80px;}
.mainContainer .container{max-width:1400px; width:100%; height:100%; text-align:center; margin:0 auto; }
	/* 메인 비주얼 영역 */
	.mainVisual{width:100%; height:468px; display:flex; align-items:center; background:#2b384d;}
	.mainVisual > .container{display:flex; align-items:flex-start; padding-top:80px; background:url('../../images/ke/mainVisual.jpg') center right / auto no-repeat;}
	/* 텍스트 영역 */
	.mainVisual .txt{flex:auto; color:#fff; line-height:1; letter-spacing:-1px; text-align:left; display:flex; align-items:flex-start; flex-direction:column;}
	.mainVisual .txt h3{font-size:24px; font-weight:300; margin-bottom:10px;}
	.mainVisual .txt h1{font-size:56px; font-weight:500; letter-spacing:-4px; text-indent: -3px; }
	.mainVisual .txt h1:after{content:''; display:block; width:115px; height:1px; background:#fff; opacity:.25; margin-top:20px;}
	.mainVisual .txt p{font-size:18px; font-weight:300; margin-top:70px; line-height:1.9;}
	/* 이미지 영역 */
	.mainVisual .download{height:270px; display:flex; align-items:flex-end; margin-top:15px;}
	.mainVisual .download > li{height:100%; margin-top:5px;}
	.mainVisual .download .img{display:block;}
	.mainVisual .download .link{display:flex; align-items:flex-end; margin-left:-100px;}
	.mainVisual .download .link a{display:flex; align-items:center; font-size:15px; color:#fff; text-align:left; line-height:1; letter-spacing:-1px;}
	.mainVisual .download .link a > span > b{font-weight:600; display:block; margin-bottom:5px;}
	.mainVisual .download .link a > i{display:flex; align-items:center; width:27px; height:27px; border-radius:100%; background:#475771; margin-left:15px;}
	.mainVisual .download .link a > i > b{width:7px; height:12px; position:Relative; overflow:hidden; display:block; margin:0 auto;}
		/* ^ 마우스 오버 */
		.mainVisual .download .link a:hover{text-decoration:underline;}
		.mainVisual .download .link a:hover > i{background:#5c76d0;}

	.mainContent{width:100%; height:auto; display:block;}
	.mainContent > .container{display:flex; align-items:center;}
	/* 메인 1뎁스 메뉴 버튼 */
	.mainBtn{flex:auto; height:100%; display:flex; align-items:center; margin:50px 20px 50px 0;}
	.mainBtn > li{width:33.33%; height:340px; margin-right:10px; padding:30px; display:flex; align-items:flex-start; flex-direction:column;}
	.mainBtn > li.part-01{background:#4d5ca7;}
	.mainBtn > li.part-02{background:#6583dc;}
	.mainBtn > li.part-03{background:#7a87df;}
	.mainBtn > li > a{flex:auto; width:100%; height:100%; line-height:1; color:#fff; display:flex; align-items:flex-start; flex-direction:column; text-align:left;}
	.mainBtn > li > a > span{display:block; font-size:36px; font-weight:600; letter-spacing:-5px; width:100%;}
	.mainBtn > li > a > span > b{font-size:16px; font-weight:300; letter-spacing:0; text-transform:uppercase; opacity:.45; display:block; margin-bottom:5px;}
	.mainBtn > li > a > i{display:flex; align-items:center; width:27px; height:27px; border-radius:100%; background:rgba(0,0,0,.25); margin-top:15px;}
	.mainBtn > li > a > i > b{width:7px; height:12px; position:Relative; overflow:hidden; display:block; margin:0 auto;}
	.mainBtn > li > a:after{content:''; display:block; width:100%; height:74px; margin-top:107px; flex:auto; }
	.mainBtn > li.part-01 > a:after{background:url('../../images/ke/mainBtn-01.png') center right / auto no-repeat;}
	.mainBtn > li.part-02 > a:after{background:url('../../images/ke/mainBtn-02.png') center right / auto no-repeat;}
	.mainBtn > li.part-03 > a:after{background:url('../../images/ke/mainBtn-03.png') center right / auto no-repeat;}
	/* 메인 슬라이드 */
	.mainSlide{width:540px; height:440px; background:#e5e5e5; display:flex; align-items:center; flex-direction:column; padding:50px 35px;}
	.mainSlide > .slide{display:block; width:100%; height:300px; }
	.mainSlide > .slide a{display:block; width:100%; height:300px; font-size:0; }
	.mainSlide .slick-slide > div > li{height:300px; vertical-align:top;}
	.mainSlide .slick-list{display:block; width:100%; height:300px; }

	/* 슬라이드 전환 & 정지 버튼 */
	.mainSlide .slick-arrow-wrap{height:75px; width:100%; display:flex; align-items:center; position:absolute; left:0; bottom:0; z-index:99; background:rgba(0,0,0,.75); padding:15px;}
	.mainSlide .slick-arrow{width:auto; height:100%; padding:0 15px; display:block;}
	.mainSlide .slick-arrow > i{display:flex; align-items:center; width:auto; height:100%; }
	.mainSlide .slick-arrow > i > b{width:13px; height:25px; position:Relative; overflow:hidden; display:block; margin:0 auto;}
	.mainSlide .slick-prev > i > b{transform: rotate(180deg); margin-bottom: 2px;}
	.mainSlide .slick-arrow-wrap .txt{flex:auto; text-align:left; padding:0 15px; color:#fff; font-size:19px; line-height:1; display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:1; -webkit-box-orient:vertical;}
	.mainSlide .slick-arrow-wrap .txt > i{font-size:13px; font-weight:300; display:block; margin-bottom:8px;}

	/* -- 재생·정지 아이콘 -- */
	.mainSlide .slick-controls{position:relative;}
	.mainSlide .slick-controls button{font-size:0; padding: 0 10px;}
		/* - 정지 */
		.mainSlide .slick-controls .slide-pause i{width:15px; height:25px; position:Relative; overflow:hidden; display:block; margin:0 auto;}
		.mainSlide .slick-controls .slide-pause i:before,
		.mainSlide .slick-controls .slide-pause i:after{content:''; position:absolute; top:1px; bottom:1px; width:1px; height:auto; display:block; background:#fff}
		.mainSlide .slick-controls .slide-pause i:before{left:0;}
		.mainSlide .slick-controls .slide-pause i:after{right:0;}
		/* - 재생 */
		.mainSlide .slick-controls .slide-play{display:none;}
		.mainSlide .slick-controls .slide-play i{width:23px; height:25px; position:Relative; overflow:hidden; display:block; margin:0 auto; }
		.mainSlide .slick-controls .slide-play i:before{content:''; display:block; position:absolute; top:0; left:0; border-top:11px solid transparent; border-left:21px solid #fff; border-bottom:11px solid transparent}
			/* ^ 마우스 오버 */
			.mainSlide .slick-controls .slide-play:hover i:before{ border-left:21px solid #fff; }
			.mainSlide .slick-controls .slide-play:hover i:before,
			.mainSlide .slick-controls .slide-play:hover i:after{background:transparent !important;}
	/* -- 슬라이드 표시 : Dots -- */
	.mainSlide .slick-dots{/*display:flex; align-items:flex-end;*/ text-align:center; margin:10px auto; width:auto; /*width:120px;*/ height: 40px; padding-bottom:10px;}
	.mainSlide .slick-dots > li{display:inline-block;padding:0 3px;}
	/* .mainSlide .slick-dots > li:first-child{margin-right:10px;} */
	.mainSlide .slick-dots > li > button{display:block; font-size:0; border-radius:4px; width:40px; height:5px; background:#bcc2d7;}
	.mainSlide .slick-dots > li.slick-active > button{background:#5c76d0;}

/* -- 메인 콘텐즈 영역 : END -- */


/* ==== 1400px 이하 일때 (뷰포트 1400px 기준) ==== */ @media only screen and (max-width:1400px) {
	.mainContainer .container{max-width:90%;}
	/* 메인 비주얼 영역 */
	.mainVisual{height:33.429vw; /* height:468px; */}
	.mainVisual > .container{ padding-top: 5.714vw; /* padding-top: 80px; */ }
	/* - 텍스트 영역 */
	.mainVisual .txt h3{font-size:1.714vw; margin-bottom:0.714vw; /* font-size:24px; margin-bottom:10px; */}
	.mainVisual .txt h1{font-size:4vw; /* font-size:56px; */}
	.mainVisual .txt h1:after{width:8.214vw; margin-top:1.429vw; /* width:115px; margin-top:20px; */}
	.mainVisual .txt p{font-size:1.286vw; margin-top:5vw; /* font-size:18px; margin-top:70px; */ }
	/* - 이미지 영역 */
	.mainVisual .download{height:19.286vw; /* height:270px; */}
	.mainVisual .download .img > img{height:26.357vw; /* height:369px; */}
	.mainVisual .download .link{margin-left:-7.143vw; /* margin-left:-100px;  */}
	.mainVisual .download .link a{font-size:1.071vw; /* font-size:15px; */}
	/* 메인 1뎁스 메뉴 버튼 */
	.mainBtn{margin:3.571vw 1.429vw 3.571vw 0; /* margin:50px 20px 50px 0; */}
	.mainBtn > li{height:24.286vw; margin-right:0.714vw; padding:2.143vw; /* height:340px; margin-right:10px; padding:30px; */}
	.mainBtn > li > a > span{font-size:2.571vw; letter-spacing:-0.357vw; /* font-size:36px; letter-spacing:-5px; */}
	.mainBtn > li > a > span > b{font-size:1.143vw; margin-bottom:0.357vw; /* font-size:16px; margin-bottom:5px; */}
	.mainBtn > li > a > i{width:1.929vw; height:1.929vw; margin-top:1.071vw; /* width:27px; height:27px; margin-top:15px; */}
	.mainBtn > li > a:after{background-size:contain !important; height:5.286vw; margin-top:7.643vw; /* height:74px; margin-top:107px; */}
	/* 메인 슬라이드 */
	.mainSlide{width:38.571vw; height:31.429vw; padding:3.571vw 2.500vw; /* width:540px; height:440px; padding:50px 35px; */}
	.mainSlide > .slide, 
	.mainSlide .slick-list,
	.mainSlide .slick-slide > div > li,
	.mainSlide > .slide a{height:21.429vw; /* height:300px; */}
	.mainSlide .slick-arrow-wrap{height:5.357vw; padding:1.071vw; /* height:75px; padding:15px; */ }
	.mainSlide .slick-arrow-wrap .txt{font-size:1.357vw; padding:0 1.071vw; /* font-size:19px; padding:0 15px; */}
	.mainSlide .slick-dots{height:2.857vw; padding-bottom: 0.714vw; /* height:40px; padding-bottom: 10px; */}
}

/* ==== 1023px 이하 일때 ==== */ @media only screen and (max-width:1023px) {
	.mainContainer .container{max-width:100%;}
	/* 메인 비주얼 영역 */
	.mainVisual{height:325px; background:#fff;}
	.mainVisual > .container{padding:0 10px; background:url('../../images/ke/mainVisual-mo.jpg') top right / cover no-repeat;}
	/* - 텍스트 영역 */
	.mainVisual .txt{color:#7f7772; padding-top:30px; padding-left:20px;}
	.mainVisual .txt h3,
	.mainVisual .txt p{display:none;}
	.mainVisual .txt h1 span{display:block; line-height:1; letter-spacing:-2px;font-weight:500; font-size:30px; margin-bottom:3px;}
	.mainVisual .txt h1 .txt-01{text-align:right; padding-right:30px;}
	.mainVisual .txt h1 .txt-02{font-weight:600; font-size:50px; letter-spacing:-4px;}
	.mainVisual .txt h1 .txt-03{font-weight:600; color:#f18e1d; padding-left:9px;}
	/* - 이미지 영역 */
	.mainVisual .download{display:none;}
	/* 메인 콘텐츠 영역 */
	.mainContent{margin-top:-145px;}
	.mainContent > .container{flex-direction:column;}
	/* 메인 1뎁스 메뉴 버튼 */
	.mainBtn{width:100%; margin:0; padding:0 10px 10px 10px; flex:none;}
	.mainBtn > li{height:142px; margin-right:5px; padding:10px 15px;}
	.mainBtn > li:last-child{margin-right:0;}
	.mainBtn > li.part-01{background:#4d5ca7;}
	.mainBtn > li.part-02{background:#6583dc;}
	.mainBtn > li.part-03{background:#7a87df;}
	.mainBtn > li > a{align-items:flex-end;}
	.mainBtn > li > a:after{display:none;}
	.mainBtn > li > a:before{content:''; display:block; width:100%; height:29px; margin-bottom:auto; flex:none; }
	.mainBtn > li.part-01 > a:before{background:url('../../images/ke/mainBtn-mo01.png') center right / contain no-repeat;}
	.mainBtn > li.part-02 > a:before{background:url('../../images/ke/mainBtn-mo02.png') center right / contain no-repeat;}
	.mainBtn > li.part-03 > a:before{background:url('../../images/ke/mainBtn-mo03.png') center right / contain no-repeat;}
	.mainBtn > li > a > i{display:none;}
	.mainBtn > li > a > span{font-size:20px; letter-spacing:-4px; margin-top:auto;}
	.mainBtn > li > a > span > b{font-size:12px; margin-bottom:5px;}

	/* 메인 슬라이드 */
	.mainSlide{width:100%; height:515px; padding:10px; }
	.mainSlide > .slide, 
	.mainSlide .slick-list,
	.mainSlide .slick-slide > div > li,
	.mainSlide > .slide a{height:475px;}
	.mainSlide .slick-arrow-wrap{height:46px; padding:15px; }
	.mainSlide .slick-arrow-wrap .txt{font-size:14px; padding:0; /* display:flex; align-items:center; */}
	.mainSlide .slick-arrow-wrap .txt > i{font-size:14px; margin:0 5px 0 0;}
	.mainSlide .slick-arrow{padding:0 0 0 20px;}
	.mainSlide .slick-controls button{padding:0;}
	/*.mainSlide .slick-dots{width:26px; height:20px; padding:0;}
	.mainSlide .slick-dots > li{width:8px;} */
	.mainSlide .slick-dots > li > button{ border-radius:100%;}

}


/* ==== 770px 이하 일때 (뷰포트 375px 기준) ==== */ @media only screen and (max-width:770px) {
	/* 메인 비주얼 영역 */
	.mainVisual{height:86.667vw; /* height:325px; */ }
	.mainVisual > .container{padding:0 2.667vw; /* padding:0 10px; */}
	/* - 텍스트 영역 */
	.mainVisual .txt{padding-top:8vw; padding-left:5.333vw; /* padding-top:30px; padding-left:20px; */}
	.mainVisual .txt h1 span{font-size:8vw; margin-bottom:0.800vw; /* font-size:30px; margin-bottom:3px; */}
	.mainVisual .txt h1 .txt-01{padding-right:8vw; /* padding-right:30px; */}
	.mainVisual .txt h1 .txt-02{font-size:13.333vw; /* font-size:50px; */}
	.mainVisual .txt h1 .txt-03{padding-left:2.400vw; /* padding-left:9px; */}
	/* 메인 콘텐츠 영역 */
	.mainContent{margin-top:-38.667vw; /* margin-top:-145px; */}
	/* 메인 1뎁스 메뉴 버튼 */
	.mainBtn{padding:0 2.667vw 2.667vw 2.667vw; /* padding:0 10px 10px 10px; */}
	.mainBtn > li{height:37.867vw; margin-right:1.333vw; padding:2.667vw 4vw; /* height:142px; margin-right:5px; padding:10px 15px; */}
	.mainBtn > li > a:before{height:7.733vw; /* height:29px; */}
	.mainBtn > li > a > span{font-size:5.333vw; /* font-size:20px; */}
	.mainBtn > li > a > span > b{font-size:3.200vw; margin-bottom:1.333vw; /* font-size:12px; margin-bottom:5px; */}

	/* 메인 슬라이드 */
	.mainSlide{height:67.333vw; padding:2.667vw; /* height:215px; padding:10px; */ }
	.mainSlide > .slide, 
	.mainSlide .slick-list,
	.mainSlide .slick-slide > div > li,
	.mainSlide > .slide a{height:56.667vw; /* height:175px; */}
	/* 슬라이드 전환 & 정지 버튼 */
	.mainSlide .slick-arrow-wrap{height:12.267vw; padding:4vw; /* height:46px; padding:15px; */}
	.mainSlide .slick-arrow-wrap .txt{font-size:3.733vw; /* font-size:14px; */}
	.mainSlide .slick-arrow-wrap .txt > i{font-size:3.733vw; margin:0 0 1.333vw 0; /* font-size:14px; margin:0 0 5px 0; */}
	.mainSlide .slick-arrow{padding:0 0 0 5.333vw; /* padding:0 0 0 20px; */}
	.mainSlide .slick-arrow > i > b{width:3.467vw; height:6.667vw; /* width:13px; height:25px; */}
	.mainSlide .slick-controls .slide-play i{width:6.133vw; height:6.667vw; /* width:23px; height:25px; */}
	.mainSlide .slick-controls .slide-play i:before{border-top:2.933vw solid transparent; border-left:5.600vw solid #fff; border-bottom:2.933vw solid transparent; /* border-top:11px solid transparent; border-left:21px solid #fff; border-bottom:11px solid transparent */}
	.mainSlide .slick-controls .slide-pause i{width:4vw; height:6.667vw; /* width:15px; height:25px; */}
	
	/* 슬라이드 표시 : Dots */
	/* mainSlide .slick-dots{width:6.933vw; height:5.333vw;} 
	.mainSlide .slick-dots > li{width:2.133vw; height:2.133vw;} */
	.mainSlide .slick-dots {margin:0 auto;}
	.mainSlide .slick-dots > li > button{width:10px; height:10px;}

}