@charset "utf-8";

/*----- main 공통부분-----*/
.main_tit{margin-bottom:30px;}
.main_tit:after{content:''; display:block; clear:both;}
.main_tit h3{font-size:32px; color:#222222; letter-spacing:-0.055em; font-weight:700; margin:0; display:inline-block;}
.main_tit h3 span{color:#c59b6d;}
.main_tit .plus_btn{display:block; float:right;}
/*----- main 공통부분 /-----*/



/* main_visual */
.main_visual{position:relative; max-width:1920px; margin:0 auto; overflow:hidden;}
.main_visual .swiper-container.ofv{overflow:visible;}
.main_visual .swiper-slide{overflow:hidden;}

.main_visual .back_box_wrap{background:#000 url('/img/main_visual_bg.jpg') no-repeat center center / cover; height:585px;}
.main_visual .back_box{width:100%; max-width:1400px; margin:0 auto; position:relative; transform:translateX(-260px); -ms-transform:translateX(-260px); -webkit-transform:translateX(-260px); -o-transform:translateX(-260px); -moz-transform:translateX(-260px); }
.main_visual .slider-blur{position:static;}
.main_visual .slider-blur .swiper-slide{height:585px; box-sizing:border-box; overflow:hidden;}
.main_visual .slider-blur img{width:101%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%);}
.main_visual .slider-blur h2{display:none;}
.main_visual .slider-blur .swiper-slide-active img{filter:blur(10px); -webkit-filter:blur(10px); -moz-filter:blur(10px); -o-filter:blur(10px); -ms-filter:blur(10px);}

@media screen and (min-width:0\0){
	/* 익스플로러 9, 10에서 작동 */
	.main_visual .slider-blur .swiper-slide:before{content:''; display:block; position:absolute; width:100%; height:100%; background:rgba(255, 255, 255, 0.5); top:0; left:0; z-index:2; opacity:0;}
	.main_visual .slider-blur .swiper-slide.swiper-slide-active:before{opacity:1;}
}

.main_visual .front_box{width:100%; max-width:1400px; margin:0 auto; position:relative;}
.main_visual .slider-top{width:950px; margin-top:-505px; margin-left:0;}
.main_visual .slider-top .swiper-slide{position:relative;}
.main_visual .slider-top img{width:100%;}
.main_visual .slider-top h2{font-size:70px; color:#fff; letter-spacinG:0.06em; font-weight:600; line-height:1.2; font-style:italic; margin:0; position:absolute; left:15%; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); -moz-transform:translateY(-50%); max-width:70%;}


.main_visual .swiper-button-prev.swiper-button-disabled, .main_visual .swiper-button-next.swiper-button-disabled{opacity:1;}
.main_visual .swiper-button-prev{z-index:10; width:19px; height:34px; background:url('/img/main_visual_prev.png') no-repeat center center / contain; top:50%; left:120px; transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); -moz-transform:translateY(-50%);}
.main_visual .swiper-button-next{z-index:10; width:19px; height:34px; background:url('/img/main_visual_next.png') no-repeat center center / contain; top:50%; right:120px; transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); -moz-transform:translateY(-50%);}
.main_visual .swiper-pagination{z-index:10; bottom:10%; left:auto; right:30%; width:auto;}
.main_visual .swiper-pagination-bullet{background:#ababab; opacity:1; margin:0 3px;}
.main_visual .swiper-pagination-bullet-active{background:#000000;}

@media all and (max-width:1920px){
	.main_visual .swiper-button-prev{left:80px;}
	.main_visual .swiper-button-next{right:80px;}
}
@media all and (max-width:1600px){
	.main_visual .swiper-button-prev{left:40px;}
	.main_visual .swiper-button-next{right:40px;}
	.main_visual .swiper-pagination{right:25%;}
}
@media all and (max-width:1400px){
	.main_visual{padding-bottom:70px;}

	.main_visual .back_box_wrap{background:transparent; height:auto; }
	.main_visual .back_box{transform:none}
	.main_visual .slider-blur .swiper-slide{height:auto; min-height:380px;}
	.main_visual .slider-blur img{height:100%; width:100%; position:static; left:auto; top:auto; transform:none }

	.main_visual .front_box{width:90%;}
	.main_visual .front_box .slider-top{width:100%; margin:-40% auto 0;}

	.main_visual .swiper-button-prev{top:auto; bottom:0;}
	.main_visual .swiper-button-next{top:auto; bottom:0;}
	.main_visual .swiper-pagination{right:auto; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); -o-transform:translateX(-50%); -ms-transform:translateX(-50%); -moz-transform:translateX(-50%); bottom:10px;}
}
@media all and (max-width:1000px){
	.main_visual .slider-top h2{font-size:55px;}

	.main_visual .swiper-button-prev{left:20px;}
	.main_visual .swiper-button-next{right:20px;}
}
@media all and (max-width:640px){
	.main_visual .front_box .slider-top{width:100%; margin:-55% auto 0}
}





/* main_con01 */
.main_con01{}
.main_con01 .inner{padding:100px 0; border-bottom:1px solid #8a8a8a;}
.main_con01 ul{margin:0;}
.main_con01 ul li{border:1px solid #eaeaea; padding:18px; box-sizing:border-box; margin:10px 0; position:relative;}
.main_con01 ul li:before{content:''; display:block; position:absolute; width:calc(100% - 2px); height:calc(100% - 2px); border:3px solid #57585a; top:0; left:0; opacity:0; transition:all 0.3s; -webkit-transition:all 0.3s; -o-transition:all 0.3s; -ms-transition:all 0.3s; -moz-transition:all 0.3s;}
.main_con01 ul li:after{content:''; display:block; clear:both;}
.main_con01 ul li h5{font-size:18px; color:#444444; letter-spacing:-0.045em; font-weight:300; margin:0; display:inline-block; width:calc(100% - 160px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.main_con01 ul li p{font-size:18px; color:#888888; letter-spacing:0em; font-weight:300; float:right;}

.main_con01 ul li.on:before{opacity:1;}
.main_con01 ul li:hover:before{opacity:1;}



/* main_con02 */
.main_con02{padding:100px 0; font-size:0; letter-spacing:-4px;}
.main_con02 .tag01{font-size:16px; color:#fff; letter-spacing:0em; font-weight:700; width:75px; line-height:75px; border-radius:50%; position:absolute; top:-37px; right:20px; text-align:center; background:#f69328; z-index:2;}
.main_con02 .tag02{font-size:16px; color:#fff; letter-spacing:0em; font-weight:700; width:75px; line-height:75px; border-radius:50%; position:absolute; top:-37px; right:20px; text-align:center; background:#f64a28; z-index:2;}
.main_con02 dl{display:inline-block; vertical-align:top; margin:40px 0; margin-right:40px; width:calc(33.333333% - 27px);}
.main_con02 dl:nth-of-type(3n){margin-right:0;}
.main_con02 dl:last-of-type{margin-right:0;}
.main_con02 dl dt{position:relative;}
.main_con02 dl dt .img_box img{width:100%;}
.main_con02 dl dt .hover_box{display:none; position:absolute; width:100%; height:100%; background:rgba(0, 0, 0, 0.75); top:0; left:0; cursor:pointer;}
.main_con02 dl dt .hover_box .text{text-align:center; font-size:18px; color:#fff; letter-spacing:0em; font-weight:500; position:relative; top:50%; width:100%; transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); -moz-transform:translateY(-50%);}
.main_con02 dl dt .hover_box .text img{display:block; margin:0 auto;}

.main_con02 dl dd{padding:10px 0;}
.main_con02 dl dd h6:after{content:''; display:block; clear:both;}
.main_con02 dl dd h6{font-size:16px; color:#666666; letter-spacing:0em; font-weight:300; margin:0;}
.main_con02 dl dd h6 b{font-size:20px;}
.main_con02 dl dd h6 span{float:right;}
.main_con02 dl dd h5{font-size:22px; color:#222222; letter-spacing:-0.055em; font-weight:bold; margin:0;}
.main_con02 dl dd > p{font-size:18px; color:#666666; letter-spacing:-0.025em; font-weight:300; line-height:1.4em; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; height:2.8em;}
.main_con02 dl dd .percent_con{}
.main_con02 dl dd .percent_con:after{content:''; display:block; clear:both;}
.main_con02 dl dd .percent_con .percent_bar{display:block; width:100%; height:5px; border-radius:5px; background:#f1eeeb; overflow:hidden;}
.main_con02 dl dd .percent_con .percent_bar span{display:block; height:100%; background:#f69328; width:0;}
.main_con02 dl dd .percent_con p{font-size:18px; color:#666666; letter-spacing:-0.025em; font-weight:300; display:inline-block;}
.main_con02 dl dd .percent_con p.per{color:#f69328; font-weight:bold; float:right;}

.main_con02 dl dt:hover .hover_box{display:block;}

@media all and (max-width:1200px){
	.main_con02 dl{widtH:calc(50% - 20px);}
	.main_con02 dl:nth-of-type(3n){margin-right:40px;}
	.main_con02 dl:nth-of-type(2n){margin-right:0;}
}
@media all and (max-width:767px){
	.main_con02 dl{width:100%; margin-right:0;}
}



/* main_con03 */
.main_con03{overflow:hidden; font-size:0; letter-spacing:-4px; text-align:center; max-width:1920px; margin:0 auto; }
.main_con03 h4{font-size:26px; color:#fff; letter-spacing:-0.045em; font-weight:300; margin:0; word-break:keep-all;}
.main_con03 a{ display:inline-block; width:90%; max-width:240px; padding:10px; box-sizing:border-box; margin:10px 5px 0;font-size:16px; color:#fff; letter-spacing:0em; font-weight:700; border:1px solid #97b3bf;}
.main_con03 a i {display:inline-block; vertical-align:text-top; width:25px; height:25px; margin-right:5px; }
.main_con03 a i.window {background:url('/img/main_con03_icon01.png') no-repeat center center; }
.main_con03 a i.android {background:url('/img/main_con03_icon02.png') no-repeat center center; }
.main_con03 a i.ios {background:url('/img/main_con03_icon03.png') no-repeat center center; }
.main_con03 > div{display:inline-block; vertical-align:top; width:50%; height:350px;}
.main_con03 .text{position:relative; top:50%; width:100%; transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); -moz-transform:translateY(-50%);}
.main_con03 .left_box{background:url('/img/main_con03_img01.jpg') no-repeat center center / cover;}
.main_con03 .right_box{background:url('/img/main_con03_img02.jpg') no-repeat center center / cover;}

@media all and (max-width:1000px){
	.main_con03 > div{width:100%;}
	.main_con03 a {display:block; margin:10px auto; }
}