@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900|Roboto:400,500,700,900');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:400,700,900');


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, 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, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;

}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {text-decoration: none; color: #222222;}
a:hover {text-decoration: none;  color: #222222;}

body{ font-family: 'Lato', 'Malgun Gothic', sans-serif;  margin: 0;    padding: 0;   font-size: 0.75em; color: #333333; }


#wrap{     position: relative;    overflow: hidden;     max-width: 720px;    margin: auto;}


#header .inner{ position: relative; height: 65px; 	display: flex;
	justify-content: space-between; align-items: center;} 
#header .inner h2.logo a {font-size: 27px; display: block; color: #1d1d1d;
	 font-family:'Noto Sans KR' , sans-serif; font-weight: 900; margin-left: 10px;
	background: repeating-linear-gradient(to right, #0879eb, #7934c8);
    color: transparent;
    -webkit-background-clip: text;}
#header .inner h2.logo a span.small_tx {font-size: 14px; display: block; font-weight: normal;   }
#header .inner h2.logo a span.color {color: #f0553c;}
#header .topbanner {float: right;     padding: 5px 0;}
h2.logo{    position: absolute;    left: 50%;    transform: translateX(-50%);}
#smtg_logo_div img {width: 100px;}



#header .menu { display: block; 
	overflow-y: auto;
	position: fixed; right: -100%; top: 0px; width: 80%; background-color: #fafafa; z-index: 100; height: 100%;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s; }

#header .bg_menu {display: none; position: absolute; left: 0; top: 0px; width: 100%; background: rgba(0,0,0,0.8); z-index: 90; height: 100%; }
#header .menu > ul {font-size: 0; text-align: center; margin-top: 30px;}
#header .menu li {display: block; text-align: left;   padding-left: 20px; }
#header .menu li a { font-size: 16px;  color: #222222; padding: 8px 0px; display: block; font-weight: bold;  }
#header .menu .submenu{}
#header .menu .submenu a {font-size: 14px; color: #555555; font-weight: normal;}

/* »ó´Ü¸Þ´º Çܹö°Å¸Þ´º */
.menu_trigger,
.menu_trigger span {
	display : inline-block !important;
	transition : all .4s;
	box-sizing : border-box;
}
.menu_trigger {
	display: block;
	position: absolute;
	width : 30px;
	height : 30px;
	right: 0px;
	margin-right: 10px;
	padding: 0 !important;
	z-index: 110;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s; 
}

.menu_trigger span {
	position : absolute;
	left : 0;
	width : 100%;
	height : 3px;
	background-color : #333;
}
.menu_trigger span:nth-of-type(1) {	top : 0;		}
.menu_trigger span:nth-of-type(2) {	top : 12px;	width: 85%; margin-left: 15%;}
.menu_trigger span:nth-of-type(3) {	top : 24px;	}
.menu_trigger.active span:nth-of-type(1) {
	-webkit-transform:translateY(16px) rotate(-45deg);
	transform:translateY(16px) rotate(-45deg);
}
.menu_trigger.active span:nth-of-type(2) {
	opacity : 0;
}
.menu_trigger.active span:nth-of-type(3) {
	-webkit-transform:translateY(-8px) rotate(45deg);
	transform:translateY(-8px) rotate(45deg);
}

.mainslider  {position: relative;}
.ban_solution1 {margin: 30px 10px; }
.ban_solution1 img {width: 100%; height: auto; } 
.swiper-slide img {width: 100%; height: auto; }

/* Æ÷Æ®Æú¸®¿À */
.portfolio_ebook, .portfolio_print {padding: 50px 10px;  }
.portfolio_ebook h3, .portfolio_print h3{font-size: 22px; text-align: center; font-weight: bold; padding: 0 0 20px 10px; font-family: Roboto, sans-serif; }
.portfolio_ebook h3 p, .portfolio_print h3 p {font-size: 16px; font-weight: normal; padding-top: 5px; }

.half {display: flex;
	justify-content: space-between;
	align-items: center; text-align: center;}
.half a {width: 49%;}



.ourjob ul {font-size: 0;
	display: flex;
	justify-content: space-between;
	max-width: 1400px;
	border-top: 1px solid #cccccc;
	}



/* °ßÀûÀÇ·Ú ¼öÁÖÇöȲ ÃÖ±Ù±Û */
.bbslist {font-size: 0; }
.bbslist li {display: block; text-align: center; font-size: 14px;     vertical-align: top; margin-bottom: 20px;}


.tablegall {margin: 10px auto ;}
.remodal {padding: 5px !important;}

/* ÇÏ´Ü */
#footer { margin: 20px 0 30px;}
#footer .inner_link {border-top: 2px #555555 solid; border-bottom: #555555 1px solid; }
#footer .inner_link ul {width: 100%; margin: auto; text-align: center;}
#footer .inner_link li {display: inline-block; }
#footer .inner_link li a {display: inline-block; padding: 15px 5px; color: #333333; font-size: 13px;}
#footer .tail_box {width: 100%; margin: auto; position: relative; padding: 20px 0;}
#footer .tail_box:after{display:block;content:"";clear:both;}
#footer .tail_box .company{ color: #999999;  line-height: 25px; font-size: 13px; padding: 0 20px;  }
#footer .tail_box .tel {margin: 5px 20px 10px; background-color: #222222;  border-radius: 5px; text-align: center; }
#footer .tail_box .tel a {display: block; font-weight: bold; padding: 15px 0; font-size: 15px; color: #ffffff;}
#footer .tail_box .kakao {margin: 5px 20px 20px; background-color: hsl(49, 88%, 68%);  border-radius: 5px; text-align: center; }
#footer .tail_box .kakao a {display: block; font-weight: bold; padding: 15px 0; font-size: 15px; color: #222222;}


#footer .account {  border: 1px solid #dddddd; background-color: #f6f6f6; text-align: center;     margin: 20px;    padding: 10px;}
#footer .account h3{font-weight: bold; font-size: 14px; color: #333333; line-height: 25px;}
#footer .account p {font-size: 14px; color: #555555; margin: 5px 0 20px;}
#footer .account span {font-size: 11px; color: #737373; line-height: 15px;}


.snstalk { position: fixed;  width: 110px;  bottom: 20px;    right: -3px;    z-index: 50; }
.snstalk a {  margin: 5px 0;    display: block; }
.snstalk a img {width: 100%;}
.snstalk .btn_gotop {width: 100%; background: #957f7f url("/print/images/btn_up1.png") 9px 8px no-repeat;  border-radius: 6px; height: 32px; line-height: 32px; font-size: 14px; font-weight: bold; text-align: center; color: #ffffff; padding-left: 20px;}
.snstalk .btn_gotop:hover {background: #645252 url("/print/images/btn_up1.png") 9px 8px no-repeat;  }

.snskakao {    position: fixed;    bottom: 60px;    right: -3px;    z-index: 201;}
.snskakao .kakao { display: block;    padding: 5px 10px;    width: 90px;    font-size: 18px;
    text-align: center;    background-color: #ffdc00;    border-radius: 7px;
    color: #222222;    letter-spacing: -1px;    font-weight: 500;
    box-shadow: 2px 1px 5px 1px rgb(0 0 0 / 3%);
}
.btn_quick{   position: fixed;    bottom: 140px;    right: -3px;    z-index: 999;
 display: block;    padding: 20px 10px;    width: 90px;   font-size: 18px;    text-align: center;  border-radius: 7px 0 0 7px; 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);  box-shadow: 2px 1px 5px 1px rgb(0 0 0 / 3%);}
.btn_quick a{color: #ffffff; font-weight: 600;  }

.main_quick_esti { padding: 20px 10px;    width: 90%;   font-size: 18px;    text-align: center;  border-radius: 7px;
	margin: 20px auto; 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);  box-shadow: 2px 1px 5px 1px rgb(0 0 0 / 3%);}
.main_quick_esti a{color: #ffffff; font-weight: 600;  }


.colwidth {width: 100%; margin: auto;}
.displaynone {display:none !important;}

.bbslist li {position: relative;}
.bbslist li h3 a{font-size: 16px; padding: 0 0px 12px 0px; border-bottom: 1px solid #cccccc; text-decoration: none; color: #333333; margin: 0px 20px 12px 30px; display: block; text-align: left; font-weight: bold;}
.bbslist li h3 a span {display: block; position: absolute; top: 10px; right: 30px; font-size: 11px;}
.bbslist a {color: #333333;}


/* ¸ÞÀÎ °Ô½ÃÆÇ Æ÷Æ®Æú¸®¿À latest */
#container .portfolio1 ul.right_port  {width: 100%; text-align: center;}
#container .portfolio1 .right_port li {width: 47%; margin: 0 5px 10px;}
#container .portfolio1 li img.portimg {width: 100%; height: auto; }
#container .portfolio1 .right_port li a.tit {left: 15px; bottom: 10px; font-size: 14px;}

#container .portfolio2 ul.right_port  {width: 100%; text-align: center;}
#container .portfolio2 .right_port li {width: 46%; margin: 0 5px 10px;}
#container .portfolio2 li img.portimg {width: 100%; height: auto; }
#container .portfolio2 .right_port li a.tit {left: 15px; bottom: 10px; font-size: 14px;}

.portfolio_mobile {position: relative; margin: 20px auto 50px;}
.portfolio_mobile img.cover {width: 100%; }
.portfolio_mobile img.book1 {position: absolute;     left: 6%;    top: 38%;    width: 41%; z-index: -1;}
.portfolio_mobile img.book2 {position: absolute;     left: 55%;    top: 27%;    width: 41%;  z-index: -1;}