@charset "utf-8";
@import url("fonts.css");

html, body { 
    height:100%; 
    font-family: 'Noto Sans KR', sans-serif;
    /*
    font-family: 'NanumSquare';
    font-family: 'Titillium Web';
    font-family: 'Oswald';
    font-family: 'Roboto', sans-serif;
    font-family: 'Nanum Gothic', sans-serif;
    */
    font-size: 16px;
    font-weight: normal;
    line-height: normal;
    letter-spacing: -.5px;
    background-color: #fff;
    color: #646464;
}

/* 모바일에서 스크롤 보이기 */
::-webkit-scrollbar { -webkit-appearance: none; } 
::-webkit-scrollbar:vertical { width: 12px; } 
::-webkit-scrollbar:horizontal { height: 12px; } 
::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .5); border-radius: 10px; border: 2px solid #ffffff; } 
::-webkit-scrollbar-track { border-radius: 10px; background-color: #ffffff; }
/* */

/* 모달 팝업 */
.modal-content { background: white; color: #333;}

/* all 공통 추가 */
.color-thema { color: #28b8d8;}
.btn-thema       { border-color:#28b8d8; color: #28b8d8; border-radius: 4px; font-weight: 400;}
.btn-thema:hover,
.btn-thema:active,
.btn-thema:focus { border-color:#28b8d8; background: #28b8d8; }
.btn-black       { background: #fff; border-color:#555; color: #555; border-radius: 4px; font-weight: 400; border-width: 1px;}
.btn-black:hover,
.btn-black:active,
.btn-black:focus { background: #fff; border-color:#555; background: #555; }
.btn-l { font-size: 17px;}
.substitute { font-size: 0; text-indent: -999px;}
caption { display: none;}
label { margin: 0; font-size: unset; color: unset; font-weight: unset;}

/* table-type */
.tbl_type,.tbl_type th,.tbl_type td { border:0; font-size: 16px;}
.tbl_type { width:100%; border-bottom:1px solid #dedede; text-align:center; border-collapse:collapse}
.tbl_type th { padding:7px 0 4px; border-top:1px solid #dedede; border-right:1px solid #dedede; border-left:1px solid #dedede; background-color:#f7f7f7; text-align: center; color:#333; font-weight:bold}
.tbl_type td { padding:6px 4px 4px; border:1px solid #dedede; color:#333; text-align: center;}
.tbl_type td.ranking{ font-weight:bold}

.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td { padding: 15px 10px; text-align: center; font-size: 15px; color: #555; border-right:1px solid #d5d5db;}
.table>thead>tr>th:last-child, .table>tbody>tr>th:last-child, .table>thead>tr>td:last-child, .table>tbody>tr>td:last-child { border-right: none;}
.table>thead>tr>th { font-weight: 600; background: #f4f6f7;}
.table>tbody>tr>td.text-left { text-align: left !important;}
.table { border-top: 2px solid #333; border-bottom: 1px solid #d5d5db;}
.table td a {color: #555;}
.table td a:hover { color: #28a0d8; text-decoration: underline;}
.table.view .cntarea img { max-width: 98%;}
.table td i { font-size: 20px;}

.table.view,.table.view th,.table.view td{ border:0}
.table.view    { width:100%; font-size:12px; border-bottom:1px solid #d5d5db; table-layout:fixed; margin-bottom:0;}
.table.view th { width: 15%; padding:8px 20px; border-top:1px solid #d5d5db; border-right:1px solid #d5d5db; border-left:1px solid #d5d5db; background:#f4f6f7; color:#666; font-weight:bold; text-align:center; vertical-align:middle;}
.table.view th:first-child { border-left: none;}
.table.view td { padding:8px 12px; border-top:1px solid #d5d5db; line-height:16px; vertical-align:top; text-align: left;}
.table.view td.cnt-area { text-align: left; line-height: normal; padding: 20px;}
.table.view td .form-group { display: inline-block;}
.table.view td input[type="text"],
.table.view td input[type="tel"],
.table.view td input[type="email"],
.table.view td select { height: 30px; line-height: 30px; border-radius: 0; }
.table.view td label.custom-select { display: inline-block;}
.table.view td label.custom-select span { padding-top: 6px;}
.table.view td .btn { border-radius: 0; padding: 2px 5px 4px; font-size: 14px; margin: 0 0 0 10px; vertical-align: middle;}
.table.view td .btn i { font-size: inherit;}
.table.view td .btn:hover, .table.view td .btn:active, .table.view td .btn:focus { border-width: 1px;}
.table.view td .filename { display: inline-block; vertical-align: middle;}
.table.view .viewcnt img {max-width:100%; height: auto; display: block;}

/* 파일첨부 css */
.filebox input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0;}
.filebox label { display: inline-block; padding: .5em .75em; color: #999; font-size: inherit; line-height: normal; vertical-align: middle; background-color: #fdfdfd; cursor: pointer; border: 1px solid #ebebeb; border-bottom-color: #e2e2e2; border-radius: .25em;}
 /* named upload */
.filebox .upload-name { display: inline-block; width: 80%; padding: .5em .75em; font-size: inherit; font-family: inherit; line-height: normal; vertical-align: middle; background-color: #f5f5f5; border: 1px solid #ebebeb; border-bottom-color: #e2e2e2; border-radius: .25em; -webkit-appearance: none; /* 네이티브 외형 감추기 */ -moz-appearance: none; appearance: none; border-radius: 0;}
 /* imaged preview */
.filebox .upload-display { margin-bottom: 5px;}
@media(min-width: 768px) {
    .filebox .upload-display { display: inline-block; margin-right: 5px; margin-bottom: 0; }
}
.filebox .upload-thumb-wrap { display: inline-block; width: 54px; padding: 2px; vertical-align: middle; border: 1px solid #ddd; border-radius: 5px; background-color: #fff;}
.filebox .upload-display img { display: block; max-width: 100%; width: 100% \9; height: auto;}
.filebox.bs3-primary label { color: #fff; background-color: #28a0d8; border-color: #28a0d8; border-radius: 0; margin-bottom: 0;}

/* style.css 수정 */
ul li { list-style: none; font-size: 16px;}
ol li { font-size: 16px;}
h1, h2, h3, h4, h5, h6 { color: #333;}
hr { padding-top: 10px; margin-bottom: 10px;}
/*.bg-sky { background: #28b8d8 !important;}*/
.container p { padding: 0 0 20px 0;}
.navbar .nav > li > a:hover, 
.navbar .nav > li.active > a,
.navbar .nav > li.open > a,
.navbar .navbar-other a.nav-link:hover { color:#28b8d8;}
.inner { padding-top: 65px; padding-bottom: 65px; height: auto; overflow: hidden;}
.section-title { font-size: 40px; font-weight: 600; letter-spacing: -1px; color:#11132c;}
h3.section-title { font-size: 30px; font-weight: 600; letter-spacing: -1px; color: #666;}
h4.section-title { font-size: 26px; font-weight: 600; letter-spacing: -1px;}

.wrapper .light-wrapper { height: auto; overflow: hidden;}
input[type="text"],
input[type="tel"],
input[type="email"],
select { height: 30px; line-height: 30px; border-radius: 0; }
label.custom-select { display: inline-block;}
label.custom-select select { padding: 0 20px 0 10px; background: #fff;}
label.custom-select span { padding-top: 4px; padding-bottom: 0 !important;}
.timeline-block { margin-top: 80px;}
.lead { font-size: 18px; line-height: normal; font-weight: 500;}
.btn { margin-bottom: 0;}
.caret:before { display: none;}
blockquote p { font-size: 16px; font-weight: 400; line-height: normal;}
input[type="radio"] + span, input[type="checkbox"] + span { vertical-align: middle; margin-top: -3px;}

/* 메인 비쥬얼 */
.rev_slider_wrapper .tp-caption { letter-spacing: -1px; text-shadow:1px 1px 1px #333;}
.rev_slider_wrapper .tp-caption.second-txt { font-weight: 600;}

/* 메인 */
.navbar .language .label.active { background-color: #337ab7;}
.technology div.icon { background: #fff; border:1px solid #e7e7e7;}
.technology div.icon figure { padding: 2rem 5rem; }
.technology h4 { font-weight: 600; margin-bottom: 5px; color: #333;}
.technology p  { font-size: 16px; color: #333;}

.main .products-slide { background: url(../images/bg-main-section02.jpg);}
.products-slide .container { padding-left: 3rem; padding-right: 3rem;}
.products-slide .slick { position: relative;}
.products-slide .slick .item figure        { text-align: center; background: #fff; border:1px solid #e7e7e7; padding: 1rem 3rem;}
.products-slide .slick-prev-wrapper.slick-arrow { position: absolute; top: 50%; left: -3rem;}
.products-slide .slick-next-wrapper.slick-arrow { position: absolute; top: 50%; right: -3rem;}
.products-slide .slick-nav-container .slick-nav .slick-prev, 
.products-slide .slick-nav-container .slick-nav .slick-next { font-size: 65px;}
.products-slide .slick-nav-container .slick-nav .slick-dots li { width: 10px; height: 10px;}
.products-slide .slick-nav-container .slick-nav .slick-dots li:hover, 
.products-slide .slick-nav-container .slick-nav .slick-dots li.slick-active { background: #28b8d8;}
.products-slide .slick .item h3 { font-size: 48px; line-height: normal; font-weight: 800; letter-spacing: -1px; color: #636363; padding-bottom: 5px; margin-bottom: 25px; border-bottom: 2px solid #28b8d8;}
.products-slide .slick .item p  { font-size: 22px; letter-spacing: -1px; color: #636363;}

.main .vision h5 { font-size: 30px; font-weight: 600; letter-spacing: -1px;}
.main .vision .smtxt { font-size: 24px; font-weight: 500;}
.main .vision .discs .disc .text { top: 25px;}

.main .service div h3 { font-size: 28px; font-weight: 500;}
.main .service div p  { font-size: 18px; font-weight: 400; color: #666;}
.main .service .section-under { font-size: 18px; font-weight: 400; color: #666; word-break: keep-all;}
.main .partners .section-under { font-size: 18px; font-weight: 400; color: #666;}


footer { clear: both; position: relative; height: auto; overflow: hidden; border-top: 1px solid #ededed;}
footer .sitemap div.row > div { border-left: 1px solid rgba(255, 255, 255, .1); color: #666; margin-bottom: 30px; min-height: 209px;}
footer .sitemap .widget h5,
footer .sitemap .widget h5 a,
footer .sitemap .widget ul > li > a { color: #666 !important; letter-spacing: -1px;}
footer .sitemap .widget ul > li > a::before { content: "ㆍ";}
footer .sub-footer p { font-size: 14px; color: #333 !important; letter-spacing: normal;}
footer .sub-footer p span { font-weight: bold; color: #b1b1b1; vertical-align: baseline;}

 /* english */
 .main .btn { font-size: 14px;}

/* 서브페이지 공통 */
.content-wrapper.sub { background: #fff;}
.sub .breadcrumbs span { color: #fff;}
.sub .contents-section { position: relative; min-height: 800px; overflow: hidden;}

.pagination,.btn-section { margin-top: 30px;}
.pagination i { vertical-align: sub;}
.pagination ul > li > a { display: block; padding: 2px 5px 4px;}
.pagination ul > li:hover,
.pagination ul > li.active,
.pagination ul > li.active > a span,
.pagination ul > li:hover > a span { background: #28a0d8; color: #fff;}
.pagination ul > li:hover > a > i { color: #fff; }
.pagination .substitute { padding: 0; height: 0; width: 0;}

.wrapper h3 span { width: auto; text-align: center; border-bottom: 2px solid #999;}
.cnt-exptxt { font-size:16px; text-align: center; }
.imp-txt { font-size: 1.2em; font-weight: 600; color: #28b8d8; }
.imp-txt02 { font-weight: 600; color: #ec3e10; }
.sm-txt { font-size: 12px; font-weight: 400;}

footer .certification ul { padding-left: 0;}
footer .certification ul li { display: inline-block;}
footer .certification ul li img { border-radius: 4px;}

/* 오시는 길 */
.info-section { position: relative; height: auto; overflow: hidden;}
.info-section ul { display: block;}
.info-section ul span { display: block; margin-bottom: 10px;}
.info-section ul i { font-size: 40px; color: #28b8d8;}
.info-section ul li { display: block; font-size: 18px;}

/* 메시징 */
.mobile-sms .panel-body { padding-top: 0;}
.mobile-sms figure { width: 70%; margin: 0 auto 20px; padding: 20px; border-radius: 50%; background: #28b8d8;}
.mobile-sms > div:nth-child(2) figure { background: #3fbfae;}
.mobile-sms > div:nth-child(3) figure { background: #e45050;}
.mobile-sms ul li { text-align: left; list-style: disc; line-height: normal; padding: 5px 0;}

/* 카카오Biz */
.exp-txt blockquote h4 { font-weight: 500;}
.kakao-exp .exp-txt blockquote { padding-left: 120px; display: block;}
.kakao-exp .exp-txt blockquote.notify { background: url(../images/kakao-icon01.png) no-repeat 10px center; letter-spacing: -1px;}
.kakao-exp .exp-txt blockquote.friend { background: url(../images/kakao-icon02.png) no-repeat 10px center;}

/* 체키플러스 */
.checkiplus-exp .exp-txt blockquote { display: block;}

/* AppAlert */
.alert-process .tit { text-align: center; font-size: 16px; font-weight: 500;}
.alert-process .pricing.panel { background: none;}
.alert-process figure { margin: 10px 0;}
.alert-process figure figcaption {padding: 10px 0 ; }
.alert-process .step { background-image: url(../images/appalert-process-arrow.png); background-repeat: no-repeat; background-position: right 297px;}
.alert-process .step:last-child { background-image: none;}
.alert-process .step .icon-bg { max-width: 100px; max-height: 100px; width: 100px; height: 100px;}
.appalert-composition .feature { margin-bottom: 30px;}
/* .appalert-certification { margin-bottom: 20px; } */
.appalert-service ul li { text-align: left; list-style: disc; line-height: normal; padding: 5px 0;}
.appalert-service .price { position: absolute; bottom: 30px; left: calc( 50% - 130px ); font-size: 18px; font-weight: 500 !important; letter-spacing: -1.5px;}

/* 문의 */
.agree-section { margin-top: 10px;}
.agree-section .tit { margin-right: 15px;}

/* IE 9+10 속성 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    select { padding: 0 0 0 10px !important;}
    label.custom-select span { padding-top: 5px !important; height: 94% !important; right: 1px !important;}
}

/* 미디어쿼리 */
@media (max-width: 1199px) { 
    .appalert-service .price { position: relative; bottom: unset; left: unset;}
}
@media (max-width: 991px) { 
    .language { position: absolute; top: 32px; right: 66px;}
}
@media (min-width: 992px) {
    /*
    .navbar-nav > li > a,
    .navbar-nav > li:not(.active) > a:not(.highlighted):hover, 
    .navbar-nav > li > a:hover { color: #fff !important; opacity: 1;}
    .navbar-nav .dropdown-menu { background: #007d99;}*/
    .navbar-nav .dropdown-menu { background: #fff;}
    .navbar .navbar-nav > li > a { font-size: 21px; margin-left: 2rem;}
    .navbar-nav .dropdown-menu li a { font-size: 16px; color: rgba(0, 0, 0, .8);}
    .navbar-nav .dropdown-menu li a:hover, .navbar-nav .dropdown-menu li a.active { color: #28b8d8;}
    .footer-logo { text-align: right;}   
    .appalert-service .pricing.panel { min-height: 715px;}
    /* english */
    .navbar.en .navbar-nav > li { margin-left: 0;}
    .navbar.en .navbar-nav > li > a { font-size: 18px;}
    .navbar.en .navbar-nav .dropdown-menu li a { font-size: 13px; letter-spacing: -.5px;}
    .appalert-service.en .pricing.panel { min-height: 715px; }
}
@media (min-width: 1024px) {
}
@media all and (min-width: 992px) and (max-width: 1199px) {
}
@media all and (min-width: 768px) and (max-width: 991px) {
    .technology div.icon { padding: 2rem 2rem;}
    .clients-list > div { margin-bottom:5px; }
}
@media all and (min-width: 576px) and (max-width: 767px) {
}

/* mobile only */
@media (max-width: 767px) {
    .main .service .section-under,
    .main .partners .section-under,
    .main .service div p {
        font-size: 16px;
    }
    .container .ul li { font-size: 16px;}
    .section-title { font-size: 34px;}
    .main .service div h3 { font-size: 25px; line-height: normal; letter-spacing: -.5px;}
    .navbar .language .label { padding: 5px 6px;}
    .alert-process .step { background-image: url(../images/appalert-process-arrow02.png); background-repeat: no-repeat; background-position: center bottom; }
    footer .inner { padding-bottom: 0;}
    .table.view th { width: 32%;}
    .table.view td .filename { display: block; width: 100%;}
    .table.view td .btn { clear: both; float: left; margin-left: 0; margin-top: 10px;}
    .filebox .upload-name { width: 56%;}
    .agree-section .tit { display: block; width: 100%; margin-right: 0;}
    .inner { padding: 50px 20px;}
    .container p { font-size: 16px;}
    .container h4 { font-size: 18px;}
    .appalert-service .panel-body ul li { font-size: 16px;}
    .merit-list li p { font-size: 16px;}
    .main .service div .add { font-size: 16px; margin-bottom: 0;}
    .main .contact .contact-title { font-size: 24px;}

}
@media (min-width: 480px) {
    .navbar .logo-kor > a {
        width: 235px;
        height: 40px;
        display: block;
        background-image: url(/style/images/logo.png);
        background-repeat: no-repeat;
    }
}
@media screen and (max-width: 480px) {
    .navbar .logo-kor > a  {
        width: 128px;
        height: 36px;
        display: block;
        background-image: url(/style/images/logo_e.png);
        background-repeat: no-repeat;
    }

    .section-title { font-size: 30px;}
    .col-sm-6 {text-align: center;}
    .pricing .panel-body div { font-size: 16px;}
    
}