@charset "UTF-8";


/*비주얼*/
#visual {position:relative; max-width:169rem; width:100%; margin:0 auto; margin-top:11.3rem}
#visual .visual_wrap {overflow:hidden; height:55.2rem;}
#visual .list {height:100%}
#visual .list .slick-list {height:100%}
#visual .list .slick-track {height:100%}
#visual .list .slick-track > div {height:100%; position:relative}
#visual .list .slick-slide a {display:block; width:100%; height:100%}
#visual .list img {width:inherit !important; max-width:inherit; min-height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%)}
#visual .list .txt {color:#fff; font-size:1.9rem; position:absolute; left:13rem; top:12rem; line-height:1.4; word-break:keep-all;}
#visual .list .txt strong {font-size:9.7rem; display:block; font-family: 'aggro';}
#visual .list .txt span {display:inline-block; color: #fff; width: 59%; font-weight:200; animation-name:fadeInDown}
#visual .list .slick-dots {position:absolute; bottom:16rem; left:30rem}
/*dots*/
.slick-dots li {display:inline-block; margin:0.7rem; height:inherit}
.slick-dots li button {color: transparent; display: block; width: 4.8rem; height: 1rem; border-radius: inherit; border: none; background-color: rgb(255 255 255 / 40%);}
.slick-dots li.slick-active  button {background-color:#ffbd1d}

#visual .control_box {position:absolute; left:20rem; bottom:15rem; transform:translateX(-50%); text-align:center}
#visual .control_box .paging {display:none/* position:absolute; right:40%; transform:translateX(-50%); line-height:5.5rem */}
/*
#visual .control_box .paging span {font-family:'Roboto'; font-weight:normal; color:rgba(255,255,255,0.8) !important}
#visual .control_box .paging .this {font-weight:bold}
#visual .control_box .paging .this:after {color:rgba(255,255,255,0.8); font-size:1.8rem}
*/
#visual .control_box button {width:5.5rem; height:5.5rem; line-height:5.5rem; text-align:center; overflow:hidden; display:inline-block}
#visual .control_box button:before {color:rgba(255,255,255,0.7); font-size:2.4rem; width:100%; height:100%;}
#visual .control_box button:hover:before {color:#ffbd1d; font-size:2.4rem; width:100%; height:100%;}

#visual .control_box .play,
#visual .control_box .stop {display:inline-block}

.section {width:calc(100% - 4rem); max-width:169rem; margin:0 auto; position:relative}

/* 접수/문의  */
.contact_bar {display:flex; overflow:hidden; position:absolute; right:0; bottom:-6rem; width:100%; max-width:84rem; height:14rem; background-color:#ffbd1d; border-radius:3.5rem 0 0 0; padding:4rem 9.5rem; box-shadow: 1px 5px 13px rgb(0 0 0 / 15%);}
.contact_bar .receipt {position:relative; margin-right:8rem; z-index:1}
.contact_bar .receipt:before {content:'1'; font-size:28rem; position:absolute; left:-4.3rem; top:-17rem; font-weight:bold; color:#ffc754; z-index:-1}

.contact_bar .group span {display:inline-block; line-height:1.5; vertical-align:middle; margin-left:2.5rem; color:#53461d; font-weight:300}
.contact_bar .group span strong {display:block;}

.contact_bar .location {position:relative; z-index:1}
.contact_bar .location:before {content:'2'; font-size:21rem; position:absolute; right:25rem; top:-14.2rem; font-weight:bold; color:#ffc754; z-index:-1}

#contents1 {padding:12rem 0 0;}
#contents1 .section {display:flex; justify-content:space-between}
#contents1 .section > div {width:calc(33.333% - 3rem)}

/***회사소개***/
.aboutus {position:relative; width:100%; max-width:48rem}
.aboutus h2 {font-size:2.8rem; font-weight:300; margin-bottom:2rem}
.aboutus .box {height:27rem; background: url('/kor/img/main/aboutus-img01.jpg')no-repeat; border-radius:1rem; padding:7.5rem 5rem; background-size:cover}
.aboutus strong {display:block; color:#fff; font-size:3.3rem}
.aboutus span {color:#fff; font-size:1.6rem; font-weight:300}
.aboutus .more {font-size:1.7rem;position:absolute; top:1.5rem; right:0; color:#434343; font-family:roboto,NotoSansKR,verdana,Dotum,AppleGothic,sans-serif}
.aboutus .more i {vertical-align:middle}

/*팝업존*/
.popupzone {position:relative; max-width:56rem; height:27rem;}
.popupzone h2 {font-size:2.8rem; font-weight:300; margin-bottom:2rem}
.popupzone .img {border-radius:1rem}
.popupzone .control_box {position:absolute; right:2rem; top:9rem}

 .slick-slide img {display:block; width:100%; min-height:27rem; height:100%; border-radius:1rem}
 .slick-slide .img a {position:relative; display:block; width:100%; height:100%}
 .slick-slide .img a:focus:after {content:''; width:100%; height:100%; border:2px solid; position:absolute; left:0; top:0; border-radius:1rem}


/*공지사항*/
.board_box {position:relative; max-width:48rem; width:100%;}
.board_box h2 {font-size:2.8rem; font-weight:300; margin-bottom:2rem}
.board {overflow:hidden; padding:1.2rem 3rem 0; border-radius:1rem; height:27rem; box-shadow:1px 1px 18px rgb(0,0,0,0.10) }
.board .list > div {border-bottom:1px solid #ededed; margin:1rem 0}
.board .list > div:last-child {border-bottom:0}
.board .list .title {color:#666; display:inline-block; font-size:1.6rem; font-weight:300; position:relative; padding-left:2.5rem; white-space:nowrap; width:70%; text-overflow:ellipsis; overflow:hidden; transition:all .3s}
.board .list .title:before {content:''; background-color:#c1c1c1; width:4px; height:4px; position:absolute; left:0.8rem; top:1rem}
.board .list .xi-new {position:absolute; left:0; top:0.5rem; font-size:1.8rem}
.board .list .xi-new:before {display:block}
.board .list .desc {display:none}
.board .list .date {float:right; color:#888; font-size:1.4rem; font-weight:200}
.board .list li:first-child {border-bottom:1px solid #e5e5e5; padding:1rem 0 3rem; margin-bottom:3rem}
.board .list li:first-child .title {color:#000; display:block; font-size:2.6rem; font-weight:400; padding-left:0}
.board .list li:first-child .title:before {display:none; top:2.4rem}
.board .list li:first-child .desc {color:#666; display:block; font-size:1.6rem; line-height:1.4; margin-top:1rem; height:7rem; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3}
.board .list li:first-child .date {color:#999; display:block; font-size:1.6rem; line-height:1.4; margin-top:1.5rem}
.board_box .more {font-size:1.7rem;position:absolute; top:1.5rem; right:0; color:#434343; font-family:roboto,NotoSansKR,verdana,Dotum,AppleGothic,sans-serif;}
.board_box .more i {vertical-align:middle}

@media screen and (min-width:1024px) {
	/*효과*/
	.board .list a:hover .title {color:#7119ae}
	.board .more:hover i {color:#7119ae}
}

/***갤러리***/
#contents2 {position:relative; overflow:hidden;padding: 12rem 0 4rem; position:relative;}
#contents2:before {content:''; width:100%;height:27rem; position:absolute; left:0;bottom: 0; background-color:#3d435f}
/* #contents2:before {content:'KOREAN PAINTING cALLIGRAPHY TUMBLER'; color:#ecebf9; font-family:'Gmarket-b'; font-size:9.5rem; font-weight:600; letter-spacing:0.5rem; position:absolute; left:50%; top:-6rem; text-transform:uppercase; transform:translateX(-50%); white-space:nowrap} */
.gallery {position:relative}
.gallery h2 {color:#333; font-size:2.8rem; font-weight:300; text-align:left; margin-bottom:2rem}
.gallery h2 span {color:#999; display:block; font-size:1.6rem; font-weight:normal}
.gallery .thumb {/* position:relative */}
.gallery .list {clear:both; overflow:hidden}
.gallery .list .item {float:left; max-width:31.5rem; width:100%}
.gallery .list a {display:block; position:relative}
.gallery .list .slick-list {width:calc(100% + 4rem)}
.gallery .list .slick-slide {float:left; margin-right:4.5rem}
.gallery .list .slick-slide .item {max-width:100%}
.gallery .list .img {width:100%; max-height:26rem; overflow:hidden; position:relative; padding-top: 76%;transition:all .3s}
.gallery .list .img:before {content:''; border:4px solid #ffbd1d; border-radius:1rem; width:0; height:0; opacity:0; position:absolute; left:0; top:0; z-index:1}
.gallery .list .more2 {background-color:#ffbd1d; border-radius:1rem 0 1rem 0; color:#fff; font-size:1.6rem; width:0; height:0; line-height:5.5rem; text-align:center; opacity:0; position:absolute; right:0; bottom:8rem; }
.gallery .list .more2 i {vertical-align:middle}
.gallery .list .img img {display:block; min-height:100%; object-fit:cover; position:absolute; top:0; border-radius:1rem}
.gallery .list .tt {color:#fff; display:block; font-size:1.7rem; font-weight:200; line-height:1.4; margin-top:2.5rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:99.9%}
.gallery .list .date {color:#fff; font-weight:300; font-size:1.4rem}
/* .gallery .list .tt .cate {border-radius:100rem; background-color:#3d1e6c; color:#fff; display:inline-block; font-size:1.4rem; height:3rem; line-height:3rem; margin-right:0.5rem; padding:0 1.5rem; text-align:center; vertical-align:1px}
.gallery .list .price {color:#666; display:block; font-size:1.6rem; line-height:1.4; margin-top:0.5rem; overflow:hidden; text-overflow:ellipsis; word-break:keep-all; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2} */
.gallery .thumb .control_box .paging {display:none}
.gallery .thumb .control_box button {border:1px solid #e3e3e3;border-radius:100%; width:4.3rem; height:4.3rem; line-height:4.3rem; position:absolute; top:0; text-align:center; transition:all .3s; display:inline-block}
.gallery .thumb .control_box button:hover {border:1px solid #ffbd1d;}
.gallery .thumb .control_box button:before {width:100%; height:100%; color:#434343; font-size:1.6rem}
.gallery .thumb .control_box .prev {right:12rem}
.gallery .thumb .control_box .next {right:6rem}
.gallery .thumb .control_box .play,
.gallery .thumb .control_box .stop {display:none}
.gallery .more {color: #fff; font-size: 2rem; width: 4.3rem; height: 4.3rem; line-height: 4.3rem; text-align: center; overflow: hidden; position: absolute; right: 0; top: 0; z-index: 1; background: #ffbd1d; border-radius: 100%; }
.gallery .more i {display:block; width:100%; height:100%; line-height:inherit; transition:all .3s}
.gallery .group {margin-top:1rem; display:flex; flex-wrap:wrap; width:calc(100% + 4rem)}
.gallery .group > div {width:calc(25% - 4rem); margin-right:4rem}

@media screen and (min-width:1024px) {
	/*효과*/
	.gallery a:hover .img:before {width:100%; height:100%; opacity:1}
	.gallery a:hover .more2 {width:16rem; height:5rem; opacity:1;}
	.gallery .more:hover i {color:#593494; transform:rotate(180deg)}
}