/* all */

.swiper-slide{ padding-bottom:0px;  cursor: pointer;}
.swiper-slide .slide_txt{  position: absolute;  left: 0;  bottom: 0;  width: 100%; height: 50%;  opacity: 0;  background: -webkit-linear-gradient(top,rgba(181,219,252,0),#b5dbfc);    background: linear-gradient(180deg,rgba(181,219,252,0),#b5dbfc);
    -webkit-transition: opacity .2s ease-in;
    transition: opacity .2s ease-in;
    content: "";}

.swiper-slide:hover .slide_txt{ opacity: 1;}
.slide_txt p{  margin:0% 0 0% 0;  font-size: 1.8em;  font-weight: 500;}
.slide_txt span{ margin:0 20px;  display: block;  font-weight: 200;  font-size: 1.2em;  line-height: 1.5em;}


/* only ex */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {/* html, body{overflow-x: hidden;*/}
 .swiper-container{ }
 .swiper-slide{  }
 .swiper-slide:last-child{  margin-right: 0; }
 .swiper-slide img{  width: 100%; }
 .swiper-slide .slide_txt{background:  linear-gradient(180deg,rgba(181,219,252,0),#b5dbfc);  }




/*��ư*/

.preserve-3d {
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.button_base {  margin: 0;    border: 0;
    position: relative;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -50%;
    width:160px; line-height:40px; height:40px;  font-size:16px; font-weight:600; text-align:center; 
    text-align: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-user-select: none;
    cursor: default;    font-family: 'Noto Sans KR', sans-serif;
    background: #06a2e3;
}
.button_base div{font-family: 'Noto Sans KR', sans-serif; }

.button_base:hover { font-family: 'Noto Sans KR', sans-serif;
    cursor: pointer;
}

/* ### ### ### 05 */
.b05_3d_roll {
    perspective: 1100px;
    -webkit-perspective: 1100px;
    -moz-perspective: 1100px;

}

.b05_3d_roll div { position: absolute; text-align: center; width: 100%; height: 40px; line-height:40px; font-size:16px; font-weight:600;
pointer-events: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;

}


.b05_3d_roll div:nth-child(1) {
    color: #fff;
    background-color: #7cc4ef;
    transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform-origin: 50% 50% -20px;
    -webkit-transform-origin: 50% 50% -20px;
    -moz-transform-origin: 50% 50% -20px;
    border-radius:0 0 0px 0;

}

.b05_3d_roll div:nth-child(2) {
    color: #fff;
    background-color: #06a2e3;
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform-origin: 50% 50% -20px;
    -webkit-transform-origin: 50% 50% -20px;
    -moz-transform-origin: 50% 50% -20px;
    border-radius:0 0 0px 0;
}


.b05_3d_roll.on div:nth-child(1) {font-family : 'SCoreDream', sans-serif;  font-weight:500;

    background-color: #06a2e3 !important;
    border-radius:0 0 0px 0;
   }

.b05_3d_roll.on div:nth-child(1)::after{background-color: #7cc4ef;}

.b05_3d_roll.on div:nth-child(2) {font-family : 'SCoreDream', sans-serif; font-weight:500;
    background-color: #7cc4ef  !important;
border-radius:0 0 0px 0;
}

.b05_3d_roll.on div:nth-child(2)::after{background-color: #06a2e3;}













.b05_3d_roll:hover div:nth-child(1) {
    color: #fff;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);

}

.b05_3d_roll:hover div:nth-child(2) {
    background-color: #000000;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform: rotateX(-90deg);
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
}


/*포토 최근글*/


figure {
	position: relative;
	overflow: hidden;
	width: 100%;
	cursor: pointer;
	text-align: center;
	float: left;
	margin: 0;
}
figure p {
	margin: 0;
	font-size: 1.3rem;
}
figure figcaption {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	color: #fff;
}
figure figcaption::before,
figure figcaption::after {
	pointer-events: none;
}
.row {
	width: 100%;
	overflow: hidden;
}

/*
* effect1
*/
figure.effect1 figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	opacity: 0;
	background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
	transform: translate3d(0, 50%, 0);
}
figure.effect1 figcaption h2 {
	position: absolute;
	letter-spacing: 1px;
	top: 50%;
	left: 0;
	width: 100%;
	color: #fff;
	transition: transform 0.35s, color 0.35s;
	transform: translate3d(0, -50%, 0);
}
figure.effect1 figcaption::before,
figure.effect1 p {
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect1 p {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 2em;
	width: 100%;
	opacity: 0;
	transform: translate3d(0, 10px, 0);
}
figure.effect1:hover h2 {
	color: #fff;
	transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0);
}
figure.effect1:hover figcaption::before,
figure.effect1:hover p {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/*
* effect2
*/
figure.effect2 {
	/*background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);*/
}
figure.effect2 figcaption {
	padding: 3rem;

	background-color: rgba(167,102,248,0.1);
	transition: background-color .35s;
}
figure.effect2 figcaption::before,
figure.effect2 p {
	opacity: 0;
	transition: transform .35s, opacity .35s;
	transform: scale(0);
}
figure.effect2 figcaption::before {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	border: 1px solid #fff;
	content: '';
}
figure.effect2 h2 {
	margin:28% 0 10px 0;
	transition: transform .35s;
	transform: translate3d(0, 100%, 0);
	font-size:18px;
	font-weight:500;
}

figure.effect2 p {
	opacity: 0;
	transition: opacity .35s, transform .35s;
	transform: scale(0);
	font-size:15px;
}
figure.effect2:hover h2 {
	transform: translate3d(0, 0, 0);
}



figure.effect2:hover figcaption::before,
figure.effect2:hover p {
	opacity: 1;
	transform: scale(1);
}
figure.effect2:hover figcaption {
	background-color: rgba(81,81,79,0.3);
}
figure.effect2:hover img {
	opacity: .7;
}
/*
* effect3
*/
figure.effect3 {
	background: #2f3238;
}
figure.effect3 img {
	transition: opacity 1s, transform 1s;
}
figure.effect3 figcaption {
	text-align: left;
	padding: 2rem;
}
figure.effect3 h2 {
	position: relative;
}
figure.effect3 p {
	display: inline-block;
	margin: 0 0 .25em;
	padding: .4em 1em;
	background: rgba(255, 255, 255, .9);
	color: #2f3238;
	transition: opacity .35s, transform .35s;
	transform: translate3d(-360px, 0, 0);
}
figure.effect3 p:first-child {
	transition-delay: .15s;
}
figure.effect3 p:nth-of-type(2) {
	transition-delay: .1s;
}
figure.effect p:nth-of-type(3) {
	transition-delay: .05s;
}
figure.effect3:hover p:first-child {
	transition-delay: 0s;
}
figure.effect3:hover p:nth-of-type(2) {
	transition-delay: .05s;
}
figure.effect3:hover p:nth-of-type(3) {
	transition-delay: .1s;
}
figure.effect3:hover img {
	opacity: .4;
	transform: scale3d(1.1, 1.1, 1);
}
figure.effect3:hover p {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}
/*
* effect4
*/
figure.effect4 {
	background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);
}
figure.effect4 img {
	opacity: .95;
	transition: opacity .35s, transform .35s;
	transform: scale3d(1.05, 1.05, 1);
}
figure.effect4 h2 {
	text-align: left;
}
figure.effect4 figcaption {
	padding: 2rem;
}
figure.effect4 figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, .5);
	content: '';
	transition: transform .6s;
	transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0);
}
figure.effect4 p {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 3rem;
	padding: 0 1rem;
	max-width: 150px;
	border-right: 4px solid #fff;
	text-align: right;
	opacity: 0;
	transition: opacity .35s;
}
figure.effect4:hover img {
	opacity: 0.6;
	transform: scale3d(1, 1, 1);
}
figure.effect4:hover figcaption::before {
	transform: scale3d(2, 2, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0);
}
figure.effect4:hover p {
	opacity: 1;
	transition-delay: .1s;
}
/*
*effect5
*/
figure.effect5 {
	background: #fff;
}
figure.effect5 img {
	opacity: .95;
	transition: transform .35s;
	transform-origin: 50% 50%;
}
figure.effect5 h2 {
	transition: transform .35s;
	transform: translate3d(0, 20px, 0);
}
figure.effect5 p {
	opacity: 0;
	transition: opacity .35s, transform .35s;
	transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);
}
figure.effect5 figcaption {
	padding: 2rem;
}
figure.effect5:hover img {
	transform: scale3d(.95, .95, 1);
}
figure.effect5:hover h2 {
	transform: translate3d(0, 0, 0);
}
figure.effect5:hover p {
	opacity: 1;
	transform: perspective(1000px) rotate3d(1, 0, 0, 0);
}
/*
* effect6
*/
figure.effect6 {
	perspective: 1000px;
	background: #B2858A;
}
figure.effect6 img {
	transition: opacity .35s, transform .35s;
	transform: translate3d(0, 0, 150px);
	opacity: .8;
}
figure.effect6 figcaption::before,
figure.effect6 figcaption::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80%;
	height: 1px;
	background: #fff;
	content: '';
	transition: opacity .35s, transform .35s;
	transform: translate3d(-50%, -50%, 0);
}
figure.effect6 h2 {
	transform: translate3d(0, -50%, 0) translate3d(0, -150%, 0);
}
figure.effect6 h2,
figure.effect6 p {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	transition: transform .35s;
}
figure.effect6 p {
	padding: .2rem 2rem;
	transform: translate3d(0, -50%, 0) translate3d(0, 150%, 0);
}
figure.effect6:hover img {
	opacity: .6;
	transform: translate3d(0, 0, 0);
}
figure.effect6:hover figcaption::before {
	opacity: .5;
	transform: translate3d(-50%, -50%, 0) rotate(45deg);
}
figure.effect6:hover figcaption::after {
	opacity: .5;
	transform: translate3d(-50%, -50%, 0) rotate(-45deg);
}
figure.effect6:hover h2 {
	transform: translate3d(0, -50%, 0) translate3d(0, -100%, 0);
}
figure.effect6:hover p {
	transform: translate3d(0, -50%, 0) translate3d(0, 100%, 0);
}







