@charset "utf-8";

/*-----------------------------------------------
	index
-----------------------------------------------*/
/* secWorks */
.secGalleryMain{
	padding-top:78px;
	padding-bottom:205px;
}
.secGalleryMain .boxTitMain{
	text-align:center;
}
.secGalleryMain .topTitBox{
	position:relative;
	width:140px;
	margin:0 auto ;
}
.secGalleryMain .topTitBox .titMain{
	font-size:36px;
	line-height:1.6;
	letter-spacing:4px;
	margin-bottom:18px;
}
.secGalleryMain .topTitBox .icon{
	position:absolute;
	bottom:-15px;
	right:-11px;
}
.secGalleryMain .txtMain{
	font-size:16px;
	line-height:36px;
	letter-spacing:3px;
}
.secGallery .workList{
	font-size: 0;
	margin-top: 78px;
}
.secGallery .ulList{
	font-size: 0;
}
.secGallery .workList .liBox{
	display:inline-block;
	vertical-align:top;
	width: 28.125%;
	margin-right: 7.8%;
	margin-bottom:70px;
	text-align:center;
}
.secGallery .workList .liBox:nth-child(3n){
	margin-right: 0;
}
.secGallery .workList .liBox a{
	display: block;
	color: #000;
	text-decoration: none;
}
.secGallery .workList .liBox .boxImg{
	position: relative;
}
.secGallery .workList .liBox .boxImg .img{
	width: 100%;
	height: 0;
	padding-top: 66.65%;
}
.secGallery .workList .liBox .boxTxt{
	padding: 23px 0 15px ;
}
.secGallery .workList .liBox .boxTxt .txt{
	font-size: 14px;
	line-height: 26px;
	letter-spacing: 1px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.secGallery .workList .liBox .boxTxt .tit{
	font-size: 16px;
	line-height: 32px;
	letter-spacing: 1.5px;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	text-decoration:underline;
	margin-bottom:7px;
}
.secGallery .subBox{
	display:inline-block;
	background:url(../img/common/iconEnd.png) 10px 15px no-repeat #84C6C9;
	background-size:15px auto;
	color:#fff;
	font-size:13px;
	min-width:140px;
	padding:15px 0 0 20px;
	height:40px;
	margin:0 auto;
}
.secCmnLoad .btnLoad,
#listLoading{ margin:5px auto 0;}
@media only screen and (max-width:767px){
	.secGalleryMain{
		padding:30px 4.831% 120px;
	}
	.secGalleryMain .topTitBox .titMain{
		font-size:28px;
		margin-bottom:22px;
	}
	.secGalleryMain .topTitBox .icon{
		right:7px;
	}
	.secGalleryMain .topTitBox .icon img{
		width:auto;
		height:22px;
	}
	.secGalleryMain .txtMain{
		font-size:14px;
		line-height:1.2;
		letter-spacing:2px;
	}
	.secGallery .workList{
		margin-top: 30px;
	}
	.secGallery .workList .liBox,
	.secGallery .workList .liBox:nth-child(3n){
		width: 48%;
		margin-right:2%;
		margin-bottom:25px;
	}
	.secGallery .workList .liBox:nth-child(2n){ margin-right:0;}
	.secGallery .workList .liBox .boxTxt{
		width: 100%;
		padding: 10px 0;
	}
	.secGallery .workList .liBox .boxTxt .txt{
		font-size: 12px;
		letter-spacing: 0.5px;
		margin-top:-5px;
	}
	.secGallery .workList .liBox .boxTxt .tit{
		font-size: 14px;
		line-height: 32px;
		letter-spacing: 0.75px;
	}
	.secGallery .subBox {
		background: url(../img/common/iconEnd.png) 10px 10px no-repeat #84C6C9;
		background-size: 15px auto;
		font-size: 12px;
		padding: 12px 0 0 20px;
		height: 35px;
	}
}

/*-----------------------------------------------
	details
-----------------------------------------------*/
.secDetails{
	padding:70px 0 0;
}
/* topDetails */
.secDetails .topDetails{
	border-top:1px solid #E5E5E5;
	border-bottom:1px solid #E5E5E5;
	text-align:center;
	padding:43px 0 ;
	margin-bottom:50px;
}
.secDetails .topDetails .titDetails{
	font-size:22px;
	line-height:1.7;
	padding-bottom:10px;
	letter-spacing:2px;
}
.secDetails .topDetails .txtName{
	font-size:14px;
	letter-spacing:1px;
	line-height:26px;
}

/* secSlider */
.secDetails .secSlider{
	overflow:hidden;
	opacity:0;
	-webkit-transition: opacity 0.2s ease-out;
	-moz-transition: opacity 0.2s ease-out;
	-ms-transition: opacity 0.2s ease-out;
	transition: opacity 0.2s ease-out;
	margin-bottom:60px;
}
.secDetails .swiper-slider{ position:relative;}
.secDetails .swiper-slider li{
	z-index:1;
}
.secDetails .swiper-slider .boxSlider{
	position:relative;
}
.secDetails .swiper-slider li img{
	width: auto;
    max-height: 667px;
}
.secDetails .sliderTxt{
	text-align: center;
	font-size: 15px;
	letter-spacing: 2px;
	padding-top: 30px;
	opacity: 1;
	font-weight: normal;
	display:none;
	line-height:1.8;
	left: 0;
	right: 0;
}
.secDetails .swiper-slide-active .sliderTxt{ display:block;}
.secDetails .swiper-slider .swiper-slide-active .bgSlider{
	position:static;
}
.secDetails .sliderTxt{
	text-align: center;
    font-size: 15px;
    letter-spacing: 2px;
    padding-top: 30px;
    opacity: 1;
    font-weight: normal;
}
.secDetails #thumb{
	font-size:0;
	text-align:center;
	margin-top:30px;
}
.secDetails .thumb{
	width:100px;
	height:100px;
	margin:0 11px 12px 0;
	cursor:pointer;
	display:inline-block;
	vertical-align:top;
	position:relative;
}
.secDetails .thumb:nth-child(10n){
	margin-right:0;
}
.secDetails .thumb .bgThumb{
	display:none;
}
.secDetails .thumb.active{ position:relative;}
.secDetails .thumb.active .bgThumb{
	display:block;
	position:absolute;
	border:5px solid #007F94;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.secDetails .swiper-button-next, 
.secDetails .swiper-button-prev{
	background-color:transparent;
	border:none;
	cursor:pointer;
	outline:none;
	padding:0;
	appearance:none;
	font-size:0;
	width:12px!important;
	height:21px!important;
	bottom: -330px;
	margin:auto 0;
	z-index:10!important;
}
.secDetails .swiper-button-prev{
	background-image: url(../img/gallery/btnPrev.gif) !important;
	background-size:12px 21px!important;
}
.secDetails .swiper-button-next{
	background-image: url(../img/gallery/btnNext.gif) !important;
	background-size:12px 21px!important;
}


/* mainDetails */
.mainDetails{ padding-bottom:70px;}
.mainDetails .mainTxt{
	font-size:15px;
	line-height:1.9;
}

/* secMovie */
.secMovie{
	width:620px;
	margin:0 auto 125px;
}
.secMovie iframe{
	width:100%;
	height:350px;
	margin:0 auto;
}

/* secInterview */
.secInterview{ padding-bottom:100px;}
.secInterview .box{
	border:3px solid #007F94;
	background:#FFFFF4;
	position:relative;
}
.secInterview .box .icon{
	position:absolute;
	top:-30px;
	left:0;
	right:0;
	margin:0 auto;
	width:60px;
	height:60px;
}
.secInterview .box .boxInner{
	padding:43px 50px 70px;
}
.secInterview .box .subBox{
	padding:45px 0;
}
.secInterview .box .tit{
	font-size:22px;
	line-height:48px;
	color:#007F92;
	text-align:center;
	letter-spacing:2px;
}
.secInterview .box .boxTit{
	font-size:20px;
	line-height:1.2;
	padding-bottom:23px;
}
.secInterview .box .boxTxt{
	font-size:15px;
	line-height:1.9;
}
.secInterview .box .photo{
	width:560px;
	height:315px;
	margin:0 auto;
	background:#fff;
	border:1px solid #DDDDDD;
}

/* secComment */
.secComment{ padding-bottom:150px;}
.secComment .fLeft{
	float:left;
	max-width:460px;
	width:35.938%;
}
.secComment .fLeft .photo{
	width:100%;
	height:292px;
	position:relative;
}
.secComment .fRight{
	float:right;
	width:61.329%;
	max-width:785px;
	padding-top:30px;
}
.secComment .fRight .rightBox{
	border:1px solid #000;
	padding-bottom:5px;
	position:relative;
}
.secComment .fRight .rightBox::before{
	position: absolute;
	top: 105px;
	left: -16px;
	margin: auto;
	content: "";
	vertical-align: middle;
	width:16px;
	height:21px;
	background:url(../img/common/arrow.png) top center no-repeat;
	background-size:16px 21px;
}
.secComment .fRight .rightBox .subBox{
	border-bottom:1px solid #000;
	padding:50px 40px;
}
.secComment .fRight .rightBox .boxTit{
	font-size:22px;
	line-height:37px;
	padding-bottom:10px;
}
.secComment .fRight .rightBox .boxTxt{
	font-size:15px;
	line-height:1.9;
}
/* btnPrev */
.secDetails .btnPrev{
	display: block;
    width: 300px;
    height: 65px;
    color: #000;
    font-size: 15px;
    padding-top: 24px;
    margin: 80px auto 0;
    cursor: pointer;
    border: 1px solid #000;
	text-align:center;
	position:relative;
}
.secDetails .btnPrev::before,
.secDetails .btnPrev::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
.secDetails .btnPrev::before{
    left: 33px;
    width: 10px;
    height: 10px;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.btnBox{
	font-size: 17px;
    line-height: 1.2;
    color: #fff;
    display: block;
    text-align: center;
    padding: 37px 0;
    letter-spacing: 2px;
    margin-top: 22px;
    background: #EA607A;
    -webkit-box-shadow: 0 -4px 0 #E64261 inset;
    box-shadow: 0 -4px 0 #E64261 inset;
	width:400px;
	font-weight:bold;
	margin:50px auto 0;
}
@media only screen and (max-width:767px){
	.secDetails {
		padding: 30px 0 0;
	}
	/* topDetails */
	.secDetails .topDetails{
		padding:20px 0 ;
		margin-bottom:40px;
	}
	.secDetails .topDetails .titDetails{
		font-size:16px;
	}
	.secDetails .topDetails .txtName{
		font-size:13px;
	}
	/* secSlider*/
	.secDetails .secSlider{ margin-bottom:30px;}
	.secDetails #slider li{
		width:235px;
	}
	.secDetails .swiper-slide {
    	width: 100% !important;
	}
	.secDetails .swiper-slider .boxSlider{
		position:relative;
		text-align:center;
	}
	.secDetails .swiper-slider li img{
		width: auto;
		height: 230px;
	}
	.secDetails .swiper-button-prev,
	.secDetails .swiper-button-next{
		width: 40% !important;
		background-position: 0;
		bottom: calc((100% - 480px) / 2);
	}
	.secDetails .swiper-button-next{ background-position:100% 0;}
	.secDetails .sliderTxt{
		padding-top:25px;
		position:static;
		font-size:11px;
		padding: 23px 9% 0px;
		line-height:1.4;
	}
	.secDetails #thumb{margin-top: 20px;}
	.secDetails .thumb{
		width:18.4%;
		height:auto;
		padding-top:18%;
		margin:0 2% 2% 0;
	}
	.secDetails .thumb:nth-child(5n){
		margin-right:0;
	}
	.secDetails .thumb .bgThumb{
		height:17vw;
	}	
	
	/* mainDetails */
	.mainDetails{ padding-bottom:40px;}
	.mainDetails .mainTxt{
		font-size:13px;
		line-height:1.8;
	}

	/* secMovie */
	.secMovie{
		width: 100%;
		margin: 0 auto 50px;
	    padding-top: 51%;
    	position: relative;
	}
	.secMovie iframe{
	    position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	/* secInterview */
	.secInterview{ padding-bottom:40px;}
	.secInterview .box .boxInner{
		padding:20px 4.831%;
	}
	.secInterview .box .icon{
		width:50px;
		height:50px;
		top:-25px;
	}
	.secInterview .box .icon img{
		width:50px;
		height:auto;
	}
	.secInterview .box .subBox{
		padding:10px 0 20px;
	}
	.secInterview .box .tit{
		font-size:16px;
		letter-spacing:1px;
		line-height:2.2;
	}
	.secInterview .box .boxTit{
		font-size:16px;
		line-height:1.5;
		padding-bottom:20px;
	}
	.secInterview .box .boxTxt{
		font-size:13px;
	}
	.secInterview .box .photo{
		width:100%;
		height:auto;
		padding-top:50%;
	}
	
	/* secComment */
	.secComment{ padding-bottom:30px;}
	.secComment .fLeft,
	.secComment .fRight{
		float:none;
		width:100%;
		margin:0 auto;
	}
	.secComment .fLeft .photo{
		height:auto;
		padding-top:64%;
	}
	.secComment .fRight .rightBox::before{
		top:-16px;
		left:0;
		right:0;
		width: 21px;
		height: 16px;
		background: url(../img/common/arrow02.png) top center no-repeat;
		background-size: 21px 16px;
	}
	.secComment .fRight .rightBox .subBox{ 
		padding:20px 4.831%;
	}
	.secComment .fRight .rightBox .boxTit{
		font-size:16px;
		line-height:26px;
	}
	.secComment .fRight .rightBox .boxTxt{ 
		font-size:13px;
		line-height:1.8;
	}
	
	/* btnPrev */
	.secDetails .btnPrev {
		font-size: 12px;
		letter-spacing: 1px;
		height: 60px;
		margin: 40px auto 0;
		width: 220px;
	}
	.btnBox{
		font-size: 12px;
		letter-spacing: 1px;
		height: 60px;
		margin: 20px auto 0;
		width: 260px;
		padding:24px 0 0;
	}
}