@font-face {
    font-family: 'KoPubDotumMedium';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/KoPubDotumMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
main#contents {width: 100%; height:100%; display: block; margin: 0; overflow-x: hidden; }
.mainTitle { display: block;  text-align:center; }
.mainTitle h2 {font-weight: normal; }

.c_ani {
    position: absolute;
    left:32.5%;
    top:33%;
    width:700px;
    height:220px;
    z-index: 9;
    text-align: center;
}
.c_ani > .c_img {
    width:650px;
    margin: 0 auto;
}
.c_ani > p {
    width:700px;
	color: #fff;
    text-align: center;
    font-size: 1.75em;
    line-height: 2;
    margin: 10% auto 0;
    font-weight: bold;
}

.mainVisual{position:relative;}

.mainVisual .item { display:flex; align-items:center; position:relative; flex:1; height: 100vh; }
.mainVisual picture { overflow:hidden; position: relative; width: 100%; height: 100vh; font-size: 0;}
.mainVisual .here { position:absolute; z-index:1; left:0; right:0; margin:0 auto; }
.mainVisual .here .text { color:#fff; font-weight:normal; }
.mainVisual .here .button { display:inline-block; min-width:187px; padding:18px 20px; font-size:16px; text-align:center; box-sizing:border-box; background:rgba(255,255,255,0.9); text-decoration:none; }


.collection-item {position:relative; width: 33%;  height: 300px; transition: all .5s; margin: 0 auto;}
.col_txt { position: absolute; top: 50%; left: 38%; color: #fff; font-weight:bold;  font-size: 16px; text-align: center;}

.collection-item.on {width: 49%;}
.collection-item.on .col_txt {position: absolute; top: 10%; left: 5%; border-bottom: 2px solid #54c4f2; color: #fff; font-weight:bold;  font-size: 16px; text-align: center; transition: all .5s;}
.collection-item.on:nth-child(1) .col_txt {color:#000;}
.collection-item > a {filter: brightness(.4); transition: all .5s;}
.collection-item.on > a {filter: brightness(1);}
.collection-item picture {font-size: 0; }
.collection-item img{  width: 100%;  }
h1 {font-family: 'KoPubDotumMedium'; font-size: 32px;font-weight: bold;}
a {font-family: 'KoPubDotumMedium';font-weight: bold;}
p {font-family: 'KoPubDotumMedium'; font-size: 14px;}
.n_n_box a {display: block; text-decoration: none; box-sizing: border-box;}
.n_n_box { display: flex; flex-direction: row; width: 80%; margin: 0 auto 12%; justify-content: space-around; align-items: flex-start;}
.n_n_box .news_con { width: 77%;  }
.n_n_box .news_con > h1 {margin: 0 0 3%; color: #333; }

.n_n_box .news {display: flex; flex-direction: row; width: 100%; justify-content: flex-start; align-items: space-between; }
.n_n_box .news .news_box {width: 28%;  }
.news_imgbox img:hover { transform: scale(1.1);}
.news_imgbox img { transition: all .2s;}
.n_n_box .news .news_box:nth-child(2) { margin: 0 5%;}
.n_n_box .news .news_box .article_box {width: 100%; height: 100%; }

.article_box .news_imgbox {overflow: hidden;}
.article_box .news_imgbox img { width: 100%; font-size: 0;}
.article_box .a_tit {box-sizing: border-box; margin: 10px 0 15px; height: 55px;}
.article_box .a_tit:hover{ text-decoration: underline;}
.article_box .a_txt {box-sizing: border-box; width: 95%; height: 100px; line-height: 1.6; margin: 0 0 20px 0; white-space : wrap ; text-overflow : ellipsis ;}
.article_box .a_link { color: #54c4f2; font-weight: bold;}

.notice {  width:23%;}
.notice .notice_con h1 {margin: 0 0 18%;}
.notice .notice_con {height: 100%;  display: flex; overflow:hidden; flex-direction: column;}
.notice .notice_con .notice_box {width: 100%; height: 300px;  overflow:hidden; margin: 8% 0 0; position: relative;}
.notice .notice_con .notice_box:hover img {filter: brightness(1); transform:scale(1.1);}
.notice .notice_con .notice_box:hover .n_link {background-color: #fff; opacity:.8; color: #000;}
.notice .notice_con .notice_box:hover {overflow: hidden;}
.notice_box img {width:100%;  margin: 0; filter: brightness(.7); transition: all .3s;}
.notice_box .n_link {color: #fff; font-size: 18px; border: 1px solid #fff; transition: all .3s; padding: 8px; font-weight: bold; position: absolute; left:39%; top:46%;}

.info_con {width: 80%; height:100%;  margin: 0 auto 12%; display: flex; justify-content: space-between;}
.info_con .info_item { width: 33%; box-sizing: border-box; height: 100%; overflow:hidden; position: relative;  transition: all .2s;}
.info_con .info_item .i_img {width: 100%; height: 100%; overflow:hidden;}
.info_con .info_item .i_img img {width:100%; filter: saturate(.3); overflow-y:hidden; transition: all .2s;}
.info_con .info_item:hover img {width:100%; filter: saturate(1.2);}

.info_con .info_item:hover {
 transform:scale(1.1);
    z-index: 5;
}

.info_item1 {left:10%;}
.info_item3 {right:10%;}


.info_con .info_item .i_txt {position: absolute; left: 39%; top: 35%; text-align: center;}
.info_con .info_item .i_txt p {font-size: 26px; transition: all .5s; font-weight: bold; color: #eee;}
.info_con .info_item .i_txt a {display: block; font-weight: bold; padding: 8px; transition: all .3s; border: 1px solid #eee; margin: 30px 0 0 0; color: #eee; text-decoration: none; font-size: 16px;}
.info_con .info_item .i_txt a:hover {background-color: #eee; color: #222; }

.media {width: 80%; margin:10% auto;}
.media .md_tit {color: #333; border-left: 5px solid #54c4f2; padding-left: 10px;}
.media .md_name {width: 100%; margin: 0 auto; text-align:center; padding: 30px; font-size: 40px; font-weight: bold; border-bottom: 6px solid #222;}
.media .md_video {width: 100%;  display: flex; flex-flow: row wrap; justify-content: space-around; align-items: center; margin: 5% 0;}
.media .md_video > div {width: 45%; margin: 0 0 2%;}
.media .md_video > div > p {font-size:14px; font-weight: bold; margin-top: 3%;}
.media .md_info {width: 100%; text-align: center; margin: 5% 0;}
.media .md_info a {border: 2px solid #54c4f2; transition: all .5s; display: block; width: 20%; margin: 0 auto; padding: 15px 10px; text-decoration: none; font-weight: bold; font-size: 20px; color: #fff; background-color: #54c4f2;}
.media .md_info a:hover {background-color: transparent; color: #54c4f2;} 


.hire { width: 80%; margin: 0 auto 12%;}
.hire .hire_title {color: #333; border-left: 5px solid #54c4f2; padding-left: 10px;}
.hire .hire_name { width: 100%; margin: 0 auto; text-align:center; padding: 30px; font-size: 40px; font-weight: bold; border-bottom: 6px solid #222; }
.hire .hire_value { width: 100%; display: flex; justify-content: space-around; text-align: center; margin: 6% 0; }
.hire .hire_value .hire_imgbox {width: 33%;}
.hire .hire_value .hire_imgbox img {
 	border-radius: 50%;
}
.hire .hire_ex {width: 80%; margin: 0 auto; text-align: center; padding: 40px 0;}
.hire .hire_ex p {font-size: 24px; line-height: 1.8;}
.hire .hire_link {width: 100%; text-align: center; padding: 40px 0; }
.hire .hire_link a {border: 2px solid #54c4f2; transition: all .5s; display: block; width: 20%; margin: 0 auto; padding: 15px 10px; text-decoration: none; font-weight: bold; font-size: 20px; color: #fff; background-color: #54c4f2;}
.hire .hire_link a:hover {
	background-color: transparent;
    color: #54c4f2;
}

.pro_slide {
	width: 80%;
    margin: 10% auto;
}
.pro_slide > h1 {
	text-align: center;
    margin: 5% 0;
}
.app-slide__multiple {
	padding: 8% 0;
}


.value { width: 80%; margin: 0 auto 5%; display: flex; text-align: center; justify-content: space-around;}
.value .v-item {transition: all .1s; width: 24%; border: 1px solid #333; padding: 30px 0 0;  }

.pic {font-size: 30px; margin: 0 0 20px; 0; }
.v-tit {font-size: 22px;}
.v-info {width: 70%; margin: 40px auto 20px; line-height: 1.5; font-size: 14px; display: block; font-weight:bold; }
.v-link { border: 1px solid #333; transition: all .5s;  display: block; width: 35%; margin: 60px auto 20px; padding: 10px;  letter-spacing: 1.5px; font-weight:bold; font-size: 12px;}
.v-item:hover {
    transform:scale(1.2);
    border: none;
    background-color: #fff;
    box-shadow: 0 0 20px 5px #666;
}
.v-item:hover .v-info {
	display: block;
}

.v-item:hover .v-link {
	text-decoration: none;
}

.v-link:hover {
    background: #333;
    color: #fff;
    transition: all .5s;
}

.middleBanner img { width:100%; max-width:100%; }
.middleBanner .banner img {width:100%;}
.productSlide { text-align:center; }
.productSlide.gSpecial .banner { position:relative; display:flex; align-items:center; justify-content:center; }
.productSlide.gSpecial .banner video { position: absolute; top:0; bottom:0; left:0; width: 100%; margin:auto 0; }
.productSlide.gSpecial .back { width:100%; }
.ec-base-product .prdList li.swiper-slide .description {margin-bottom: 40px;}
.item-wrapper .banner img{width: 100%;}
.item-wrapper .banner a:hover{text-decoration:none;}
.item-wrapper .ec-base-product{margin: 0; }
.item-wrapper .ec-base-product .prdList{margin: 0}
.item-wrapper .ec-base-product .prdList > li {margin: 0}
.item-wrapper .swiper-button-prev, .item-wrapper .swiper-container-rtl .swiper-button-next,
.item-wrapper .swiper-button-next, .item-wrapper .swiper-container-rtl .swiper-button-prev {width: 30px; height: 30px; border-color: #7d7d7d; }
.item-wrapper .swiper-button-prev {left: 6px;}
.item-wrapper .swiper-button-next {right: 6px;}
.snsItem{ margin: 0 24px; text-align: center;}
.snsItem .mainTitle{ position: relative; }
.snsItem .btnSns {position: absolute; top: 0; right: 0; border:1px solid #afafaf; padding:5px 15px; font-size:13px; text-decoration:none; }
.snsItem-wrapper{display: flex; }
.snsItem-item{flex: 1; }
.snsItem-item img{width: 100%;}

#collection {
    width: 80%;
    margin: 12% auto;
}

/********************* Mobile *********************/
@media all and (max-width:767px) {

}

/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
 
}

/********************* Tablet *********************/
@media all and (min-width:768px) and (max-width:1024px) {
    
}

/********************* Tablet / PC *********************/
@media all and (min-width:1025px) {
    .mainTitle h2 { font-size:30px; }
    .more { margin:65px auto 0; }
}

/********************* PC *********************/
@media all and (min-width:1025px) {
    .mainTitle h2 { margin-bottom: 52px;  }
    .btnMore { padding:18px 40px; font-size:15px;}
.mainVisual {margin: 0;}
    .mainVisual .swiper-container{height:100vh; }
    .mainVisual .swiper-button-next:after, 
    .mainVisual .swiper-button-prev:after {color: #fff;}
    .mainVisual .swiper-button-next, .mainVisual .swiper-container-rtl .swiper-button-prev{right: 50px; }
    .mainVisual .swiper-button-prev, .mainVisual .swiper-container-rtl .swiper-button-next{left: 50px; }
    .mainVisual .here .text { font-size:45px; }
    .mainVisual .here .button { height:54px; margin:42px 0 0; }
    .mainVisual img{ position: relative; top:0; left: 50%; height: 100vh; width:100%; min-width: 100%; transform: translate(-50%, 0);  }
    
    .collection{ width: 100%; display: flex; justify-content: center; align-items: center;  box-sizing: border-box;}
    
    .saleItem { margin:95px -50px 0; padding:100px 60px;}
    .saleItem .tab{margin-top: -35px;}
    .productItem { max-width:1240px; margin:95px auto 0; }
    .productSlide{ position:relative; max-width:1240px; margin:95px auto; padding: 50px 0;}
    .productSlide .mainTitle { position:absolute; top:0; left:0; width:100%; }
    .item-wrapper{ display: flex; margin: 54px 0;}
    .item-wrapper > div{flex: 1;}
	.item-wrapper .swiper-container { width:100%; padding:0 40px; box-sizing:border-box; }
    .item-wrapper .ec-base-product { max-width:670px; width:calc(100% - 570px); padding:0 33px; box-sizing:border-box; }
    .item-wrapper .ec-base-product .prdList .thumbnail { margin:0 0 10px; }
    .item-wrapper .swiper-container:before,
    .item-wrapper .swiper-container:after { content:""; display:block; width:40px; height:100%; position:absolute; top:0; bottom:0; right:0; background:#fff; z-index:1; }
    .item-wrapper .swiper-container:before { left:0; z-index:2; }
        .swiper-container-horizontal > .swiper-scrollbar { left:40px; right:40px; width:auto; }
        .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right:0; }
        .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left:0; }
    .productSlide.gSpecial .item-wrapper { flex-direction: row-reverse; }
    .middleBanner { position:relative; margin:115px 0; }
    .middleBanner .text { position:absolute; left:115px; top:0; bottom:0; margin:auto 0; height:60px; font-size:50px; color:#000; text-decoration:none; }
    .snsItem {margin:95px 0; }
    .snsItem .mainTitle { max-width:1240px; margin:0 auto; }
    .snsItem-wrapper{margin: 60px -10px 0;}
    .snsItem-wrapper .snsItem-item a{display: block; margin: 0; }
}
@media all and (max-width:767px) {
    #collection {
        width: 98%;
    }
    .collection-item,
    .collection-item.on {
        width: initial;
        height: 200px;
        margin: 0!important;
    }
    .collection-item > a {
        filter: brightness(0.6)!important;
    }
    .collection-item.on .col_txt {
        position: absolute;
        top: 50%;
        left: 38%;
        color: #fff;
        font-weight: bold;
        font-size: 16px;
        text-align: center;
        border-bottom: none;
    }
    .collection-item.on:nth-child(1) .col_txt {
        color: #fff;
    }
    .collection-item .col_txt {
        border-bottom: 2px solid #54c4f2!important;
    }
    .n_n_box {
        width: 98%;
        flex-direction: column;
    }
    .n_n_box .news {
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }
    .n_n_box .news_con {
        width: 100%;
    }
    .n_n_box .news .news_box {
        width: 100%;
    }
    .article_box .a_tit {
        height: initial;
    }
    .article_box .a_txt {
        height: initial;
    }
    .notice {
        width: 100%;
    }
    #news_box3 > a {
        width: 200%;
    }
    #news_box3 .news_imgbox {
        width: 50%;
    }
    .notice .notice_con h1 {
        margin: 0;
    }
    .notice .notice_con .notice_box {
        width: 50%;
        height: initial;
    }
    .notice_box .n_link {
        position: absolute;
        transform: translate(-50%,-50%);
        top: 50%;
        left: 50%;
    }
    .info_con {
        width: 98%;
        flex-direction: column;
    }
    .info_con .info_item {
        width: 100%;
    }
    .info_item1 {
        left: 0;
    }
    .info_item3 {
        right: 0;
    }
    .info_con .info_item:hover {
        transform: scale(1);
    }
    .info_con .info_item .i_txt {
        transform: translate(-50%,-50%);
        left: 50%;
        top: 50%;
    }
    .info_con .info_item .i_img img {
        filter: saturate(1)!important;
    }
    .hire {
        width: 98%;
    }
    .pro_slide {
        width: 98%;
    }
    .value {
        width: 98%;
        flex-direction: column;
    }
    .value .v-item {
        width: 100%;
    }
}