@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Noto+Sans+KR:wght@400;500;700&display=swap');

/* pandomo brand color: F59D1D */

/*reset*/
*{margin: 0; padding: 0;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;}
a {color: inherit; text-decoration: none;}
li {list-style: none;}
address, em , i {font-style: none;}
h1,h2,h3,h4,h5,h6 {font-size: inherit;}
a:hover {text-decoration: none; color: inherit;}

/* !layout */
html { font-family: 'Noto Sans KR', sans-serif; font-size: 14px; overflow-x: hidden;}
.en { font-family: 'Bebas Neue', cursive;}
body { overflow-x: hidden; background-color: #fff; color: rgb(29, 29, 31); letter-spacing: -0.03em;}

/* !header */
.innerHeader {position: fixed; top: 0; left: 0; width: 100%; background: #000; height: 3.8rem; z-index: 100; }
/* .innerHeader {position: relative; background: #000; height: 80px; z-index: 100; } */
.innerHeader .logo {display: flex; justify-content: center; align-items: center; height: 100%;}
.innerHeader .logo img {height: 32px;} 

/* !menu */
.menu { display: flex; max-width: 700px; margin: 0 auto; justify-content: center; align-items: center; z-index: 100;}
.menu-item { display: block; color: white; font-weight: bold; text-align: center; width: 20%; padding: 0.5rem; background: #555;}
.menu-item:hover { background: #F59D1D; transition: 0.5s; }

/* !visual slide section (splitting 삽입 -> slick -> splitting ani) */
.visual .slide li {position: relative; width: 100%; height: 800px; text-align: center; color: #fff; overflow: hidden;}
.visual .slide li img {height: 100%; width: auto; position: absolute; transform: scale(1.25); top:0;}
.visual .slide li .txt{position: absolute; width: 100%; top: 35%; font-size: 8rem;  line-height: 1; letter-spacing: 12px;}

/* visual slide mask (lines) */
.visual .slide li .mask { display: block; position: absolute; top: 0; width: 1px; height: 100%; background: rgba(255, 255, 255, 0.35); }
.visual .slide li .mask.a { left: 0%; }
.visual .slide li .mask.b { left: 25%; }
.visual .slide li .mask.c { left: 50%; }
.visual .slide li .mask.d { left: 75%; }

/* slick, dots (익스 호환 안되서 비활성화)*/
/* .visual .slide .slick-dots {position: absolute; bottom: 10%; left:50%; transform: translateX(-50%); z-index: 20;}
.visual .slide .slick-dots li { width: 15px; height: 15px; float: left; margin: 0 18px; }
.visual .slide .slick-dots li button {width: 100%; height: 100%; background: #fff; border: none; text-indent: -9999px; border-radius: 50%;}
.visual .slide .slick-dots:hover, .visual .slide .slick-dots button:hover {cursor: pointer;} */

/*활성화된 슬라이드 인디케이터 크기와 색변경*/
.visual .slide .slick-dots li.slick-active button {background: #F59D1D; width: 35px; margin: 0 auto; transform: translateX(-25%); transition: width 0.3s; border-radius: 15px;}

/* slick, slide animation */
/*1.노란 게이지바*/
.visual .slick-active:after {content: ''; width: 100%; height: 5px; background: #F59D1D; position: absolute; left: 0; bottom: 0; animation-name: bar; animation-duration: 7s;}
@keyframes bar {
    0% {width: 0%;}
    100%{width: 100%;}
}
/*mask-animation*/
@keyframes mask {
    0%{ width: 25%; background: #000; }
    50%{ width: 25%; background: #000; }
    99%{ background: #000; }
}
.visual .slick-active .mask.a {animation-name: mask; animation-duration: 0.4s;}
.visual .slick-active .mask.b {animation-name: mask; animation-duration: 0.6s;}
.visual .slick-active .mask.c {animation-name: mask; animation-duration: 0.8s;}
.visual .slick-active .mask.d {animation-name: mask; animation-duration: 1s;}

/*splitting text animation*/
.visual .slick-active .splitting .char {display: inline-block;
    animation: slide-up 1s cubic-bezier(.5, 0, .5, 1) both;
    animation-delay: calc(60ms * var(--char-index));
  }
  @keyframes slide-up {
      0%{ transform: translateY(30px); opacity: 0; }
      80%{ transform: translateY(30px); opacity: 0; }
  }

/* img slide animation translate(X) */
.visual .slick-active img { animation-name: img ; animation-duration: 7s; }
  @keyframes img  {
      0%{ transform: scale(1.3) translateX(-10%); }
  }


/* !contents (width 85% (width = 1200px 근접) 으로 디자인 함) */
.contents{ position: relative; background: #fff; } 
.contents .inner {width: 85%; margin: 0 auto; position: relative; margin-top: 3rem;}

/*공통된 타이틀*/
.contents .title {color:#666; margin-top: 7rem;}
.contents .title .en {font-size: 5rem; letter-spacing: 5px; color:#5d6168; line-height: 1; margin-left: 2rem;}
.contents .title .ko {font-size: 1.2rem; margin-left: 2rem; margin-bottom: 1em;}
.contents .title p {font-size: 2rem; margin-top: 0.5em; margin-left: 2rem;}

/* links */
.contents .inner .link {display: inline-block; font-size: 1.2rem; color:#5d6168; margin-right: 1.5rem; position: relative; color: #F59D1D;}
.contents .inner .link:before {content: ''; width: 110%; height: 3px; background: #f8b922; position: absolute; top: 2rem; left: 0; opacity: 1; z-index: 2; transition: all 0.3s;}
.contents .inner .link:hover:before {opacity: 1; width: 0%;}

/* description */
.description {width: 85%; margin: 0 auto; position: relative; margin-top: 10rem; background: #eee;}
.desc-a { display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.desc-a > p {font-size: 2.5rem; font-weight: bold; text-align: center; color: #583a0b; width: 60%; padding: 5rem;}
/* .desc-a > p {width: 60%;  border: 3px solid #ddd; padding: 5rem;} */


/*text box hover*/
.description .desc-a p:before {content: ''; width: 0%; height: 6px; background: #f8b922; position: absolute; top:0; left: 0; opacity: 0; z-index: 2; transition: all 0.3s;}
.description .desc-a p:after{content: ''; width: 0%; height: 6px; background: #f8b922; position: absolute; bottom:0; right: 0; opacity: 0; z-index: 2; transition: all 0.3s; }
.description .desc-a p:hover:before, .description .desc-a p:hover:after {opacity: 1; width: 80%;}

/*image*/
.contents .image {height: 650px; padding: 0.5rem 0; box-sizing: border-box; margin-top: 13rem; background: url(../img/video3.jpg)no-repeat center left 50%/cover; position:relative;}
.contents .image:before {content:''; width: 100%; height: 100%; background: #333333; position: absolute; top: 0; left: 0; opacity: 0.4;}
.contents .image .title .en {font-size: 5rem; letter-spacing: 5px; color: #fff; }
.contents .image .title .ko {color: #fff;}
.contents .image .title > p {font-size: 1.3rem; color: #eee; opacity: 0.8;}
.contents .image .desc-b {display: flex; align-items: center; justify-content: center; margin: 0 auto; margin-top: 0.5rem; flex-wrap: wrap;}
.contents .image .desc-b > p {font-size: 2.5rem; font-weight: bold; text-align: center; color: #f8b922; width: 100%; padding: 0 0.5rem; margin-top: 1rem;}

/*products*/
.contents .product { width: 85%; margin: 0 auto; padding: 40px 0; position: relative; }
/* .contents .product:before { content: ''; width: 100%; height: 45%; background: #eee; position: absolute; left: 0; bottom:0; z-index: -1;} */
/* .contents .product .title .ko { margin-bottom: 4rem; } */


/* card-list figure + padding-bottom을 이용한 반응형 상자*/
.contents .product .card-item {margin-bottom: 2rem; margin-right: 1rem;}
.contents .product .card-image {height: 0; padding-bottom: 80%; background: lightgray; background-repeat: no-repeat; background-position: center; background-size: contain;}
/* .contents .product .card-image {height: 0; padding-bottom: 80%; background: lightgray; background-repeat: no-repeat; background-position: center; background-size: contain; box-shadow:10px 10px 10px rgba(0,0,0,0.25); transition: all 0.2s;} */
.contents .product .card-image img {display: none;}

.contents .product ul {display: flex; align-items: center; justify-content: center; overflow: hidden; padding-top: 50px; flex-wrap: wrap;}
.contents .product ul li { width: 30%; padding: 1rem; box-sizing: border-box; }
/* .contents .product ul li:nth-child(2) { margin-top: +5rem; }
.contents .product ul li:nth-child(3) { margin-top: +1rem; } */

.contents .product .card-desc h3 { font-size: 1.4rem; margin: 15px 0 5px; }
.contents .product .card-desc h3 span { display: block; font-size: 1.2rem; font-weight: normal; color: #888; }
.contents .product .card-desc p { font-size: 1.1rem }


/*products-animation*/
@keyframes slid-up {
    0%{opacity: 0;}
   40%{opacity: 0; transform: translateY(40px);}
}

.contents .product ul li { animation-name: slid-up; animation-duration: 1s; }
.contents .product ul li:nth-child(2) { animation-duration: 1.4s; }
.contents .product ul li:nth-child(3) { animation-duration: 1.7s; }
.contents .product ul li:nth-child(4) { animation-duration: 2s; }
.contents .product ul li:nth-child(5) { animation-duration: 2.3s; }
.contents .product ul li:nth-child(6) { animation-duration: 2.6s; }



/*agency*/
.contents .agency {position: relative; background: url(../img/agency.jpg)no-repeat right -10% center/50%; height: 400px; transition: 0.3s; margin-top: 7rem;}
.contents .agency:hover {background: url(../img/agency.jpg)no-repeat right 0% center/53%; height: 400px; transition: 0.6s;}
.contents .agency .title p { color: #c7a77d; font-size: 2.5rem; font-weight: bold; margin-bottom: 5rem;}
/* .contents .agency .inner {padding: 40px 0; margin: auto;} */
.contents .agency .link {font-size: 2rem; letter-spacing: 1px; color:#5d6168; margin-left: 2rem; position: relative;}
.contents .agency .link:before {content: ''; width: 110%; height: 3px; background: #f8b922; position: absolute; top: 2.5rem; left: 0; opacity: 1; z-index: 2; transition: all 0.3s;}
.contents .agency .link:hover:before {opacity: 1; width: 0%;}

/* footer */
footer {display: flex; background: #191a1a; padding: 30px 60px; color: #666; margin-top: 8rem; flex-wrap: wrap;}
footer ul {clear: both; margin-bottom: 10px; overflow: hidden;}
footer ul:first-child {font-weight: bold; color: #aaa; font-size: 0.8rem;}
footer ul li {float: left; margin-right: 20px;}
footer p {clear: both; font-size: 1rem;}






/* 제작의도 메모 
1. header/ PC에서는 메뉴 호버 시 하위 메뉴 나오게. 모바일에서는 안나오게
2. visual/ PC와 모바일에서 글자 크기 조절하기*/
 

/* mobile */
@media (max-width: 1000px){
    .menu-item { font-size: 0.7em; letter-spacing: 0.03em; }
    .menu-item .inner { display: none; }

    .visual .slide li { height: 550px; }
    .visual .slide li .txt { font-size: 3.5rem; margin: 0 auto; letter-spacing: 0.2em; top: 42%; }

    /* find-out-more */
    .visual .slide li a {display: none;}

    .slick-arrow { position: absolute; display: none; }
    .slick-next  { position: absolute; display: none; opacity: 0; z-index: -100;}

    .contents .inner { margin-top: -2rem; }
    /* .contents .inner:after { display: none;} */

    /*공통된 타이틀*/
    /* .contents .title .en {font-size: 4rem;}
    .contents .title p {font-size: 1.1rem;} */

    .contents .title .en {font-size: 4rem; line-height: 1; margin-left: 1rem;}
    .contents .title .ko {font-size: 1.1rem; margin-left: 1rem; margin-bottom: 1em;}
    .contents .title p {font-size: 1.1rem; margin-top: 0.5em; margin-left: 1rem;}


    /* 판도모는 */
    .description { margin-top: 3rem; }
    .desc-a > p { font-size: 1.3rem; padding: 4rem; }

    /* System */
    .contents .image { margin-top: 8rem; }
    .contents .image .title .en { font-size: 4rem; }
    /* .contents .image .title .ko { font-size: 1.1rem; } */
    .contents .image .title > p { font-size: 0.9rem; }
    .contents .image .desc-b { margin-top: 5rem; }
    .contents .image .desc-b > p { font-size: 1.5rem; margin-top: 2rem;}
    

    /* products */
    .contents .product ul li { width: 45%; }
    .contents .product .card-desc h3 { font-size: 1.1rem; }
    .contents .product .card-desc h3 span { font-size: 1rem; }
    .contents .product .card-desc p { font-size: 0.9rem }

    /* agency */
    .contents .agency {background: url(../img/agency.jpg)no-repeat right -20% center/60%; height: 450px;}
    .contents .agency:hover {background: url(../img/agency.jpg)no-repeat right -10% center/60%; height: 450px;}
    .contents .agency .title { margin-top: -4rem; }
    .contents .agency .title p { font-size: 1.3rem; margin-bottom: 2rem;}
    .contents .agency .link { font-size: 1.5rem; margin-left: 1rem;}
    
    /* footer */
    footer {margin-top: 1rem;}
    footer ul:first-child {font-size: 1rem;}
    footer ul:nth-child(2) {font-size: 0.8rem;}
    footer p {font-size: 0.5rem;}
}

/* PC */
@media (min-width: 1000px){

    /* slick arrow*/
    /* .slick-arrow {position: absolute; top: 40%; transform: translateY(-50%); z-index: 20; background: none; width: 110px; height: 52px; border: none; text-align: right; text-transform: uppercase; font-size: 1.5rem; color: #fff; letter-spacing: 2px; font-family: 'Bebas Neue', cursive;}
    .slick-next {right: 0; text-align: left;} */
    /* slick arrow line*/
    /* .slick-arrow:after { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 55%; height: 2px; background: #fff; }
    .slick-next:after { left: 45%; }
    .slick-arrow:before { content: ''; width: 0%; height: 100%; background: #fff; position: absolute; top:0; transition: all 0.4s; z-index: -1; }
    .slick-prev:before { left: 0; }
    .slick-next:before { right: 0; } */
    /* slick, arrow hover*/
    /* .slick-arrow:hover {color:#000; transition: all 0.3s; cursor: pointer;}
    .slick-arrow:hover:after {background: #F59D1D;}
    .slick-arrow:hover:before {width: 112%;} */

}