/* ===============================================================================

    ASSETS STYLESHEET: 마루 호스팅 서비스 스타일

=============================================================================== */

/* ---------- 시스템 설계 ---------- */

/* 공통스타일 */
.system_design .article-base { overflow: hidden; text-align: center; }
.system_design .article-base h3 { margin-bottom: 40px; font-size: 20px; font-weight: 700; color: #212121; }
.system_design .article-base h3 span.dot { display: block; }
.system_design .article-base h3 small { display: block; line-height: 20px; margin-top: 10px; font-size: 13px; }
@media all and (min-width: 768px) {
    .system_design .article-base h3 { margin-bottom: 50px; font-size: 24px; }
    .system_design .article-base h3 small { font-size: 14px; }
}
@media all and (min-width: 1024px) {
    .system_design .article-base h3 { line-height: 1; font-size: 30px; }
    .system_design .article-base h3 small { line-height: 24px; margin-top: 20px; font-size: 16px; }
}

/* 메인 디스플레이 */
.system_design .display { overflow: hidden; background: #1D1D1D; }
.system_design .display .container { padding: 60px 20px; }
.system_design .display .text-box { text-align: center; }
.system_design .display .text-box h2 { margin-bottom: 20px; font-size: 18px; font-weight: 700; color: #fff; }
.system_design .display .text-box h2 small { display: block; margin-top: 8px; font-size: 14px; color: #e1e1e1; }
.system_design .display .text-box p { line-height: 20px; margin-bottom: 0; font-size: 12px; color: #c1c1c1; }
.system_design .display .img-box { text-align: center; }
.system_design .display .img-box img { width: 100%; max-width: 80px; margin-top: 50px; margin-bottom: 20px; }
@media all and (min-width: 768px) {
    .system_design .display .container { padding: 110px 50px 50px; }
    .system_design .display .text-box h2 { margin-top: 0; font-size: 18px; }
    .system_design .display .text-box h2 small { margin-top: 12px; font-size: 15px; }
    .system_design .display .text-box p { line-height: 22px; font-size: 13px; }
    .system_design .display .img-box img { margin-top: 0; max-width: 80px; }
}
@media all and (min-width: 1024px) {
    .system_design .display { margin-top: 60px; }
    .system_design .display .container { padding: 80px; }
    .system_design .display .text-box { float: left; width: 60%; text-align: left; }
    .system_design .display .text-box h2 { line-height: 1; margin-bottom: 10px; font-size: 24px; }
    .system_design .display .text-box h2 small { display: none; margin-top: 15px; font-size: 16px; }
    .system_design .display .img-box { float: right; padding-right: 100px; text-align: right; }
    .system_design .display .img-box img { height: 78px; margin-bottom: 0; }
}

/* 고객상담 */
.system_design .system-counseling { background-color: #f0f0f0; }
.system_design .system-counseling .container { padding: 50px 20px; }
.system_design .system-counseling .img-box > img { width: 100%; }
@media all and (min-width: 768px) {
    .system_design .system-counseling .container { padding: 80px 30px; }
    .system_design .system-counseling h3 small { width: 65%; margin: 10px auto 0; }
    .system_design .system-counseling .img-box > img { max-width: 480px; }
}
@media all and (min-width: 1024px) {
    .system_design .system-counseling .container { padding: 100px 30px; }
    .system_design .system-counseling h3 small { width: 100%; margin: 20px auto 0; }
    .system_design .system-counseling .img-box > img { max-width: 600px; }
}

/* 서비스 단계별 구축안 */
.system_design .build-step-container > .container { padding: 50px 20px; }
.system_design .build-step { margin-bottom: 30px; padding: 20px; border: 3px solid #49B8BE; border-radius: 8px; text-align: left; }
.system_design .build-step:last-of-type { margin-bottom: 0; }
.system_design .build-step h4 { margin-bottom: 30px; font-size: 16px; font-weight: 700; color: #49B8BE; }
.system_design .build-step h4 small { display: block; line-height: 18px; margin-top: 8px; padding-left: 5px; font-size: 12px; }
.system_design .build-step h4 small br { line-height: 24px; }
.system_design .build-step blockquote { margin-bottom: 30px; padding: 15px; background-color: #f0f0f0; font-size: 12px; }
.system_design .build-step blockquote label { display: block; margin-bottom: 5px; font-size: 13px; }
.system_design .build-step ul { font-size: 0; }
.system_design .build-step li { margin-bottom: 30px; }
.system_design .build-step li:last-child { margin-bottom: 0; }
.system_design .build-step li h5 { margin-bottom: 10px; font-size: 13px; font-weight: 700; }
.system_design .build-step li h5 small { display: block; line-height: 18px; margin-top: 5px; font-size: 12px; font-weight: 400; }
.system_design .build-step .img-box { font-size: 0; }
.system_design .build-step .img-box > img { width: 100%; }
.system_design .build-step .img-box > span { display: block; margin-top: 5px; font-size: 11px; color: #616161; text-align: center; }
.system_design .build-step .box-style { width: auto; margin-bottom: 10px; padding: 15px; border: 1px solid #232323; border-radius: 10px; }
@media all and (min-width: 768px) {
    .system_design .build-step-container > .container { padding: 80px 30px; }
    .system_design .build-step { max-width: 600px; margin: 0 auto 30px; padding: 30px; }
    .system_design .build-step h4 small { font-size: 13px; }
    .system_design .build-step blockquote { padding: 20px; font-size: 13px; }
    .system_design .build-step blockquote label { font-size: 14px; }
    .system_design .build-step .img-box.max-width { text-align: center; }
    .system_design .build-step .img-box.max-width img { max-width: 300px; }
    .system_design .build-step .img-box > span { font-size: 12px; color: #414141; }
    .system_design .build-step li { margin-bottom: 40px; }
    .system_design .build-step li h5 { margin-bottom: 20px; }
    .system_design .build-step .box-style { margin-bottom: 15px; }
}
@media all and (min-width: 1024px) {
    .system_design .build-step-container > .container { padding: 100px 30px; }
    .system_design .build-step { max-width: 768px; }
    .system_design .build-step h4 { font-size: 18px; vertical-align: top; }
    .system_design .build-step h4 small { display: inline-block; margin-top: 15px; padding-left: 10px; font-size: 14px; font-weight: 700; color: #414141; }
    .system_design .build-step .img-box.max-width img { max-width: 400px; }
    .system_design .build-step .img-box > span { font-size: 13px; }
    .system_design .build-step li h5 { padding-left: 15px; font-size: 14px; }
    .system_design .build-step li h5 small { display: inline-block; padding-left: 10px; font-size: 13px; }
}

/* 운영 플랫폼 스템콘 */
.system_design .system-type { background-color: #3C3C3B; }
.system_design .system-type .container { padding: 50px 20px; }
.system_design .system-type h3 { margin-bottom: 30px; color: #F6DD55; }
.system_design .system-type p { line-height: 24px; margin-bottom: 30px; font-size: 13px; color: #fff; text-align: left; }
.system_design .system-type a { display: block; padding-right: 10px; color: #fff; font-size: 16px; opacity: 0.7; text-align: right; transition: all 0.3s;}
.system_design .system-type a > img { position: relative; top: 1px; width: 30px; padding-left: 10px; }
.system_design .system-type a:hover { opacity: 1; }
@media all and (min-width: 768px) {
    .system_design .system-type .container { padding: 80px 30px; }
    .system_design .system-type p { line-height: 28px; padding: 0 30px; font-size: 14px; text-align: center; }
    .system_design .system-type a { padding-right: 0; text-align: center; }
}
@media all and (min-width: 1024px) {
    .system_design .system-type .container { padding: 100px 30px; text-align: left; }
    .system_design .system-type p { line-height: 32px; padding: 0; font-size: 18px; text-align: left; }
    .system_design .system-type a { font-size: 20px; text-align: left; }
    .system_design .system-type a > img { top: 2px; width: 35px }
}

/* 시스템 설계 구축시 고려사항 */
.system_design .considerations { position: relative; background-color: #49B8BE; }
.system_design .considerations:before { content: ""; z-index: 1; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 278px; background-color: #49B8BE; }
.system_design .considerations .container { padding: 50px 20px; }
.system_design .considerations h3 { color: #fff; }
.system_design .considerations h3 span.dot { display: none; }
.system_design .considerations h3 small { color: #fff; }
.system_design .considerations-contents { z-index: 5; display: block; position: relative; }
.system_design .considerations-contents > li { float: none; width: 100%; }
.system_design .considerations-contents > li > div { height: 100%; margin: 7.5px 7.5px 0; border-radius: 5px; box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.17); background-color: #ffffff; text-align: center; }
.system_design .considerations-contents > li > div > h4 { padding: 15px 0 8px; font-size: 16px; border-bottom: 2px solid #f9f9f9; color: #49B8BE; font-weight: 700; }
.system_design .considerations-contents > li > div > dl { display: block; padding: 20px 20px 10px 25px; }
.system_design .considerations-contents > li > div > dl > dd { position: relative; float: none; width: 100%; line-height: 1.5; padding-left: 27px; padding-bottom: 15px; letter-spacing: -0.5px; font-size: 14px; text-align: left; font-weight: 500; }
.system_design .considerations-contents > li > div > dl > dd:before { content:""; position: absolute; top: 2px; left: 0; width: 17px; height: 17px; background: url(/maruhosting/assets/images/service/system_design/ico_check.svg) no-repeat; }
.system_design .considerations-contents > li > div > dl > dd > span { display: block; color: #787878; }
@media all and (min-width: 768px) {
    .system_design .considerations .container { padding: 80px 30px; }
    .system_design .considerations-contents { display: flex; }
    .system_design .considerations-contents > li { width: 33.33333%; }
    .system_design .considerations-contents > li:nth-child(1) { order: 1; }
    .system_design .considerations-contents > li:nth-child(2) { order: 2; }
    .system_design .considerations-contents > li:nth-child(3) { order: 3; }
    .system_design .considerations-contents > li > div > dl { padding: 20px 20px 10px 25px; border-radius: 15px;}
    .system_design .considerations-contents > li > div > h4 { padding: 20px 0 14px; font-size: 16px; letter-spacing: -0.6px;}
    .system_design .considerations-contents > li > div > dl > dd { float: none; width: 100%; padding-left: 27px; font-size: 14px; } 
    .system_design .considerations-contents > li > div > dl > dd:before { top: 2px; left: 0;}
}
@media all and (min-width: 1024px) {
    .system_design .considerations { background-color: transparent; }
    .system_design .considerations .container { padding: 100px 30px; }
    .system_design .considerations h3 { color: #212121; }
    .system_design .considerations h3 span.dot { display: block; }
    .system_design .considerations h3 small { color: #212121; }
    .system_design .considerations-contents > li > div > dl { padding: 20px 20px 10px 40px; }
}

/* ---------- 운영 관리 ---------- */
.management-list { padding:50px 0 0; }
.management-list p { margin:0; line-height: 1.7; }
.stem-contents-wrap { padding:0 10px 0; margin-bottom:50px; }
.stem-contents-wrap .list-container { margin:0 10px; }
.stem-contents-wrap .logo-list { display:flex; position: relative; margin:10px 0;}
.stem-contents-wrap .logo-list > li { height: auto; text-align: center; }
.stem-contents-wrap .logo-list > li:nth-child(1) { width:32%; }
.stem-contents-wrap .logo-list > li:nth-child(2) { width:40%; }
.stem-contents-wrap .logo-list > li:nth-child(3) { width:28%; }
.stem-contents-wrap .logo-list > li > img { width:85%; }
.stem-contents-wrap .logo-list > li:nth-child(2) > img { width:75%; }
.stem-contents-wrap .stem-container { display:block; padding-bottom:20px; }
.stem-contents-wrap .stem-container > .img-contents { width:auto; padding:0 10px; text-align: center;}
.stem-contents-wrap .stem-container > .img-contents > img { width:80%;}
.stem-contents-wrap .stem-container > .stem-text { padding:0 10px; }
.stem-container > .stem-text > h3 { font-size: 36px; font-weight: 100; }
.stem-container > .stem-text > h3:after { content:""; display:inline-block; width:28px; height: 28px; margin-left:10px; background: url(/maruhosting/assets/images/service/ico_up.svg) no-repeat; }
.stem-container > .stem-text > .point { display:block; margin-bottom:8px; font-size: 15px; color:#111; font-weight: 600;}
.stem-container > .stem-text > p { display:inline; color:#414141; }
.stem-contents-wrap .stem-logo-list > li { float: left; width:33.3333%; line-height: 40px; text-align: center; }
.stem-contents-wrap .stem-logo-list > li > img { width:70%; }
.stem-contents-wrap .footer-text { padding:30px 10px 0; font-size: 12px; color:#787878; text-align: center;}
.stem-contents-wrap .footer-text .point { font-size: 13px; font-weight: bold; color:#3FADB3;}
.stem-list-wrap .server-list td i { color:#60CCD2; }
.stem-list-wrap .server-list td i.icon-grey { color:#a1a1a1; }

@media all and (min-width: 480px) {
    .stem-contents-wrap .stem-container > .img-contents > img { width:60%; }
    .stem-contents-wrap .stem-logo-list > li { width:25%; text-align: center;}
    .stem-contents-wrap .stem-logo-list > li > img { width: 80%; }
}
@media all and (min-width: 768px) {
    .stem-contents-wrap { padding:0; margin: 0 50px 50px; }
    .stem-contents-wrap .list-container { margin:0; padding:0;}
    .stem-contents-wrap .stem-container { display:flex; padding:0 0 10px;}
    .stem-contents-wrap .stem-container > .stem-text { order:1; width:50%; padding:20px 0 0;}
    .stem-contents-wrap .stem-container > .img-contents { order: 2; width:50%; padding:0; text-align: right; }
    .stem-contents-wrap .stem-container > .img-contents > img { width:90%; }
    .stem-contents-wrap .logo-list { margin:60px 0 20px; }
    .stem-contents-wrap .logo-list > li { padding:0; }
    .stem-contents-wrap .logo-list > li:nth-child(1) > img { width:60%; }
    .stem-contents-wrap .logo-list > li:nth-child(2) > img { width:53%; }
    .stem-contents-wrap .logo-list > li:nth-child(3) > img { width:60%; }
    .stem-container > .stem-text > h3 { font-size: 38px; }
    .stem-container > .stem-text > .point { padding:10px 0 0; font-size: 16px; }
    .stem-container > .stem-text > p { display:block; font-size: 14px;}
    .stem-contents-wrap .stem-logo-list > li { height: 50px; padding:0;}
    .stem-contents-wrap .stem-logo-list > li > img { width:auto; height: 20px; }
    .stem-contents-wrap .stem-logo-list > li:nth-child(2) > img,
    .stem-contents-wrap .stem-logo-list > li:nth-child(6) > img,
    .stem-contents-wrap .stem-logo-list > li:nth-child(7) > img { height: 15px; }
    .stem-contents-wrap .footer-text { font-size: 14px; }
    .stem-contents-wrap .footer-text .point { font-size: 16px; }
    .management-list .server-list { width:auto; padding: 0 50px; margin:0 0 20px;}
    .management-list .server-list h4 { padding:0; width:auto; margin:0 0 20px; }
    .stem-list-wrap .server-list th { width:20%; }
    .stem-list-wrap .server-list td:first-child { text-align: left; }
    .stem-list-wrap .server-list td:first-child small { font-size: 12px; font-weight: 400; }
    .stem-list-wrap .server-list td:first-child.sub { font-size: 13px; font-weight: 400; text-align: center; }
}
@media all and (min-width: 1024px) {
    .stem-contents-wrap .stem-container > .stem-text { padding:60px 0 0; }
    .stem-contents-wrap .logo-list > li:nth-child(1) > img { width:55%; }
    .stem-contents-wrap .logo-list > li:nth-child(2) > img { width:50%; }
    .stem-contents-wrap .logo-list > li:nth-child(3) > img { width:55%; }
    .stem-container > .stem-text > h3 { font-size: 42px; }
    .stem-container > .stem-text > .point { padding:30px 0 0;  font-size: 20px; }
    .stem-container > .stem-text > p { font-size: 18px; }
}