/* layout */
body {background: url(../img/header_bg.jpg) repeat-x center top;}
#header {}
#nav {background-color: #f6fdff;}
#title {background-color: #eaf7fd;}
#contents .container {border-right: 1px solid #dbdbdb; border-left: 1px solid #dbdbdb;}
#cont_left {float: left; width: 250px;}
#cont_center {overflow: hidden; min-height: 1330px; margin-right: 250px; border-right: 1px solid #dbdbdb; border-left: 1px solid #dbdbdb;}
#cont_right {position: absolute; right: 0; top: 0; width: 250px;}
#footer {border-top: 1px solid #dbdbdb;}

/* container */
.container {position: relative; width: 1200px; margin: 0 auto; /*background-color: rgba(0, 0, 0, 0.3);*/}

/* header */
.header {height: 327px;}
.header .header_menu {text-align: right;}
.header .header_menu a {color: #fff; display: inline-block; padding: 8px 0 6px 10px; transition: color 0.3s ease; font-family: 'Abel', sans-serif;}
.header .header_menu a:hover {color: #ccc;}

.header .header_tit {text-align: center; text-transform: uppercase; margin-top: 55px; font-family: 'Abel', sans-serif;}
.header .header_tit h1 {font-size: 30px; color: #fff; display: inline-block; background: #51b0dc; padding: 5px 30px 5px 30px; letter-spacing: 2px; font-weight: 900; transition: box-shadow 0.25s ease-in-out;}
.header .header_tit h1:hover {box-shadow: inset -9em 0 0 0 #257fac, inset 9em 0 0 0 #257fac;}
.header .header_tit a {font-size: 16px; color: #fff; background: #4a9abf; display: inline-block; padding: 10px 20px 10px 20px; margin-top: -7px; transition: box-shadow 0.25s ease-in-out;}
.header .header_tit a:hover {box-shadow: 0 0 0 5px rgba(75, 154, 191, 0.9) inset, 0 0 0 100px rgba(0, 0, 0, 0.1) inset;}

/* header icon */
.header .header_icon {text-align: center; margin-top: 40px; padding-bottom: 45px;}
.header .header_icon li {display: inline; margin: 0 2px;}
.header .header_icon li a {position: relative; background-color: #3192bf; border-radius: 50%; width: 60px; height: 60px; color: #fff; display: inline-block; font-size: 35px; line-height: 60px; transition: all 0.3s ease;}
.header .header_icon li a span {position: absolute; left: 50%; top: -40px; transform: translateX(-50%); font-size: 12px; line-height: 1.6; background: #3292bf; padding: 3px 9px; border-radius: 6px 0; opacity: 0; transition: all 0.3s ease;}
.header .header_icon li a span:before {content: ''; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border-top: 5px solid #3192bf; border-left: 5px solid transparent; border-right: 5px solid transparent;}
.header .header_icon li a:hover span {opacity: 1; top: -33px;}
.header .header_icon li a:hover {box-shadow: 0 0 0 3px rgba(75, 154, 191, 0.9) inset, 0 0 0 100px rgba(0, 0, 0, 0.1) inset;}

/* nav */
.nav {overflow: hidden; padding: 25px 0; display: none;}
.nav > div {float: left; width: 40%;}
.nav > div:last-child {width: 20%;} 
.nav > div ol {overflow: hidden;}
.nav > div li {float: left; width: 50%; position: relative; padding-left: 8px; box-sizing: border-box;}
.nav > div:last-child li {width: 100%;}
.nav > div li:before {content: ''; width: 3px; height: 3px; background-color: #25a2d0; border-radius: 50%; position: absolute; left: 0; top: 6px;}
.nav > div h3 {font-size: 18px; color: #25a2d0; font-weight: bold; margin-bottom: 4px;}
.nav > div li a {position: relative;}
.nav > div li a:after {content: ''; display: inline-block; width: 0; height: 1px; background-color: #25aad0; transition: all .2s ease-out; position: absolute; bottom: 0; left: 0;}
.nav > div li:hover a::after {width: 100%;}

/* title */
.title {position: relative; text-align: center;}
.title h2 {font-family: 'able'; font-size: 39px; color: #0093bd; padding: 5px 0; text-align: center;}
.title .btn {position: absolute; right: 0; top: 5px; width: 60px; height: 60px; line-height: 60px; background: #3192bf; color: #fff; font-size: 35px; border-radius: 50%; transition: all 0.3s ease;}
.title .btn:hover {box-shadow: 0 0 0 3px rgba(71, 154, 191, 0.9) inset, 0 0 0 100px rgba(0, 0, 0, 0.1) inset;}

/* contents */
.column {padding: 15px; border-bottom: 1px solid #dbdbdb;}
.column .col_tit {font-size: 20px; color: #2f7fa6; padding-bottom: 5px;}
.column .col_desc {border-bottom: 1px dashed #dbdbdb; padding-bottom: 15px; margin-bottom: 15px; color: #878787; line-height: 18px;}
.column.col1 {}
.column.col2 {}
.column.col3 {border-bottom: 0; overflow: hidden;}
.column.col4 {}
.column.col5 {}
.column.col6 {border-bottom: 0;}
.column.col7 {}
.column.col8 {}
.column.col9 {border-bottom: 0;}

/* menu */
.menu {}
.menu li {position: relative;}
.menu li a {font-size: 16px; text-transform: uppercase; color: #878787; border-bottom: 1px solid #dbdbdb; padding: 10px; display: block; transition: box-shadow 0.34s ease, background 0.34s ease;}
.menu li a i {position: absolute; right: 10px; top: 15px;}
.menu li a:hover {box-shadow: inset 180px 0 0 0 rgba(36, 130, 174, 0.7); color: #fff; background: rgba(36, 130, 174, 0.9);}

/* notice */
.notice1 {position: relative;}
.notice1 h5 {font-size: 14px; color: #2f7fa6; padding-bottom: 5px;}
.notice1 li {position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 8px;}
.notice1 li:before {content:''; width: 3px; height: 3px; border-radius: 50%; background: #449ce2; position: absolute; left: 0; top: 10px;}
.notice1 .more {position: absolute; right: 0; top: 3px; color: #878787; text-transform: uppercase; font-size: 10px;}

/* notice 2 */
.notice2 {position: relative;}
.notice2 h5 {font-size: 14px; color: #2f7fa6; padding-bottom: 5px;}
.notice2 li {position: relative; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; padding-left: 8px; padding-bottom: 5px; max-height: 40px;}
.notice2 li:before {content:''; width: 3px; height: 3px; border-radius: 50%; background: #449ce2; position: absolute; left: 0; top: 6px;}
.notice2 .more {position: absolute; right: 0; top: 3px; color: #878787; text-transform: uppercase; font-size: 10px;}

/* blog 1 */
.blog1 figure {width: 100%; margin: 0 auto;}
.blog1 img {width: 100%;}
.blog1 .img-retina {display: none;}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
        only screen and (min-device-pixel-ratio: 1.5),
        only screen and (min-resolution: 1.5dppx) {
        .blog1 .img-retina {display: initial;}
        .blog1 .img-normal {display: none;}
}

/* blog 2 */
.blog2 h5 {color: #fff; text-align: center; padding: 30px 30px; text-transform: uppercase;}
.blog2 .img-retina p {padding-top: 5px; overflow: hidden;}
.blog2 .img-retina {background-image: url(../img/blog4_@1.jpg); background-size: cover;}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
        only screen and (min-device-pixel-ratio: 2),
        only screen and (min-resolution: 2dppx) {
        .blog2 .img-retina {background-image: url(../img/blog4_@2.jpg);}
}

@media only screen and (-webkit-min-device-pixel-ratio: 3),
        only screen and (min-device-pixel-ratio: 3),
        only screen and (min-resolution: 3dppx) {
        .blog2 .img-retina {background-image: url(../img/blog4_@3.jpg);}
}

/* image slide */
.slider figure {position: relative;}
.slider figcaption {position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; box-sizing: border-box; background-color: rgba(0,0,0,0.5); color: #fff; font-size: 18px;}
.slider figcaption em {display: block; font-weight: bold; font-size: 28px; text-transform: uppercase; font-family: 'Abel', sans-serif; opacity: 0; transition: all .84s ease; transform: translateX(50px);}
.slider figcaption span {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0; transition: all .84s .2s ease; transform: translateX(50px);}
.slider .slick-active figcaption em {opacity: 1; transform: translateX(0);}
.slider .slick-active figcaption span {opacity: 1; transform: translateX(0);}

.slider .slick-dots {display: block; width: 100%; text-align: center;}
.slider .slick-dots li {display: inline-block; width: 15px; height: 15px; margin: 5px;}
.slider .slick-dots li button {font-size: 0; line-height: 0; display: block; width: 15px; height: 15px; cursor: pointer; background: #5dbfeb; border-radius: 50%;}
.slider .slick-dots li.slick-active button {background: #2b91c8;}
.slider .slick-prev {position: absolute; left: 0; bottom: 0; z-index: 1000; width: 30px; height: 30px; display: inline-block; text-indent: -9999px; font: normal normal normal 14px/1 FontAwesome;}
.slider .slick-prev::before {content:"\f053"; color: #5dbfeb; text-indent: 0; position: absolute; left: 9px; top: 8px;}
.slider .slick-next {position: absolute; right: 0; bottom: 0; z-index: 1000; width: 30px; height: 30px; display: inline-block; text-indent: -9999px; font: normal normal normal 14px/1 FontAwesome;}
.slider .slick-next::before {content:"\f054"; color: #5dbfeb; text-indent: 0; position: absolute; left: 11px; top: 8px;}

/* light box */
.square a {position: relative; overflow: hidden; float: left; width: 19%; margin: 0.5%;}
.square a img {width: 100%; display: block;}
.square a em {background: rgba(0, 0, 0, 0.77); color: #fff; width: 100%; text-align: center; position: absolute; left: 0; bottom: -30px; opacity: 1; transition: all .3s ease;}
.square a:hover em {bottom: 0; background: rgba(0, 0, 0, 0.57);}
.square a:nth-child(1):hover img {filter: blur(2px);}
.square a:nth-child(2):hover img {filter: brightness(50%);}
.square a:nth-child(3):hover img {filter: contrast(10%);}
.square a:nth-child(4):hover img {filter: grayscale(100%);}
.square a:nth-child(5):hover img {filter: hue-rotate(120deg);}
.square a:nth-child(6):hover img {filter: invert(100%);}
.square a:nth-child(7):hover img {filter: opacity(10%);}
.square a:nth-child(8):hover img {filter: saturate(10%);}
.square a:nth-child(9):hover img {filter: sepia(120%);}
.square a:nth-child(10):hover img {filter: sepia(120%) hue-rotate(120deg);}

/* Video */
.video {position: relative; width: 100%; padding-bottom: 56.25%;}
.video iframe {position: absolute; width: 100%; height: 100%;}

/* footer */
.footer {text-align: center; padding: 30px 50px;}
.footer li {position: relative; display: inline; padding: 0 7px 0 10px; white-space: nowrap;}
.footer li:before {content: ''; width: 1px; height: 12px; background-color: #dbdbdb; position: absolute; left: 0; top: 2px;}
.footer li:first-child::before {width: 0;}
.footer address {padding-top: 15px;}

/* side effect 1 */
.side1 {position: relative; perspective: 600px; display: block;}
.side1 .front {transform-style: preserve-3d; transform: rotateY(0deg); transition: all 0.5s ease-in-out; backface-visibility: hidden; margin: 0 auto;}
.side1 .back {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; transform-style: preserve-3d; color: #fff; background: #4038dc; transform: rotateY(-180deg); transition: all 0.5s ease-in-out; backface-visibility: hidden;}
.side1 .back i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 50px;}
.side1:hover .front {transform: rotateY(180deg);}
.side1:hover .back {transform: rotateY(0deg); z-index: 1;}

/* side effect 2 */
.side2 {position: relative; display: block; perspective: 600px;}
.side2 .front {margin: 0 auto; transform-style: preserve-3d; transform: rotateY(0deg); transition: all 0.5s ease-in-out; backface-visibility: hidden;}
.side2 .back {margin: 0 auto; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; transform-style: preserve-3d; transform: rotateY(-180deg); transition: all 0.5s ease-in-out; backface-visibility: hidden;}
.side2 .front figcaption {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translateZ(100px); display: block; text-align: center;}
.side2 .back figcaption {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translateZ(100px); display: block; text-align: center;}
.side2 figcaption {width: 60%;}
.side2 figcaption {color: #fff; font-size: 20px; font-family: Abel; font-weight: bold; background: rgba(0, 0, 0, 0.4); padding: 3px 10px;}
.side2:hover .front {transform: rotateY(180deg);}
.side2:hover .back {transform: rotateY(0deg); z-index: 1;}

/* side effect 3 */
.side3 {position: relative; overflow: hidden; background: #000; margin: 0 auto;}
.side3 figure {margin: 0 auto;}
.side3 figcaption {position: absolute; top: 50%; left: 50%; color: #fff; text-align: center; opacity: 0; text-transform: uppercase; transition: all 0.3s ease; transform: translate(350%, -50%) rotate(180deg);}
.side3 figcaption:after {content: ''; width: 100px; height: 100px; background: #000; border-radius: 50%; position: absolute; left: 50%; top: 50%; z-index: -1; transform: translate(-50%, -50%);}
.side3 figcaption h3 {font-size: 16px;}
.side3 figcaption em {display: block; font-weight: bold;}
.side3 figcaption img {display: block; transition: all 0.3s ease;}
.side3:hover img {opacity: 0.4;}
.side3:hover figcaption {transform: translate(-50%, -50%) rotate(0deg); opacity: 1;}


/* media query */
/* screen width 0 - 1220px */
@media (max-width: 1220px){
 .container {width: 100%;}
 .row {padding: 0 15px;}
 #contents .container {border: 0;}
 .title .btn {right: 5px;}
 .square a {width: 24%;}
 .square a:nth-child(5n) {display: none;}
}

/* screen width 0 - 1024px */
@media (max-width: 1024px){
 .square a {width: 32.3333%;}
 .square a:nth-child(5) {display: block;}
}

/* screen width 0 - 960px */
@media (max-width: 960px){
 #cont_right {position: static; width: 100%; border-top: 1px solid #dbdbdb;}
 #cont_center {margin-right: 0; border-right: 0;}
 .nav > div {float: none; width: 100%;}
 .nav > div:last-child {width: 100%;}
 .nav > div li {width: 33.3333%;}
 .nav > div:last-child li {width: 33.3333%;}
 .nav > div ol {margin-bottom: 10px;}

 #cont_right {overflow: hidden;}
 #cont_right .column {float: left; width: 33.3333%; box-sizing: border-box;}
 #cont_right .column.col7 {border-right: 1px solid #dbdbdb; border-bottom: 0;}
 #cont_right .column.col8 {border-right: 1px solid #dbdbdb; border-bottom: 0;}
}

/* screen width 0 - 768px */
@media (max-width: 768px){
 #cont_left {float: none; width: 100%;}
 #cont_center {border-left: 0;}
}

/* screen width 0 - 600px */
@media (max-width: 600px){
 .header {height: auto;}
 .header .header_tit {display: none;}
 .header .header_icon {display: none;}
 .title .btn {display: none;}

 .nav > div li {width: 50%;}
 .nav > div:last-child li {width: 50%;}

 .column.col1 .col_tit {display: none;}
 .column.col1 .col_desc {display: none;}
 .column.col1 .menu li a i {display: none;}
 .column.col1 {padding: 0; border-bottom: 0;}
 .column.col1 .menu ul {overflow: hidden;}
 .column.col1 .menu li {float: left; width: 33.3333%; border-right: 1px solid #dbdbdb ; text-align: center; box-sizing: border-box;}
 .column.col1 .menu li:nth-child(3n) {border-right: 0;}
 .column.col1 .menu li a {color: #fff; text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);}
 .column.col1 .menu li a:hover {box-shadow: none; background: rgba(36, 130, 174, 0.3);}
 .column.col2 {background: #fff;}
 .column.col4 {border-top: 1px solid #dbdbdb;}

 #cont_right .column {width: 50%;}
 #cont_right .column.col8 {border-right: 0;}
 #cont_right .column.col9 {display: none;}

 .slider figcaption {padding: 10px;}
 .slider figcaption em {font-size: 18px;}
 .slider figcaption span {font-size: 14px;}

 .square a {width: 49%;}
 .square a:nth-child(5) {display: none;}
}

/* screen width 0 - 320px */
@media (max-width: 320px){
 .nav > div li {width: 100%;}
 .nav > div:last-child li {width: 100%;}

 #cont_right .column {width: 100%;}
 #cont_right .column.col7 {border-right: 0; border-bottom: 1px solid #dbdbdb;}

 .square a {width: 100%; margin-right: 0; margin-left: 0;}
}