@charset "utf-8";
html,body{margin:0;padding:0;font-family:'Paperlogy','나눔고딕',NanumGothic,'Nanum Gothic','맑은 고딕','Malgun Gothic','Apple SD Gothic Neo',applegothic,'돋움',Dotum,'굴림',Gulim,Helvetica,sans-serif;font-weight:600;font-size:13px;line-height:25px;color:#373737;}
div,p,table,th,td,form,fieldset,ul,ol,li,dl,dt,dd,img,input,textarea{margin:0;padding:0}
/*input{border:0px solid #ccc;background:#eee}*/
ul,ol,li{list-style:none}
button{margin:0;padding:0;border:0}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;border:0}
address{font-style:normal}
a:link,a:visited,a:active,a:hover{text-decoration:none !important}
hr{display:none}
/*a,img,input{outline:none;selector-dummy:expression(this.hideFocus=true)}*/
::-moz-selection{background-color:#1ecaac;color:#fff}
::selection{background-color:#1ecaac;color:#fff}
.blind{position:absolute; left:0; top:-9999px; width:0; height:0; margin:0; padding:0; font-size:0; text-indent:-9999px; overflow:hidden;}
.clear{*zoom:1;}
.clear:after{display:block; clear:both; content:"";}
.lft{float:left;}
.rgt{float:right;}
.xe_content{font-family: inherit !important;font-size:14px;line-height:2em;}
body, button, input, select, table, textarea{font-family: inherit !important;}
.pc_img{display:block;}
.m_img{display:none;}
.blog_portfolio{margin:50px 0 0;}
.hiddenTxt{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
/*body.infoImgOff .blogTop{display:none;}
body.infoImgOff .cafeTop{display:none;}*/

.skip_navigation,.skip_navigation ul{height:0}
.skip_navigation a{position:absolute;top:-9999px;background:#000;width:100%;height:30px;text-align:center;color:#fff;line-height:30px;font-weight:bold;z-index:100;opacity: 0.6;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter:alpha(opacity=60)}
.skip_navigation a:focus,
.skip_navigation a:hover,
.skip_navigation a:active{top:0}

#wrap{width:100%;min-width:1250px;font-size:14px;}
#wrap .inner{width:1190px;padding:0 30px;margin:0 auto;}

#top{color:#3b2a2b;background:#ffd600;}
#top .lft li{margin-right:25px;}
#top .rgt li{margin-left:25px;}
#top li{float:left;line-height:50px;}
#top li a{color:#3b2a2b;padding:3px 0;padding-left:25px;background-size:20px !important;}
#top li span{color:#3b2a2b;padding:3px 0;padding-left:25px;background-size:20px !important;}
#top li.topIco1 span{background:url(../images/topIco1.webp) no-repeat left center;}
#top li.topIco2 span{background:url(../images/topIco2.webp) no-repeat left center;}
#top li.topIco3 a{background:url(../images/topIco3.webp) no-repeat left center;}
#top li.topIco4 a{background:url(../images/topIco4.webp) no-repeat left center;}
#top li.topIco5 a{background:url(../images/topIco5.webp) no-repeat left center;}
#top li.topIco6 a{background:url(../images/topIco6.webp) no-repeat left center;}
#top li.topIco7 a{background:url(../images/topIco7.webp) no-repeat left center;}
#top li a.btnCopy{font-size:10px;background:#9f6c3b;color:#ffd600;border-radius:20px;padding:3px 7px;}
#top li a.adminBtn{background:none;color:#9f6a3f;padding:3px;font-size:13px;border-radius:5px;}

#header{position:relative;z-index:50;height:90px;line-height:90px;background:#fafafd;transition:all .3s ease;}
#header .inner{position:relative;}
#header p.logo{position:absolute;left:30px;top:25px;width:360px;height:35px;overflow:hidden;}
#header p.logo img{width:100%;display:block;}

#header nav{display:contents;}
#header #gnb{float:right;}
#header #gnb li{position:relative;float:left;}
#header #gnb li img{float:left;}
#header #gnb li a{display:block;color:#1f1f1f;font-size:16px;margin-left:35px;}
#header #gnb li a:hover{color:#1f1f1f;}
#header #gnb li a.on{color:#1f1f1f;}
#header.fixed #gnb li a{color:#fff;} 
#header #gnb li ul{display:none;position:absolute;top:100%;left:-30px;width:220px;z-index:100;box-shadow:0 5px 10px rgba(0,0,0,0.1);border-radius:0 0 10px 10px;overflow:hidden;}
#header #gnb li ul li{float:none;}
#header #gnb li ul li a{display:block;margin:0;padding:10px 20px;line-height:20px;font-size:14px;color:#1f1f1f !important;background:#fafafd;}
#header #gnb li ul li a:hover,
#header #gnb li ul li a.on{color:#1f1f1f !important;background:#eeeeee;}
#header #gnb li ul li ul{top:0;left:100%;}
/* 네비 롤오버효과 */
.line_btn .style_3>a{position:relative;border-width:2px;z-index:1;}
.line_btn .style_3>a:before{position:absolute;left:0;bottom:32px;z-index:-1;width:100%;height:0;background:rgba(24,189,160,0.2);transition:all .15s ease-in-out;content:"";}
#header.fixed .line_btn .style_3 a:before{bottom:20px;background:rgba(255,255,255,0.3);}
.line_btn .style_3>a.on:before{height:20%;}
.line_btn .style_3>a:hover{border-color:#fff;}
.line_btn .style_3>a:hover:before{height:20%;}

#subImg{position:relative;width:100%;height:250px;background-size:1920px;overflow:hidden;}
#subImg .bgimg{position:absolute;transform: scale(1.2);animation:zoomOut 2s forwards;}
#subImg .bgimg img{width:1920px;}
@keyframes zoomOut{
	from{transform:scale(1.2);}
	to{transform:scale(1);}
}
#subImg .bg{display:none;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);}
#subImg .bg.on{display:block;}
#subImg .inner{position:relative;height:250px;padding:0;}
#subImg .breadcrumb{position:absolute;top:75px;color:#fff;display:block;width:100%;text-align:center;}
#subImg .breadcrumb a{color:#fff;}
/*#subImg h1{position:absolute;top:90px;color:#fff;display:block;width:100%;text-align:center;font-size:16px;letter-spacing:2px;font-family:Paperlogy-2ExtraLight}*/
#subImg h1{position:absolute; left:0; top:-9999px; width:0; height:0; margin:0; padding:0; font-size:0; text-indent:-9999px; overflow:hidden;}
#subImg div.copy{position:absolute;top:140px;color:#fff;display:block;width:100%;text-align:center;font-size:35px;font-weight:800;}
#subImg div.copy p{display:inline-block;opacity:0;transform:translateY(20px);animation:fadeIn 1s forwards;}
#subImg div.copy p.copy1{animation-delay:0s; /* 첫 번째 텍스트는 즉시 시작 */}
#subImg div.copy p.copy2{animation-delay: 0.5s; /* 두 번째 텍스트는 0.5초 후 시작 */}
@keyframes fadeIn {
	0%{opacity:0;transform:translateY(20px);}
	100%{opacity:1;transform:translateY(0);}
}
#subImg .search{position:absolute;top:160px;width:270px;left:50%;margin-left:-135px;}
#subImg .search .searchInput{width:200px;height:30px;padding:0 10px;border:none;border-bottom:1px solid #fff;background:none;color:#ffd600;font-size:16px;font-family:inherit !important;}
#subImg .search .search_btn{width:20px;height:20px;margin-left:10px;vertical-align:middle;}

#content{padding:50px 0;}
#content .portfolio_wrap{width:700px;margin:50px auto;font-family:'Pretendard';font-size:18px;font-weight:300;line-height:150%;color:#202020;word-break:keep-all;overflow:hidden;}
#content .portfolio_wrap h2{font-size:23px;font-weight:600;margin-top:50px;}
#content .portfolio_wrap p{padding:20px 0;}
#content .portfolio_wrap p strong{font-weight:700;box-shadow:inset 0 -10px 0 rgba(234,255,0,0.3);padding-left:.5%;padding-right:.5%;}
#content .portfolio_wrap.storepage table tbody td{padding:0;min-height:0;border:none;} /* 상세페이지 포트폴리오 table */
#content .portfolio_wrap.storepage table p{padding:0;} /* 상세페이지 포트폴리오 table */
#content .portfolio_wrap a.my_link{position:relative;display:inline-block;margin:5px auto;height:40px;line-height:40px !important;padding:0 40px 0 20px;background:#18bda0;color:#fff;font-size:18px;border-radius:5px;}
#content .portfolio_wrap a.my_link::after{position:absolute;font-family: xeicon !important;content:"\eaee";display:block;width:20px;height:20px;top:0;right:10px;}
#content .portfolio_wrap a.my_link:hover{background:#06ae9c;}
#content .portfolio_wrap a.ptf_link{position:relative;display:block;margin:15px auto;height:50px;line-height:50px !important;padding:0 20px;background:#18bda0;color:#fff;font-size:20px;border-radius:5px;}
#content .portfolio_wrap a.ptf_link:hover{background:#06ae9c;}
#content .portfolio_wrap a.ptf_link strong{box-shadow:none;padding:0;}
#content .portfolio_wrap a.ptf_link.style2{background:#FFD600;color:#3b2a2b;}
#content .portfolio_wrap a.ptf_link.style2:hover{background:#ffc600;}
#content .portfolio_wrap a.modoo_link{font-weight:600;color:#18BDA0;}
#content .portfolio_wrap a.modoo_link:after{display:inline-block;content:"\e980";font-family: xeicon !important;font-weight:500;font-size:15px;}
#content .portfolio_wrap a.modoo_link:hover{background:#18BDA0;color:#fff;}
.simple-board__read__extravars { display:none !important; }

#btmLink{color:#4e4e4e;background:#f7f8fa;border:1px solid #e0e0e0;border-left:none;border-right:none;}
#btmLink li{float:left;}
#btmLink a{color:#4e4e4e;line-height:50px;margin-right:30px;}

#footer{color:#4e4e4e;background:#f7f8fa;padding:60px 0;}
#footer .logo_footer{float:left;}
#footer .company{float:left;margin-left:137px;}
#footer .customer{margin-left:794px;color:#8f8f8f;}
#footer .customer a{color:#18bda0;}
#footer .tel{color:#4e4e4e;}
#footer .tel strong{font-size:20px;color:#18bda0;}
#footer .copyright{color:#8f8f8f;font-size:12px;margin-top:20px;}

.btn_top{display:none;width:50px;height:50px;position:fixed;right:38px;bottom:190px;z-index:2000;overflow:hidden;border-radius:30px;box-shadow:rgb(0 0 0 / 10%) 0px 4px 6px, rgb(0 0 0 / 15%) 0px 8px 30px, rgb(255 255 255 / 20%) 0px 0px 0px 1px inset !important;}
.btn_top:hover img{margin-top:-50px;}
.ban_call{position:fixed;left:5px;bottom:10px;z-index:10;
-webkit-animation: ban_call 7s linear infinite;
-moz-animation: ban_call 7s linear infinite;
-o-animation: ban_call 7s linear infinite;
animation: ban_call 7s linear infinite;}
/* 전화번호 애니메이션 */
@-webkit-keyframes ban_call {
	0%, 100%{-webkit-transform:translateY(0);}
	5%{-webkit-transform:translateY(-7px);}
	10%{-webkit-transform:translateY(0);}
	15%{-webkit-transform:translateY(-7px);}
	20%{-webkit-transform:translateY(0);}
}
@-moz-keyframes subCopy{
	0%, 100%{-moz-transform:translateY(0);}
	5%{-moz-transform:translateY(-7px);}
	10%{-moz-transform:translateY(0);}
	15%{-moz-transform:translateY(-7px);}
	20%{-moz-transform:translateY(0);}
}
@-o-keyframes subCopy{
	0%, 100%{-o-transform:translateY(0);}
	5%{-o-transform:translateY(-7px);}
	10%{-o-transform:translateY(0);}
	15%{-o-transform:translateY(-7px);}
	20%{-o-transform:translateY(0);}
}
@keyframes subCopy {
	0%, 100%{transform:translateY(0);}
	5%{transform:translateY(-7px);}
	10%{transform:translateY(0);}
	15%{transform:translateY(-7px);}
	20%{transform:translateY(0);}
}

/* 서브페이지 공통 */
.subtop{font-family:'Pretendard';font-size:16px;font-weight:400;line-height:150%;background:#fff;padding:100px 0 0;color:#202020;word-break:keep-all;overflow:hidden;}
.subtop h3{font-size:35px;font-weight:900;line-height:150%;color:#2d2d2d;text-align:center;}
.subtop .toptit{text-align:center;}
.subtop .toptit.margin_top{margin-top:100px;}
.subtop .toptit h2{font-size:18px;margin-bottom:30px;font-weight:500;}
.subtop .toptit h2 strong{font-weight:800;}
.subtop .toptit p.top{font-size:16px;margin-bottom:30px;font-weight:500;}
.subtop .toptit p strong{font-weight:700;}
.subtop .toptit p.strong{font-size:35px;font-weight:900;}
.subtop .toptit p.strong i{font-style:normal;font-weight:400;}
.subtop .subtop_con li{display:flex;margin:100px auto 0;}
.subtop .subtop_con li h2{font-size:30px;line-height:150%;font-weight:800;width:450px;}
.subtop .subtop_con li h2 i{font-style:normal;position:relative;z-index:1;}
.subtop .subtop_con li h2 i.on::after{content:'';position:absolute;z-index:-1;bottom:0;left:0;width:0;height:20px;/* 밑줄 두께 */background-color:#ffea00;animation:underline 3s forwards; /* 1초 동안 애니메이션 진행 */}
/* 밑줄 애니메이션 */
@keyframes underline {
    0%{width:0;}
	30%{width:0;}
    100%{width:100%;}
}
.subtop .subtop_con li p.tit{font-weight:700;margin-bottom:10px;}
.subtop .subtop_con li p.tit i{font-style:normal;font-weight:400;}
.subtop .subtop_con li div.style_dot p.tit{position:relative;padding-left:15px;font-weight:500;}
.subtop .subtop_con li div.style_dot p.tit:before{display:block;position:absolute;left:0;top:10px;width:4px;height:4px;content:'';border-radius:10px;background:#cecece;}
.subtop .subtop_con li.style2 p.con{margin-bottom:20px;}

/* 홈페이지 */
.topCon{width:100%;background:#f7f8fa;margin-top:100px;padding:100px 0 0;overflow:hidden;text-align:center;}
.topCon p.top{font-size:18px;margin-bottom:30px;font-weight:500;}
.topCon p strong{font-weight:700;}
.topCon p.strong{font-size:40px;font-weight:900;line-height:150%;}
.topCon p.strong i{font-style:normal;font-weight:400;}
.topCon .inner{width:1190px;padding:0 30px;margin:0 auto;}
.topCon .inner ul{margin:50px auto;}
.topCon .inner ul li{width:33.33%;float:left;display:block;text-align:center;padding:15px 0;}
.topCon .inner ul li p.con{height:100px;font-size:17px;color:#969696;line-height:1.5em;margin-top:0px;position:relative;}
.topCon .inner ul li p.con span{width:100%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}
.topCon .inner ul li p.con span strong{font-weight:normal;}
.topCon .inner ul li p.con span strong i{font-family:'나눔고딕',NanumGothic,'Nanum Gothic';font-style:normal !important;font-weight:bold;}
.topCon .inner ul li p.con{color:#626262;}
.topCon .inner ul li p.con span strong{color:#18bda0;}

/* 포트폴리오 확인메시지 */
.portfolio_top{margin-top:100px;padding-top:100px;background:#f7f8fa;}
.portfolio_msg{font-family:'Pretendard';font-size:18px;color:#8f8f8f;text-align:center;padding:10px 0;
-webkit-animation: subCopy 3.5s linear infinite;
-moz-animation: subCopy 3.5s linear infinite;
-o-animation: subCopy 3.5s linear infinite;
animation: subCopy 3.5s linear infinite;}
.portfolio_msg span{color:#ff380a;}
.portfolio_msg span{font-style:normal;position:relative;z-index:1;}
.portfolio_msg span.on::after{content:'';position:absolute;z-index:-1;bottom:0;left:0;width:0;height:20px;/* 밑줄 두께 */background-color:#ffea00;animation:underline 3s forwards; /* 1초 동안 애니메이션 진행 */}
@-webkit-keyframes subCopy{
	0%, 100%{opacity:1;}
	10%{opacity:0.5;}
	20%{opacity:1;}
	30%{opacity:0.5;}
	40%{opacity:1;}
}
@-moz-keyframes subCopy {
	0%, 100%{opacity:1;}
	10%{opacity:0.5;}
	20%{opacity:1;}
	30%{opacity:0.5;}
	40%{opacity:1;}
}
@-o-keyframes subCopy {
	0%, 100%{opacity:1;}
	10%{opacity:0.5;}
	20%{opacity:1;}
	30%{opacity:0.5;}
	40%{opacity:1;}
}
@keyframes subCopy {
	0%, 100%{opacity:1;}
	10%{opacity:0.5;}
	20%{opacity:1;}
	30%{opacity:0.5;}
	40%{opacity:1;}
}

/* 블로그, 모두, 카페, 스토어, 상세페이지 */
.topArea{background:#f7f8fa;padding:100px 0;margin:100px 0;text-align:center;}
.topArea p.top{font-size:18px;margin-bottom:30px;font-weight:500;}
.topArea p strong{font-weight:700;}
.topArea p.strong{font-size:40px;font-weight:900;line-height:150%;}
.topArea p.strong i{font-style:normal;font-weight:400;}
.blogTop{width:1190px;margin:50px auto 0;position:relative;}
.mobile .blogTop{width:100%;}
.blogTop .border{position:absolute;left:0;top:0;
-webkit-animation: border_img 1.2s linear infinite;
-moz-animation: border_img 1.2s linear infinite;
-o-animation: border_img 1.2s linear infinite;
animation: border_img 1.2s linear infinite;
}
/* 이미지 */
@-webkit-keyframes border_img {
	0%, 100%{opacity:1;}
	80%{opacity:0;}
}
@-moz-keyframes border_img {
	0%, 100%{opacity:1;}
	80%{opacity:0;}
}
@-o-keyframes border_img {
	0%, 100%{opacity:1;}
	80%{opacity:0;}
}
@keyframes border_img{
	0%, 100%{opacity:1;}
	50%{opacity:0;}
}
.pc_img.priceImg{margin:50px 0 0;text-align:center;} /* 모두, 카페, 스토어, 상세페이지 */

/* 크몽 입점 이벤트 */
.ban_kmong{position:fixed;left:10px;bottom:10px;z-index:10;
-webkit-animation: ban_kmong 7s linear infinite;
-moz-animation: ban_kmong 7s linear infinite;
-o-animation: ban_kmong 7s linear infinite;
animation: ban_kmong 7s linear infinite;}
.ban_kmong .close{position:absolute;right:20px;top:20px;}
/* 전화번호 애니메이션 */
@-webkit-keyframes ban_kmong {
	0%, 100%{-webkit-transform:translateY(0);}
	5%{-webkit-transform:translateY(-7px);}
	10%{-webkit-transform:translateY(0);}
	15%{-webkit-transform:translateY(-7px);}
	20%{-webkit-transform:translateY(0);}
}
@keyframes ban_kmong {
	0%, 100% {transform:translateY(0);}
	5% {transform:translateY(-7px);}
	10% {transform:translateY(0);}
	15% {transform:translateY(-7px);}
	20% {transform:translateY(0);}
}

#fakeM1{display:block;position:relative;z-index:1;width:100%;min-width:1250px;padding:1em 0;background:#fafafd;border-top:1px solid #dcd6d0;font-size:70px;color:#373737;text-align:center}

.btn_kakao{width:56px;height:56px;position:fixed;right:35px;bottom:40px;z-index:2000;overflow:hidden;border-radius:25px;box-shadow:rgb(0 0 0 / 10%) 0px 4px 6px, rgb(0 0 0 / 15%) 0px 8px 30px, rgb(255 255 255 / 20%) 0px 0px 0px 1px inset !important;}
/* 상세페이지 포트폴리오 테이블 */
.floatTable{margin:0 auto;}
.floatTable img{float:left;}
/* 갤러리 바로가기 버튼 */
a.gotoBtn{display:inline-block;margin:10px auto 0;height:40px;line-height:40px !important;padding:0 20px;background:#18bda0;color:#fff;font-size:14px;border-radius:5px;}
a.gotoBtn:hover{color:#ffd600;}

.bd_tmb_lst .tmb_wrp{border:none;}
.bd_tmb_lst p b{font-size:14px;line-height:2em;}
.btm_mn{border:none;}
.bd_tmb_lst li{width:33.33% !important;}
.tmb_wrp img.tmb{width:100%;max-width:500px;}
.cmt_editor{display:none;}

@media only screen and (max-width:1700px) {
.tmb_wrp img.tmb{width:90%;}
}

@media only screen and (max-width:1300px) {
.tmb_wrp img.tmb{width:80%;}
.bd_tmb_lst li{height:370px !important;}
}

@media only screen and (min-width:1250px) {
#header.fixed{position:fixed;top:0 !important;width:100%;height:60px;line-height:60px;z-index:200;background:#18bda0;transition:all .3s ease;}
#header.topUp{top:-60px;}
#header.fixed  p.logo{left:30px;top:12px;}
#header.fixed  p.logo img{margin-top:0;filter:brightness(0) invert(1);}
}