da251c/* ------------------------------------------------------------------ */
/* Color
main : 0057b1   blue 1
point : 00bfc8   blue 2
point : ff403f red
bg : 625b5b

@media screen and (max-width: 768px) {
}
@media screen and (max-width: 640px) {
}
@media screen and (max-width: 480px) {
}
'Noto Sans KR', 'notokr', sans-serif   'FontAwesome',
/* ------------------------------------------------------------------ */
/* ================================================================== */
select {}
/* Intro Section
------------------------------------------------------------------ */
#intro { margin: 100px 0 0 ; padding: 0 0 0px; overflow: hidden; }
@media screen and (max-width:1020px) {
    #intro {margin-top: 0px;}
}

@media screen and (max-width: 1080px) {
    .slider {width: 100%;margin: 0px auto;}
    .slick-slide {position: relative; margin: 0px 0px; }
}

@media screen and (min-width: 1081px) {
    .slick-track {
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	width: 100%;
    	height: auto;
        margin: 0 auto;
    	background: #444;
    }
    .slick-track .flex-item {
        position: relative;
        flex-grow: 1;
        display: flex !important;
        height: 100%;
        min-height: 550px;
        width: 20% !important;
        justify-content: center;
        padding: 0;
        box-sizing: border-box;
        text-align: center;
        border-left: 1px solid rgba(255, 255, 255, 0.4);
        background-size: cover;
        transition: .2s all;
        cursor: pointer;
        z-index: 1;
    }
    .slick-track .flex-item img {display: none !important;}
    .slick-track .flex-item:first-child {border: none}
    .slick-track .flex-item:nth-child(1) { background: url("../images/1.jpg") no-repeat center center / cover; }
    .slick-track .flex-item:nth-child(2) { background: url("../images/2.jpg") no-repeat center center / cover; }
    .slick-track .flex-item:nth-child(3) { background: url("../images/3.jpg") no-repeat center center / cover; }
    .slick-track .flex-item:nth-child(4) { background: url("../images/4.jpg") no-repeat center center / cover; }
    .slick-track .flex-item:nth-child(5) { background: url("../images/5.jpg") no-repeat center center / cover; }
    .slick-track .flex-item:nth-child(6) { background: url("../images/6.jpg") no-repeat center center / cover; }

    .slick-track .flex-item:hover { flex-grow: 2;width:50% !important; background-color: rgba(255, 255, 255, 0.9)}

}

