/*@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

@font-face {
	font-family: 'NanumBarunGothic';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/NanumBarunGothic.eot);
	src: url(../fonts/NanumBarunGothic.eot?#iefix) format('embedded-opentype'),
	url(../fonts/NanumBarunGothic.woff) format('woff'),
	url(../fonts/NanumBarunGothic.ttf) format('truetype')
}
@font-face {
	font-family: 'NanumGothic';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/NanumGothic-Regular.eot);
	src: url(../fonts/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),
	url(../fonts/NanumGothic-Regular.woff) format('woff'),
	url(../fonts/NanumGothic-Regular.ttf) format('truetype')
}
*/

/* CSS Reset */
html,body{height: 100%; margin:0;padding:0;}
body{font:12px/1.5 "맑은 고딕", Malgun Gothic, Dotum, "굴림", Gulim, Arial, sans-serif;background:#fff;color:#393939;}
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,tbody,tfoot,thead,th,td,select{margin:0;padding:0;}
input,textarea,select,td,th{font:12px/1.5 "돋움", Dotum, "굴림", Gulim, Arial, sans-serif;color:#393939;vertical-align:middle;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
table{width:100%;table-layout:fixed;border-spacing:0;border-collapse:collapse;}
ol,ul,li{list-style:none;}
hr, legend, caption, .hidden{position:absolute;left:-5000px;top:0;visibility:hidden;overflow:hidden;line-height:0.1%;font-size:0.1%;width:0.1%;height:0.1%;}
caption{position:relative;}
img,fieldset{max-width: 100%; vertical-align: top; border:0 none;}
label,button{cursor:pointer;}
em,address{font-style:normal;}
iframe {border: 0;}
input {vertical-align: top;}
a:link,a:visited{color:#393939;text-decoration:none;}
a:hover,a:active,a:focus{text-decoration:underline;}
button {margin: 0; padding: 0; overflow: visible; border: 0; background: none;}
span.empty {width: 0; height: 100%; display: inline-block; vertical-align: middle;}
*+html span.empty {display: inline;}
.em {font-weight: bold; color: #f00;}


#accessibility .hidden{display:block;visibility:visible;background:#000; color:#fff; text-align:center; text-decoration:none;}
#accessibility .hidden:focus{padding: 10px 0; position:static; text-indent: 0; visibility:visible; overflow:visible; width:100%; font-weight:bold; font-size:12px;}

.career {padding: 0 15px;}
.num03Tit {display: block; margin: 0 0 10px; text-align: center; /*font-family: 'NanumBarunGothic';*/ font-size: 24px; color: #f00;}

/* Index */

#wrap.val {height: 100%; background: url(../images/page6_bg.jpg) no-repeat; background-size: cover; background-position: 50% 50%;}
#wrap.val > form,
#wrap.val div {height: 100%; text-align: center;}
#wrap.val label {width: 100%; display: inline-block; margin: 0 0 0 -5px; vertical-align: middle;}
*+html #wrap.val label {display: inline;}
#wrap.val label input {width: 50%; padding: 0 10px; font-family: Malgun Gothic; border: 0;}
#wrap.val label input[type=password] {min-width: 320px; height: 30px; margin: 0 0 10px; line-height: 30px;}
#wrap.val label input[type=submit] {height: 30px; line-height: 30px; cursor: pointer; background: #ff0;}

/* Layout */


#wrap {min-width: 320px; height: 100%; position: relative;}
#if {width: 96%; display: none; z-index: 9999; padding: 2%; line-height: 50px; position: absolute; top: 50%; left: 0; margin: -64px 0 0 0; text-align: center; font-size: 36px; color: #fff; background: #f00;}
#if span {border: 1px solid #fff; text-align: center; vertical-align: middle;}
#if span a {text-decoration: none; color: #fff;}
#if span a:hover {color: #f00; background: #fff;}
#if span a:focus {color: #f00; background: #fff;}


#header {width: 96%; height: 80px; padding: 0 2%; position: fixed; z-index: 9999; zoom: 1; font-size: 0; background: #fff;}
/*h1 {height: 100%; float: left; line-height: 80px;}*/
span.test {width: 0; height: 100%; display: inline-block; vertical-align: middle;}
h1 a {height: 50px; display: inline-block; vertical-align: middle;}
*+html h1 a {display: inline;}
#header:after {content:""; display: block; clear: both;}

#gnb {height: 100%; float: right; font-size: 0;}
#gnb ul {zoom: 1; display: inline-block; vertical-align: middle;}
*+html #gnb ul {display: inline; vertical-align: middle;}
#gnb ul:after {content:""; display: block; clear: both;}
#gnb ul li {height: 30px; float: left; line-height: 30px; text-align: center; font-size: 12px;}
#gnb ul li a {display: block; margin: 0 2px; letter-spacing: -1px; text-decoration: none;}
#gnb ul li:first-child a {margin-left: 0;}
#gnb ul li a.on {color: #000; border-bottom: 5px solid #000;}


#container {height: 100%; padding: 0 0 28px; box-sizing: border-box;}
.p {padding: 80px 0 0 0; overflow-y: auto;}

/* Page 01 */

#container #page01 {padding-bottom: 20px; background: url(../images/thumnail_01.png) no-repeat 100% 70%;}

.about_wrap {margin-top: 5%; padding: 0 5%; color: #333;}
.about_wrap h2 {margin-bottom: 20px; font-size: 18px; /*font-family: 'NanumBarunGothic';*/ color: #f00;}

.about_wrap ol.profile {padding: 0 10px;}
.about_wrap ol.profile li {margin-bottom: 10px; font-size: 14px;}
.about_wrap ol.profile ol.carrer {margin-left: 15px;}
.about_wrap ol.profile ol.carrer li {margin: 0;}

/* Page 01 END */

/* Page 02 */

#page02 {width: 96%; overflow: hidden; padding: 120px 2% 60px 2%; background: url(../images/thumnail_03.png) no-repeat 100% 65%;}
#page02 div.wrap {color: #333;}
#page02 div.wrap h3 {font-size: 18px;}
#page02 div.wrap h3 > a {padding: 2%;}
#page02 div.wrap h4 {margin-top: 10px; font-size: 16px; font-weight: bold;}
#page02 div.wrap ul {zoom: 1; text-align: center; font-size: 0;}
#page02 div.wrap ul:after {content:""; display: block; clear: both;}
#page02 div.wrap ul li {width: 30%; margin: 2%; padding: 1%; overflow-x: hidden; display: inline-block; vertical-align: top; text-align: center; border-radius: 10px; box-sizing: border-box; border: 1px solid #000; background: #fff;}
*+html #page02 div.wrap ul li {display: inline;}
#page02 div.wrap div.text {padding: 2%;}
#page02 div.wrap ul li div.sub_wrap {display: none;}
#page02 div.wrap ul li > h3 > a {display: block; letter-spacing: -1px; /*font-family: 'NanumBarunGothic';*/ text-decoration: none;}
#page02 div.wrap ul li.on {border: 1px solid #f00;}
#page02 div.wrap ul li.on h3 > a {color: #f00;}
#page02 div.wrap ul li div.image {margin-top: 10px;}
#page02 div.wrap ul li div.image img {margin: 10px 0 0 0;}
#page02 div.wrap ul li div.image img:first-child {margin: 0;}
#page02 div.wrap ul li p {margin-top: 10px; font-size: 14px; text-align: left;}
/*
#page02 div.wrap ul li p > a {white-space: nowrap;}
*/

/* Page 02 END */
#container #page03 {height: auto !important; min-height: 1000px; position: relative; margin: 0 auto !important; padding: 80px 0 134px;}


#page03 .m_box .image {overflow: hidden !important; position: relative; /* margin-bottom: 10px; */}
#page03 .swipe {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 9999;}
#page03 .swipe:before {content:""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; opacity: 0.5; background: #000;}
#page03 .swipe > div {width: 100%; display: inline-block; position: relative; top: 88px; padding: 148px 0 0 0; font-size: 14px; font-weight: bold; color: #f00; background:  url(../images/swipeHover.png) no-repeat 50% 0; background-size: 128px 128px;}
#page03 .swipe > div > div {background: #fff;}
#page03 .m_box .image > ul > li {margin: 0;}
#page03 .m_box .image > ul > li:first-child {margin: 0;}
#page03 .m_box .info {padding: 10px; color: #333; text-align: left;}
#page03 .m_box .info h3 {letter-spacing: -1px; font-size: 18px; /*font-family: 'NanumBarunGothic';*/ margin-bottom: 10px; }
#page03 .m_box {border-radius: 10px; border: 1px solid #000; background: #fff;}
#page03 .m_box > div {position: relative; padding: 5px 0;}
#page03 .m_box .info ol li {font-size: 14px;}
#page03 .m_box .info ol li ol {padding-left: 14px;}
#page03 .m_box .info ol li ol li {padding: 0 0 0 15px;}
#page03 .m_box .info ol li ol li:first-child {margin: 0;}
#page03 .m_box .info ol li ol li a {max-width: 90%; display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #f00;}
*+html #page03 .m_box .info ol li ol li a {display: inline;}
#page03 .btn {width: 100%; position: fixed; bottom: 28px; left: 0; z-index: 9999; padding: 20px 0; text-align: center;}
#page03 .btn button {height: 46px; display: inline-block; padding: 0 40px; line-height: 40px; vertical-align: top; font-size: 24px; font-family: Malgun Gothic; color: #333; border: 2px solid #ccc; border-radius: 10px; background: #fff;}
#page03 .btn .em {display: none; padding: 5px 10px; text-align: center; font-size: 18px; background: #ccc;}

#footer {width: 98%; padding: 5px 1%; position: fixed; bottom: 0; left: 0; z-index: 30; text-align: center; color: #fff; background: #999;}
#footer address,
#footer strong {display: inline-block; vertical-align: top;}
*+html #footer address,
*+html #footer strong {display: inline;}
#footer strong,
#footer address span:first-child {margin: 0 5px 0 0;}


.sc {text-align: center; font-size: 18px;}
.sc > span {display: block;}
.sc > span > a {display: inline; font-size: 18px; font-weight: bold;}
.jsonWrap {margin: 10px;}
.jsonWrap > h1 {height: auto; float: none; margin: 0 0 10px; line-height: 1.5; font-size: 36px;}
.jsonWrap .img {margin: 0 0 30px;}
.jsonWrap > ol > li {padding: 20px 0 0 0; border-top: 1px solid #f00;}
.jsonWrap > ol > li:first-child {border: 0;}
.jsonWrap dl {margin: 0 0 30px;}
.jsonWrap dt {margin: 0 0 15px; font-size: 24px;}
.jsonWrap dd {font-size: 16px;}
.jsonWrap dd > ol {}
.jsonWrap dd > ol > li {margin: 5px 0 0 0;}
.jsonWrap dd > ol > li:first-child {margin: 0;}

.m_box .more:focus,
.m_box .more:active {opacity: 1;}
.m_box .prev,
.m_box .next {width: 20px; height: 20px; position: absolute; top: 50%; z-index: 500; margin: -10px 0 0 0; color: #fff; border-radius: 100%; opacity: 0.5; background: #f00;}
.m_box .prev {left: 5px;}
.m_box .next {right: 5px;}

/* masonry 플러그인 */

#mar_list {overflow: hidden; margin: 0 auto;}
#mar_list > .on {border: 1px solid #f00; box-sizing: border-box;}

/* The animation code */
@keyframes page3Animation {
	0% {border-color: #ff0;}
	25% {border-color: #00f;}
	50% {border-color: #0f0;}
	75% {border-color: #0ff;}
	100% {border-color: #f00;}
}

/* The element to apply the animation to */
#mar_list > .on {
/*
	border-width: 1px;
	border-style: solid;
	border-color: #f00;
	animation-name: page3Animation;
	animation-duration: 1.5s;
*/
}

.m_box {width: 330px; margin: 5px; overflow: hidden; z-index: 10; font-size: 12px; float: left; text-align: center; /* -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; */ box-sizing: border-box; background: #00f00;}
.m_box a {display: block;}
.m_box img {width: auto !important; max-width: 288px !important; margin: 10px 0 0 0;/* -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; */}
.m_box img:first-child {margin: 0;}

/*
.col1 {width: 400px;}
.col2 {width: 300px;}
.col3 {width: 250px;}
.col4 {width: 300px;}
.col5 {width: 200px;}
.col6 {width: 180px;}
*/


.transitions-enabled.masonry,
.transitions-enabled.masonry .masonry-brick {
  -webkit-transition-duration: 0.7s;
     -moz-transition-duration: 0.7s;
      -ms-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
}

.transitions-enabled.masonry {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.transitions-enabled.masonry  .masonry-brick {
  -webkit-transition-property: left, right, top;
     -moz-transition-property: left, right, top;
      -ms-transition-property: left, right, top;
       -o-transition-property: left, right, top;
          transition-property: left, right, top;
}


/* disable transitions on container */
.transitions-enabled.infinite-scroll.masonry {
  -webkit-transition-property: none;
     -moz-transition-property: none;
      -ms-transition-property: none;
       -o-transition-property: none;
          transition-property: none;
}



@media all and (max-width: 1024px){
#container {height: auto;}
#container #page01 {height: auto; background: none;}
#container #page02 {background: none;}
#container #page01 .about_wrap {height: 469px; position: relative; padding: 0; background: url(../images/g.png) no-repeat 50% 50%;}
#container #page01 .sub_wrap {width: 220px; height: 363px; overflow-y: auto; position: absolute; top: 55px; left: 50%; margin-left: -110px;}

#page02 {width: 100%; height: auto; padding: 100px 0 0 0;}
#page02 div.wrap ul {text-align: center;}
#page02 div.wrap ul li {width: 75%; padding: 2% 0; float: none; margin: 2% auto 0; display: block; text-align: center;}
#page02 div.wrap ul li:first-child {margin-top: 0;}
#page03 .m_box .info ol li ol {padding-left: 0;}
#page03 .m_box .info ol li ol li a {color: #f00;}
}

@media all and (max-width: 656px){
div#page03 .m_box {width: 94%; margin: 1%; padding: 2%; overflow: hidden;}
#page02 div.wrap ul li {width: 98%;}
}




#container {
	position:absolute; z-index:1;
/*	-webkit-touch-callout:none;*/
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	width: 100%;
}



/* Swipe */


/* Swipe */


.swiper-container-horizontal>.swiper-pagination {bottom: -100px;}
.swiper-container {/*width: 50%; height: 50%;*/ overflow: visible; margin: 0 auto;}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;

/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
/*
.swiper-slide > a {width: 33%; display: block; border: 1px solid #e6e6e6;}
*/
img {max-width: 100%;}

.sWrap {overflow: hidden; padding: 0 0 20px; /*padding: 0 0 200px;*/}
.swiper-button-next,
.swiper-button-prev {display: none;}


.swiper-container {
position: relative;
overflow: visible !important;
/* Fix of Webkit flickering */
z-index: 1;
}
.swiper-container-no-flexbox .swiper-slide {
float: left;
}
.swiper-container-vertical > .swiper-wrapper {
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
-webkit-transform: translate3d(0px, 0, 0);
-moz-transform: translate3d(0px, 0, 0);
-o-transform: translate(0px, 0px);
-ms-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-ms-fles-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.swiper-container-free-mode > .swiper-wrapper {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-slide {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
}
/* a11y */
.swiper-container .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000;
}
/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
-ms-touch-action: pan-y;
touch-action: pan-y;
}
.swiper-wp8-vertical {
-ms-touch-action: pan-x;
touch-action: pan-x;
}
/* Arrows */
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
width: 27px;
height: 44px;
margin-top: -22px;
z-index: 10;
cursor: pointer;
-moz-background-size: 27px 44px;
-webkit-background-size: 27px 44px;
background-size: 27px 44px;
background-position: center;
background-repeat: no-repeat;
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
left: 10px;
right: auto;
}
.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
right: 10px;
left: auto;
}
.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
/* Pagination Styles */
.swiper-pagination {
position: absolute;
text-align: center;
-webkit-transition: 300ms;
-moz-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 10;
display: none;
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0;
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: 0.2;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer;
}
.swiper-pagination-white .swiper-pagination-bullet {
background: #fff;
}
.swiper-pagination-bullet-active {
opacity: 1;
background: #ff3e03;
}
.swiper-pagination-white .swiper-pagination-bullet-active {
background: #fff;
}
.swiper-pagination-black .swiper-pagination-bullet-active {
background: #000;
}
.swiper-container-vertical > .swiper-pagination {
right: 10px;
top: 50%;
-webkit-transform: translate3d(0px, -50%, 0);
-moz-transform: translate3d(0px, -50%, 0);
-o-transform: translate(0px, -50%);
-ms-transform: translate3d(0px, -50%, 0);
transform: translate3d(0px, -50%, 0);
}
.swiper-container-vertical > .swiper-pagination .swiper-pagination-bullet {
margin: 5px 0;
display: block;
}
.swiper-container-horizontal > .swiper-pagination {
position: static;
padding: 10px 0 0 0;
}
.page_02 {position: static;}
.page_02 .swiper-pagination-bullet,
.swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet {
margin: 0 5px;
text-align: center;
}
/* 3D Container */
.swiper-container-3d {
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
-o-perspective: 1200px;
perspective: 1200px;
}
.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
/* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 3.6-15 */
background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Opera 11.10-12.00 */
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 16+, IE10, Opera 12.50+ */
}
.swiper-container-3d .swiper-slide-shadow-right {
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
/* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 3.6-15 */
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Opera 11.10-12.00 */
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 16+, IE10, Opera 12.50+ */
}
.swiper-container-3d .swiper-slide-shadow-top {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
/* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 3.6-15 */
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Opera 11.10-12.00 */
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 16+, IE10, Opera 12.50+ */
}
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
/* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 3.6-15 */
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Opera 11.10-12.00 */
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 16+, IE10, Opera 12.50+ */
}
/* Coverflow */
.swiper-container-coverflow .swiper-wrapper {
/* Windows 8 IE 10 fix */
-ms-perspective: 1200px;
}
/* Fade */
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.swiper-container-fade .swiper-slide {
pointer-events: none;
}
.swiper-container-fade .swiper-slide-active {
pointer-events: auto;
}
/* Cube */
.swiper-container-cube {
overflow: visible;
}
.swiper-container-cube .swiper-slide {
pointer-events: none;
visibility: hidden;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
width: 100%;
height: 100%;
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
.swiper-container-cube .swiper-slide-next + .swiper-slide {
pointer-events: auto;
visibility: visible;
}
.swiper-container-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
-webkit-filter: blur(50px);
filter: blur(50px);
}
.swiper-container-cube.swiper-container-vertical .swiper-cube-shadow {
z-index: 0;
}
/* Scrollbar */
.swiper-scrollbar {
border-radius: 10px;
position: relative;
-ms-touch-action: none;
background: rgba(0, 0, 0, 0.1);
}
.swiper-container-horizontal > .swiper-scrollbar {
position: absolute;
left: 1%;
bottom: 3px;
z-index: 50;
height: 5px;
width: 98%;
}
.swiper-container-vertical > .swiper-scrollbar {
position: absolute;
right: 3px;
top: 1%;
z-index: 50;
width: 5px;
height: 98%;
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
left: 0;
top: 0;
}
.swiper-scrollbar-cursor-drag {
cursor: move;
}
/* Preloader */
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
-webkit-transform-origin: 50%;
-moz-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
-moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
animation: swiper-preloader-spin 1s steps(12, end) infinite;
}
.swiper-lazy-preloader:after {
display: block;
content: "";
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-position: 50%;
-webkit-background-size: 100%;
background-size: 100%;
background-repeat: no-repeat;
}
.swiper-lazy-preloader-white:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
@-webkit-keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes swiper-preloader-spin {
100% {
transform: rotate(360deg);
}
}