﻿@charset "utf-8";

#solutions_wrap { width:100%; position:relative; word-break: keep-all; padding-bottom:100px; }

.sub-max-inner { max-width:1204px; margin:0 auto; position:relative; }
.sub-max-inner:after { display:block; content:''; clear:both; }

.solutions_visual {position:relative;width:100%;height:980px;}
.solutions_visual h1 {font-size: 92px;font-weight: 500;color:#fff;display:inline;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.solutions_visual dl {position:absolute;top:50%;left:50%; text-align:center; -webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%); width:100%;}
/* .solutions_visual dl dt { font-size: 92px;font-weight: 500;color:#fff; } */
.solutions_visual dl dd { font-size: 32px;font-weight: 300;color:#fff;}
.solutions_visual dl dd h2{font-weight:300;}
.solutions_visual.construction {background:url('../jpg/bg_construction.jpg') center center no-repeat;background-size:cover;}
.solutions_visual.datacenter {background:url('../jpg/bg_datacenter.jpg') center center no-repeat;background-size:cover;}
.solutions_visual.healthcare {background:url('../jpg/bg_healthcare.jpg') center center no-repeat;background-size:cover;}
.solutions_visual.commercial {background:url('../jpg/bg_commercial.jpg') center center no-repeat;background-size:cover;}
.solutions_visual.infrastructure {background:url('../jpg/bg_infrastructure.jpg') center center no-repeat;background-size:cover;}
.solutions_visual.manufacturing {background:url('../jpg/bg_manufacturing.jpg') center center no-repeat;background-size:cover;}
.all_solution_visual{background:url('../jpg/all_solution_visual.jpg') center center no-repeat;background-size:cover;}
.case_study_visual{background:url('../jpg/bg_case_study.jpg') center center no-repeat;background-size:cover;}

.solutions_visual.access_control {background:url('../jpg/access_control_visual.jpg') no-repeat 50% 50%;background-size:cover;}
.solutions_visual.time_attendance {background:url('../jpg/time_attendance_visual.jpg') no-repeat 50% 50%;background-size:cover;}
.solutions_visual.mobile_credential {background:url('../jpg/mobile_credential_visual.jpg') no-repeat 50% 50%;background-size:cover;}
.solutions_visual.facial_recognition {background:url('../jpg/facial_recognition_visual.jpg') no-repeat 50% 50%;background-size:cover;}
.solutions_visual.biosign {background:url('../jpg/biosign_visual.jpg') no-repeat 50% 50%;background-size:cover;}
.solutions_visual.privacy_protection {background:url('../jpg/privacy_protection_visual.jpg') no-repeat 50% 50%;background-size:cover;}

/* sticky-menu */
#solutions_wrap .sticky-menu { position:relative; left:0; top:0; display:block; width:100%; height:80px; margin:0 auto; background: #f5f5f5; box-sizing:border-box; z-index:10; }
#solutions_wrap .sticky-menu a { display:inline-block; line-height:78px; letter-spacing:-0.025em; vertical-align:middle; }
#solutions_wrap .sticky-menu .left_link { float:left; }
#solutions_wrap .sticky-menu .left_link a { padding-right:34px; font-size:17px; font-weight:500; transition:all .5s; letter-spacing:-0.1em;  }
#solutions_wrap .sticky-menu .left_link a:last-child { padding-right:0; }
#solutions_wrap .sticky-menu .left_link a:hover { font-weight:600; color:#a12642; }
#solutions_wrap .sticky-menu .left_link a.on { font-weight:600; color:#a12642; }
#solutions_wrap .sticky-menu .right_link { float:right; text-align:right; }
#solutions_wrap .sticky-menu .right_link .btn_inquiry { width:152px; height:42px; line-height:42px; font-size:1em; font-weight:500; color:#a12642; text-align:center; border:1px solid #a12642; border-radius:21px; transition:all .5s; }
#solutions_wrap .sticky-menu .right_link .btn_inquiry:hover { color:#fff; background: #a12642; }
#solutions_wrap .sticky-menu .right_link .btn_share { margin-left:10px; width:54px; height:80px; font-size:0; background:url('../png/icon-share.png') no-repeat right center; }

#solutions_wrap .sticky-menu .right_link .share_area { position:absolute; display:none; right:0; top:80px; padding:10px; background: #fff; box-shadow: 10px 10px 30px #ddd; z-index:7;}
#solutions_wrap .sticky-menu .right_link .share_area a { line-height:44px; }

.h3_title {font-size: 36px;font-weight: 600;color:#222; margin-bottom:40px;}

.solutions_contents_wrap {position:relative;width:100%;max-width:1204px;margin:0 auto;}
.solutions_module { margin-top:70px; }
.solutions_sub_module { margin-top:20px; }
.solutions_module > p { font-size: 18px; font-weight: 350; color:#666; line-height:1.8em; }
.solutions_module > p.all_solution_txt { font-size:32px; line-height:42px; font-weight:400; color:#a12642; }
.solutions_contents_wrap .case_study_list{margin:40px 0 -20px;}
.solutions_contents_wrap .case_study_list li{background:#fff;}
.solutions_contents_wrap .case_study_list li:nth-of-type(2n){margin-right:16px;}
.solutions_contents_wrap .case_study_list li:last-of-type{margin-right:0;}
.solutions_contents_wrap .case_study_list .seeAll{height:333px; padding:30px; text-align:center;}
.solutions_contents_wrap .case_study_list .seeAll img{margin-bottom:25px;}
.solutions_contents_wrap .case_study_list .seeAll p{margin-bottom:55px; font-size:16px;}
.solutions_contents_wrap .case_study_list .seeAll a{display:block; height:42px; line-height:42px; border-radius:21px; font-size:16px; color:#fff; background:#a12642;}




/* 솔루션 서브메인 */
#solutions_wrap.solutions_submain { background-color:#f4f4f4!important; }
.solutions_visual.solutions_submain_visual { height:700px; background:url('../jpg/bg_solutions_submain.jpg') center center no-repeat; background-size:cover; }
.solutions_visual.solutions_submain_visual dl { width:100%; }
.solutions_visual.solutions_submain_visual dl dt { font-size: 60px; line-height:1.2em; }
.solutions_visual.solutions_submain_visual dl dd { font-size: 24px; margin-top:20px; }
.solutions_submain h2 { font-size:36px; font-weight:300; color:#222; text-align:center; margin-top:70px; }
.solutions_submain_list { width:100%; background:#fff; margin-top:30px; }
.solutions_submain_list::after { display:block; content:''; clear:both; }
.solutions_submain_list > li { position:relative; float:left; width:16.61%; height:250px; box-sizing:border-box; padding:21px 1.66% 29px; }
.solutions_submain_list > li::after { position:absolute; content:''; width:1px; height:70px; top:90px; right:0; background:#ddd; }
.solutions_submain_list > li:last-child::after { display:none; }
.solutions_submain_list > li > a { display:block; width:100%; height:100%; box-sizing:border-box; text-align:center; font-size: 18px; font-weight: 350; color:#666; border-radius:8px; padding-top:136px; }
.solutions_submain_list > li > a:hover { background-color:#a12944; font-weight: 500; color:#fff; box-shadow:15px 15px 50px 10px #c2c2c2;}
#icon-construction { background-image:url('../png/icon-construction.png'); background-repeat:no-repeat; background-position:center 46px; }
#icon-datacenter { background-image:url('../png/icon-datacenter.png'); background-repeat:no-repeat; background-position:center 47px; }
#icon-health { background-image:url('../png/icon-health.png'); background-repeat:no-repeat; background-position:center 55px; }
#icon-commercial { background-image:url('../png/icon-commercial.png'); background-repeat:no-repeat; background-position:center 56px; }
#icon-infra { background-image:url('../png/icon-infra.png'); background-repeat:no-repeat; background-position:center 48px; }
#icon-manufacturing { background-image:url('../png/icon-manufacturing.png'); background-repeat:no-repeat; background-position:center 51px; font-size:16px; }
#icon-construction:hover { background-image:url('../png/icon-construction-on.png'); }
#icon-datacenter:hover { background-image:url('../png/icon-datacenter-on.png'); }
#icon-health:hover { background-image:url('../png/icon-health-on.png'); }
#icon-commercial:hover { background-image:url('../png/icon-commercial-on.png'); }
#icon-infra:hover { background-image:url('../png/icon-infra-on.png'); }
#icon-manufacturing:hover { background-image:url('../png/icon-manufacturing-on.png'); font-size:16px; }
#icon-access { background-image:url('../png/icon-access.png'); background-repeat:no-repeat; background-position:center 46px; }
#icon-time { background-image:url('../png/icon-time.png'); background-repeat:no-repeat; background-position:center 47px; }
#icon-mobile { background-image:url('../png/icon-mobile.png'); background-repeat:no-repeat; background-position:center 55px; }
#icon-face { background-image:url('../png/icon-face.png'); background-repeat:no-repeat; background-position:center 56px; }
#icon-biosign { background-image:url('../png/icon-biosign.png'); background-repeat:no-repeat; background-position:center 48px; font-size:16px; letter-spacing:-0.05em; }
#icon-privacy { background-image:url('../png/icon-privacy.png'); background-repeat:no-repeat; background-position:center 51px; font-size:16px; letter-spacing:-0.07em; }
#icon-access:hover { background-image:url('../png/icon-access-on.png'); }
#icon-time:hover { background-image:url('../png/icon-time-on.png'); }
#icon-mobile:hover { background-image:url('../png/icon-mobile-on.png'); }
#icon-face:hover { background-image:url('../png/icon-face-on.png'); }
#icon-biosign:hover { background-image:url('../png/icon-biosign-on.png'); font-size:16px; letter-spacing:-0.07em; }
#icon-privacy:hover { background-image:url('../png/icon-privacy-on.png'); font-size:16px; letter-spacing:-0.07em; }


.solutions_list_box { width:100%; box-sizing:border-box; border:1px solid #ddd; padding:45px 60px; margin-top:20px; }
.solutions_list_box > ul { overflow:hidden; }
.solutions_list_box > ul > li { float:left; width:50%; padding-left:18px; background:url('../png/ico_dot.png') left 13px no-repeat; font-size: 18px; font-weight: 350; color:#666; box-sizing: border-box; line-height:1.8em; }
.solutions_list_box > ul > li:nth-child(odd) {padding-right: 18px;}

/* 1102 수정사항 */
.using_scenario { height:auto; text-align:center; margin-top:20px; position: relative; }
.using_scenario img { max-width:none; }
.tooltip{display:none; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);}
/* 1102 수정사항 끝 */


.solutions_module > p.scenario_title { font-size: 24px; font-weight: 500; color:#222; margin:50px 0 10px; }
.feature_list { overflow:hidden; margin-top:20px; }
.feature_list > li { float:left; width:582px; margin-right:40px; margin-bottom:50px; }
.feature_list > li:nth-child(2n) { margin-right:0; }
.feature_list > li > img { width:100%; }
.feature_list > li > p { font-size: 24px; font-weight: 500; color:#222; margin-top:25px; }
.feature_list > li > ul { margin-top:20px; }
.feature_list > li > ul > li { font-size: 18px; font-weight: 350; color:#666; line-height:1.8em; padding-left:15px; background:url('../png/ico_dot.png') left 13px no-repeat; }
.feature_list > li > ul > li > ul { padding-left:10px; }

.solutions_sub_module > h4 { font-size: 24px; font-weight: 500; color:#222; }
.solutions_sub_module > ul { margin:20px 0 60px; }
.platform_app_list::after,
.solutions_product_list::after { display:block; content:''; clear:both; }
.platform_app_list > li { float:left; position:relative; width:388px; margin-right:20px; }
.platform_app_list > li:nth-child(3n) { margin-right:0; }
.platform_app_list > li img { width:100%; }
.platform_app_list > li p { position:absolute; bottom:0; left:0; width:100%; height:50px; line-height:50px; text-align:center; font-size: 20px; color:#fff; background:rgba(0, 0, 0, 0.4); }
.platform_app_list > li p > span { display:inline-block; width:8px; height:13px; background:url('../png/solution_arrow.png'); margin-left:10px; }
.solutions_product_list > li { display:inline-block; width:286px; text-align:center; margin-bottom:30px; margin-right:16px; }
.solutions_product_list > li:nth-child(4n) { margin-right:0; }
.solutions_product_list > li div { width:100%; height:286px; line-height:286px; }
.solutions_product_list > li div > img { vertical-align: middle; }
.solutions_product_list > li p { font-size: 22px; font-weight: 500; color:#222; }


/* 적용분야 : 공통 */
.h4_title { font-size:48px; font-weight:600; color:#222; text-align: center; }

.common_applications .text_area { line-height:32px; padding:80px 0; font-size:18px; font-weight:400; color:#666; }

/* 통합 솔루션 */

.solutions_module .logo_box:after{content:''; display:block; clear:both;}
.solutions_module .logo_thumnail{float:left; width:23.2%;  margin-right:2%; height:160px; border:1px solid #ddd; margin-bottom:2%;}
.solutions_module .logo{display: block; position: relative; width:100%; height:100%;}
.solutions_module .logo img{display:block; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.solutions_module:not(.integration-grp) .logo_thumnail:nth-child(4n){margin-right:0;}
.solutions_module .logo_thumnail .logo_popup{width: 725px; position: fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; z-index:778; display:none;}
.solutions_module .logo_thumnail .logo_pop_top{height:100px; font-size: 32px; font-weight:600; background:#f8f8f8; box-sizing:border-box; position: relative;}
.solutions_module .logo_thumnail .logo_pop_top p{font-size: 32px; font-weight:600; position: absolute; top:50%; left:50px; transform:translateY(-50%); color:#222;}
.solutions_module .logo_thumnail .logo_pop_top img{position:absolute; top:50%; right:50px; transform:translateY(-50%);}
.solutions_module .logo_thumnail .logo_pop_middle{padding: 0 50px; box-sizing: border-box; max-height:calc(100vh - 200px); overflow-y: auto;}
.solutions_module .logo_thumnail .logo_pop_middle .brochure_download{width:80%; margin:0 auto 20px;}
.solutions_module .logo_thumnail .logo_pop_middle .brochure_download:after{display:block; content:''; clear:both;}
.solutions_module .logo_thumnail .logo_pop_middle .brochure_download .download{display:block;float:left;width: 49%;height: 50px;line-height: 50px;margin:0 auto;border-radius: 50px;box-sizing:border-box;font-size:1em; font-weight:500; color:#a12642; background: url('../png/icon-arrow-right_on_bold-3.png') no-repeat 90% center; border:1px solid #a12642;text-align:center;}
.solutions_module .logo_thumnail .logo_pop_middle .brochure_download .download:first-child{margin-right:2%;}
.solutions_module .logo_thumnail .logo_pop_middle .logo_plan{padding: 0 30px; box-sizing: border-box; border:1px solid #ddd; margin:20px 0;}
.solutions_module .logo_thumnail .logo_pop_middle .logo_plan img{display:block; margin:40px auto 40px;}
.solutions_module .logo_thumnail .logo_pop_middle .logo_plan p{font-size: 16px; line-height:26px; font-weight:400; margin-bottom:50px; color:#666;}
.solutions_module .logo_thumnail .logo_pop_middle .logo_list{clear:left;}
.solutions_module .logo_thumnail .logo_pop_middle .logo_list li{font-size: 16px; line-height:32px; font-weight:400; color:#222; list-style:disc; margin-left:20px;}
.solutions_module .logo_thumnail .logo_pop_middle .logo_text{margin: 30px 0 50px 0; font-size:16px; line-height:26px; color:#666; font-weight:400; color:#666; }
.solutions_module .logo_thumnail .logo_pop_middle h3 {margin: 32px 0 12px; font-size: 1.25rem; font-weight: 600; color: #222;}

@media only screen and (max-width: 890px){
    .solutions_module .logo_thumnail .logo_pop_middle {max-height: 100%;}
}
/* 2020-06-30 suprema integration */
.solutions_module .suprema-integration .logo_thumnail{ width:32%; height:300px; padding:0 30px; box-sizing:border-box; text-align:center; color:#999;}
.solutions_module .suprema-integration .logo img {display:block; position:relative; left:50%; top:auto; transform:translate(-50%,0); padding:50px 0 30px 0;}
.solutions_module .suprema-integration .logo_thumnail h4 { font-size:20px; }
.solutions_module .suprema-integration .logo_thumnail a p { width:100%; color:#999; position:absolute; bottom:30px; left:50%; transform:translate(-50%,0); }
.solutions_module .suprema-integration .logo_thumnail:nth-child(3n){margin-right:0;}

#suprema-integration {margin-top:100px;}
#suprema-integration .subject_area {display: flex; justify-content: space-between; align-items: center; padding: 40px; border-top: 2px solid #ccc; border-bottom: 1px solid #ddd;}
#suprema-integration .subject_area .subject,
#suprema-integration .subject_area h3 {font-size:36px; flex: 0 0 calc(100% - 220px); max-width: calc(100% - 220px);}
#suprema-integration .subject_area .btn-primary-line {padding: 12px 20px 12px 28px; font-weight: 600; flex: 0 0 220px; max-width: 220px; box-sizing: border-box;}
#suprema-integration .subject_area .btn-primary-line .material-icons {font-size: 1.5em;}

#suprema-integration .overview {height:250px; font-size:18px; line-height:1.5; color:#222;}
#suprema-integration .overview:after {content:""; clear:both; visibility:hidden; height:0; display:block;}
#suprema-integration .overview > div {float:left; height:100%;}
#suprema-integration .overview .logo_wrap {width:30%; margin-right:2%; position:relative; }
#suprema-integration .overview .text_wrap {width:68%; position:relative; }
#suprema-integration .overview .logo_wrap .inner_logo, #suprema-integration .overview .text_wrap .inner_text {position:absolute; width:100%; top:50%; left:50%; transform:translate(-50%, -50%);}
#suprema-integration .overview .logo_wrap .inner_logo p {padding:20px 0 0 0;}
#suprema-integration .overview .logo_wrap .inner_logo p a {color:#999; font-size:16px;}
#suprema-integration .overview .logo_wrap .inner_logo p a img {padding:5px 15px 0 20px;}
#suprema-integration .overview .logo_wrap .inner_logo.url-long p a,
#suprema-integration.nedap-integration .overview .logo_wrap .inner_logo p a {position:relative; width: 100%; display: block; height:48px;}
#suprema-integration .overview .logo_wrap .inner_logo.url-long p a img,
#suprema-integration.nedap-integration .overview .logo_wrap .inner_logo p a img {padding:2px 0 0 0; position:absolute; left:0;}
#suprema-integration .overview .logo_wrap .inner_logo.url-long p a span,
#suprema-integration.nedap-integration .overview .logo_wrap .inner_logo p a span {position:absolute; left:35px; word-break: break-all;}

.solutions_contents_wrap .solutions_module .wrap-video {max-width: 760px; height: 430px; margin: 30px auto; border-radius: 8px; overflow: hidden;}


.wrap-solution-integration .integration-grp h3 {font-size:20px; margin-bottom: 24px; color: #222;}
.wrap-solution-integration .integration-grp {margin-top: 80px;}
.wrap-solution-integration .integration-grp .logo_thumnail {padding:50px 30px 30px; box-sizing:border-box; text-align:center; color:#999;border: 1px solid #ddd; height: 100%;}

.wrap-solution-integration .integration-grp .grp-tit {font-size: 36px; margin-bottom: 16px;}

#suprema-integration .solutions_module .sub-tit,
#suprema-integration .solutions_module h3 {font-size: 36px;}

#suprema-integration .solutions_module h4 {font-size: 24px; color: #666; padding: 35px 0 20px 0;}
.wrap-solution-integration .integration-grp .suprema-integration + h3 {margin-top: 50px;}
.wrap-solution-integration h3 {font-size:36px;}
.wrap-solution-integration .tit,
.wrap-solution-integration h4 {font-size:20px; color:#222; padding:35px 0 50px;}
.wrap-solution-integration .suprema-integration {overflow-x: hidden;}

.wrap-solution-integration .suprema-integration .logo_thumnail .sub-tit,
.wrap-solution-integration .suprema-integration .logo_thumnail p {font-weight: 400; color:#666;}
.wrap-solution-integration .suprema-integration .col-4 {margin-bottom: 32px;}

#suprema-integration .solutions_module > p { font-weight: 400; color:#666; }
#suprema-integration .license_table td { height:50px; color:#666; font-size:18px; letter-spacing: -0.03em; border-bottom:1px solid #eee; border-right:1px solid #eee; padding:20px 25px; box-sizing:border-box; }
.license_table table {display:table; width:100%; border-top:2px solid #ccc; border-bottom:1px solid #ccc; border-spacing:0; text-align:left; border-left:1px solid #eee;}
.license_table th { height:50px; background-color:#f5f5f5; color:#666; font-size:18px; letter-spacing: -0.03em; font-weight:600; text-align:center; border-bottom:1px solid #eee; border-right:1px solid #eee; }
#suprema-integration .solutions_module ul.integration_contents li { font-size: 18px; line-height: 32px; font-weight: 400; list-style: disc; margin-left: 20px; color:#666; margin-bottom: 16px;}
#suprema-integration .solutions_module ul.integration_contents li p {font-weight: 600; line-height: 1.5;}
.solutions_module ul.integration_contents li .material-icons {margin-right: 6px;}
.solutions_module .suprema-integration .logo_thumnail.box_long figure {min-height: 100px;}

@media screen and (min-width: 891px){
    .solutions_module .suprema-integration .logo_thumnail.box_long {height: 360px;}
    .solutions_module .suprema-integration .logo_thumnail.box_long img {width: 65%;}
    .wrap-solution-integration .integration-grp .logo_thumnail.box_long figure {min-height: 127px; display: flex; align-items: center; justify-content: center;}
}
@media screen and (max-width: 890px){
    .solutions_module .suprema-integration .logo_thumnail{width: 100%;}    
    .solutions_module .suprema-integration .logo_thumnail:nth-child(2n){border-left: 1px solid #ddd;}
    .solutions_module .suprema-integration .logo_thumnail:nth-child(2){border-top: none;}
    .solutions_module .suprema-integration .logo_thumnail h4{ font-size: 5vw;}
	#suprema-integration {font-size: 3.88vw;}
    #suprema-integration .subject_area .subject,
    #suprema-integration .solutions_module .sub-tit,
	#suprema-integration .subject_area h3, #suprema-integration .solutions_module h3 {font-size: 5.823vw;}
	#suprema-integration .overview, #suprema-integration .overview .logo_wrap .inner_logo p a {height:auto; font-size: 3.88vw}
	#suprema-integration .overview .logo_wrap .inner_logo {text-align:center;}
	#suprema-integration .overview .logo_wrap .inner_logo p a img {padding: 1.6vw 15px 0 20px;}
	#suprema-integration .overview > div {float:none; height:100%;}
	#suprema-integration .overview .logo_wrap {width:100%; margin-right:0; position:relative; }
	#suprema-integration .overview .text_wrap {width:100%; position:relative; }
	#suprema-integration .overview .logo_wrap .inner_logo, #suprema-integration .overview .text_wrap .inner_text {position: relative; top: auto; width: 100%; padding-top: 4.15vw; transform: translateY(0%); left: 0; right: 0;}
    #suprema-integration .overview .logo_wrap .inner_logo.url-long p a,
	#suprema-integration.nedap-integration .overview .logo_wrap .inner_logo p a {height:10.5vw;}
    #suprema-integration .overview .logo_wrap .inner_logo.url-long p a img,
	#suprema-integration.nedap-integration .overview .logo_wrap .inner_logo p a img {padding:1.6vw 0 0 0;}
    #suprema-integration .overview .logo_wrap .inner_logo.url-long p a span,
	#suprema-integration.nedap-integration .overview .logo_wrap .inner_logo p a span {position:absolute; left:35px;}
	#suprema-integration .solutions_module h4 {font-size: 4.44vw;}
	#suprema-integration .overview {padding: 0 5.55vw; box-sizing: border-box; margin-top: 20px;}
	#suprema-integration .solutions_module ul.integration_contents li {font-size:3.88vw; line-height:1.5;}
	.system_diagram a { width: 7.5vw; height: 7.5vw; position: absolute; bottom: 0; right: 0; display: block;}

    .solutions_contents_wrap .solutions_module .wrap-video {height: 50vw;}
    .wrap-solution-integration .integration-grp .grp-tit {font-size: 24px; padding: 0 5.55vw;}
}

@media screen and (max-width: 576px){
.solutions_module .suprema-integration .logo_thumnail{height: 74vw;}
}

/* integration form */
.customer-center {position:relative;height:180px;margin-top:80px;background-color:#f4f4f4;background-image:url('../png/bg-customercenter.png');background-position:50px 38px;background-repeat:no-repeat;padding:35px 0 0 185px;-webkit-box-sizing:border-box;box-sizing:border-box;}
.customer-center p {font-size: 16px;font-weight: 350;color:#666; width:60%}
.customer-center p:first-child {font-size: 24px;font-weight: 700;color:#222;margin-bottom:15px;}
.btn-submain-round {position:absolute;width:auto;height:42px;top:50%;right:50px;border:1px solid #a12642;border-radius:21px;-webkit-box-sizing:border-box;box-sizing:border-box;line-height:42px; text-align:center; font-size: 16px;font-weight: 600;color:#a12642!important;background:url('../png/icon-arrow-right_on_bold.png') right 20px center no-repeat;-webkit-transform:translateY(-50%); padding: 0 40px 0 30px;}

.integration-form {background: #f5f5f5;}
.integration-form #sub-visual-container {height: 480px;}
.integration-form #sub-visual-container .sub-visual-title { padding-top: 200px; position: unset; max-width: 900px; margin: 0 auto; transform: none;}
.integration-form #sub-visual-container .sub-visual-title dt {font-size: 2.675em;}
.integration-form #sub-visual-container .sub-visual-title dd {font-size: 18px; opacity: 1;}
.integration-form .bk-black {height: 100%; background: rgb(44 44 44 / 72%);}

.integration-form .solutions_contents_wrap {margin: -170px auto 0;}
.solutions_module .wrap-form {max-width: 900px; margin: 0 auto; background: #fff; padding: 0 50px; border-radius: 20px; box-sizing: border-box;}
.integration-form .solutions_module {margin-top: 40px;}

@media screen and (max-width:890px) {
    .customer-center {height: auto; margin-top: 30px; background-size: 18.33vw 16.94vw; background-position: 70.13vw 8.75vw; background-repeat: no-repeat; padding: 6.94vw 0 24.16vw 11.11vw;}
    .customer-center p:first-child {font-size: 5vw; margin-bottom: 2.77vw;}
    .customer-center p {width: 50vw; font-size: 3.88vw;}
    .btn-submain-round {position: absolute; width: 83.33vw; height: 10.55vw; top: auto; bottom: 8.33vw; left: 50%; right: auto; border-radius: 5.27vw; -webkit-box-sizing: border-box; box-sizing: border-box; line-height: 10.55vw; font-size: 3.88vw; background: url(../png/icon-arrow-right_on_bold.png) 95% center no-repeat; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
    #solutions_wrap.integ-main-wrap {padding-bottom: 0;}

    #suprema-integration {margin-top: 0;}
    #suprema-integration .subject_area {display: block;}
    #suprema-integration .subject_area .subject,
    #suprema-integration .subject_area h3 {margin-bottom: 24px; max-width: 100%;}

    .license_table th,
    #suprema-integration .license_table td {font-size: 3.88vw; line-height: 5.83vw; }

    .integration-form #sub-visual-container .sub-visual-title {padding-top: 40px;}

    #solutions_wrap.integration-form {padding-bottom: 0;}
    
    .integration-form #sub-visual-container .sub-visual-title {padding: 80px 16px 0; box-sizing: border-box;}
    .integration-form #sub-visual-container .sub-visual-title dt {font-size: 32px;}
    .integration-form #sub-visual-container .sub-visual-title dd {font-size: 14px;}
    .integration-form .solutions_module {padding: 0;}
    .solutions_module .wrap-form {border-radius: 20px 20px 0 0; padding: 0 5.5vw;}
    .solutions_module .wrap-form iframe {height: 300vw;}

    .pkg_board .customer-center {padding: 6.94vw 24px 24.16vw; background-position: top 6.94vw right 24px;}

}

@media screen and (max-width:480px) {
    .integration-form #sub-visual-container {height: 64vh;}
    #suprema-integration .subject_area .btn-primary-line {max-width: 100%;}
}

.sub-max-inner { max-width: 1204px; margin:  auto; position: relative; height: 100%;}
.system_diagram{ width:100%; border:1px solid #ddd; box-sizing:border-box; margin:30px 0 0 0;}
.system_diagram a {display: none;}
.tab_wrap { max-width:1024px; overflow:hidden; margin:0 auto; text-align:center; }
.tab_tit { position:absolute; top:3px; left:0; margin-bottom:60px; z-index:33; }
.tab_tit:after { display:block; content:''; clear:both; }
.tab_tit li{ float:left; background:url('../jpg/tab_li_bar.jpg') right 5px no-repeat; }
.tab_tit li:last-child { background:none; }
.tab_tit li a { font-size:22px; color:#999; padding:0 30px; letter-spacing: -0.03em; font-weight:500; }
.tab_tit li a:hover, .tab_tit li .on { color:#222; border-top:3px solid #a12944 }

/* 게시판 형태 */
#board_wrapper { display:block; margin: 40px 0 0 0; }
#board_wrapper .board_containe { display:block; border-top:1px solid #ccc; border-bottom:1px solid #ccc; }
#board_wrapper .board_containe ul > li { display:table; width:100%; padding:10px 0 15px; border-bottom:1px solid #ddd; }
#board_wrapper .board_containe ul > li:last-child { border-bottom:none; }
#board_wrapper .board_containe ul > li > .tb-cell { display:table-cell; vertical-align:middle; text-align:center; font-family:'Montserrat', sans-serif; letter-spacing: -0.025em; }
#board_wrapper .board_containe ul > li > .date-area { width:9%; color:#ddd; }
#board_wrapper .board_containe ul > li > .date-area .date { font-size:2.5em; }
#board_wrapper .board_containe ul > li > .date-area .yymm { font-size:1em; }
#board_wrapper .board_containe ul > li > .cate { width:15%; font-size:1.25em; color:#a12642; }
#board_wrapper .board_containe ul > li > .subject { width:33%; font-size:1.25em; font-weight:500; color:#222; text-align:left; }
#board_wrapper .board_containe ul > li > .mkb { width:13%; font-size:1.25em; color:#999; }
#board_wrapper .board_containe ul > li > .down { width:30%; position: relative; }
#board_wrapper .board_containe ul > li > .down a { display:inline-block; width:47%; height:42px; line-height:42px; font-size:1em; border:1px solid #a12642; box-sizing:border-box; border-radius:21px; }
#board_wrapper .board_containe ul > li > .down a.btn_down { margin-right:2%; color:#fff; background: #a12642; }
#board_wrapper .board_containe ul > li > .down a.btn_share { color:#a12642; }
#board_wrapper.pkg_board .board_containe ul > li > .cate{width:23%;}
#board_wrapper.pkg_board .board_containe ul > li > .subject{width:40%}
#board_wrapper.pkg_board .board_containe ul > li > .down a{width:100%;}
#board_wrapper.pkg_board .board_containe ul > li > .down{width:10%;}

#board_wrapper .board_btn_area {margin: 40px 0 0; text-align: center;}
#board_wrapper .board_btn_area .btn_list {display: inline-block; width: 274px; line-height: 64px; font-size: 20px; font-weight: 500; color: #fff; background: #a12642; border-radius: 32px;}
/* 2020-06-30 suprema integration */

/* 솔루션 특징 */
.common_wide_box { position: relative; display:block; width:100%; }
.common_wide_box dl { position:absolute; left:50%; top:50%; width:600px; transform: translate(-600px, -50%); }
.common_wide_box dl dt { margin:0 0 20px; font-size:48px; font-weight:500; color:#222; }
.common_wide_box dl dd { line-height:32px; font-size:18px; color:#666; }

.common_wide_box dl.txt_white dt { color:#fff; }
.common_wide_box dl.txt_white dd { color:#fff; opacity:0.7; }
.common_wide_box dl.txt_right { padding-left:600px; }
.common_wide_box dl.txt_center { top:0; width:1200px; padding-top:80px; transform: translate(-600px, -0%); text-align:center; }

.common_wide_box.bg01 { height:600px; margin:40px 0 0; background: url('../jpg/common_wide_box_bg01-2.jpg') no-repeat 50% 50%; }
.common_wide_box.bg02 { height:586px; margin:40px 0 0; background: url('../jpg/common_wide_box_bg02.jpg') no-repeat 50% 50%; }
.common_wide_box.bg03 { height:600px; margin:40px 0 0; background: url('../jpg/mobile_credential_card.jpg') no-repeat 50% 50%; }
.common_wide_box.bg04 { height:600px; margin:0 0 100px; background: url('../jpg/mobile_secure_information.jpg') no-repeat 50% 50%; }
.common_wide_box.bg05 { height:823px; margin:40px 0 0; background: url('../jpg/facial_recognition_sunlight.jpg') no-repeat 50% 50%; }
.common_wide_box.bg06 { height:620px; margin:0 0 0; background: url('../jpg/lfd_live_face_detection.jpg') no-repeat 50% 50%; }
.common_wide_box.bg07 { height:993px; margin:40px 0 100px; background: url('../jpg/mobile_fingerprint_authentication_algorithm.jpg') no-repeat 50% 50%; }

/* 다양한 관리 기능 */
.manage_funtion { margin-bottom:100px; padding:100px 0 0; background: #f8f8f8; }
.manage_funtion .top_text { padding-top:20px; font-size:18px; color:#666; text-align:center; }
.manage_funtion ul { padding:60px 80px 70px; box-sizing:border-box; }
.manage_funtion ul:after { display:block; content:''; clear:both; }
.manage_funtion ul li { position:relative; float:left; width:50%; height:136px; margin:0 0 30px; text-align: left; }
.manage_funtion ul li .icon_box { display:block; width:136px; height:136px; }
.manage_funtion ul li .text { position:absolute; left:175px; top:50%; line-height:28px; font-size:18px; color:#666; letter-spacing: -0.025em; transform: translateY(-50%); width: 60%; padding-right: 10px;}

/* 관련 정보 */
.related_information { margin:40px 0 150px; }
.related_information:after { display:block; content:''; clear:both; }
.related_information li { float:left; width:48%; }
.related_information li:first-child { margin-right:4%; }
.related_information li a { display:block; height:180px; line-height:180px; padding-right:60px; font-size:24px; font-weight:500; color:#fff; text-align:right; }
.related_information li.bg06 a, .related_information li.bg07 a{position: relative; line-height:30px; font-size:20px; text-align: center; padding:0;}
.related_information li.bg06 a span, .related_information li.bg07 a span{width:100%; position: absolute; left:50%; top:50%; transform: translate(-50%,-50%);}

.related_information li.bg01 a { background:url('../jpg/related_information_bg01_1.jpg') no-repeat left top; }
.related_information li.bg02 a { background:url('../jpg/related_information_bg02.jpg') no-repeat left top; }
.related_information li.bg03 a { background:url('../jpg/related_information_bg03.jpg') no-repeat left top; }
.related_information li.bg04 a { background:url('../jpg/related_information_bg04.jpg') no-repeat left top; }
.related_information li.bg05 a { background:url('../jpg/related_information_bg05.jpg') no-repeat left top; }
.related_information li.bg06 a { background:url('../jpg/related_information_bg06_1.jpg') no-repeat left top; }
.related_information li.bg07 a { background:url('../jpg/related_information_bg07.jpg') no-repeat left top; }

/* 언어별 통합 */
#solutions_wrap .sticky-menu .left_link.lang-other {width: 77%;}
#solutions_wrap .sticky-menu .left_link.lang-other a { padding-right: 5%; display: flex; justify-items: center; align-items: center; height: 80px; float: left; width: 16%; line-height: normal; text-align: center;}
#solutions_wrap .sticky-menu .left_link.lang-other a:last-child { padding-right:0;}
.lang-jp .manage_funtion ul li .text { width: auto;}
.lang-jp .common_wide_box dl dt,
.lang-jp .solutions_list_box > ul > li,
.lang-jp .feature_list > li { word-break: break-word; }

@media only screen and (min-width: 1204px){
    .lang-other .common_wide_box dl dt { font-size: 46px;}
    .lang-other .manage_funtion ul {padding: 60px 0 70px;}    
}

@media only screen and (max-width: 890px){
    .lang-jp .common_wide_box.bg05 { background: url(../jpg/common_wide_box_bg05.jpg) no-repeat 50% bottom; background-size: contain; background-color: #f7f7f7;}
    .lang-other.manage_funtion ul li .text {word-break: break-all;}
    .lang-jp.common_applications .text_area,
    .lang-jp .common_wide_box dl dd {word-break: break-word;}
    .lang-other .solutions_visual dl dt h1 { font-size: 10.3vw;}
}

@media only screen and (min-width: 891px){
    .lang-es .common_wide_box.bg05 { height:823px; margin:40px 0 0; background: url('../jpg/common_wide_box_bg05-2.jpg') no-repeat 50% 50%; }
    .lang-jp .common_wide_box.bg05 { height:823px; margin:40px 0 0; background: url('../jpg/common_wide_box_bg05-3.jpg') no-repeat 50% 50%; background-size: contain; background-color: #f7f7f7; }
    .lang-jp .common_wide_box.bg05 dl dd p { word-break: keep-all;}
}

/* 적용분야 : 개인정보보호 */
.privay_txt_box { display:block; margin:40px 0 150px; background: #f7f7f7; overflow: hidden; }
.privay_txt_box .vertical_box { display:table; max-width:1204px; height:140px; margin:60px auto; }
.privay_txt_box .vertical_box .icon_box { display:table-cell; width:15%; height:140px; vertical-align:middle; }
.privay_txt_box .vertical_box dl { display:table-cell; width:85%; height:140px; padding-left:0; box-sizing:border-box; vertical-align:middle; }
.privay_txt_box .vertical_box dl dt { margin:0 0 10px; font-size:24px; font-weight:500; color:#222; }
.privay_txt_box .vertical_box dl dd { font-size:18px; color:#666; }

/* 모바일 인증 솔루션 1101 수정사항 */
.table_h5 {margin:0 0 60px; font-size:48px; font-weight:500; color:#222; text-align:center; }
.solution_table {margin-bottom:200px;}
.solution_table:after {display:block; content: ''; clear:both;}
.solution_table .th{width:38%; float:left; height:235px;background: #f5f5f5; text-align:center; border-top:1px solid #ccc; position: relative;}
.solution_table .th p{font-size: 28px; line-height: 62px; font-weight:600;}
.solution_table .th span{font-size: 20px; line-height: 32px;}
.solution_table .td{width:62%; float:left; height:236px; color:#222; font-size:16px; letter-spacing: -0.03em; border-top:1px solid #ccc; font-size:18px; line-height:32px; position: relative;}
.solution_table .bdb{ border-bottom: 1px solid #ccc;}
.solution_table .td strong{line-height:42px;}
.solution_table .td ul li{list-style:disc; margin-left:20px; color:#666;}
.solution_table .txt_center{position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%); width:90%;  }
.solution_table .td .txt_center{padding-left:5%; box-sizing:border-box; width:100%;}

/* case study */
.caseStudy_con{margin-bottom:150px;}
.case_study_top{overflow:hidden;}
.case_study_top dt{float:left; width:590px; margin-right:16px; padding-bottom:24px; border-bottom:1px solid #f0f0f0; vertical-align:top;}
.case_study_top dt .img_wrap{width:100%; height:445px; overflow:hidden; position:relative;}
.case_study_top dt .img_wrap img{width:auto; max-width:inherit; height:100%; position:absolute; top:0; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%);}
.case_study_top dt span{display:block; margin-top:30px; font-size:16px; color:#999;}
.case_study_top dt p{display:-webkit-box; height:85px; margin:17px 0 25px; font-size:24px; font-weight:600; line-height:1.2; overflow:hidden; -ms-text-overflow:ellipsis; text-overflow:ellipsis; -webkit-line-clamp:3; -webkit-box-orient:vertical;}
.case_study_top dt .btn_detail { display:inline-block; width:174px; height:42px; line-height:40px; font-size:16px; font-weight:500; color:#a12642; text-align:center; background:url('../png/icon-arrow-right_on_bold.png') no-repeat 90% center; border:1px solid #a12642; border-radius:21px; box-sizing:border-box; }
.case_study_top dd{float:left; width:590px; vertical-align:top;}
.case_study_list{font-size:0; margin-bottom:-20px;}
.case_study_list li{display:inline-block; width:287px; margin:0 16px 20px 0; border:1px solid #f0f0f0; vertical-align:top; box-sizing:border-box;}
.case_study_list li:nth-of-type(2n){margin-right:0;}
.case_study_list li > a{display:block; width:100%; height:100%;}
.case_study_list li .img_wrap{width:100%; height:215px; overflow:hidden; position:relative;}
.case_study_list li .img_wrap img{width:auto; max-width:inherit; height:100%; position:absolute; top:0; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%);}
.case_study_list li .txt{padding:20px 20px 30px;}
.case_study_list li .txt span{display:block; font-size:14px; color:#999;}
.case_study_list li .txt p{display:-webkit-box; height:42px; /* margin-top:17px;  */font-size:18px; line-height:1.2; overflow:hidden; -ms-text-overflow:ellipsis; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical;}

.case_study_bottom{margin-top:20px;}
.case_study_bottom .case_study_list{display:none;}
.case_study_bottom .case_study_list li:nth-of-type(2n){margin-right:16px;}
.case_study_bottom .case_study_list li:nth-of-type(4n){margin-right:0;}
.case_study_bottom .more_wrap{margin-top:60px; text-align:center;}

#common_table_view .subject_area { position:relative; display:block; padding:40px 140px 40px 30px; border-top:2px solid #ccc; border-bottom:1px solid #ddd; }
#common_table_view .subject_area .subject { display:block; font-size:24px; font-weight:600; color:#222; }
#common_table_view .subject_area .date { display:block; margin-top:15px; font-size:16px; font-weight:400; color:#999;  }
#common_table_view .subject_area .titBtn_wrap { position:absolute; right:30px; top:45px; font-size:0;}
#common_table_view .subject_area .titBtn_wrap .downBtn{display:inline-block; width:32px; margin-right:25px; vertical-align:middle;}
#common_table_view .subject_area .titBtn_wrap .downBtn img{width:100%;}
#common_table_view .subject_area .titBtn_wrap .btn_share{display:inline-block; width:24px; vertical-align:middle;}
#common_table_view .subject_area .titBtn_wrap .btn_share img{width:100%;}
#common_table_view .subject_area .share_area { width:180px; position:absolute; right:0; top:50px; display:none; padding:10px; background: #fff; box-shadow: 10px 10px 30px #ddd; z-index:7;}
#common_table_view .subject_area .share_area a img { width:auto; }
#common_table_view .detail_area { padding:40px 30px; }
#common_table_view .detail_area > img { width:100%; margin-bottom:60px;}
#common_table_view .detail_area > dl{overflow:hidden;}
#common_table_view .detail_area > dl *{box-sizing:border-box;}
#common_table_view .detail_area > dl dt{float:left; width:calc(100% - 378px);}
#common_table_view .detail_area > dl dt > img{width:100%;}
#common_table_view .detail_area > dl dt iframe{width:100%; height:431px;}
#common_table_view .detail_area .text_area { margin-bottom:80px; font-size:18px; color:#666;}
#common_table_view .detail_area .text_area p{line-height:1.3; margin-bottom:0;}
#common_table_view .detail_area .text_area p + p{margin-bottom:25px;}
#common_table_view .detail_area .text_area strong{display:block; margin-bottom:5px;}
#common_table_view .detail_area > dl dd{float:left; width:358px; padding:55px 20px; margin-left:20px; border:1px solid #ddd;}
#common_table_view .detail_area > dl dd > strong{display:block; font-size:24px; padding:0 10px;}
#common_table_view .detail_area > dl dd ul{margin-top:30px;}
#common_table_view .detail_area > dl dd ul li{margin-bottom:35px; padding:0 10px 35px; border-bottom:1px solid #ddd;}
#common_table_view .detail_area > dl dd ul li:last-of-type{margin-bottom:0; padding-bottom:0; border-bottom:0;}
#common_table_view .detail_area > dl dd ul li span{font-size:20px; font-weight:600;}
#common_table_view .detail_area > dl dd ul li p{margin-top:10px; font-size:16px; color:#999; line-height:1.6;}
#common_table_view .detail_area .detail_system{margin-bottom:80px;}
#common_table_view .detail_area .detail_system > img{max-width:100%; /* height:100%; */}
#common_table_view .detail_area h3{margin-bottom:35px; font-size:36px;}
#common_table_view .detail_area .caseStudy_detail_system{margin-bottom:0;}
#common_table_view.caseStudy_view .detail_area > dl dd ul li span{font-size:18px; color:#666; font-weight:bold;}
.solutions_sub_module .swiper-container{position:relative;}
.solutions_sub_module .swiper-container.on .swiper-button-prev{display:none;}
.solutions_sub_module .swiper-container.on .swiper-button-next{display:none;}
.solutions_sub_module .swiper-container .swiper-button-prev {position: absolute; top: 35%; left:-12px; height: 96px; z-index: 2; cursor: pointer; background:url('../png/btn-slide-prev_02.png') center center no-repeat; background-color:none; width:96px; overflow:hidden;}
.solutions_sub_module .swiper-container .swiper-button-prev.swiper-button-disabled{display:none;}
.solutions_sub_module .swiper-container .swiper-button-next {position: absolute; top: 35%; right:-12px; height: 96px; z-index: 10; cursor: pointer; background:url('../png/btn-slide-next_02.png') center center no-repeat; width:96px;}
.solutions_sub_module .swiper-container .swiper-button-next.swiper-button-disabled{display:none;}
#common_table_view .solutions_product_list > li{margin-bottom:0;}