/* text */
.slick-slide .slide_content {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    z-index: 1;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
.slick-slide .slide_content .caption { text-align: center; color: #fff;}
.caption h1, .caption h2, .caption h3, .caption p {text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1); text-transform: uppercase; }
.slick-slide .slide_content .caption h1 {
    font: 50px/1.1 'Prompt','Noto Sans KR', sans-serif; font-weight: 600; padding: 0; margin: 0 0 18px 0; letter-spacing: 0.05em
}
.slick-slide .slide_content .caption h1 span { color: #fff; font-weight: 700; }
.slick-slide .slide_content .caption h2 { font: 38px/1.2 'Prompt','Noto Sans KR', sans-serif; font-weight: 400;padding: 0; margin: 0 0 18px 0;}
.slick-slide .slide_content .caption h2 span {font-weight: 400;}

.slick-slide .slide_content .caption p { margin-bottom: 0; font-size: 18px; font-weight: 500;}
.slick-slide .slide_content .caption .animated { transition: all 0.5s ease;}
.slick-track .slide_content .button3 {margin: 0 auto;}

@media screen and (min-width: 1081px) {
    .slick-slide .slide_content {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        z-index: 1;
    }
    .slick-track .flex-item .slide_content .caption  {opacity: 0}
    .slick-track .flex-item .slide_content .button3 {display: none;}
    .slick-track .flex-item:hover .slide_content .caption {opacity: 1}
    .slick-track .flex-item:hover .slide_content .button3 {display: inline-block;}
}

@media screen and (max-width: 640px) {
    .slick-slide .slide_content .caption h1 {font-size: 32px;}
    .slick-slide .slide_content .caption h2 {font-size: 24px;}
}
/* Text Animation
------------------------------------------------------------------ */
.id-Slider .slick-slide h1 { -webkit-animation: zoomOut 2s both;  animation: zoomOut 2s both;}
.id-Slider .slick-slide h2 { -webkit-animation: fadeOutDown 1s both;  animation: fadeOutDown 1s both;}
.id-Slider .slick-slide h3 { -webkit-animation: fadeOutDown 1s both;  animation: fadeOutDown 1s both;}

/* caption out */
.id-Slider .slick-slide.slick-active h1 {  -webkit-animation: flipInX 1s both 1s;  animation: flipInX 1s both 1s;}
.id-Slider .slick-slide.slick-active .caption > div { -webkit-animation: fadeIn 0.2s both 0.2s;  animation: fadeIn 0.2s both 0.2s;}
.id-Slider .slick-slide.slick-active h2 {  -webkit-animation: fadeInUp 1s both 1.2s;  animation: fadeInUp 1s both 1.2s;}
.id-Slider .slick-slide.slick-active h3 {  -webkit-animation: fadeInUp 1s both 1.2s;  animation: fadeInUp 1s both 1.2s;}

/* caption in */
.id-Slider .slick-slide.slick-active h1{
  -webkit-animation:fadeInDown 1s both 1s;
          animation:fadeInDown 1s both 1s;
}
.id-Slider .slick-slide.slick-active h2{
  -webkit-animation:fadeInUp 1s both 1.5s;
          animation:fadeInUp 1s both 1.5s;
}
.id-Slider .slick-slide.slick-active p {
  -webkit-animation:fadeIn 1s both 1.5s;
          animation:fadeIn 1s both 1.5s;
}
.id-Slider .slick-slide.slick-active .button3 {
    -webkit-animation:fadeIn 1s both 0.2s;
            animation:fadeIn 1s both 0.2s;
}
.id-Slider .slick-slide:nth-child(odd) {  -webkit-animation: ShutterOutV 0.3s both;  animation: ShutterOutV 0.3s both;}
.id-Slider .slick-slide.slick-active:nth-child(odd) {  -webkit-animation: ShutterInH 0.3s both;  animation: ShutterInH 0.3s both;}
.id-Slider .slick-slide:nth-child(even) {  -webkit-animation: ShutterOutH 0.3s both;  animation: ShutterOutH 0.3s both;}
.id-Slider .slick-slide.slick-active:nth-child(even) {  -webkit-animation: ShutterInV 0.3s both;  animation: ShutterInV 0.3s both;}

@media screen and (max-width: 1080px) {
    .slick-slide img {width: 100%;}
    .slick-dots {bottom: 5px !important;}
    .slick-dots li button:before {font-size: 6px;}

    /* Next, Prev
    ------------------------------------------------------------------ */
    .slick-arrow {
    	position: absolute;
    	top: 50%;
    	transform: translateY(-50%);
    	width: 50px;
    	height: 60px;
    	margin: 0;
    	padding: 0;
    	background: rgba(0, 0, 0, .1);
    	border: 0 none;
    	border-radius: 5px;
    	font-weight: 200;
    	z-index: 5;
    	cursor: pointer;
    	transition: all 0.5s;
    }
    .slick-arrow:before {
      content: "";
      position: absolute;
      display: block;
      width: 16px;
      height: 16px;
      top: 50%;
      margin-top: -8px;
      -webkit-transition: all, 0.3s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;
      -khtml-transition: all, 0.3s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;
      -moz-transition: all, 0.3s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;
      -ms-transition: all, 0.3s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;
      -o-transition: all, 0.3s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;
      transition: all, 0.3s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;
    }
}

@media screen and (max-width:640px) {
    .slick-arrow:before { width: 16px; height: 16px; }
}

@media screen and (max-width: 1080px) {
    .id-Slider .NextArrow { right: -40px;}
    .id-Slider .PrevArrow { left: -40px;}
    .id-Slider:hover .NextArrow { right: -8px;}
    .id-Slider:hover .PrevArrow { left: -8px;}
    .id-Slider:hover .NextArrow, .id-Slider:hover .PrevArrow {background: rgba(0, 0, 0, .7) ;color: rgba(255, 255, 255, 1);}

    .id-Slider .NextArrow:before {
    	border-bottom: 2px solid white;
        border-right: 2px solid white;
        right: 20px;
        -webkit-transform: rotate(-45deg);
        -khtml-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .id-Slider .PrevArrow:before {
    	border-top: 2px solid white;
        border-left: 2px solid white;
        left: 20px;
        -webkit-transform: rotate(-45deg);
        -khtml-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

}

@media screen and (max-width: 1080px) {
  .id-Slider .PrevArrow , .id-Slider .NextArrow {display: none !important;}
}

/* ------------------------------------------------------------------ */
/* Quick Section - Main Page
/* ------------------------------------------------------------------ */
#quick { padding:100px 0 ; text-align: center; background: #f5f5f5; z-index: 1 }
#quick h2 {text-align: center; font-family: 'Prompt', sans-serif; font-size: 24px; color: #666; font-weight: 700; text-transform: uppercase; line-height: 1; letter-spacing: 0.3em}
#quick h2:after {background:#ccc; content:""; display:block; height:1px;width:100px;margin:10px auto 10px;}
#quick h2 + p {margin-bottom: 20px; }

#quick .container {display: flex; align-items: stretch;	width: calc(100% + 40px); margin-left: -20px; }
#quick .container .quick-wrap {position: relative; width: calc(33.3% - 40px); margin: 0 20px;}
#quick .container .quick-wrap:hover {box-shadow: 0 5px 20px rgba(0,0,0,0.3); transition: .3s all;}
#quick .container .quick-wrap a {display: block; height: 100%; padding: 0px 0px;color: #333; border: 1px solid #eee}
#quick .container .quick-wrap .txt-box {padding: 30px 20px 50px;}
#quick .container .quick-wrap .txt-box h4 {font-weight: 500;}
#quick .container .quick-wrap .txt-box hr {width: 30px; margin: 10px auto; height: 3px; background: #333;}
#quick .container .quick-wrap .txt-box p {font-size: 14px; font-weight: 400;}
/* #quick .quick-wrap .quick-inner:hover {background: #333; transition:0.3s ease; } */

#quick .container .quick-wrap a:before, #quick .container .quick-wrap a:after {
  display: block;
  content: " ";
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-left: none;
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}
#quick .container .quick-wrap a:before { top: 0; left: 0;}
#quick .container .quick-wrap a:after {bottom: 0; right: 0;}
#quick .container .quick-wrap a:hover:before {
  width: 100%;
  height: 100%;
  opacity: 1;
  border-top: 3px solid #00bfc8;
  border-right: 3px solid #00bfc8;
  transition: width .2s cubic-bezier(0.07, 0.62, 0.61, 1), height 0.1s .15s cubic-bezier(0.07, 0.62, 0.61, 1);
}
#quick .container .quick-wrap a:hover:after {
  width: 100%;
  height: 100%;
  opacity: 1;
  border-bottom: 3px solid #00bfc8;
  border-left: 3px solid #00bfc8;
  transition: width .2s cubic-bezier(0.07, 0.62, 0.61, 1), height .1s .15s cubic-bezier(0.07, 0.62, 0.61, 1);
}

#quick .container .quick-wrap:nth-child(1) {background: #fff}
#quick .container .quick-wrap:nth-child(2) {background: #fff}
#quick .container .quick-wrap:nth-child(3) {background: #fff}
#quick .container .quick-wrap:nth-child(4) {background: #fff}
#quick .container .quick-wrap:hover {background: #fff;}

#quick i, #quick a h4, #quick a p, #quick a:visited h4 {
  text-decoration: none; outline: 0;
  -webkit-transition: color .3s ease-in-out;
          transition: color .3s ease-in-out;
}
#quick a:hover h4, #quick a:focus h4:after, #quick a:hover p { color: #333 !important; }

