@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2018-03-27
******************************************************** */
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo');


/* ******************  메인 비주얼 ********************** */
#mainVisual{position:relative; overflow:hidden;  position:relative; margin-bottom:98px; z-index:1;}	/* 비주얼높이값 이미지에맞게 수정 */
.slick-track,
.slick-list {
	-webkit-perspective: 2000;
	-webkit-backface-visibility: hidden;
}
#mainVisual .main-visual-list-con, 
#mainVisual .main-visual-con, 
#mainVisual .slick-list,  
#mainVisual .slick-track, 
.main-visual-item{
	height:100%;
}
/* -------- 메인 비주얼 :: 이미지 -------- */
#mainVisualWrapper{position:relative; /*max-width: 1592px; margin:0 54px; float:right; left: 50%; margin-left: -810px; */}
.main-visual{position: relative;}

.main-visual .slick-slide{overflow:hidden;}
.main-visual .slick-slide .main-visual-wrapper{ 
	overflow:hidden;
	width:100%;
	/* -ms-transform: scale(0.9,0.9);
    -o-transform: scale(0.9,0.9); 
    -moz-transform: scale(0.9,0.9); 
    -webkit-transform: scale(0.9,0.9); 
    transform: scale(0.9,0.9);
	-webkit-transition: 0.5s ease-in-out all;
	transition: 0.5s ease-in-out all; */
}
.main-visual .main-visual-inner {
	-ms-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1); 
    -moz-transform: scale(1.1,1.1); 
    -webkit-transform: scale(1.1,1.1); 
    transform: scale(1.1,1.1);
	-webkit-transition: all 0.8s ease-out;
	transition: all 0.8s ease-out;
	min-height:845px
}
.main-visual .slick-slide img{height:845px;}
/* 비주얼 롤링 active */
.main-visual .slick-center .main-visual-wrapper {
	-ms-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1); 
    -moz-transform: scale(1.1,1.1); 
    -webkit-transform: scale(1.1,1.1); 
     transform: scale(1.1,1.1);
	 -webkit-transition: all 1s ease-out;
	transition: all 1s ease-out;
} 
.main-visual .slick-center .main-visual-inner {
	-ms-transform: scale(1.0,1.0) rotate(0.001deg);
    -o-transform: scale(1.0,1.0) rotate(0.001deg);
    -moz-transform: scale(1.0,1.0) rotate(0.001deg);
    -webkit-transform: scale(1.0,1.0) rotate(0.001deg);
    transform: scale(1.0,1.0) rotate(0.001deg);
	-webkit-transition: all 5s ease-out;
	transition: all 5s ease-out;
}
.main-visual .reset-animation .main-visual-inner {
	 -ms-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1); 
    -moz-transform: scale(1.1,1.1); 
    -webkit-transform: scale(1.1,1.1); 
    transform: scale(1.1,1.1);
}
.slider-progress {
  margin-left:10%;
  margin-top:10px;
  height: 3px;
  background: #eee;
}
.slider-progress .progress {
  width: 0%;
  height: 3px;
  background: #000;
}

