/* main */
.mg_area {width:100%; min-height:380px; padding-bottom:20px;}
.mg_area h1 img{width:189px; height:32px; margin-top:5px;}
.mg_area .gnb {padding:12px 0 12px 0; width:100%; z-index: 5}
.mg_area .gnb {position:fixed; top:66px; padding:24px 0 30px 0; width:100%; background:url(../images/catchloc_bg.png) repeat-x; z-index:5;}
.mg_area .gnb .gnb_wrap {width:100%; margin:0 auto;}
.mg_area .gnb .gnb_wrap h1 {float:none; text-align:center}
.mg_area .gnb .gnb_wrap ul { float:none; margin:12px auto 0 auto; width:360px; text-align:center}
.mg_area .gnb .gnb_wrap ul li {float:none; display:inline; margin-left:0px;}
.mg_area .gnb .gnb_wrap ul li a:link {font-size:13px;}
.mg_area .gnb .gnb_wrap ul li img { height:10px;}

.mg_area .gnb .language {position:absolute; right:5px; top:-5px; color:#FFF}

.mg_area .lnb {top:auto; bottom:0px; right:0px; width:100%; height:60px; border-radius:0px; border-top:1px solid #d8d0d8; z-index:11}
.mg_area .lnb a {border-right:1px solid #d8d0d8; border-bottom:none; width:24%; height:22px; padding-top:38px; padding-bottom:5px; display:inline-block; text-align:center; background-size:26px 26px; background-repeat:no-repeat; background-position:center 9px; font-weight:bold; color:#333; border-radius:0px; cursor:pointer; font-size:9px}
.mg_area .login {background-image:url(../images/ico_login.png);}
.mg_area .join {background-image:url(../images/ico_joinus.png);}
.mg_area .contact {background-image:url(../images/ico_contactus.png);}
.mg_area .demo {background-image:url(../images/ico_demo.png); border-right:none!important;}

.mg_contents {width:100%; margin:0 auto; padding-top:120px;}
.mg_contents .descript {float:none; width:100%; margin-top:0px; text-align:center;}
.mg_contents .descript h2 {font-size:48px; margin:0px 20px;}
.mg_contents .descript h3 {font-size:27px; text-align:left; font-weight:normal; color:#c2c4f1; letter-spacing:-1px; margin-top:10px; margin-left:20px;}
.mg_contents .descript p {font-size:14px; line-height:1.5em; color:#FFF; margin:10px 20px 30px 20px; text-align:left;}
.mg_contents .descript a {padding:15px 20px; background:#4c5887; color:#FFF; font-size:18px; border-radius:5px;}
.mg_contents .descript a:hover {color:#fff!important;}
.mg_contents .mg {float:none; width:360px; height:280px; margin:80px auto 5px auto;}
.mg_contents .mg img {width:340px; height:245px; display:block; margin-left:10px;}

.content_wrap {width:100%; margin:0 auto;}
.content_wrap .primary {margin-top:30px; padding-bottom:50px;}
.content_wrap .primary dl {width:320px; float:none; margin:20px auto 0 auto!important;}
.content_wrap .primary .video {width:100%; margin:0 auto;}
.content_wrap .primary iframe {margin-bottom:20px; width:100%; height:220px; margin:0 auto; text-align:center}

.section {padding:80px 0;}
.section h3 {font-size:32px; font-weight:bold; color: #333; margin-bottom:10px; margin-left:20px;}
.section .descript {font-size:16px; line-height:1.5em; margin:0 20px;}
.section .concept_diagram {text-align:center; margin:30px 0px 0px 0px}
.section .concept_diagram img {width:90%; height:90%}
.section .feature_list {width:100%; margin:20px auto 0 auto;}
.section .feature_list li {text-align:center; font-size:14px; float:none; margin:30px auto 0 auto}
.section .feature_list li img { margin-bottom:5px;}

.tit_develop {background-size:64px 52px; background-position: 0 7px; background-repeat:no-repeat; padding-left:75px; height:62px; margin-top:50px; margin-bottom:30px; margin-left:20px; margin-right:20px;}
.locationcloud {background-image:url(../images/02develop_ico01.gif);}
.api {background-image:url(../images/02develop_ico02.gif);}
.sdk {background-image:url(../images/02develop_ico03.gif);}
.tit_develop h4 {font-size:22px; margin-bottom:2px;}
.tit_develop h4 span{font-size:12px; color:#999; padding-left:10px;}
.tit_develop p {font-size:12px;}
.locationcloud_ex {}
.locationcloud_ex dl {width:320px; margin:30px auto 0px auto!important; float:none;}
.locationcloud_ex dt {font-size:20px; margin-bottom:10px;}
.locationcloud_ex dt img {margin-bottom:10px}
.locationcloud_ex dd {font-size:14px; line-height:1.6em;}

.api_process {margin-bottom:30px}
.api_process ol { width:90%; margin:0 auto}
.api_process ol li {float:left; margin-top:10px;}
.api_process ol li img {width:120px; height:120px;}
.api_process .arrow {width:30px; height:120px; background-image:url(../images/02develop_apiarrow.gif); background-size:18px 15px; background-position:center; background-repeat:no-repeat; float:left;}
.api_feature {width:90%; margin:0 auto;}
.api_feature th {background:#f5f5f5; border:1px solid #c8c8c8; border-left:none; padding:20px; font-size:16px;}
.api_feature td {border:1px solid #c8c8c8; border-right:none; padding:20px; font-size:14px;}

.sdk_feature {width:90%; margin:0 auto 0 auto!important; float:none}
.sdk_feature th {background:#f5f5f5; border:1px solid #c8c8c8; border-left:none; border-right:none; padding:20px; font-size:16px;}
.sdk_feature td {border:1px solid #c8c8c8;  border-left:none; border-right:none; padding:20px; font-size:14px;}

.table_price {width:90%; margin:30px auto 0 auto;}
.table_price th {background:#f5f5f5; border:1px solid #c8c8c8; border-left:none; padding:20px; font-size:16px; width:50%}
.table_price td {border:1px solid #c8c8c8;  border-left:none; padding:20px; font-size:14px; line-height:1.5em; width:50%}
.table_price b {font-size:16px;}
.table_price strong {font-size:16px; color:#e8437b;}

.case_wrap {z-index:0; display: flex; flex-direction: column-reverse; width: 90%; margin:40px 20px;}
.case_wrap .case_descript {width:100%;}
.case_wrap .case_descript h4 {font-size:16px; margin-bottom:5px; margin-top:20px; color: #e7457c}
.case_wrap .case_descript h5 {font-size:32px; margin-bottom:10px; font-weight:bold; color: #333}
.case_wrap .case_descript p {font-size:16px; line-height:1.6em; margin-bottom:20px;}
.case_wrap .case_descript a {background:#528bd1; color:#FFF; padding:10px 20px; border-radius:3px;}
.case_wrap .case_descript a:hover {color:#fff!important;}
.case_wrap .case_image {width: 100%;}
.case_wrap .pd-r {padding-right: 0px;}
.case_wrap .pd-l {padding-left: 0px;}
.case-fd {flex-direction: column-reverse;}

.partner_list {margin-top:30px;}
.partner_list li {border:1px solid #e3e3e3; width:339px; height:130px; text-align:center; padding-top:50px; float:none; margin:-1px auto 0 auto}

.md-close {position:absolute; right:5px; top:5px; width:50px; height:50px; background-image:url(../images/btn_close.png); background-position:center; background-repeat:no-repeat; background-size:30px 30px;}
.md-content .btn-danger {width:100%; height:45px; margin:5px 0px; font-size:16px;}
.md-content .id_confirm {width:75px; height:43px; padding:0; position:absolute; top:20px; right:20px; background:#528bd1; color:#FFF; border-radius:0px 5px 5px 0px;}

.section .appfeature_list { width: 90%; margin: 50px auto  0 auto  }
.section .appfeature_list li {text-align:center; font-size:14px; width:50%; margin-bottom: 30px; float: left;}
.section .appfeature_list li img { margin-bottom:5px;}
.funtions {margin-bottom:50px; display: flex; flex-direction: column-reverse;}
.funtions .discript {width: 90%; margin: 0 auto 0 auto;}
.funtions .btn-down { width: 320px; margin: 0 auto;}
.funtions a {background:#e7457c; color:#FFF; padding:20px 85px; width: 150px; font-size:20px; display: block;}
.funtions a:hover {color:#fff!important;}

.section .screenshot {width: 90%; margin: 20px auto 0 auto;}

.section .effect {width:320px}
.section .diagram { text-align:center}
.section .diagram img { width:340px; height:180px;}

/* reference */
#section0 h2 {font-size:32px; padding: 0 15px;}
#section0 h3 {font-size:20px; padding: 0 15px;}
#section0 {width:100%; height:670px; overflow:hidden; background: url(../images/reference/main_bg.jpg) no-repeat fixed center; background-size:cover; position:relative; color: #fff}
#section0 .lnb {display: none }
#section0 .mg {padding-top: 120px;}
#section0 .mg .comment {font-size:16px; padding: 0 15px; line-height: 1.5em;}
#section0 .mg .comment span, #section0 h3 span { display:inline;}
#section0 .mg .contact a {color: #fff; font-size: 24px; display: inline-block; margin: 0 15px; padding-left: 40px;}
#section0 .mg .contact .mail {background: url(../images/reference/ico_sendmail.png) no-repeat; background-size: 32px 32px; margin-bottom: 10px}
#section0 .mg .contact .call {background: url(../images/reference/ico_call.png) no-repeat; background-size: 32px 32px;}

.reference_content {padding-bottom:60px;}
.reference_content .decription {float: left; width: 100%;}
.reference_content .decription span, .reference_content .decription p {font-size: 14px; padding: 0 15px;}
.reference_content .decription h3 {font-size: 30px; font-weight: normal; margin-bottom: 10px; padding: 0 15px;}
.reference_content .funtions h4 {font-size: 14px;}
.reference_content .sub_con {width:100%;}
.reference_content .client {margin-top:20px;}
.reference_content .client li {float:left; margin-right: 20px;  margin-left:0px; line-height: 2.5em; margin-left: 15px}
.reference_content .funtions {float:left; width: 90%; margin-top: 18px; margin-left: 15px}
.reference_content .funtions li {float: left; background: url(../images/reference/ico_funtion_dot.jpg) no-repeat 0px 10px; background-size: 5px; font-size: 14px;}

/* ���� */
/* .reference_content .screenshot {margin-top: 50px; margin-bottom: 80px; position: relative; height: 627px;}
.reference_content .screenshot_pc {position:absolute; top:43px; left: 120px; z-index: 1; display: none} */
/* .reference_content .screenshot_pc img { width : 778px; z-index: 1;} */
/* .reference_content .screenshot_m img { width : 300px; z-index: 3} */

/* �����̴� �� .screenshot Ŭ���� �� ��ġ ����.  */
.carousel-wrapper-a-pc { position: absolute; top : 35px; left: 54%; width : 170px; margin-left :-105px; }
.carousel-wrapper-a-m {  position: absolute; top : 35px; left: 54%; width : 273px; margin-left : -150px; }
.reference_content .bg_pc {position: absolute; top: 0px; left: 0px; z-index: -1; display: none}
/* ���� */

.reference_content .screenshot { margin-top: 50px; height: 630px;}
/* .reference_content .screenshot_m {position:absolute; top:33px; left:50%; margin-left: -136px; z-index: 3} */
/* .reference_content .screenshot_m img { width: 272px;} */
/* .reference_content .screenshot_pc img { display : none;} */

.reference_content .screenshot_m img { width: 273px;}
.reference_content .bg_m {position: absolute; bottom: 40px; left: 50%; margin-left: -150px; z-index: 4;}
.reference_content .bg_m img {width: 300px;}
.reference_content .img_navi {text-align: center; width: 82px; position: absolute; bottom: 0px; left: 50%; margin-left: -41px;}
.reference_content .img_navi a {width:15px; height: 15px; display: inline-block; margin: 0 5px;}
.reference_content .img_navi .on {background: url(../images/reference/ico_circle_on.jpg) no-repeat; background-size: 15px;}
.reference_content .img_navi .off {background: url(../images/reference/ico_circle_off.jpg) no-repeat; background-size: 15px;}

.statistics {width: 100%; padding: 100px 0 60px 0; background: #f0f0f0}
.statistics_wrap {width:100%; margin:0 auto;}
.statistics_wrap h2 {text-align: center; font-size: 20px; font-weight: normal; line-height: 1.8em; padding: 0 15px;}
.statistics_wrap h2 span {font-size: 12px;}
.statistics_list {margin-top: 30px;}
.statistics_list dl {text-align: center; display: block; width:320px; margin:0 auto 40px auto; }
.statistics_list .counter {font-size:50px; color:#c2412a; font-family:Montserrat, sans-serif;}

.content_wrap {width:100%; margin:0 auto;}
/* reference end */

.table_price {display: none}

.table_price_mobile {min-width:340px; width: 90%; margin:20px auto 0 auto; display: block}
.table_price_mobile th {background:#f5f5f5; border:1px solid #c8c8c8; border-left:none; padding:20px; font-size:16px;}
.table_price_mobile .subtitle {background:#fff; text-align: left; font-size: 14px}
.table_price_mobile td {border:1px solid #c8c8c8;  border-left:none; padding:20px; font-size:14px; line-height:1.5em; width: 50% }
.table_price_mobile b {font-size:16px;}
.table_price_mobile strong {font-size:16px; color:#e8437b;}

/* 캐치락 엣지 */
.edge_main {padding: 150px 0 100px 0; background: #34292d; text-align: center;}
.edge_main h1 {}
.edge_main h1 img {width: 320px;}
.edge_main p {color:#fff; font-size: 18px; line-height: 1.5em; margin: 50px 0; padding: 0 30px;}
.edge_main button {background: #ef5082; padding: 20px; border-radius: 5px; color: #fff; font-size: 16px; width: 220px; margin: 0 5px;}
#advantages {padding:100px 0; background: #f0f0f0}
#advantages dl {width: 260px; margin: 40px auto; float: none}
#advantages dt {text-align:center;}
#advantages .tit {font-size:22px; margin:20px 0;}
#advantages dd {text-align:center; font-size:16px; line-height:1.6em}

#progress {padding:100px 0;}
#progress h3 {text-align:center; font-size:22px; margin-bottom:50px;}
#progress li {float:none; margin: 20px 0; text-align: center}

#diagram {padding:100px 0; background: #f0f0f0; text-align: center}
#diagram h3 {text-align:center; font-size:22px; margin-bottom:30px;}
#diagram img {width: 90%;}

#advantages .c_wrap, #progress .c_wrap, #diagram .c_wrap {width: 100%; margin: 0 auto;}

/* 캐치락 리뉴얼 */

.re-main {width: 100%; margin:0 auto 50px auto; padding-top:90px;}
.re-main h2 {margin-left: 10px}
.re-main section {display: flex; flex-direction: column-reverse; margin-top: 30px}
.re-main article {width: 90%; margin: 0 auto}
.re-main h3 {font-size: 42px; line-height: 1.1em; margin-top: 40px; margin-bottom: 20px}
.re-main article p {font-size: 18px;}
.re-main br { display: none}
.re-main .link a {display: block; padding:20px; width: 160px; text-align: center; font-size: 18px; background: #e7457c; color: #fff; margin: 0 auto}
.re-main .link a:link {color: #fff}
.re-main .link a:hover {color: #fff!important}
.re-main .link a:visited {color: #fff}


.contents-wrap {width: 100%; margin:50px auto}
.contents-wrap .primary {margin-top:30px; padding-bottom:50px;}
.contents-wrap .primary dl {width:320px; float: none; margin: 20px auto;}
.contents-wrap .primary dt {background:#ebebeb; border:1px solid #d7d7d7; height:145px; padding:30px 0; text-align:center; font-size:20px;}
.contents-wrap .primary dl img {margin-bottom:10px}
.contents-wrap .primary dd {font-size:16px; line-height:1.5em; color:#505050; margin-top:10px;}
.contents-wrap .primary iframe {margin-bottom:20px; width:100%; height:200px; display: none}
.contents-wrap .primary .mr-none {margin-right: auto}