@media screen and (max-width: 810px) {
    #quick { padding: 60px 20px;}
    #quick h4:after {margin-bottom: 20px}
    #quick p {display: block; }
    #quick .quick-wrap {font: none; width: 100%;}
}

@media screen and (max-width: 640px) {
    #quick {padding: 60px 20px;}
    #quick .container {flex-wrap: wrap;}
    #quick .container .quick-wrap {width: 100%; margin-bottom: 20px;}
    #quick .container .quick-wrap:last-child {margin-bottom: 0;}
    #quick .quick-box .quick-txt {opacity:1; transform:scale(1); transition:0.3s ease; }
    #quick .quick-box .quick-txt { background:rgba(0, 0, 0, 0.5); transform:scale(1); opacity:1;}
    #quick .end p {margin-bottom: 0; padding-bottom: 0 ; border-bottom: none}
}


/* ------------------------------------------------------------------ */
/* catchphrase Section - Main Page
/* ------------------------------------------------------------------ */
#catchphrase {padding: 100px 0;text-align: center;}
#catchphrase h3 {margin-bottom: 30px;}
#catchphrase .header {
    display: block;
    font-family: 'Prompt'; font-size: 60px; color: #666; font-weight: 500; letter-spacing: 15px; text-transform: uppercase;
	border-top: 0px double #888;
    border-bottom: 10px double #888;
    padding: 20px 0;
	line-height: 1;
}
#catchphrase .header span {color: #0057b1; font-weight: 600;}
#catchphrase p {
    margin-top: 20px; padding: 0 80px;
    font-family: 'Prompt'; font-size: 42px; color: #888; font-weight: 300; text-transform: uppercase; line-height: 1; letter-spacing: 0.03em;
}
#catchphrase hr {
	border: solid #161117;
	border-width: 4px 0 0;
	width: 70px;
	margin: 20px auto 60px auto;
	height: 0;
	clear: both;
	text-align: left;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#catchphrase:hover h3 + hr {	border-color: #113f8c; width: 140px; text-align: center;}