@media all and ( max-width: 1220px ){
	/* -------- 메인 비주얼 :: 이미지 -------- */
	#mainVisual{margin:0}
	/* #mainVisualWrapper{margin-left:-5%} */
	.main-visual .main-visual-inner{
		min-height:600px;
	}
	.main-visual .slick-slide img{height:600px;}
}
@media all and ( max-width: 800px ){
	/* -------- 메인 비주얼 :: 이미지 -------- */
	#mainVisualWrapper{margin-left:0}
	#mainVisual{margin-bottom:0}
	.main-visual:before,.main-visual .slick-list:before{display:none;}
	.main-visual .slick-slide .main-visual-wrapper{
		-ms-transform: scale(1,1);
		-o-transform: scale(1,1); 
		-moz-transform: scale(1,1); 
		-webkit-transform: scale(1,1); 
		transform: scale(1,1);
	}
	.main-visual .slick-slide img{height:auto; width:100%}
	
	/* 비주얼 롤링 active */
	.main-visual .slick-center .main-visual-wrapper{
		-ms-transform: scale(1.0,1.0);
		-o-transform: scale(1.0,1.0); 
		-moz-transform: scale(1.0,1.0); 
		-webkit-transform: scale(1.0,1.0); 
		 transform: scale(1.0,1.0);
	}
	.main-visual .main-visual-inner{
		min-height:auto;
	}
}
/* -------- 메인 비주얼 :: 왼쪽영역 -------- */
#mainVisualInfoBox{position:absolute; top:130px; left:0px; bottom:90px; max-width:1000px; width:860px; z-index:100; }
/* 메인 비주얼 :: 왼쪽 설명 */
#mainVisualInfoBox .main-visual-info-item{position:relative; padding-left:55px}
#mainVisualInfoBox .main-visual-info-item .num,
#mainVisualInfoBox .main-visual-info-item .main-visual-tit,
#mainVisualInfoBox .main-visual-info-item .main-visual-kr-tit{
	opacity:0;filter:Alpha(opacity=0);
	-ms-transform: translateX(-50px); 
    -o-transform: translateX(-50px); 
    -moz-transform: translateX(-50px);
    -webkit-transform: translateX(-50px); 
     transform: translateX(-50px);
	-webkit-transition:opacity 1.0s, transform 1.0s;
	-moz-transition:opacity 1.0s, transform 1.0s;
	-o-transition:opacity 1.0s, transform 1.0s;
	-ms-transition:opacity 1.0s, transform 1.0s;
	transition:opacity 1.0s, transform 1.0s;
}
#mainVisualInfoBox .main-visual-info-item:before{position:absolute; top:10px; left:0px; width:0; height:3px; background:#231f20; content:""; -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}
#mainVisualInfoBox .main-visual-info-item .num{
	display:block; color:#212121 ; font-size:38px; font-weight:400; 
	opacity:0;filter:Alpha(opacity=0);
	-ms-transform: translateX(-10px); 
    -o-transform: translateX(-10px); 
    -moz-transform: translateX(-10px);
    -webkit-transform: translateX(-10px); 
     transform: translateX(-10px);
	-webkit-transition-delay:0.3s;
	-moz-transition-delay:0.3s;
	-o-transition-delay:0.3s;
	-ms-transition-delay:0.3s;
	transition-delay:0.3s;
}
#mainVisualInfoBox .main-visual-info-item .main-visual-tit{
	display:inline-block; min-width:570px; color:#212121 ; font-size:55px; font-weight:600; padding:15px 33px 20px;  margin:25px 0 65px; line-height:75px;
	background-color:rgba(255,255,255,0.7);
	-webkit-transition-delay:0.4s;-moz-transition-delay:0.4s;-o-transition-delay:0.4s;-ms-transition-delay:0.4s;transition-delay:0.4s;
	font-family: 'Poppins', sans-serif;
	/* text-shadow:1px 1px 1px rgba(255, 255, 255, 1.0); */
}
#mainVisualInfoBox .main-visual-info-item .main-visual-tit strong{display:inline-block; font-weight:400; padding:0 15px; background-color:rgba(255,255,255,0.7);}
#mainVisualInfoBox .main-visual-info-item .main-visual-kr-tit{
	color:#212121 ; font-size:36px; font-weight:600; font-family: 'Nanum Myeongjo', serif;
	-webkit-transition-delay:0.7s;-moz-transition-delay:0.7s;-o-transition-delay:0.7s;-ms-transition-delay:0.7s;transition-delay:0.7s;
}
#mainVisualInfoBox .main-visual-info-item .main-visual-kr-tit span{padding:0 15px; background-color:rgba(255,255,255,0.7);}
#mainVisualInfoBox .main-visual-info-item .main-visual-more-btn{
	position:relative; display:block; width:230px; height:56px; line-height:56px; background-color:#fff; background-color:rgba(255,255,255,0.7); color:#212121; font-size:13px;  border:1px solid #222;  text-indent:30px; 
	opacity:0;filter:Alpha(opacity=0);
	-ms-transform: translateX(-20px); 
    -o-transform: translateX(-20px); 
    -moz-transform: translateX(-20px);
    -webkit-transform: translateX(-20px); 
     transform: translateX(-20px);
	-webkit-transition:all 0.4s, opacity 1.0s 0.9s, transform 1.0s 0.9s;
	-moz-transition:all 0.4s, opacity 1.0s 0.9s, transform 1.0s 0.9s;
	-o-transition:all 0.4s, opacity 1.0s 0.9s, transform 1.0s 0.9s;
	-ms-transition:all 0.4s, opacity 1.0s 0.9s, transform 1.0s 0.9s;
	transition:all 0.4s, opacity 1.0s 0.9s, transform 1.0s 0.9s;
}
#mainVisualInfoBox .main-visual-info-item .main-visual-more-btn em{position:absolute; top:0px; right:20px; font-size:17px}
#mainVisualInfoBox .main-visual-info-item .main-visual-more-btn:hover{color:#fff; letter-spacing:6px; background-color:#212121; }
#mainVisualInfoBox .main-visual-info-item .main-visual-more-btn:hover:after{width:40px; background-color:#fff;}
/* 텍스트 active */
#mainVisualInfoBox .main-visual-info-item.active-item:before{width:38px;}
#mainVisualInfoBox .main-visual-info-item.active-item .num,
#mainVisualInfoBox .main-visual-info-item.active-item .main-visual-tit,
#mainVisualInfoBox .main-visual-info-item.active-item .main-visual-kr-tit,
#mainVisualInfoBox .main-visual-info-item.active-item .main-visual-more-btn{
	opacity:1.0;filter:Alpha(opacity=100);
	-ms-transform: translateX(0px); 
    -o-transform: translateX(0px); 
    -moz-transform: translateX(0px);
    -webkit-transform: translateX(0px); 
     transform: translateX(0px);
}
/* 메인 비주얼 :: 화살표 및 번호 */
.main-visual-controls-box{position:absolute; bottom:0; left:70px;}
.main-visual-index-num{margin:75px 0; text-align:center;}
.main-visual-index-num .cur-num,
.main-visual-index-num .total-num{display:block; font-size:15px; color:#212121; font-weight:400; }
.main-visual-index-num .cur-num:after{display:block; content:""; width:1px; height:10px; margin:13px auto; background-color:#bababa; }
.main-visual-index-num .total-num{color:#c3c3c3}
#mainVisual .slick-arrow{	position:absolute; width:50px; height:50px; bottom:90px; left:55px; cursor:pointer; border:0; cursor:pointer; z-index:101; font-size:0; border:3px solid #dedede; -webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%}		/* 버튼이미지에 맞게 크기 수정 */
#mainVisual .slick-arrow.slick-prev{bottom:250px; background:url(/images/button/main_prev_btn.png) no-repeat 50% 50%}
#mainVisual .slick-arrow.slick-next{background:url(/images/button/main_next_btn.png) no-repeat 50% 50%; border-color:transparent ;}

/* 메인 비주얼 :: 로딩circle */
.circle-line{position:absolute; bottom:0; left:55px; width:50px; height:50px; }
.circle-line:before{position:absolute; top:0px; left:0px; width:100%; height:100%; box-sizing:border-box; border:3px solid #dedede; content:"";
	-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;
}
#halfclip {overflow:hidden; width:50%; height:100%; position:absolute; right:0px; transform-origin: left center; }
.active.circle-line #halfclip {
	animation: cliprotate 4s 1;
	-webkit-animation: cliprotate 4s 1;
	-ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg);
} 
@keyframes cliprotate {
	0% {-ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);}
	50% {-ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);}
	50.01% {-ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg);}
	100% {-ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg);}
}
@-webkit-keyframes cliprotate {
	0% {-ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);}
	50% {-ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);}
	50.01% {-ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg);}
	100% {-ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg);}
}
.halfcircle {
	box-sizing: border-box; height:100%; position:absolute; right:0; visibility:hidden;
	border: solid 3px transparent; border-top-color: #212121; border-left-color: #212121;
	border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; -o-border-radius:50%;
	transition: visibility 0.2s cubic-bezier(0.65, 0.02, 0.23, 1) ;
}
#clipped {width:200%; transform: rotate(135deg); }
.active .halfcircle{visibility:visible;}
.active #clipped{animation: rotate 2s linear 2;}
.active #circle-fixed{animation: showfixed 4s 1;}
@keyframes rotate {
	0% {transform: rotate(-45deg);}
	100% {transform: rotate(135deg);}
}
#circle-fixed {
	width:50px;
	transform: rotate(135deg);  
	opacity: 1;
}
@keyframes showfixed {
  0% {opacity: 0;}
  49.99% {opacity: 0;}
  50% {opacity: 1;}
 100% {opacity: 1;}
}
@media all and ( max-width: 1220px ){
	#mainVisualInfoBox{top:40px;}
	#mainVisualInfoBox .main-visual-info-item{padding-left:30px;}
	#mainVisualInfoBox .main-visual-info-item:before{height:2px; }
	#mainVisualInfoBox .main-visual-info-item.active-item:before{width:20px;}
	#mainVisualInfoBox .main-visual-info-item .num{font-size:22px;}
	#mainVisualInfoBox .main-visual-info-item .main-visual-tit{font-size:36px; margin:15px 0; padding:20px; line-height:35px; min-width:auto }
	#mainVisualInfoBox .main-visual-info-item .main-visual-kr-tit{font-size:26px; }
	#mainVisualInfoBox .main-visual-info-item .main-visual-tit strong,
	#mainVisualInfoBox .main-visual-info-item .main-visual-kr-tit span{padding:0 10px}
	#mainVisualInfoBox .main-visual-info-item .main-visual-more-btn{width:200px; height:40px; line-height:40px; font-size:14px; margin-top:40px}
	#mainVisualInfoBox .main-visual-info-item .main-visual-more-btn:after{width:40px}
}
@media all and ( max-width: 800px ){
	#mainVisualInfoBox{position:relative; top:auto; left:auto; bottom:auto; width:auto; min-height:218px; margin:40px 0;}
	/* 메인 비주얼 :: 왼쪽 설명 */
	#mainVisualInfoBox .main-visual-info-rolling-box{margin-right:100px}
	#mainVisualInfoBox .main-visual-info-item .main-visual-tit strong,
	#mainVisualInfoBox .main-visual-info-item .main-visual-kr-tit span{padding:0; background:none;}
	/* 메인 비주얼 :: 화살표 및 번호 */
	.main-visual-controls-box{left:auto; right:25px; width:50px; bottom:auto; top:0;}
	#mainVisual .slick-arrow{left:auto; right:25px; bottom:auto; top:100%;}
	#mainVisual .slick-arrow.slick-prev{margin-top:40px}
	#mainVisual .slick-arrow.slick-next{margin-top:208px}
	/* 메인 비주얼 :: 로딩circle */
	.circle-line{left:auto; right:25px; bottom:auto; top:167px}
}
@media all and ( max-width: 480px ){
	#mainVisualInfoBox{min-height:172px; margin:20px 0;}
	/* 메인 비주얼 :: 왼쪽 설명 */
	#mainVisualInfoBox .main-visual-info-rolling-box{margin-right:55px}
	#mainVisualInfoBox .main-visual-info-item{padding-left:25px;}
	#mainVisualInfoBox .main-visual-info-item:before{height:2px; top:5px;}
	#mainVisualInfoBox .main-visual-info-item .num{font-size:18px;}
	#mainVisualInfoBox .main-visual-info-item .main-visual-tit{font-size:27px; padding:10px 0}
	#mainVisualInfoBox .main-visual-info-item .main-visual-kr-tit{font-size:18px}
	#mainVisualInfoBox .main-visual-info-item .main-visual-more-btn{width:150px; height:34px; line-height:34px; font-size:10px; margin-top:0; text-indent:15px; }
	#mainVisualInfoBox .main-visual-info-item .main-visual-more-btn:after{width:30px;}
	#mainVisualInfoBox .main-visual-info-item .main-visual-more-btn:hover:after{width:20px; }
	#mainVisualInfoBox .main-visual-info-item.active-item:before{width:15px;}
	/* 메인 비주얼 :: 화살표 및 번호 */
	.main-visual-controls-box{right:10px; width:35px;}
	.main-visual-index-num{margin:55px 0}
	.main-visual-index-num .cur-num,
	.main-visual-index-num .total-num{font-size:13px;}
	#mainVisual .slick-arrow{right:10px;width:35px; height:35px; border-width:2px; background-size:15px auto !important;}
	#mainVisual .slick-arrow.slick-prev{margin-top:20px}
	#mainVisual .slick-arrow.slick-next{margin-top:157px}
	/* 메인 비주얼 :: 로딩circle */
	.circle-line{right:10px; top:137px;width:35px; height:35px; }
	.circle-line:before{border-width:2px}
	.halfcircle{border-width:2px}
	#circle-fixed{width:35px;}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
#mainContent > article{padding:65px 0;}
/* 공통 :: 타이틀 */
.main-tit{margin-bottom:55px; letter-spacing:-0.5px; text-align:center;}
.main-tit strong{display:block; color:#040404; font-size:30px; font-weight:500; }
.main-tit .main-sub-tit{display:block; margin-top:15px; color:#727272; font-size:14px; letter-spacing:-0.75px; line-height:22px;}
@media all and ( max-width: 800px ){
	#mainContent > article{padding:30px 0;}
	/* 공통 :: 타이틀 */
	.main-tit{margin-bottom:30px;}
	.main-tit strong{font-size:24px;}
	.main-tit .main-sub-tit{font-size:12px; line-height:18px;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(퀵메뉴) -------- */
.main-quick-menu-list{margin:0 -0.2%;}
.main-quick-menu-list .quick-menu-item{float:left; width:24.6%; margin:0 0.2%;}
.main-quick-menu-list .quick-menu-item a{display:block; position:relative; width:100%; padding-top:137.5%; height:0; background-size:cover !important;}
.main-quick-menu-list .quick-menu-item1 a{background:#2f2f2f url(/images/main/main_quick_menu_bg01.jpg) no-repeat}
.main-quick-menu-list .quick-menu-item2 a{background:#2f2f2f url(/images/main/main_quick_menu_bg02.jpg) no-repeat}
.main-quick-menu-list .quick-menu-item3 a{background:#2f2f2f url(/images/main/main_quick_menu_bg03.jpg) no-repeat}
.main-quick-menu-list .quick-menu-item4 a{background:#2f2f2f url(http://design.giantsoft.co.kr/images/test/thum/main_manage_img1.jpg) no-repeat}
.main-quick-menu-list .quick-menu-item .quick-menu-item-inner{overflow:hidden; display:block; position:absolute; top:15px; left:15px; bottom:15px; right:15px;}
.main-quick-menu-list .quick-menu-item .item-icon{display:block; position:relative; top:20%;text-align:center;}
.main-quick-menu-list .quick-menu-item .item-txt-box {position:absolute; bottom:10px; left:5%; right:5%; }
.main-quick-menu-list .quick-menu-item .item-txt-box span, 
.main-quick-menu-list .quick-menu-item .item-txt-box strong{display:block; letter-spacing:-0.25px; color:#fff; margin-bottom:10px; word-break:keep-all; text-shadow:1px 1px 1px rgba(0,0,0,0.3)}
.main-quick-menu-list .quick-menu-item .item-tit{font-size:30px; font-weight:500; }
.main-quick-menu-list .quick-menu-item .item-sub-tit{font-size:18px; font-weight:400;}
.main-quick-menu-list .quick-menu-item .item-sub-txt{font-size:14px; opacity:0.5;filter:Alpha(opacity=50); line-height:20px;}
/* over style */
.main-quick-menu-list .quick-menu-item .over-thum{
    position:absolute; top:0px; left:0px; width:100%; height:100%; 
    opacity:0;filter:Alpha(opacity=0);
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
}
.main-quick-menu-list .quick-menu-item .over-thum::before,
.main-quick-menu-list .quick-menu-item .over-thum::after {
    position: absolute;
    top: 15px;
    right: 15px;
    bottom: 15px;
    left: 15px;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
    transition: opacity 0.5s, transform 0.5s;
}
.main-quick-menu-list .quick-menu-item .over-thum::before {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
}
.main-quick-menu-list .quick-menu-item .over-thum::after {
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1,0);
    transform: scale(1,0);
}

.main-quick-menu-list .quick-menu-item a:hover .over-thum{opacity:1.0;filter:Alpha(opacity=100);}
.main-quick-menu-list .quick-menu-item a:hover .over-thum::before,
.main-quick-menu-list .quick-menu-item a:hover .over-thum::after {
    opacity: 0.5;
    -webkit-transform: scale(1);
    transform: scale(1);
}
.main-quick-menu-list .quick-menu-item a:hover .gal-thum img{-webkit-transform: scale(1.1) rotate(0.02deg); -moz-transform: scale(1.1) rotate(0.02deg); -ms-transform: scale(1.1) rotate(0.02deg); -o-transform: scale(1.1) rotate(0.02deg); transform: scale(1.1) rotate(0.02deg);}
  @media all and (max-width:1220px){
	.main-quick-menu-list .quick-menu-item .item-txt-box .item-tit{font-size:20px}
	.main-quick-menu-list .quick-menu-item .item-txt-box .item-sub-tit{font-size:14px; margin-bottom:0; line-height:18px;}
	.main-quick-menu-list .quick-menu-item .item-txt-box .item-sub-txt{display:none}
	.main-quick-menu-list .quick-menu-item .over-thum::before,
	.main-quick-menu-list .quick-menu-item .over-thum::after {
		top: 10px;
		right: 10px;
		bottom: 10px;
		left: 10px;
	}
 }
 @media all and (max-width:800px){
	.main-quick-menu-list{margin:0 -1%;}
	.main-quick-menu-list .quick-menu-item {width:48%; margin:1%;}
	.main-quick-menu-list .quick-menu-item .item-txt-box{bottom:10%;}
	.main-quick-menu-list .quick-menu-item .item-txt-box .item-tit{margin-bottom:0; font-size:18px; text-align:center;}
	.main-quick-menu-list .quick-menu-item .item-txt-box .item-sub-tit{display:none;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠2(갤러리) -------- */
.main-news-list{margin:0 -0.5%;}
.main-news-list li{float:left; width:32.33%; margin:0 0.5%;}
.main-news-list li a{display:block; padding-bottom:20px; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.main-news-list li .bbs-inner-thumb{overflow:hidden; position:relative; display:block; height:0; padding-top:67.5%; background-color:#2f2f2f}
.main-news-list li .bbs-inner-thumb img{
	position:absolute; top:0px; left:0px; width:100%; height:100%; 
	-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s
}
.main-news-list li .bbs-inner-con{
	position:relative; z-index:1; background:#fff; margin:-60px 20px 0; padding:15px 20px 40px; border-bottom:1px solid #c9c9c9; letter-spacing:-0.5px;
	-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s
}
.main-news-list li .bbs-inner-con .bbs-category{display:inline-block; padding:5px 10px 7px; color:#fff; font-weight:400; font-size:14px; letter-spacing:-0.3px; background-color:#383838;}
.main-news-list li .bbs-inner-con .bbs-tit{overflow:hidden; display:block; height:30px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;   color:#17100c; font-size:24px; line-height:30px; font-weight:500; margin:18px 0;}
.main-news-list li .bbs-inner-con .bbs-content{overflow:hidden; height:88px; color:#727272; font-size:14px; letter-spacing:-0.75px; line-height:22px; word-break:keep-all;}
.main-news-list li a:hover{}
.main-news-list li a:hover .bbs-inner-thumb img{transform:scale(1.06);}
.main-news-list li a:hover .bbs-inner-con{padding-left:25px; padding-right:15px;}
@media all and (max-width:1220px){
	.main-news-list li .bbs-inner-con{margin:-60px 15px 0 15px; padding:15px;}
	.main-news-list li .bbs-inner-con .bbs-category{font-size:12px;}
	.main-news-list li .bbs-inner-con .bbs-tit{font-size:18px; margin:10px 0;}
	.main-news-list li .bbs-inner-con .bbs-content{font-size:13px; line-height:18px;}
	.main-news-list li a:hover .bbs-inner-con{padding:15px;}
}
@media all and (max-width:800px){
	.main-news-list{max-width:480px; margin:0 auto;}
	.main-news-list li{float:none; width:100%; margin:0;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3(갤러리 슬라이드) -------- */
.main-gallery-rolling-con .bbs-basic-gallery-con{overflow:visible; margin:0 -8px;}
.main-gallery-rolling-con .bbs-basic-gallery-con li{width:auto; margin:0 8px;}
/* 컨텐츠3 :: 화살표 */
.main-gallery-rolling-con .slick-arrow{position:absolute; top:50%; margin-top:-18px; cursor:pointer; border:0; cursor:pointer; z-index:9; font-size:0;}
.main-gallery-rolling-con .slick-arrow i{font-size:36px; color:#2f2f2f}
.main-gallery-rolling-con .slick-arrow.slick-prev{left:-36px; }
.main-gallery-rolling-con .slick-arrow.slick-next{right:-36px; }

@media all and (max-width:1220px){
	.main-gallery-rolling-con .bbs-basic-gallery-con{margin:0 10px}
	.main-gallery-rolling-con .slick-arrow.slick-prev{left:-24px; }
	.main-gallery-rolling-con .slick-arrow.slick-next{right:-24px; }
}
@media all and (max-width:480px){
	.main-gallery-rolling-con .bbs-basic-gallery-con{ margin:0 -2px;}
	.main-gallery-rolling-con .bbs-basic-gallery-con li{margin:0 2px;}
	.main-gallery-rolling-con .slick-arrow{display:none !important;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠4(갤러리 + 설명 슬라이드) -------- */
.main-slide-photo-con{float:left; width:50%}
.main-slide-photo-item .slide-photo-inner{position:relative; height:0; padding-top:60%; background-color:#111; }
.main-slide-text-con{float:left; width:43%; margin-left:5%; margin-right:2%; z-index:1;}
.main-slide-text-item .main-slide-tit{display:block; color:#17100c; font-size:24px; font-weight:500; margin-bottom:25px}
.main-slide-text-item .main-slide-txt{color:#727272; font-size:14px; line-height:24px; letter-spacing:-0.75px; word-break:keep-all; margin-bottom:65px;}
.main-slide-text-item .main-slide-btn{display:inline-block; width:90px; height:30px; font-size:14px; border:1px solid #383838; color:#fff; background-color:#383838; text-align:center; line-height:30px; -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}
.main-slide-text-item .main-slide-btn:hover{color:#333; background-color:#fff;}
/* 컨텐츠3 :: 화살표 */
.main-slide-photo-con .slick-arrow{position:absolute; top:50%; margin-top:-18px; cursor:pointer; border:0; cursor:pointer; z-index:9; font-size:0;}
.main-slide-photo-con .slick-arrow i{font-size:36px; color:#fff}
.main-slide-photo-con .slick-arrow.slick-prev{left:0; }
.main-slide-photo-con .slick-arrow.slick-next{right:0; }
@media (max-width:800px) {
	.main-slide-photo-con{float:none; width:100%;}
	.main-slide-text-con{float:none; width:100%; margin:0; margin-top:15px; }
	.main-slide-text-item .main-slide-tit{font-size:20px; margin-bottom:15px;}
	.main-slide-text-item .main-slide-txt{font-size:13px; line-height:20px; margin-bottom:40px;}
	.main-slide-text-item .main-slide-btn{display:block; margin:0px auto; font-size:13px;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠5(FIXED 배너) -------- */
#mainContent5{padding:110px 0 120px; background:url(/images/main/main_visual_03.jpg) no-repeat 50% 50%; background-size:cover; background-attachment:fixed}
.main-fixed-con{text-align:center; padding:0 15px; font-size:13px; letter-spacing:-0.55px;}
.main-fixed-con .main-fixed-sub-tit{color:#fff; font-size:1.923em; padding-bottom:1.6em}
.main-fixed-con .main-fixed-tit{color:#fff; font-size:2.923em; font-weight:300; letter-spacing:-1px; padding-bottom:1.0em;}
.main-fixed-con .main-fixed-txt{color:#fff; font-size:1.154em; letter-spacing:-0.75px; line-height:2; opacity:0.7;filter:Alpha(opacity=70); padding-bottom:1.0em; word-break:keep-all}
.main-fixed-con .main-fixed-more-btn{display:block; width:200px; height:48px; line-height:48px; color:#fff; font-size:1.231em; font-weight:400; margin:0px auto; border:1px solid #fff; border-color:rgba(255,255,255,0.2); background-color:rgba(0,0,0,0.2)}
.main-fixed-con .main-fixed-more-btn:hover{background-color:#333;}
@media all and (max-width:800px){
	.main-fixed-con{font-size:10px;}
}
/* -------- 메인 컨텐츠 :: 컨텐츠6(사각, 원 배너들) -------- */
/* 배너 :: 사각배너 */
.main-banner-list-con{overflow:hidden; margin:0 -2%;}
.main-banner-list-con li{float:left; width:46%; margin:2%;}
.main-banner-list-con li a{display:block; position:relative; height:0; padding-top:47%; background-color:#111;}
.main-banner-list-con li .banner-thumb{position:absolute; top:0px; left:0px; width:100%; height:100%;}
.main-banner-list-con li .banner-thumb img{width:100%; height:100%;}
.main-banner-list-con li .banner-inner-box{position:absolute; bottom:10%; left:20px; font-size:16px; letter-spacing:-0.55px; color:#fff;}
.main-banner-list-con li .banner-inner-box .banner-tit{font-size:1.563em; padding-bottom:0.7em}
.main-banner-list-con li .banner-inner-box .banner-sub-tit{display:block; font-size:1.125em; padding-bottom:0.7em}
.main-banner-list-con li .banner-inner-box .banner-sub-txt{display:block; font-size:0.813em; opacity:0.5;filter:Alpha(opacity=50);}
@media all and (max-width:800px){
	.main-banner-list-con li .banner-inner-box{font-size:12px;}
	.main-banner-list-con li .banner-inner-box .banner-sub-txt{display:none;}
}
@media all and (max-width:640px){
	.main-banner-list-con{margin:0;}
	.main-banner-list-con li{float:none; width:100%; margin:0; margin-bottom:15px;}
}

/* 배너 :: 원배너 */
.custom-gallery-list-con04 {
    display: block;
    text-align: center;
    width: 100%;
}
.custom-gallery-list-con04 li {
    width:23%;
    display: inline-block;
    padding:1% 0.8%;
    overflow:hidden;
}
.circle-thumb, .circle-item{
    overflow:hidden; 
    border-radius: 50%;
}
.circle-item {
    overflow:hidden;
    display:block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    background-color:#767676;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.circle-thumb{
    position:relative;
    display:block;
    height:0;
    padding-top:100%;
}
.circle-thumb img{
    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    opacity:0.8;filter:Alpha(opacity=80);
}
.circle-thumb img, .circle-info, .circle-info .circle-cate, .circle-info p, .circle-info .on-txt, .circle-info .more-btn{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.circle-info{position:absolute; top:0px; left:0px; width:100%; height:100%; text-align:center; background-color:rgba(0,0,0,0.1)}
.circle-info .circle-cate{display:block; position:relative; z-index:10; padding:67px 0 57px; color:#fff; font-size:16px; font-weight:600; text-shadow:1px 1px 1px rgba(0, 0, 0, .3);}
.circle-info .off-txt{width:90%; height:90px; overflow:hidden; margin:0px auto;  color:#fff; letter-spacing:-0.3px; font-size:22px; letter-spacing:-0.3px; line-height:30px; word-break:keep-all; text-shadow:1px 1px 1px rgba(0, 0, 0, .3); white-space:nowrap; text-overflow:ellipsis;}
.circle-info .on-txt{position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:9;  background:#fff;  color:#939393; font-size:17px; line-height:26px; letter-spacing:-0.3px; word-break:keep-all; box-sizing:border-box; padding-top:41%; opacity:0;filter:Alpha(opacity=0); transform:scale(0); border-radius: 50%;}
.circle-info .on-txt p{width:80%; margin:0px auto; height:80px; overflow:hidden;}
.circle-info .more-btn{position:absolute; bottom:20px; left:50%; width:32px; height:32px; z-index:10; color:#fff; text-align:center; line-height:30px; margin-left:-16px; background-color:#4c4b4b; opacity:0;filter:Alpha(opacity=0);-webkit-border-radius:32px;-moz-border-radius:32px;-o-border-radius:32px;border-radius:32px;}
.circle-info .more-btn i{vertical-align:middle; font-size:22px;}
/* over 스타일 */
.custom-gallery-list-con04 li .circle-item:hover {box-shadow:6px 6px 8px rgba(213, 213, 213, 0.49)}
.custom-gallery-list-con04 li .circle-item:hover .circle-thumb img{left:-50px;}
.custom-gallery-list-con04 li .circle-item:hover .circle-info{background-color:#fff;}
.custom-gallery-list-con04 li .circle-item:hover .circle-info .circle-cate{color:#c00c3f; text-shadow:none;}
.custom-gallery-list-con04 li .circle-item:hover .circle-info .off-txt{opacity:0;filter:Alpha(opacity=0);  transform:scale(0);}
.custom-gallery-list-con04 li .circle-item:hover .circle-info .on-txt{opacity:1.0;filter:Alpha(opacity=100);  transform:scale(1.01);}
.custom-gallery-list-con04 li .circle-item:hover .circle-info .more-btn{bottom:40px; opacity:1.0;filter:Alpha(opacity=100);}
@media (max-width:1220px) {
    .circle-info .circle-cate{padding:20% 0}
    .circle-info .off-txt{height:72px; font-size:18px; line-height:24px;}
}
 
@media (max-width:800px) {
    .custom-gallery-list-con04 li{width:47%; margin-top:10px;}
    .circle-info .off-txt{height:76px; font-size:18px; line-height:26px;}
}
@media (max-width:640px) {
    .circle-info .circle-cate{font-size:12px;}
    .circle-info .off-txt{height:48px; font-size:15px; line-height:16px;}
    .circle-info .on-txt{display:none;}
    .circle-info .more-btn{bottom:10px;}
    .custom-gallery-list-con04 li .circle-item:hover .circle-info .more-btn{bottom:20px;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠7(100% 풀배너) -------- */
.main-full-banner-box{position:relative; width:100%; overflow:hidden; background-color:#3c3c3c;}
.main-full-banner-box .main-full-banner-left{}
.main-full-banner-box .main-full-banner-right{position:absolute; top:0px; left:50%; width:100%; height:100%; background:#080808;}
.main-full-banner-box .full-banner-inner{width:100%; max-width:600px; padding:100px 0; text-align:center; color:#fff; letter-spacing:-0.25px;}
.main-full-banner-box .full-banner-inner strong{display:block; font-weight:400; font-size:24px; padding-bottom:25px;}
.main-full-banner-box .full-banner-inner p{font-size:15px; line-height:26px; letter-spacing:-0.75px; opacity:0.4;filter:Alpha(opacity=40);}
@media (max-width:1220px) {
	.main-full-banner-box .main-full-banner-left,
	.main-full-banner-box .main-full-banner-right{
		position:static; float:left; width:50%; padding:0;
	}
}
@media (max-width:800px) {
	.main-full-banner-box .full-banner-inner{width:auto; padding:50px 15px;}
	.main-full-banner-box .full-banner-inner strong{font-size:18px; padding-bottom:15px;}
	.main-full-banner-box .full-banner-inner p{font-size:13px; line-height:20px; word-break:keep-all;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠8(Global Network) -------- */
#mainContent8{background-color:#2f2f2f;}
#mainContent8 .main-tit strong{color:#fff;}
.global-map-con{position:relative;}
.global-map-con-m{display:none;}
.global-nation-box{position:absolute; top:0px; left:0px; width:100%; height:100%; }
@keyframes nation-circle {
  0% {
	-webkit-transform: scale(0);
	transform: scale(0);
	opacity: 0.5; 
   }
  50% {
	opacity: 1.0; 
   }
  100% {
	-webkit-transform: scale(1);
			transform: scale(1);
	opacity: 0; } 
}
.nation-circle{position:absolute; left:50%; top:0; display:inline-block; width:80px; height:80px;}
.nation-circle > span:nth-child(2) {
	-webkit-animation-delay: 1s;
	animation-delay: 1s; 
}
.nation-circle > span:nth-child(3) {
	-webkit-animation-delay: 1.5s;
		animation-delay: 1.5s;
}
.nation-circle > span:nth-child(4) {
	-webkit-animation-delay: 2s;
		animation-delay:2s;
}
.nation-circle > span:nth-child(5) {
	-webkit-animation-delay: 2.5s;
		animation-delay:2.5s;
}
.nation-circle > span:nth-child(6) {
	-webkit-animation-delay: 4s;
		animation-delay:4s;
}
.nation-circle > span {
	border:1px solid rgba(255, 255, 255, 0.5) ;
	border-radius: 50%;
	-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
	position: absolute;
	left: 0;
	top: 0px;
	opacity: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	-webkit-animation: nation-circle 4s cubic-bezier(0.22, 0.61, 0.36, 0.5) infinite;
			animation: nation-circle 4s cubic-bezier(1, 2, 0.66, 3) infinite; 
	}
.nation-circle i{
	display:block; position:absolute; top:50%; left:50%; margin:-3px 0 0 -3px; width:8px; height:8px; background-color:#fff; 
	-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;
	opacity:0.7;filter:Alpha(opacity=70);
}
.nation-circle p{position:absolute; top:50%; left:50%; width:300px; height:30px; margin:-8px 0 0 20px; color:#fff; opacity:0.7;filter:Alpha(opacity=70);}
@media all and ( max-width: 1220px ){
	.global-map-con{display:none;}
	.global-map-con-m{display:block;}
	.global-map-con-m img{width:100%;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠9(공지사항 게시판 + 배너) -------- */
/* 컨텐츠 9 :: 공지사항 */
.main-board-box{position:relative; float:left; width:47%}
.main-board-box .main-board-tit{color:#17100c; font-size:24px; letter-spacing:-0.1px; font-weight:500; padding-bottom:25px; border-bottom:2px solid #333;}
.main-board-con{padding-top:25px;}
.main-board-con li{overflow:hidden; position:relative; padding-left:15px; margin-top:20px;}
.main-board-con li:first-child{margin-top:0;}
.main-board-con li:before{display:block; content:""; width:3px; height:3px; background-color:#2a2a2a; position:absolute; top:7px; left:0px;}
.main-board-con li .bbs-tit{display:block; float:left; width:80%; color:#727272; font-size:15px; letter-spacing:-0.75px; height:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.main-board-con li .bbs-date{float:right; width:20%; color:#727272; letter-spacing:-0.5px; text-align:right;}
.main-board-box .board-more-btn{position:absolute; top:0px; right:0px; color:#000;  }
.main-board-box .board-more-btn i{font-size:30px}
/* 컨텐츠 9 :: 배너 */
.main-board-banner-con{float:right; width:47%;}
.main-board-banner-con ul{overflow:hidden; margin:0 -2%;}
.main-board-banner-con ul li{float:left; width:46%; margin:0 2%;}
.main-board-banner-con ul li a{display:block; position:relative; }
.main-board-banner-con ul li a .main-board-banner-thumb{display:block; overflow:hidden; position:relative; height:0; padding-top:100%; background:#333;}
.main-board-banner-con ul li a .main-board-banner-thumb img{position:absolute; top:0px; left:0px; width:100%; height:100%; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.main-board-banner-con ul li a:hover .main-board-banner-thumb img{transform:scale(1.06);}
.main-board-banner-con ul li a .main-board-thumb-cover{position:absolute; top:0px; left:0px; width:100%; height:100%; background:rgba(0,0,0,0.5)}
.main-board-banner-con ul li a .main-board-thumb-cover p{display:table; width:100%; height:100%; }
.main-board-banner-con ul li a .main-board-thumb-cover p strong{display:table-cell; width:100%; height:100%; vertical-align:middle; text-align:center; color:#fff; font-size:16px; font-weight:400;}

@media all and (max-width:1220px){
	/* 컨텐츠 9 :: 공지사항 */
	.main-board-box .main-board-tit{font-size:17px; padding-bottom:18px; }
	.main-board-con{padding-top:15px;}
	.main-board-con li{margin-top:10px}
	.main-board-con li .bbs-tit{font-size:13px;}
	.main-board-con li .bbs-date{font-size:12px;}
}
@media all and (max-width:800px){
	/* 컨텐츠 9 :: 공지사항 */
	.main-board-box{float:none; width:100%; margin-bottom:15px;}
	/* 컨텐츠 9 :: 배너 */
	.main-board-banner-con{float:none; width:100%;}
	.main-board-banner-con ul{margin:0 -1%;}
	.main-board-banner-con ul li{width:48%; margin:0 1%;}
	.main-board-banner-con ul li a .main-board-thumb-cover p strong{font-size:14px}
}

/* ******************  메인 오른쪽 퀵메뉴 ********************** */
#rightBar{
	position:fixed; top:55%; right:2%; z-index:99; margin-top:-142px;
	opacity:0;filter:Alpha(opacity=0);
	visibility:hidden;
	transition:all 0.5s cubic-bezier(0.47, 0, 0.745, 0.715); 
	-webkit-transition:all 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);  
	-oz-transition:all 0.5s cubic-bezier(0.47, 0, 0.745, 0.715); 
	-ms-transition:all 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);
}
#rightBar.fixed{visibility:visible; opacity:1.0;filter:Alpha(opacity=100); top:50%;}
#rightBar > ul {width:56px;}
#rightBar > ul > li{border-top:1px solid #7f7f7f;}
#rightBar > ul > li:first-child{border-top:0;}
#rightBar > ul > li > a{
	display:block; width:56px; height:56px; background-color:#000; text-align:center; line-height:56px; color:#fff;
	-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s
}
#rightBar > ul > li > a:hover{background-color:#7f7f7f}

@media all and ( max-width: 1440px ){
	#rightBar{right:-56px;}
	#rightBar.fixed{visibility:hidden;opacity:0;filter:Alpha(opacity=0);}
}