@media (max-width: 1199px) {
figure.effect2 h2 {
	margin: 35% 0 10px 0;
	transition: transform .35s;
	transform: translate3d(0, 100%, 0);
	font-size:16px;
	font-weight:500;
}







} /* end*/











@media (max-width: 991px) {
.button_base {  margin: 0;    border: 0;
    position: relative;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -50%;
    width:100%; line-height:40px; height:40px;  font-size:16px; font-weight:600; text-align:center; 
    text-align: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-user-select: none;
    cursor: default;

}
.b05_3d_roll{perspective: 460px;}

.b05_3d_roll div {  height: 40px; line-height:40px; font-size:16px; font-weight:600;


}


.b05_3d_roll div:nth-child(1) {
    color: #fff;
    background-color: #000000;
    transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform-origin: 50% 50% -20px;
    -webkit-transform-origin: 50% 50% -20px;
    -moz-transform-origin: 50% 50% -20px;

}

.b05_3d_roll div:nth-child(2) {
    color: #fff;
    background-color: #d71920;
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform-origin: 50% 50% -20px;
    -webkit-transform-origin: 50% 50% -20px;
    -moz-transform-origin: 50% 50% -20px;

}


figure.effect2 h2 {
	
transition: transform .35s;
transform: translate3d(0, 100%, 0);
font-size:15px;
margin: 32% 0 10px 0;


}

figure img{height:auto;}

figure figcaption {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: #fff;
}

}/*end*/


@media (max-width:768px) {

.button_base {
    font-size: 14px;
}


.b05_3d_roll div {
  

  font-size: 14px;

}



}/*end*/