html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,img { margin:0; padding:0; }
body { overflow-x: hidden; font-family:"Nanum Gothic", "NanumGothic", "나눔고딕", "돋움", "dotum";}
li{ list-style:none}
p { line-height: 1.5;}
a { color: #6c757d;}
a:hover { color: #212529; text-decoration:none;}
h1,h2,h3,h4,h5,h6 { font-weight: 700;}
section { padding: 40px 0 40px 0;}
section h2.section-heading { font-size: 2.5rem; margin-top: 0; margin-bottom: 15px;}
section h3.section-subheading { font-size: 1.2rem; font-weight: 400; #font-style: italic; margin-bottom: 50px; text-transform: none;}
.font-size-xs {font-size: 0.75rem !important;}
.font-size-s {font-size: 0.875rem !important;}
.font-size-m {font-size: 1rem !important;}
.font-size-l {font-size: 1.15rem !important;}
.font-size-xl {font-size: 1.25rem !important;}
.font-size-2xl {font-size: 1.4rem !important;}
/*
.font-size-xs {font-size: 80% !important;}
.font-size-s {font-size: 90% !important;}
.font-size-m {font-size: 100% !important;}
.font-size-l {font-size: 115% !important;}
.font-size-xl {font-size: 130% !important;}
.font-size-2xl {font-size: 145% !important;}
.font-size-12 {font-size: 12px !important;}
.font-size-13 {font-size: 13px !important;}
.font-size-14 {font-size: 14px !important;}
.font-size-16 {font-size: 16px !important;}
.font-size-18 {font-size: 18px !important;}
.font-size-20 {font-size: 20px !important;}
.font-size-22 {font-size: 22px !important;}
.font-size-24 {font-size: 24px !important;}
.font-size-26 {font-size: 26px !important;}
.font-size-28 {font-size: 28px !important;}
.font-size-30 {font-size: 30px !important;}
.font-size-32 {font-size: 32px !important;}
.font-size-34 {font-size: 34px !important;}
.font-size-36 {font-size: 36px !important;}
.font-size-38 {font-size: 38px !important;}
.font-size-40 {font-size: 40px !important;}
.font-size-42 {font-size: 42px !important;}
.font-size-46 {font-size: 46px !important;}
.font-size-48 {font-size: 48px !important;}
.font-weight-300 {font-weight: 300 !important;}
.font-weight-400 {font-weight: 400 !important;}
.font-weight-600 {font-weight: 600 !important;}
.font-weight-700 {font-weight: 700 !important;}
.font-weight-800 {font-weight: 800 !important;}
*/
/* PC 상단 메뉴 */
#header { position:relative; z-index:999; width:100%; background:#fff; @height:100px; @background:rgba(255, 255, 255, 0.5); @border-bottom:1px solid #554839; *zoom:1;}
#header.fixed {position:fixed; z-index:999; @height:60px; top:0px; background:#f1f3f4; border-bottom:1px solid #554839 !important;}
#header .inner { position:relative; max-width:1100px; margin:0 auto;}
#header .top_logo { margin:0 auto; text-align:left; }
#header .top_logo img {margin:10px 0 10px 10px; max-height:80px; }
#header.fixed .top_logo img { margin:5px 0 5px 10px; max-height:60px; } /* 스크롤시 메뉴고정 크기줄이기 */
#gnb {position:absolute; top:0; right:0; float:right; text-align:left; z-index:9999; }
#gnb ul {position: relative; float:right;}
#gnb ul li {position: relative; float: left; margin:45px 10px 0 10px;}
.fixed #gnb ul li {margin:25px 10px 0 10px;} /* 스크롤시 메뉴고정 크기줄이기 */
#gnb ul li a {color:#404040; text-align: center; font-size:18px; line-height:18px; font-weight:600; padding:20px 10px; letter-spacing: 2px;}
#gnb ul li a:hover {color:#26a7e1; }
#gnb ul li .font-em {color:#0d6fb8}
#gnb ul ul {position:absolute; width:150px; left:-9999px; border: 1px solid #dddddd; background-color: #FFF;}
#gnb ul li:hover > ul {left:-10px; top:40px; }
.fixed #gnb ul li:hover > ul {left:-10px; top:40px;} /* 스크롤시 메뉴고정 크기줄이기 */
#gnb ul ul li:hover > ul ,
.fixed #gnb ul ul li:hover > ul {left:148px; top:-10px;} /* 스크롤시 메뉴고정 크기줄이기 */
#gnb ul ul ul li:hover > ul {left:148px; top:-10px;}
#gnb ul ul ul ul li:hover > ul {left:148px; top:-10px;}
#gnb ul ul li {position: relative; float: none; margin:10px 0px;}
.fixed #gnb ul ul li { margin:10px 0px;} /* 스크롤시 메뉴고정 크기줄이기 */
#gnb ul ul li a {color:#909090; font-size:16px; line-height:20px; font-weight:400; padding:10px 10px; letter-spacing: 1px;}
#gnb ul ul li a:hover {color:#000;}
#gnb ul ul:before { content:""; position:absolute; top:-9px; left:55px; display:inline-block; width:0; height:0; border-right:9px solid transparent; border-top:9px solid #bbb; border-left:9px solid transparent; border-bottom:none; -webkit-transform:rotate(180deg); transform:rotate(180deg); }
#gnb ul ul:after { content:""; position:absolute; top:-8px; left:56px; display:inline-block; width:0; height:0; border-right:8px solid transparent; border-top:8px solid #fff; border-left:8px solid transparent; border-bottom:none; -webkit-transform:rotate(180deg); transform:rotate(180deg); }
#gnb ul ul ul:before { content:""; position:absolute; top:10px; left:-9px; display:inline-block; width:0; height:0; border-top:9px solid transparent; border-left:9px solid #bbb; border-bottom:9px solid transparent; border-right:none; -webkit-transform:rotate(180deg); transform:rotate(180deg); }
#gnb ul ul ul:after { content:""; position:absolute; top:11px; left:-8px; display:inline-block; width:0; height:0; border-top:8px solid transparent; border-left:8px solid #fff; border-bottom:8px solid transparent; border-right:none; -webkit-transform:rotate(180deg); transform:rotate(180deg);}
#gnb li:hover > a {color:#26a7e1;}
@media (max-width: 992px) {
#gnb {display:none;}
#header .top_logo img {max-width:160px; }
#header.fixed .top_logo img { max-width:120px; } /* 스크롤시 메뉴고정 크기줄이기 */
}
/* MOBILE 메뉴 */
#mobile_gnb{}
#mgnb, #mgnb ul, #mgnb li{margin:0; padding:0; list-style:none;}
#mgnb{position:absolute; width:100%; z-index:999; border-bottom:2px solid #444444;}
#mgnb ul{display:none;}
#mgnb li{line-height:250%; margin-top:0px; border-top:1px solid #e3e3e3; background:#f1f1f1; position:relative; width:100%;}
* html #mgnb li{float:left; display:inline;}
#mgnb li a{padding-left:20px; color:#404040; letter-spacing: 1px; display:block;}
#mgnb li span{float:right;position:absolute;top:5px;right:15px;width:30px;height:30px;cursor:auto;font-size:0; cursor:pointer; padding:5px;}
#mgnb li span, #mgnb li span.collapsed{background:url(../../img/collapsed.gif) no-repeat 5px 5px;}
#mgnb li span.expanded{background:url(../../img/expanded.gif) no-repeat 5px 5px;}
#mgnb li li{ background:#fff;}
#mgnb li li a{padding-left:30px;}
#mgnb li li span{float:right;position:absolute;top:5px;right:5px;width:13px;height:13px;cursor:auto;font-size:0;}
#mgnb li li li a{padding-left:40px;}
#mgnb li li li span{left:56px;}
.gnb_btn {position:absolute; top: 12px; right: 20px; z-index:9999; cursor: pointer; color:#000;}
#header.fixed .gnb_btn {top: 0px;}
.gnb_btn .closebtn { display: none; font-size:36px;}
.gnb_btn .openbtn {font-size:36px; }
#open_bg {position: fixed; top: 0; width:100%; height:100%; z-index:2; background-color:rgba(0,0,0,0.6); display:none;}
#mgnb { display:none;}
@media (min-width: 992px) {
#mobile_gnb {display:none;}
.gnb_btn {display:none;}
#open_bg {display:none !important;}
}
/* 메인스크롤이미지 */
.swiper-container { padding-top: 0px; width: 100%; height: 300px;}
.swiper-container .masthead { text-align: center; color: white; background-repeat: no-repeat; background-attachment: scroll; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.swiper-container .swiper-pagination-bullet { width: 15px; height: 15px; display: inline-block; border-radius: 50%; background: #61b1c0; opacity: 0.2; }
.swiper-container .swiper-pagination-bullet-active { opacity: 1; background: #61b1c0;}
.swiper-container .swiper-pagination-bullets { bottom: 5px; }
.swiper-container .masthead .intro-text { margin-top: 120px; padding:0 30px;}
.swiper-container .masthead .intro-text .intro-lead-in { font-size: 16px; line-height: 20px; margin-bottom: 15px;}
.swiper-container .masthead .intro-text .intro-heading { font-size: 24px; font-weight: 700; line-height: 30px; margin-bottom: 20px;}
@media (min-width: 768px) {
.swiper-container { padding-top: 0px; width: 100%; height: 500px;}
.swiper-container .masthead .intro-text { margin-top:190px;}
.swiper-container .masthead .intro-text .intro-lead-in { font-size: 26px; line-height: 32px; margin-bottom: 20px;}
.swiper-container .masthead .intro-text .intro-heading { font-size: 40px; font-weight: 700; line-height: 48px; margin-bottom: 30px;}
}
/* 서브타이틀이미지 */
.sub_masthead { text-align: center; color: white; background-image: url("img/main-img1.jpg"); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: cover;}
.sub_masthead .intro-text { padding-top: 50px; padding-bottom: 20px;}
.sub_masthead .intro-text .intro-lead-in { font-size: 18px; line-height: 22px; margin-bottom: 15px;}
.sub_masthead .intro-text .intro-heading { font-size: 34px; font-weight: 700; line-height: 50px; margin-bottom: 20px;}
@media (min-width: 768px) { .sub_masthead .intro-text { padding-top: 150px; padding-bottom: 100px;}
.sub_masthead .intro-text { padding-top: 90px; padding-bottom: 40px;}
.sub_masthead .intro-text .intro-lead-in { font-size: 20px; line-height: 40px; margin-bottom: 20px; }
.sub_masthead .intro-text .intro-heading { font-size: 60px; font-weight: 700; line-height: 75px; margin-bottom: 25px; }
}
/* 홈페이지제작 */
section#homepage img {max-width: 180px; text-align: center; @color: white; @border: 7px solid #e9ecef; @border-radius: 100%; @background-color: #FFF;}
/* 포토폴리오 */
#portfolio .portfolio-item { right: 0; margin: 0 0 15px; }
#portfolio .portfolio-item .portfolio-link { position: relative; display: block; max-width: 400px; margin: 0 auto; cursor: pointer; border: 1px solid #dee2e6; border-bottom: none; padding:0px; background-color: #fff;}
#portfolio .portfolio-item .portfolio-link img:hover{opacity: 0.5;}
#portfolio .portfolio-item .portfolio-caption { max-width: 400px; margin: 0 auto; padding: 5px; text-align: center; background-color: #fff; border: 1px solid #dee2e6; @border-top: none;}
#portfolio .portfolio-item .portfolio-caption h4 { font-size: 16px; margin: 0; text-transform: none;}
#portfolio .portfolio-item .portfolio-caption p { @display:none; font-size: 12px; @font-style: italic; margin: 0;}
#portfolio * { z-index: 2;}
@media (min-width: 767px) {
#portfolio .portfolio-item { margin: 0 0 30px;}
}
.portfolio-modal { padding-right: 0px !important;}
.portfolio-modal .modal-dialog { margin: 1rem; max-width: 100vw;}
.portfolio-modal .modal-content { padding: 100px 0; text-align: center;}
.portfolio-modal .modal-content h2 { font-size: 3em; margin-bottom: 15px;}
.portfolio-modal .modal-content p { margin-bottom: 30px;}
.portfolio-modal .modal-content p.item-intro { font-size: 16px; font-style: italic; margin: 20px 0 30px;}
.portfolio-modal .modal-content ul.list-inline { margin-top: 0; margin-bottom: 30px;}
.portfolio-modal .modal-content img { margin-bottom: 30px;}
.portfolio-modal .modal-content button { cursor: pointer;}
.portfolio-modal .close-modal { position: absolute; top: 25px; right: 25px; width: 75px; height: 75px; cursor: pointer; background-color: transparent;}
.portfolio-modal .close-modal:hover { opacity: 0.3;}
.portfolio-modal .close-modal .lr {
/* Safari and Chrome */
z-index: 1051; width: 1px; height: 75px; margin-left: 35px;
/* IE 9 */
-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); background-color: #212529;
}
.portfolio-modal .close-modal .lr .rl {
/* Safari and Chrome */
z-index: 1052; width: 1px; height: 75px;
/* IE 9 */
-webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); background-color: #212529;
}
.layer-modal { padding-right: 0px !important;}
.layer-modal .modal-dialog { margin: 1rem; max-width: 100vw;}
.layer-modal .modal-content { padding: 100px 0; text-align: center;}
.layer-modal .modal-content h2 { font-size: 3em; margin-bottom: 15px;}
.layer-modal .modal-content p { margin-bottom: 30px;}
.layer-modal .modal-content p.item-intro { font-size: 16px; font-style: italic; margin: 20px 0 30px;}
.layer-modal .modal-content ul.list-inline { margin-top: 0; margin-bottom: 30px;}
.layer-modal .modal-content img { margin-bottom: 30px;}
.layer-modal .modal-content button { cursor: pointer;}
.layer-modal .close-modal { position: absolute; top: 25px; right: 25px; width: 75px; height: 75px; cursor: pointer; background-color: transparent;}
.layer-modal .close-modal:hover { opacity: 0.3;}
.layer-modal .close-modal .lr { /* Safari and Chrome */ z-index: 1051; width: 1px; height: 75px; margin-left: 35px; /* IE 9 */ -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); background-color: #212529;}
.layer-modal .close-modal .lr .rl { /* Safari and Chrome */ z-index: 1052; width: 1px; height: 75px; /* IE 9 */ -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); background-color: #212529;}
/* 디자인친구배너 */
section#design79 { background-color: #212529; background-image: url("../../img/printed_matter_bg.jpg"); background-repeat: no-repeat; background-position: center; background-attachment:fixed; -webkit-background-size:cover; background-size:cover;}
section#design79 .section-heading { color: #fff;}
section#design79 .section-subheading { color: #fff;}
footer { padding: 25px 0; }
footer span.copyright { font-size: 90%; line-height: 30px; text-transform: none; color: #ced4da;}
footer ul.quicklinks { font-size: 90%; line-height: 40px; margin-bottom: 0; text-transform: none;}
/* 문의견적 이메일문의 */
form#contactForm { background-color: #fff;}
form#contactForm .section-heading { color: #fff;}
form#contactForm .form-group { margin-bottom: 10px;}
form#contactForm .form-group input, section#contact .form-group textarea { padding: 10px;}
form#contactForm .form-group input.form-control { height: auto;}
form#contactForm .form-group textarea.form-control { height: 150px;}
form#contactForm .form-control:focus { border-color: #fed136; box-shadow: none;}
form#contactForm ::-webkit-input-placeholder { font-weight: 700; color: #ced4da;}
form#contactForm :-moz-placeholder { font-weight: 700; color: #ced4da; /* Firefox 18- */}
form#contactForm ::-moz-placeholder { font-weight: 700; color: #ced4da; /* Firefox 19+ */}
form#contactForm :-ms-input-placeholder { font-weight: 700; color: #ced4da;}