@charset "utf-8";
/*
 * Name     : main.css
 * Version  : 1.0
 * Author   : onepixel studio
 * Date     : YYYY-MM-DD
 ---------------------------------------------------
 Table of contents
 ---------------------------------------------------
    01. hero
    02. what we do
    03.
    04.
---------------------------------------------------
*/
section.main {padding:60px 0}
section.main .col-title, section.main .title  {margin-bottom:30px}
section.main .col-title > h3, section.main .title > h3 {font-size:32px; font-weight:100; color:#000; letter-spacing:-0.04em}
section.main .col-buttons .fraction {position: static; display: inline-block; width: auto; font-size:14px; font-weight:300; color:#9a9a9a; margin-right: 10px; vertical-align: middle}
section.main .col-buttons .fraction .swiper-pagination-current {color: #000}
section.main .col-buttons button {display:inline-block; padding:0; margin:0; outline: none; line-height:30px; border:1px solid #d9d9d9; width:32px; height:32px; background-color:#fff}
section.main .col-buttons button:last-child {margin-left:-5px}

/* ------------------------------
 * hero
------------------------------ */
.hero {position:relative; margin-top:80px; height:650px}
.hero .swiper-slide {height:100%; background-size:cover; background-repeat: no-repeat; background-position:center}
.hero .container {position:relative}
.hero .slide-caption h2 {font-size:18px; font-weight:600; color:#f7a337; letter-spacing:-0.02em; margin-bottom:30px; line-height:0}
.hero .slide-caption h3 {font-size:48px; font-weight:700; color:#fff; letter-spacing:-0.04em; line-height:1.2; margin-bottom:30px}
.hero .slide-caption h3 span {position:relative; z-index:1}
.hero .slide-caption h3 span:after {content:''; display:block; width:100%; height:50px; position:absolute; top:13px; left:0; z-index:-1; background-color:#000}
.hero .slide-caption p {font-size: 18px; color: #fff; letter-spacing: -0.04em; line-height: inherit}
.hero .slide-caption p + p {margin-top:5px}
.hero .slide-caption .button-wrapper {margin-top:30px}
.hero .swiper-arrow-primary {margin-top: -382px; z-index: 20}
.hero .swiper-button-prev {left: -60px}
.hero .swiper-button-next {right: -60px}
.hero .pagination-wrapper {position: absolute; bottom: 60px; left: 0; right: 0; font-size: 0; text-align: center; z-index: 10}
.hero .pagination-wrapper .swiper-pagination {position: static; display: inline-block; width: auto; margin-right: 10px; vertical-align: middle}
.hero .pagination-wrapper .swiper-pagination .swiper-pagination-bullet {width: 10px; height: 10px; margin: 0 10px; border-radius: 5px}
.hero .pagination-wrapper .swiper-pagination .swiper-pagination-bullet-active {width: 30px; background-color: #f7a337}
.hero .pagination-wrapper .swiper-toggle-controller {width: 30px; height: 30px; font-size: 18px; color: #000; line-height: 1; padding: 0; border: 0; border-radius: 50%; background-color: #fff; box-shadow: 0 4px 11.04px 0.96px rgba(0,0,0,0.12); outline: 0}
.hero .swiper-notification {display: none}


/* ------------------------------
 * about
------------------------------ */
.about {padding:80px 0}
.about h3 {font-size:40px; font-weight:100; color:#111; letter-spacing:-0.04em; line-height:1.4; text-align:center}
.about h3 strong {position:relative; font-weight:500}
.about h3 strong:after {content:''; display:block; position:absolute; bottom:0; left:0; right:0; width:100%; height:20px; background-color:#f7a337; opacity:0.34; z-index:-2}

/* ------------------------------
 * course section
------------------------------ */
.course {padding-top:0 !important}
.course .row-course .col-items .items-inner {position: relative}
.course .row-course .col-items .items-inner .img-box {position:relative;background-size:cover; background-repeat:no-repeat; background-position:center}
.course .row-course .col-items .items-inner .img-box:after {content:''; position: absolute; top:0; left:0; width:100%; height:100%; background-color:#000; opacity:0.3; transition:0.5s; z-index:10}
.course .row-course .col-items .items-inner:hover .img-box:after {opacity:0.1}
.course .row-course .col-items01 .items-inner .img-box {background-image:url(../images/course_img01.jpg)}
.course .row-course .col-items03 .items-inner .img-box {background-image:url(../images/course_img02.jpg)}
.course .row-course .col-items04 .items-inner .img-box {background-image:url(../images/course_img03.jpg)}
.course .row-course .col-items05 .items-inner .img-box {background-image:url(../images/course_img04.jpg)}
.course .row-course .col-items03 .items-inner .img-box {background-color:#d9d9d9}
.course .row-course .col-items04 .items-inner .img-box {background-color:#111}
.course .row-course .col-items05 .items-inner .img-box {background-color:#dedede}
.course .row-course .col-items01 .items-inner .img-box .spacer {padding-bottom:119.9%}
.course .row-course .col-items03 .items-inner .img-box .spacer, .course .row-course .col-items04 .items-inner .img-box .spacer {padding-bottom:59.9%}
.course .row-course .col-items05 .items-inner .img-box .spacer {padding-bottom:30%}
.course .row-course .col-items .items-inner .txt-box {position:absolute; z-index:20; transition:0.5s}
.course .row-course .col-items .items-inner .txt-box h3 {font-size:26px; font-weight:400; color:#fff; letter-spacing:-0.025em; line-height:0}
.course .row-course .col-items .items-inner .txt-box p {font-size:14px; font-weight:400; color:#fff; letter-spacing:-0.025em; margin-top:20px}
.course .row-course .col-items .items-inner .txt-box {left:30px; bottom:50px}
.course .row-course .col-items .items-inner:hover .txt-box {bottom:80px}


.course .row-course .col-items .items-inner .plus-btn {position:absolute; z-index:20; transition:0.5s}
.course .row-course .col-items .items-inner .plus-btn i {font-size:34px; color:#fff}
.course .row-course .col-items01 .items-inner .plus-btn {right:30px; bottom:50px}
.course .row-course .col-items01 .items-inner:hover .plus-btn {bottom:80px}
.course .row-course .col-items03 .items-inner .plus-btn, .course .row-course .col-items04 .items-inner .plus-btn, .course .row-course .col-items05 .items-inner .plus-btn {left:30px; bottom:50px}
.course .row-course .col-items03 .items-inner:hover .plus-btn, .course .row-course .col-items04 .items-inner:hover .plus-btn, .course .row-course .col-items05 .items-inner:hover .plus-btn {bottom:80px}


/* ------------------------------
 * art course
------------------------------ */
.art-course {padding-top:0 !important}
.art-course .col-items > a {position:relative; display:block; width:100%; height:100%}
.art-course .col-items > a:before {content:''; position: absolute; top:0; left:0; width:100%; height:100%; background-color:#000; opacity:0.6; transition:0.5s; z-index:10}
.art-course .col-items > a:hover:before {opacity:0.3}
.art-course .col-items > a .img-box {overflow:hidden}
.art-course .col-items > a .img-box img {display:block; width:100%; transition:0.5s; transform:scale(1)}
.art-course .col-items > a:hover .img-box img {transform: scale(1.1)}
.art-course .col-items > a .txt-box {position: absolute; bottom:25px; left:0; right:0; text-align:center; z-index:20; transition:0.5s}
.art-course .col-items > a:hover .txt-box {bottom:50px}
.art-course .col-items > a .txt-box p {font-size:16px; font-weight:300; color:#fff; letter-spacing:-0.025em}
.art-course .col-items > a .txt-box h3 {font-size:30px; font-weight:500; color:#fff; letter-spacing:-0.025em; margin-top:10px}


/* ------------------------------
 * what we do
------------------------------ */
.whatwedo {background-color:#fdf3e9; padding:60px 0}
.whatwedo .row-wedo .txt-box {margin-bottom:35px}
.whatwedo .row-wedo .txt-box p {font-size:16px; font-weight:100; color:#333; margin-bottom:5px}
.whatwedo .row-wedo .txt-box h3 {font-size:30px; font-weight:normal; color:#333}
.whatwedo .row-wedo .img-box {overflow:hidden}
.whatwedo .row-wedo .img-box img {width:100%; transition:0.3s; pointer-events: none; user-select: none}
.whatwedo .row-wedo a:hover .img-box img {transform: scale(1.1)}

/* ------------------------------
 * review board
------------------------------ */
section.review-board .review-swiper .swiper-slide a {display: block; border:1px solid #d9d9d9; border-radius:10px; padding:25px 30px; transition:0.3s}
section.review-board .review-swiper .swiper-slide a:hover {border-color:#f7a337}
section.review-board .review-swiper .swiper-slide a .b-title {margin-bottom:20px}
section.review-board .review-swiper .swiper-slide a .b-title h3 {font-size:26px; font-weight:400; color: #333; letter-spacing:-0.025em}
section.review-board .review-swiper .swiper-slide a .b-content {margin-bottom:30px}
section.review-board .review-swiper .swiper-slide a .b-content p {display: -webkit-box; font-size:16px; font-weight:300; color:#757575; letter-spacing:-0.025em; line-height:1.4; text-overflow: ellipsis; height: 90px; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden}
section.review-board .review-swiper .swiper-slide a .b-writer h4 {font-size:16px; font-weight:300; color:#757575; letter-spacing:-0.025em}
section.review-board .review-swiper .swiper-slide a .b-date {margin-top:10px}
section.review-board .review-swiper .swiper-slide a .b-date span {font-size:14px; font-weight:400; color:#757575}

/* ------------------------------
 * community board
------------------------------ */
.community-board {background-color:#f4f4f4}
.community-board .col-items {overflow:hidden}
.community-board .board-inner {background-color:#fff; padding:20px 30px; height:100%}
.community-board .board-inner > ul li {position:relative; padding-left:10px}
.community-board .board-inner > ul li:before {content:''; display:block; position:absolute; top:12px; left:0; width:2px; height:2px; background-color:#000; border-radius:30px}
.community-board .board-inner > ul li + li {margin-top:5px}
.community-board .board-inner > ul li a {position:relative; display:block; font-size:18px; font-weight:100; color:#000; letter-spacing:-0.02em}
.community-board .board-inner > ul li a .new_icon {font-size:10px; font-weight:500; color:#f7a337; vertical-align:3px}
.community-board .board-inner > ul li a .output_date {position:absolute; top:3px; right:0; font-size:14px; font-weight:400; color:#666}
.community-board .board-inner > ul li:hover a, .community-board .board-inner > ul li:hover a .output_date {color:#f7a337}
.community-board .board-inner > ul li:hover:before {content:''; background-color:#f7a337}


/* ------------------------------
 * gallery board
------------------------------ */
.gallery-board .gallery-swiper .swiper-slide a {display: block; border:1px solid #d9d9d9}
.gallery-board .gallery-swiper .swiper-slide a .img-box {overflow:hidden}
.gallery-board .gallery-swiper .swiper-slide a .img-box img {width:100%; transition:0.3s}
.gallery-board .gallery-swiper .swiper-slide a .board-title {padding:15px 25px}
.gallery-board .gallery-swiper .swiper-slide a .board-title h3 {font-size:20px; font-weight:400; color:#000; letter-spacing:-0.025em; transition:0.3s}
.gallery-board .gallery-swiper .swiper-slide a:hover .img-box img {transform:scale(1.1)}
.gallery-board .gallery-swiper .swiper-slide a:hover .board-title h3 {color:#f7a337}

/* ------------------------------
 * parallax section
------------------------------ */
.parallax-section {background-image:url(../images/main_parallax_bg.jpg); background-repeat:no-repeat; background-position: center top; background-attachment: fixed}
.parallax-section h3 {font-size:40px; font-weight:100; color:#fff; letter-spacing:-0.04em; line-height:1.4; text-align:center; padding:120px 0}
.parallax-section h3 strong {font-weight:500; color:#f7a337}

/* ------------------------------
 * media query
------------------------------ */


@media (max-width:1199px) {
    .hero .swiper-button-next {right:-100px}
    .hero .swiper-button-prev {left:-100px}
    .whatwedo .row-wedo .txt-box h3 {font-size:24px}
}
@media (max-width:991px) {
    .hero .slide-caption h2 {margin-bottom:20px}
    .hero .slide-caption h3 {font-size:36px}
    .about h3 {font-size:32px}
    .whatwedo .row-wedo .txt-box p {font-size:14px}
    .whatwedo .row-wedo .txt-box {margin-bottom:20px}
    .whatwedo .row-wedo .col-items:nth-child(1),.whatwedo .row-wedo .col-items:nth-child(2) {margin-bottom:50px}
    section.review-board .col-items .board-inner .b-title h3 {font-size:22px}
    .community-board .board-inner > ul li a {font-size:16px}
    .gallery-board .board-inner .board-title h3 {font-size:16px}
    .art-course .col-items > a .txt-box p {font-size:14px}
    .art-course .col-items > a .txt-box h3 {font-size:26px}
    .course .row-course .col-items .items-inner .img-box .spacer {padding-bottom:50%}
    .course .row-course .col-items .items-inner .txt-box {left:30px; bottom:50px}
    .course .row-course .col-items .items-inner .plus-btn {left:auto; right:30px; bottom:50px}
}
@media (max-width:767px) {
    .hero .swiper-slide {background-position:center}
    .hero .pagination-wrapper {bottom: 36px; text-align: left; padding-left: 20px}
    .hero .swiper-button-prev {left: auto; right: -40px}
    .hero .swiper-button-prev, .hero .swiper-button-next {top: auto; bottom: 26px; margin-top: 0}
    .about h3 {font-size:26px}
    section.review-board .col-items + .col-items {margin-top:30px}
    section.main .col-title, section.main .title {margin-bottom:15px}
    section.main .col-title > h3, section.main .title > h3 {font-size:26px}

    section.review-board .review-swiper .swiper-slide a {padding:24px}
    section.review-board .review-swiper .swiper-slide a .b-title {margin-bottom:16px}
    section.review-board .review-swiper .swiper-slide a .b-title h3 {font-size:19px}
    section.review-board .review-swiper .swiper-slide a .b-content {margin-bottom: 18px}
    section.review-board .review-swiper .swiper-slide a .b-content p {font-size:14px; height: 79px}
    section.review-board .review-swiper .swiper-slide a .b-writer h4 {font-size:14px}

    .community-board .col-items + .col-items {margin-top: 30px}
    .gallery-board .gallery-swiper .swiper-slide a .board-title h3 {font-size: 16px}
    .art-course .col-items > a:before {opacity:0.6}
    .course .row-course .col-items .items-inner .txt-box {left:30px; bottom:30px}
    .course .row-course .col-items .items-inner:hover .txt-box {bottom:60px}
    .course .row-course .col-items .items-inner .plus-btn {left:auto; right:30px; bottom:30px}
    .course .row-course .col-items .items-inner:hover .plus-btn {bottom:60px}
    .course .row-course .col-items .items-inner .txt-box h3 {font-size:24px}
    .course .row-course .col-items .items-inner .txt-box p {font-size:12px; margin-top:15px}
    .course .row-course .col-items .items-inner .plus-btn i {font-size:28px}
    
}

@media (max-width:575px) {
    .hero {margin-top: 60px}
    .hero .swiper-button-prev {right:80px}
    .hero .swiper-button-next {right:20px}
    .hero .slide-caption h3 {font-size:28px; margin-bottom:15px}
    .hero .slide-caption h3 span {display:inline-block; margin-top:7px}
    .hero .slide-caption p {font-size:16px}
    
    .hero .swiper-slide03 .slide-caption h3 {line-height:1.55}
    .hero .slide-caption h3 span:after {height:100%; top:0}
    .about {padding:30px 0}
    .about h3 {font-size:18px}
    .gallery-board .col-items + .col-items {margin-top:30px}
    .whatwedo .row-wedo .txt-box {margin-bottom:10px}
    .whatwedo .row-wedo .txt-box p {font-size:13px}
    .whatwedo .row-wedo .txt-box h3 {font-size:17px}
    .whatwedo .row-wedo .col-items:nth-child(1), .whatwedo .row-wedo .col-items:nth-child(2) {margin-bottom:30px}
    .art-course .col-items > a .txt-box {bottom:10px}
    .art-course .col-items > a:hover .txt-box {bottom:15px}
    .art-course .col-items > a .txt-box p {font-size:11px}
    .art-course .col-items > a .txt-box h3 {font-size:16px; margin-top:5px}
}