@media screen and (max-width: 810px) {
	#catchphrase {padding: 60px 20px;}
	#catchphrase .header {font-size: 38px;}
    #catchphrase p {padding: 0; font-size: 44px;}
}

@media screen and (max-width: 640px) {
    #catchphrase {padding: 60px 20px;}
    #catchphrase .header {font-size: 28px; border-bottom: 8px double #888; letter-spacing: 5px;}
    #catchphrase p {padding: 0; font-size: 22px;}
}

/* ------------------------------------------------------------------ */
/* box2 Section - Main Page
/* ------------------------------------------------------------------ */
#product {
    display: flex;
    flex-wrap: wrap;
    background: #625b5b;
    overflow: hidden;
}

#product .board-ttl {
    width: calc(50% - 320px);
    padding: 0px 0; background: rgba(255, 255, 255, 0.0);
}
#product .board-ttl .inner-wrap { width: 100%; padding:80px 60px; color: #fff; text-align: right; }
#product .board-ttl .inner-wrap h2 {margin-bottom: 30px; font-weight: 600;}
#product .half-bg {
    width: calc(50% + 320px);
    height: 100%;

}

body:before {
    display: none; content: '';
    position: absolute;s
    top: 0;
    left: 50%;
    width: 100%;
    height: 100vh;
    transform: translateX(-320px);
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(3, 3, 27, 0.5)), url('../images/board-bg.jpg') no-repeat 50% 50% / cover;
}
@media screen and (max-width: 1080px) {
    #product {margin-bottom: 0px; padding: 0; background: #625b5b;}
    #product .board-ttl {width: 100%;}
    #product .board-ttl .inner-wrap {padding: 60px 0; text-align: center; }
    #product .half-bg {width: 100%;}
}
@media screen and (max-width: 480px) {
    #product .board-ttl .inner-wrap {padding: 60px 0 10px; }
}
/* ------------------------------------------------------------------ */
/* Output Section - Main Page
/* ------------------------------------------------------------------ */
#output {position: relative; padding: 100px 0; background: #eee; overflow: hidden;}
#output:before {
    display: block; content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    background: #e5e5e5;
}
#output .output-wrap h6 {
	position: relative;
	margin-bottom: 20px; font-weight: 500; color: #666; text-transform: uppercase;
	border-bottom: 0px solid #ccc;
}
#output .output-wrap h6 .more {position: absolute;right: 0; }
#output .output-wrap h6 .more a {padding: 5px; font-size: 24px; font-weight: 300;}
#output .output-wrap  hr {
	border: solid #666;
	border-width: 3px 0 0;
	width: 100%;
	margin: 5px 0 10px;
	height: 0;
	clear: both;
	text-align: left;
}

#output .output-wrap:hover hr {border-color: #444; width: 100%; text-align: left;}
#output .output-wrap.contact .tel { margin-bottom: 10px !important; font-size: 36px; color: #666; line-height: 1;letter-spacing: 0em; font-weight: 700;}
#output .output-wrap.contact ul li {margin-bottom: 5px; font-size: 13px;}
#output .output-wrap.contact .button {width: 100%; margin-top: 20px; text-align: center;}

/* Board Output */
#output .output-wrap table.board_out {}
#output .output-wrap table.board_output {}
#output .output-wrap table.board_output tbody {}
#output .output-wrap table.board_output tbody tr td {}
#output .output-wrap table.board_output tbody tr td:nth-child(1) img {display: none;} /* dot img */
#output .output-wrap table.board_output tbody tr td:nth-child(3) {color: #aaa; line-height: 30px;} /* date */
#output .output-wrap table.board_output tbody tr td a {line-height: 30px;}

#output .output-wrap table.board_output tbody .board_output_1_tr {line-height: 30px;}
#output .output-wrap table.board_output .board_output_1_tr .bd_out1 {}
#output .output-wrap table.board_output .board_output_1_tr .bd_out1 a {}
#output .output-wrap table.board_output .board_output_1_tr .bd_out1 a:hover {}


@media screen and (max-width: 810px) {
    #output {padding: 60px 10px; }
	#output .output-wrap {margin-bottom: 30px;}
    #output .output-wrap .board_out {margin-bottom: 30px;}
    #output .output-box:last-child {margin-bottom: 0;}

}
@media screen and (max-width: 640px) {
    #output {padding: 60px 20px; }
    #output:before {display: none;}
}