@charset 'utf-8';

#contents.main {overflow-y: scroll;}

#side_wrap {display: inline-block;width:320px;background:#211f38;float: left;vertical-align: top;}
#side_wrap .btn_side_toggle {position:absolute;top:50%;right:-6px;z-index:100;margin-top:-55px;cursor:e-resize;}
#side_wrap .header {padding:31px 24px 0 22px;overflow: hidden;}
#side_wrap .header h1 {text-align:left;padding-bottom:0;padding-left:22px;}

#side_wrap #side_search {padding-left:24px;margin-top:33px;max-width: 301px;}
#side_wrap #side_search .input_wrap {position:relative;width:250px}
#side_wrap #side_search .input_wrap input { display:block; width:100%; border:1px solid #860f32; background:transparent; color:#a1a1b2; font-size:15px; line-height:34px; outline:none; height:34px; padding: 0px 13px; margin-bottom:4px }
#side_wrap #side_search .input_wrap .btn_search {display:inline-block;vertical-align:middle;margin-left:0;border:1px solid #860f32;width:38px;height:34px;text-align:center;padding-top:8px}
#side_wrap .btn_wrap {padding: 0 0 0;overflow:hidden;position:absolute;left:0;bottom:0;width:320px;}
#side_wrap .btn_wrap * {display:inline-block;}
#side_wrap .btn_wrap a:nth-of-type(1) {float:left;}
#side_wrap .btn_wrap a:nth-of-type(2) {float:right;}
#side_wrap #tree_wrap {height:400px;padding-left:24px;margin-top:29px;padding-bottom:5px}
#side_wrap #tree_wrap .mCSB_container {padding-top:0 !important;}
#side_wrap #tree_wrap .mCSB_scrollTools {right:10px;}
#side_wrap #tree_wrap .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {background:#4a4a63;border-radius:0}
#side_wrap #search_result {display:none;position:absolute;top:180px;left:24px;width:100%;z-index:100;padding-right:51px;}
#side_wrap #search_result.on {display:block;}
#side_wrap #search_result .in_wrap {background:#32314a;border:1px solid #54536d;padding:14px 11px;padding-right:0;height:100%;}
#side_wrap #search_result .in_wrap dt {color:#fff;font-size:14px;background:url('/public/images/sub/ico_cir_02.gif') repeat-x 0 50%;margin-top:10px}
#side_wrap #search_result .in_wrap dt:first-child {margin-top: 0}
#side_wrap #search_result .in_wrap dt span {display:inline-block;background:#32314a;padding-right:5px}
#side_wrap #search_result .in_wrap dd {padding-left:20px;margin-top:5px;overflow:hidden;text-overflow:ellipsis;}
#side_wrap #search_result .in_wrap dd a {color:#a7a6bb;font-size:14px;}
#side_wrap #search_result .in_wrap dd a:hover {color:#fff;}
#side_wrap #search_result .in_wrap .mCustomScrollBox {padding-right:16px}
#side_wrap #search_result .in_wrap .mCSB_scrollTools {right:4px}
#side_wrap #search_result .in_wrap .mCSB_dragger_bar {border-radius:0;background-color:#1b1a2f;}


#wrapper.off {padding-left:50px;}
#wrapper.off #side_wrap {width:4px}
#wrapper.off #side_wrap header,
#wrapper.off #side_wrap .btn_wrap,
#wrapper.off #side_wrap #tree_wrap,
#wrapper.off #side_wrap #side_search .input_wrap {display:none}

#contents .tit_1:not(.tryit) {font-size:30px;font-weight:700;color:#333333;letter-spacing:0;width:100%}
#contents .tit_1.t2 {margin-left:50px;margin-right:70px}
#contents .tit_1.t3 {margin-left:50px}
#contents .bdr_b {padding-top:37px;}
#contents .sub {margin-top:10px; width:890px; position:relative;}
#contents .sub .tit_1 {width:auto;font-size:24px;font-weight:400;padding-bottom:0;position:relative;margin:40px 0 20px;}
#contents .sub .tit_2 {font-size:14px;color:#525252;margin-bottom:17px;margin-left: 30px;}
#contents .sub .desc_1 {font-size:16px;color:#333333;}
#contents .sub .desc_2 {font-size:13px;color:#666666;margin-left: 40px;}
#contents .sub .list_1 li {margin-top:8px;text-indent:-10px;padding-left:10px;white-space:initial; font-size:13px;color:#666666;margin-left: 40px;}
#contents .sub .list_1 li:first-child {margin-top:0;margin-left: 40px;}
#contents .sub .list_1 li.pre_li { padding-left:0; text-indent:0; }
#contents .sub .list_1.depth_li li {  margin-top:5px;}
#contents .depth_txt { margin:40px 0 20px; }
#contents .tit_1.arrow_right + .depth_txt { margin-top:0;}
#contents li .depth_txt { margin-top:20px;margin-left: -40px;font-weight: 900;}
#contents .depth_txt:before { content:''; width:3px;height:3px;background:#211f38;display:block;position:absolute;left:0;top:13px;}
#contents .depth_txt {position:relative; text-indent:0;position:relative; padding-left:13px; font-size:18px; font-weight:normal; color:#333;}
#contents .sub .tit_1.mt {margin-top:40px;}
#contents .sub .tit_1.sh { margin-bottom:15px; }

.dropdown_wrapper { display: inline-block; position: relative; width: 208px; margin: 0 auto; cursor: pointer; outline: none; font-size: 15px; color: #ea002c; padding-right: 0; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; border: 1px solid #860f32; height: 34px; line-height: 34px; }
.dropdown_wrapper:after { content: ""; width:11px; height:9px; position: absolute; right:16px; top:12px; background: url('/public/images/sub/dropdown_arr.png') no-repeat 0 0; -webkit-transition: .3s all; -moz-transition: .3s all; -o-transition: .3s all; -ms-transition: .3s all; transition: .3s all; }
.dropdown_wrapper.on:after { background: url('/public/images/sub/dropdown_arr.png') no-repeat 0 0; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg);
-o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
.dropdown_wrapper .select_re {display:block;color:#ea002c;height:34px;font-size:15px;padding-left:47px;position:relative;}
.dropdown_wrapper .select_re:after { background: url('/public/images/sub/icon_web_on.png') no-repeat 0 0; content: ""; width:22px; height:20px; position: absolute; left:8px; top:6px;
}
.dropdown_wrapper .dropdown_select{ position: absolute; top: 32px; left: -1px; width: 208px; z-index: 10; background: #32314a; max-height: 0; -webkit-transition: max-height .2s ease-out; -moz-transition: max-height .2s ease-out; -o-transition: max-height .2s ease-out; -ms-transition: max-height .2s ease-out; transition: max-height .2s ease-out; overflow:hidden;
}
.dropdown_wrapper .dropdown_select ul {display:block;border:1px solid #860f32;overflow:hidden;}
.dropdown_wrapper.on .dropdown_select{max-height:391px; -webkit-transition: max-height .2s ease-in; -moz-transition: max-height .2s ease-in; -o-transition: max-height .2s ease-in; -ms-transition: max-height .2s ease-in; transition: max-height 0.2s ease-in; }
.dropdown_wrapper .dropdown_select li {border-top:1px solid #414051}
.dropdown_wrapper .dropdown_select li:first-child {border: 0;}
.dropdown_wrapper .dropdown_select a {font-size:13px;color:#a7a6bb;display:block;padding:0 9px;height:29px;line-height:29px;padding-left:47px;position:relative;}
.dropdown_wrapper .dropdown_select a:after { content: ""; width:22px; height:20px; position: absolute; left:8px; top:6px; }

.dropdown_wrapper .dropdown_select li.web a:after {
    background: url('/public/images/sub/icon_web.png') no-repeat 0 0;
}
.dropdown_wrapper .dropdown_select li.on.web a:after,
.dropdown_wrapper .select_re.web:after {
    background: url('/public/images/sub/icon_web_on.png') no-repeat 0 0;
}
.dropdown_wrapper .select_re.web:after {top:8px}

.dropdown_wrapper .dropdown_select li.webv2 a:after {
    background: url('/public/images/sub/icon_web.png') no-repeat 0 0;
}
.dropdown_wrapper .dropdown_select li.on.webv2 a:after,
.dropdown_wrapper .select_re.webv2:after {
    background: url('/public/images/sub/icon_web_on.png') no-repeat 0 0;
}

.dropdown_wrapper .dropdown_select li.android a:after {
    background: url('/public/images/sub/icon_an.png') no-repeat 0 0;
}
.dropdown_wrapper .dropdown_select li.on.android a:after,
.dropdown_wrapper .select_re.android:after {
    background: url('/public/images/sub/icon_an_on.png') no-repeat 0 0;
}

.dropdown_wrapper .dropdown_select li.iosv2 a:after {
    background: url('/public/images/sub/icon_app.png') no-repeat 0 0;
}
.dropdown_wrapper .dropdown_select li.on.iosv2 a:after,
.dropdown_wrapper .select_re.iosv2:after {
    background: url('/public/images/sub/icon_app_on.png') no-repeat 0 0;
}

.dropdown_wrapper .dropdown_select li.ios a:after {
    background: url('/public/images/sub/icon_app.png') no-repeat 0 0;
}
.dropdown_wrapper .dropdown_select li.on.ios a:after,
.dropdown_wrapper .select_re.ios:after {
    background: url('/public/images/sub/icon_app_on.png') no-repeat 0 0;
}

.dropdown_wrapper .dropdown_select li.webv3VSM a:after {
    background: url('/public/images/sub/icon_web.png') no-repeat 0 0;
}
.dropdown_wrapper .dropdown_select li.on.webv3VSM a:after,
.dropdown_wrapper .select_re.webv3VSM:after {
    background: url('/public/images/sub/icon_web_on.png') no-repeat 0 0;
}
.dropdown_wrapper .dropdown_select li.androidVSM a:after {
    background: url('/public/images/sub/icon_an.png') no-repeat 0 0;
}
.dropdown_wrapper .dropdown_select li.on.androidVSM a:after,
.dropdown_wrapper .select_re.androidVSM:after {
    background: url('/public/images/sub/icon_an_on.png') no-repeat 0 0;
}

.dropdown_wrapper .dropdown_select li.iosv2VSM a:after {
    background: url('/public/images/sub/icon_app.png') no-repeat 0 0;
}
.dropdown_wrapper .dropdown_select li.on.iosv2VSM a:after,
.dropdown_wrapper .select_re.iosv2VSM:after {
    background: url('/public/images/sub/icon_app_on.png') no-repeat 0 0;
}

.dropdown_wrapper .dropdown_select li.webService a:after {
    background: url('/public/images/sub/icon_w_ser.png') no-repeat 0 0;
}
.dropdown_wrapper .dropdown_select li.on.webService a:after,
.dropdown_wrapper .select_re.webService:after {
    background: url('/public/images/sub/icon_w_ser_on.png') no-repeat 0 0;
}

.dropdown_wrapper .dropdown_select li.androidUISDK a:after {
    background: url('/public/images/sub/icon_an.png') no-repeat 0 0;
}
.dropdown_wrapper .dropdown_select li.on.androidUISDK a:after,
.dropdown_wrapper .select_re.androidUISDK:after {
    background: url('/public/images/sub/icon_an_on.png') no-repeat 0 0;
}

.dropdown_wrapper .dropdown_select li.iosUISDK a:after {
    background: url('/public/images/sub/icon_app.png') no-repeat 0 0;
}
.dropdown_wrapper .dropdown_select li.on.iosUISDK a:after,
.dropdown_wrapper .select_re.iosUISDK:after {
    background: url('/public/images/sub/icon_app_on.png') no-repeat 0 0;
}

.dropdown_wrapper .dropdown_select li.androidEDCSDK a:after {
    background: url('/public/images/sub/icon_w_ser.png') no-repeat 0 0;
}
.dropdown_wrapper .dropdown_select li.on.androidEDCSDK a:after,
.dropdown_wrapper .select_re.androidEDCSDK:after {
    background: url('/public/images/sub/icon_w_ser_on.png') no-repeat 0 0;
}

.dropdown_wrapper .dropdown_select li.what3words a:after {
    background: url('/public/images/sub/icon_web.png') no-repeat 0 0;
}
.dropdown_wrapper .dropdown_select li.on.what3words a:after,
.dropdown_wrapper .select_re.web:after {
    background: url('/public/images/sub/icon_web_on.png') no-repeat 0 0;
}

.dropdown_wrapper .dropdown_select li.on a {color:#e62247;background:#2c2b43}
.sub_btn {background-color:#4CAF50;border:none;color:white;padding:8px 40px;text-align:center;text-decoration:none;display:inline-block;font-size:14px;outline:none;cursor:pointer;}
.sub_btn.t1 {display:block;background:transparent;color:#ea002c;border:1px solid #ea002c;font-weight:bold;margin-top:11px;}
.pre_1 { width: 890px; display: block; padding: 10px; margin: 0 0 10.5px; font-size: 14px; word-break: break-all; word-wrap: break-word; color: #7b8a8b; background-color: #f5f5f7; border: 1px solid #dedede; font-family:inherit; font-weight:normal; }
.pre_1 > code.hljs { font-family:inherit;}


#dim {position:fixed;top:0;left:0;right:0;bottom:0;background:#000;opacity:0.5;z-index:1006}
.pop_wrap {position:absolute;display:table;top:0;left:0;width:100%;height:100%;z-index:1600;padding:0;}
.pop_wrap .pop_inner{display:table-cell;text-align:center;vertical-align:middle}
.pop_wrap .pop_content{min-height:340px;display:inline-block;background:#fff;width: 100%;position:relative;overflow:hidden;}
.pop_wrap .pop_head {overflow:hidden;border-bottom:1px solid #e5e5e5;padding:33px 30px 18px}
.pop_wrap .pop_head .tit_1 {font-size:24px;color:#333333;background:url('/public/images/sub/ico_pen_01.gif') no-repeat 0 0;padding-left:36px}
.pop_wrap .pop_body {padding:20px 30px 40px;overflow:hidden;}
.pop_wrap .pop_btn_wrap {overflow:hidden;}
.pop_wrap .pop_sub_wrap {margin-top:15px;}
.pop_wrap .pop_sub_wrap.t1 {border: 1px solid #dedede;border-top:2px solid #ff7a00;background-color:#fafafa;white-space:nowrap;overflow:hidden;padding-bottom:15px;}
.pop_wrap .pop_sub_wrap.t1 .tit_1  {padding:20px 0;}
.pop_wrap .pop_sub_wrap.t1 {position:absolute;top:165px;left:30px; right:30px;bottom:40px;}/*margin:0;*/
.pop_wrap .panel_left,
.pop_wrap .panel_right {display:inline-block;width:50%;position:relative;height:100%;}
.pop_wrap .panel_left img,
.pop_wrap .panel_right img {width: 100%; height:100%;}
.pop_wrap .panel_left {padding-right:5px;max-width:90%;min-width:10%;}
.pop_wrap .panel_left textarea {resize:none;outline:none;width:100%;border:0;padding:10px;height:100%;}
.pop_wrap .panel_left .ico_cir {display:inline-block;width:4px;height:24px;background:url('/public/images/sub/ico_cir_01.gif') no-repeat center;position:absolute;top:50%;right:-2px;padding-top:65px;}
.pop_wrap .panel_right {padding-left:5px;}
.pop_wrap .in_wrap {border:1px solid #dedede;border-left: 0;text-align:left;position:absolute;top:65px;bottom:0;left:0;right:5px;}
.pop_wrap .panel_right .in_wrap { left:5px; right:0; }
.pop_wrap .btn {display:inline-block;outline:none;border:none;cursor:pointer;line-height: 38px;}
.pop_wrap .btn_pop_close {
background:url('/public/images/sub/btn_pop_close.gif') no-repeat 0 0; font-size:0; width:24px; height:24px; margin-top:6px; }
.pop_wrap .btn_auto { background-image:url('/public/images/sub/ico_check.png'); background-position:12% 50%; background-repeat:no-repeat; /* background-color:#fff; */ border:1px solid #c5c5c5; font-size:14px; /* color:#939397; */ width:149px; height:41px; padding-left:31px; }
.pop_wrap .btn_auto.on { background-image:url('/public/images/sub/ico_check_on.png'); background-color:#ff7a00; border-color:#ff7a00; color:#fff; }
.pop_wrap .btn_default { border:1px solid #ff7a00; font-size:14px; color:#ff7a00; background:#fff; width:149px; height:41px; }
.pop_wrap .btn_default.on { background:#ff7a00; border-color:#ff7a00; color:#fff; }

.pd_wrap {padding-left:50px;padding-right:70px}
.in_section { }


.clear_box:after { content:''; display:block; clear:both; }
.tab_menu { border-bottom:1px #c5c5c5 solid; margin-top:39px; margin-bottom:12px; max-width:890px; }
.tab_menu ul { margin-bottom:-1px; }
.tab_menu ul li { float:left; width:25%; background:#f9f9f9; border:1px #c5c5c5 solid; border-width:1px 1px 1px 0; }
.tab_menu ul li:first-child { border-left:1px #c5c5c5 solid;}
.tab_menu ul li a { display:block; padding:13px 28px; color:#939397; font-size:16px; }
.tab_menu ul li.on { border-top:2px #ff7a00 solid; background:#fff; border-bottom:0;  }
.tab_menu ul li.on a { color:#333; }

.tabmenu_cont { display:none;}
.tabmenu_cont.on { display:block;}

ol.num { list-style-type:decimal; padding-left:20px; }
ol.num.mtadd { margin-top:30px; }
ol.num > li {  margin-bottom:4px; }
ol.num > li > div { margin-left:-20px; }
ol.num > li .li_title { font-size:16px; color:#333; margin-bottom:15px; margin-left:0px;}
ol.num > li .li_desc { font-size:13px; color:#666; }
ol.num > li .li_img { margin-bottom:30px; margin-top:20px;}
ol.num > li .li_img >img{ width:902px; height:651px;}

ol.num.type2 {max-width:1300px}
ol.num.type2 > li {  margin-top:50px; }
ol.num.type2 > li .li_title {margin-bottom:25px;}

ol.num.type3 > li { margin-top:24px; }
ol.num.type3 > li .li_title { margin-bottom:7px; }


ol.num.type4 > li { margin-top:26px; }
ol.num.type4 > li .li_title { margin-bottom:16px; }

.txt_center {text-align:center}

/* guide */
.sample_list {overflow:hidden; margin: 30px 0;}
.sample_list ul li {display:block;float:left;width:16.66%;text-align:center;}
.sample_list ul li .img_link,
.sample_list ul li .img_desc,
.sample_list ul li .link_desc {display:block;}
.sample_list ul li .img_desc {margin-top:20px;color:#333333;font-size:14px;}
.sample_list ul li .link_desc {margin-top:8px;color:#999999;font-size:12px;}
.sample_list ul li .img_link:hover .link_desc {color:#ff810e}
.sample_list.type2 ul li {width:220px;text-align:left;}
.sample_list.type2 ul li img {width: 200px}
.sample_list.type2 ul li:last-child {width:218px;}
.sample_list.type3 ul li {width:425px;text-align:left;}
.sample_list.type3 ul li:last-child {width:425px;}
.sample_list.type3 ul li img {width: 437px}

.sub .ex_txt { color:#0070c9; font-size:14px; }
.bdr_link {color:#333333;text-decoration:underline;}
.org_btn {color: #ff7a00;font-weight: 400; }
.org_btn:hover { border-bottom: 1px #ff9b40 solid; }
.fc_blue {color:#0070c9}


/* sample grid  */
#contents .sub .tit_1.gird_title {font-size: 24px;padding-bottom: 0;position: relative;margin-bottom:0 ; }

.sample_grid { max-width:904px;}
.sample_grid ul {}
.sample_grid ul li { float:left; width:202px; height:204px;border:1px #211f38 solid;margin-right:24px;margin-top:20px;position:relative;
    /*transition: background-color .1s ease-out;-webkit-transition: background-color .1s ease-out;*/
}
.sample_grid ul li .overW { border:6px #ff7a00 solid;position:absolute;top:0;left:0;right:0;bottom:0;z-index:5;display:none;
    /*transition: opacity .1s ease-out;-webkit-transition: opacity .1s ease-out;*/
}
.sample_grid ul li .dim {background:#000;position: absolute;top: 0;left: 0;right: 0;bottom: 0;opacity: 0.2;z-index: 1;transition: opacity .4s ease-out;-webkit-transition: opacity .4s ease-out;}
.sample_grid ul li a {display:block;height:100%;overflow:hidden;}
.sample_grid ul li a img {max-width:100%;transition: all .2s ease-in-out;}
.sample_grid ul li a .title {color:#fff;font-size:14px;padding:0 12px;white-space:normal;line-height:1.4;position:absolute;bottom:0;left:0;z-index:5;height:70px;background:rgba(33,31,56,0.5);width:100%}

.sample_grid ul li:hover { border-color:#ff7a00; background-color:#ff7a00; }
.sample_grid ul li:hover .overW { display:block;}
.sample_grid ul li:hover .title {font-weight:600;background-color:#ff7a00;}
.sample_grid ul li:hover .dim {opacity:0}
.sample_grid ul li:hover a img {transform: scale(1.1);}

.sample_table {max-width:904px; margin-top:10px; }
.sample_table table { width:100%; margin-left:-5px; border-spacing:5px; border-collapse:separate; }
.sample_table table td a { display:block; position:relative;overflow:hidden;}
.sample_table table td a img { display:block; width:100%;transition: all .2s ease-in-out;-webkit-transition: all .2s ease-in-out;}
.sample_table table td a .title { position:absolute;bottom:0; left:0;height:70px; right:0;font-weight:bold;font-size:14px; padding:0 20px; color:#fff;background:rgba(33,31,56,0.5);display:table;width:100%;z-index:5}
.sample_table table td a .overW { border:6px #ff7a00 solid;position:absolute;top:0;left:0;right:0;bottom:0;display:none;z-index:5}
.sample_table table td a .dim {background:#000;position: absolute;top: 0;left: 0;right: 0;bottom: 0;opacity: 0.2;z-index: 1;transition: opacity .4s ease-out;-webkit-transition: opacity .4s ease-out;}
.sample_table table td {width:25%;vertical-align:top;}
.sample_table table td.colspan {width:50%;}
.sample_table table td a:hover .title { background:#ff7a00; }
.sample_table table td a:hover .overW { display:block; }
.sample_table table td a:hover .dim {opacity:0}
.sample_table table td a:hover img {transform: scale(1.1);-webkit-transform: scale(1.1);}
.sample_table .title .middle,
.sample_grid .title .middle {display:table-cell;vertical-align:middle;letter-spacing:-1px}
.sample_grid .title .middle {height:70px;}


/* select ft */

.time_toggle_wrap { margin-top:40px; }
.time_toggle_wrap .time_toggle { float:left;display:inline-block;  }
.time_toggle_wrap .time_toggle label { color:#b4b6bc; font-size:12px; cursor:pointer; display:block;padding:3px 8px;background:#f6f8fa; border:1px #dedede solid; }
.time_toggle_wrap .time_toggle:first-child label { border-right:0;}
.time_toggle_wrap input[type=radio] { display:none; }
.time_toggle_wrap input[type=radio]:checked + label  { background:#ffffff; border-color:#dedede; color:#333333; }
.ft_area {margin: 40px 0 0 0;width:100%;}
.ft_area.m { margin:0 0 22px; }
.ft_area.t1 {margin-right:70px;margin-left:50px}
/*.ft_select_wrap {overflow:hidden;}*/

.ft_select_wrap {position:relative;display: flex;justify-content: center;background: #f7f7f7;padding: 1.5em;/* border: 1px solid #ddd; */}
.ft_select_wrap .ft_bar { margin:10px 20px 0; width:1px; height:23px; background:#dedede; float:left; display:inline-block; }
.ft_select_wrap .ft_tit { font-size:12px; color:#999; float:left;line-height:43px;margin-right:10px; }
.ft_select_wrap .ft_tit.t1 {font-size:16px;color:#333333;display:inline-block;background:url('/public/images/board/ico_arr_01.gif') no-repeat 0 50%;padding-left:32px}
.ft_select_wrap .ft_tit.t2 {display:block;float:none;line-height:normal;}
.ft_select_wrap .ft_select {float:left;}
.ft_select_wrap .ft_select select{height: 3em; font-size: 0.95em;}
.ft_select_wrap .ft_select  .button{ height: 2.8em !important; line-height: 2.8em !important;}
.ft_area.m .ft_select { margin-top:14px;}
.ft_area.m .btn_select { margin-top:14px;}
.ft_select_wrap .ft_select li.active_s { float:left;}
.ft_select_wrap .ft_select li.active_s > a { width:95px;font-size:14px;color:#333;display:block;line-height:43px; padding:0 40px 0 8px;border-bottom:1px #dedede solid;background:url('/public/images/board/ar_down.png') no-repeat 97% center;  }
.ft_select_wrap .ft_select li.active_s > a + .select_options { width:92px; z-index: 1500;}
.ft_select_wrap .ft_select li.active_s > a.wide { width:258px;}
.ft_select_wrap .ft_select li.active_s > a.wide + .select_options { width:258px; z-index: 1500;}
.ft_select_wrap .ft_select li.active_s > a.m { width:164px;}
.ft_select_wrap .ft_select li.active_s > a.m + .select_options { width:164px; z-index: 1500; }
.ft_select_wrap .ft_select li.active_s.multi { margin-right:10px; }
.ft_select_wrap .ft_select li.active_s.sfHover > a { background:url('/public/images/board/ar_up.png') no-repeat 97% center; }
.ft_select_wrap .ft_select ul.select_options { border:1px #d7d7d7 solid; z-index:3; border-top:0; position:absolute;background:#fff;margin-top:-1px;border-top:1px #ff9b54 solid; }
.ft_select_wrap .ft_select ul.select_options.scrl_true {max-height:205px; overflow-y:auto;}
.ft_select_wrap .ft_select ul.select_options li a { display:block; padding:10px 20px; font-size:14px; color:#000; }
.ft_select_wrap .ft_select ul.select_options.scrl_true li a { padding-right:30px;}
.ft_select_wrap .ft_select ul.select_options li.active a { color:#ff7a00;background:#fff0e5; }
.ft_select_wrap .ft_select ul.select_options li:hover a { color:#ff7a00; }
.ft_select_wrap .ft_select ul.select_options.scrl_true .mCustomScrollBox { padding-right:0;}
.ft_select_wrap .ft_select ul.select_options.scrl_true .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color:#e7e7e7;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0; }
.ft_select .button{margin: 0 !important;}
.btn_select { float:left; margin-left:20px; height:43px; width:145px; background:#ff7a00; color:#fff; font-size:14px; text-align:center; line-height:43px; cursor:pointer;}
.btn_select.t2 {margin-top:15px}
.btn_select .map_ico { padding-left:20px; background:url('/public/images/board/map_min_ico.png') no-repeat left center; }
.part_wrap {float:left;}

/* checkbox */
/* .chk_wrap {width:890px; padding:0 0; background:#f9f9f9; margin:27px 0 30px; border-top:2px solid #ff7a00;border-bottom:1px solid #e6ebf1} */
.chk_wrap {width:890px; padding:0 0;  margin:27px 0 30px; }
.chk_wrap.t1 {margin-left:50px;margin-right:70px}
.chk_wrap .checkbox_org { width:285px; margin-right:10px; float:left; background-size: 285px 54px; text-align: center;}
.chk_wrap .off_01 { background-image: url('/resources/images/usecase/bg_step01_nomal.png');}
.chk_wrap .off_01.active  { background-image: url('/resources/images/usecase/bg_step01_active.png');}
.chk_wrap .off_02 { background-image: url('/resources/images/usecase/bg_step02_nomal.png');}
.chk_wrap .off_02.active { background-image: url('/resources/images/usecase/bg_step02_active.png');}
.chk_wrap .off_03 { background-image: url('/resources/images/usecase/bg_step03_nomal.png');}
.chk_wrap .off_03.active { background-image: url('/resources/images/usecase/bg_step03_active.png');}

.chk_wrap .off_04 { background-image: url('/resources/images/usecase/bg_step04_nomal.png');}
.chk_wrap .off_04.active { background-image: url('/resources/images/usecase/bg_step04_active.png');}
.chk_wrap .off_05 { background-image: url('/resources/images/usecase/bg_step05_nomal.png');}
.chk_wrap .off_05.active { background-image: url('/resources/images/usecase/bg_step05_active.png');}
.chk_wrap .off_06 { background-image: url('/resources/images/usecase/bg_step06_nomal.png');}
.chk_wrap .off_06.active { background-image: url('/resources/images/usecase/bg_step06_active.png');}
.checkbox_org input[type=checkbox] { display:none;}
/* .checkbox_org label:before { content:''; display:block; position:absolute; top:18px; left:0; width:18px; height:18px; background:#fff; border:1px #c5c5c5 solid; } */
.checkbox_org label { cursor:pointer; line-height:54px; font-size:14px; color:#333; position:relative; display:inline-block; padding-left:30px; }
.checkbox_org input[type=checkbox]:checked + label:before { border-color:#ff7a00; background:#ff7a00 url('/public/images/common/chk_img.png') no-repeat center; }
.checkbox_org input[type=checkbox]:checked:disabled + label:before { border-color:#ffd2b2; background:#ffd2b2 url('/public/images/common/chk_img.png') no-repeat center; }
.checkbox_org input[type=checkbox]:disabled + label:before { border-color:#e0e0e0; background:#f6f6f6; }
.checkbox_org input[type=checkbox]:disabled + label { color:#b3b3b3; }
/* .chk_wrap .bdr_bottom {border-bottom:1px solid #dedede;overflow:hidden;padding:0 30px;} */
.chk_wrap .bdr_bottom {overflow:hidden; margin-bottom: 5px; }
/* .chk_wrap .bdr_bottom.t1 {border-bottom:0;overflow:hidden;padding:0 30px;} */
.chk_wrap .bdr_bottom.t1 {overflow:hidden;}


/* code */
code { font-family:'Noto Sans KR', NanumGothic, MoebiusRegularEng, MoebiusBoldEng, Dotum, sans-serif;}
.pre_1.mCustomScrollbar {width:538px; max-height:235px; max-width: 1300px; }


/* map */
.map_wrap {width: 100%;margin: 10px 0 30px 0;overflow:hidden;background: #f7f7f7;height: 650px;border:1px #dedede solid;}
.map_wrap.t1 {margin-left:50px;margin-right:70px}
.map_wrap2 {width:100%; border:2px #dedede solid; margin-bottom:30px;  overflow:hidden;}
.map_wrap2 img {  height:100%; min-width:100%; }
/* .map_wrap img { height:100%; min-width:100%; } */
.map_wrap img.map { display:inline-block; min-width:100%; }
.map_wrap2 img.map { display:inline-block; min-width:100%; }
.map_wrap.type2 {width:100%;display:inline-block;}
.map_wrap.type2 img.map {width:100%;height:auto;}
@media screen and (max-width:640px) {
	.map_wrap {height:350px;}
}
.map_set { position:relative; }
.map_set .line { border:1px #dedede solid;}
.map_set .navi_area { position:absolute; right:0; top:0; left:330px; bottom:0; overflow:hidden; }
.map_set .navi_area img { min-width:100%; height:100%; }


.marker_desc {width:890px; padding-left:27px;white-space:normal;position:relative;  line-height:1.8;font-size:16px;color:#666;}
.marker_desc:before {  content:''; position:absolute; width:18px; height:24px; background:url('/public/images/sample/marker.png') no-repeat; left:0; top:7px; }
.marker_desc.line1:before {top:4px}
.sub + .tit_1 { margin-top:80px; }
.marker_desc .h_underline, .marker_desc .h_noline, .desc_1 .h_underline, .txt .h_underline {color:#ff7a00;font-weight:400;letter-spacing:0; border-bottom:1px #ff9b40 solid;}
table .h_underline {color:#666666;font-weight:400;letter-spacing:0;}
.marker_desc .h_underline.m, .marker_desc .h_noline.m { font-size:14px; }
.marker_desc .h_underline:hover ,.marker_desc .h_noline:hover, .desc_1 .h_underline:hover { border-bottom:1px #ff9b40 solid;}
table .h_underline:hover {color:#ff7a00;}
table .h_underline:hover span {border-bottom:1px #ff9b40 solid;}
.marker_desc .marker_sub_desc { font-size:13px; color:#666666; }
.marker_desc.t1 {margin-left:50px;margin-right:70px}
.try_btn { color:#ea002c; font-size:14px; width:145px; height:43px; border:1px #ea002c solid; display:inline-block; text-align:center; line-height:43px;margin-bottom:20px; cursor:pointer; }
.try_btn > span { background:url('/public/images/sample/try_ico.png') no-repeat left center; padding-left:20px; }


/* hr_over */
.hr_over { height:20px; margin:35px 0 0; padding:0; display:block; clear:both; border:none; background:#f6f6f6; }

/* addr transfer */
.addr_transfer .btn_select {float:right;}
.transfer_title { font-size:16px; float:left; line-height:43px; color:#333; padding-left:30px; background:url('/public/images/sample/addr_transfer.png') no-repeat left center; }
.transfer_box { border:1px #dedede solid; border-width:1px 0 1px 0; margin:16px 0 0 ;}
.addr_wrap { float:left; width:50%;}

/* clear */

.clear { clear:both; }


.addr_input_wrap {width:890px;border-top:1px solid #dedede;}
.addr_input_wrap.nl { border-top:0; position:relative; }
.addr_input_wrap .flt_left {display:inline-block;vertical-align:middle;}
.addr_input_wrap .flt_left.t1 {min-width:377px;width:46%;padding-top:23px;padding-left:30px}
.addr_input_wrap .flt_left.t2 {margin-top:38px}
.addr_input_wrap .flt_left.t3 {min-width:377px;width:46%;padding-top:23px;padding-right:30px;padding-left:21px}

.addr_input_wrap .ipt_wrap {padding-right:13px;}
.addr_input_wrap .ipt_wrap.btn_h { padding-right:165px; }
.addr_input_wrap .ipt_wrap.btn_h + .right_btn_flt { position:absolute;right:0; bottom:0;}
.addr_input_wrap .ipt_wrap {  }
.addr_input_wrap .ipt_wrap.t1 {border-right:1px solid #e1e4e8}
.addr_input_wrap .ipt_wrap input {border:0;border-bottom:1px solid #dedede;outline:none;line-height:43px;height:43px;width:100%;font-size:14px;}
.addr_input_wrap .ipt_wrap input.load_txt {color:#cdcdcd}
.addr_input_wrap .ipt_wrap input:focus {border-bottom:1px solid #ff7a00;color:#333333}
.addr_input_wrap .ipt_wrap input:read-only:focus { border-bottom:1px solid #dedede;}
.addr_input_wrap .ipt_wrap input:-moz-read-only:focus { border-bottom:1px solid #dedede; }
.addr_input_wrap .ipt_wrap input[readonly]:focus,.addr_input_wrap .ipt_wrap input[readonly="readonly"]:focus { border-bottom:1px solid #dedede;  }
.addr_input_wrap .tit {font-size:12px;color:#999999}

.addr_input_wrap .t1:last-child { border-right:0; }
.code_tit_wrap {
    border-top:1px solid #e6ebf1;
    margin:29px 0 20px 0;
    padding-top:30px;
}
.code_tit {
    display:inline-block;
    font-size: 16px;
    color: #333333;
    background: url('/public/images/sample/ico_code.gif') no-repeat 0 50%;
    padding-left: 32px;
}

.new_block {
    overflow: hidden;
    float: left
}

.tit_1_sub { color:#333; font-size:16px; font-weight:500; margin-bottom:20px;  }

.platform_title { font-size:16px; color:#333; padding-left:33px; position:relative; }
.platform_title:before { content:''; width:26px; display:block; position:absolute; left:0; top:0; bottom:0; }
.platform_title.web:before { background:url('/public/images/sub/w_icon.png') center no-repeat; }
.platform_title.android:before { background:url('/public/images/sub/an_icon.png') center no-repeat; }
.platform_title.ios:before { background:url('/public/images/sub/a_icon.png') center no-repeat; }
.platform_title.webservice:before { background:url('/public/images/sub/w2_icon.png') center no-repeat; }

/* table style */
.table01.addmt { margin-top:35px; }
.table01.addmt2 { margin-top:20px; }
.table01 {width: 980px; padding:8px 0 0; }
.table01 table { width:100%; max-width:1300px; }
.table01 table th { white-space:nowrap; }
.table01 table th, .table01 table td { border-bottom:1px #e6ebf1 solid; font-size:14px; padding:15px; color:#333;vertical-align:middle; font-weight:400;}
.table01 table th { background:#f9f9f9; border-top:2px #ff7a00 solid; font-weight:400; }
.table01 table tr th:first-child , .table01 table tr td:first-child { padding-left:30px; }
.table01 table tr th:first-child { width:25%; }
.table01 table tr th:last-child , .table01 table tr td:last-child { padding-right:30px; }
.table01.v_line table td { border:1px #e6ebf1 solid; }
.table01.v_line table tr td:first-child { border-left:0; }
.table01.v_line table tr td:last-child { border-right:0; }
.table01.no_thead table tbody tr:not(:first-child) th { border-top:1px #e6ebf1 solid; }
.table01.no_thead table tbody tr:first-child td { border-top:2px #ff7a00 solid;  }
.table01 table th.noTop {border-top:0}
.table01 table td { text-align:center;word-wrap: break-word;white-space: normal;word-break: break-all; }
.table01.all_left table td  { text-align:left; }
.table01.all_left table th  { text-align:left; }
.table01 table td.left_line { border-left:1px #e6ebf1 solid; }
.table01 table td.left_line2,
.table01 table th.left_line2 { border-left:1px #dedede solid; }
.table01 table td.left,
.table01 table th.left { text-align:left; }
.table01 table td.top { border-top:2px #ff7a00 solid; font-weight:500; }
table .tbl_link {color:#0070c9;text-decoration:underline;font-weight:400;}
.down_btn { text-indent:-999px; width:16px; height:16px; display:inline-block; overflow:hidden; background:url('/public/images/common/btn_down.png') center no-repeat; }

.phone_wrap { width:890px;position:relative; }
.phone_wrap .left { position:absolute; left:0; top:0; right:400px;  bottom:0px; }
.phone_wrap .left .pre_1.mCustomScrollbar {width:490px;max-height:100%; height:100%;}
.phone_wrap .right { float:right; }
.phone_wrap .right img { display:block;}

.d_wrap { max-width:1300px; }
.d_wrap.phone {width:890px;}
.d_wrap.phone:after { content:''; clear:both; display:block;}
.d_wrap.phone .left { float:left; width:518px; }
.d_wrap.phone .right { float:left; width:372px; padding-left:20px;}
.d_wrap .txt {white-space: normal;padding-left:10px; line-height:26px; color:#333; font-size:16px;}
.d_wrap .txt code { color:#0070c9; background:#f6f8fa; border:1px #e6ebf1 solid; padding:0 5px;  }
.d_wrap .txt code a {color:#0070c9;}
.d_wrap .txt em { background:#f6f8fa; border:1px #e6ebf1 solid; padding:0 3px;}
.d_wrap .txt p { padding-bottom:5px;}
.d_wrap.phone .left .pre_1.mCustomScrollbar { width:518px;}
/* .d_wrap .txt span {border-bottom:1px #666666 solid; } */
.d_wrap .code_wrap { margin-top:20px; height:auto;}
.d_wrap .code_wrap.h { height:315px; }
.d_wrap .code_wrap.h .pre_1.mCustomScrollbar {max-height:100%; height:100%;}
.d_wrap .mCustomScrollBox { height:auto; }

/* sample06 */
.search_rst_wrap {width:890px; position:relative; margin-top:30px; }
.search_rst_wrap .search_rst { width:310px; border:1px #e7ecf1 solid; border-top:2px #ff7a00 solid; }
.search_rst_wrap .title { height:49px; background:#f9f9f9; padding-left:30px; line-height:49px; color:#333; font-size:16px; }
.search_rst_wrap .rst_wrap { height:349px; padding:20px 10px; }
.search_rst_wrap .rst_wrap .rst {}
.search_rst_wrap .rst_wrap .rst li { font-size:12px; color:#666;padding:0 0 5px 20px; }
.search_rst_wrap .rst_wrap .rst li a { color:#666; }
.search_rst_wrap .right_map { height:401px; position:absolute; right:0; bottom:0; top:0; left:330px; overflow:hidden; border:1px #e6ebf1 solid;}
.search_rst_wrap .right_map img {min-width:100%; height:100%; display:block; }
.search_rst_wrap .rst_wrap .rst .mCSB_scrollTools .mCSB_draggerRail { background:#f2f2f2; width:2px; }
.search_rst_wrap .rst_wrap .rst .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background:#e7e7e7; width:4px; border-radius:0;-webkit-border-radius: 0;-moz-border-radius: 0;}
.search_rst_wrap .rst_wrap .rst .mCSB_scrollTools  { right:0; }

.color_black_01 {color:#333}
.color_orange_01 {color:#ff7a00}

.search_list li {margin-top:7px;}
.search_list li:first-child {margin-top:0}

/* sample 07 */
/* .tmMap > div {margin-top:35px;} */
.tmMap img.map { min-width:100%; width:100%; height:100%;}

.map_act_btn_wrap {margin:10px 0;}
.map_act_btn_wrap > button { margin-bottom:5px; cursor:pointer; background:#fff; float:left; border:1px #bbb solid; margin-right:5px; color:#888; font-size:14px; height:32px; padding:0 10px;}
.map_act_btn_wrap > button:hover ,
.map_act_btn_wrap > button.on { border-color:#fe7b09; color:#ff7a00; }
.map_act_btn_wrap + #result {word-break: break-word;white-space: normal;color:#666666;font-size:16px;padding: 2em;background: #f7f7f7;border: 1px #ddd solid;}

/* guide03 api console */
.root_list .h_list_wrap { }
.root_list .h_list_wrap:after { content:''; clear:both; display:block;  }
.root_list .h_list_wrap ul { }
.root_list .h_list_wrap ul li { position:relative; font-size:15px; color:#666; height:85px; padding:5px 35px 5px 20px; border:1px #c3c1ce solid;border-right:1px transparent solid;display:table-cell; vertical-align:middle; }
.root_list .h_list_wrap ul li:after { content:''; display:block; position:absolute; height:85px;right:0; top:-1px; bottom:-1px; width:17px; background:#fff url('/public/images/guide/bg.png') left center no-repeat; background-size:100%; }
.root_list .h_list_wrap ul li .tt_box:before { content:''; display:block; position:absolute; width:0;height:0; border:20px #ddd solid; border-color:#ddd transparent transparent transparent; top:-20px; left:50%; transform:translate(-50%, 0);-ms-transform:translate(-50%, 0); -webkit-transform:translate(-50%, 0);-moz-transform:translate(-50%, 0); }
.root_list .h_list_wrap ul li .tt_box { z-index:2;position:absolute;top:103px;left:50%;transform:translate(-50%,0);-ms-transform:translate(-50%,0);-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0); background:#e6e6e6; border:1px #cccccc solid; padding:12px 14px;  }
.root_list .area_hidden { padding:22px; visibility:hidden;}

@media screen and (max-width:605px) {
    .pop_btn_wrap .flt_right { width:65%; text-align:right; }
	.pop_btn_wrap .flt_right .btn { max-width:45%; font-size:11px;}
	.pop_wrap .pop_btn_wrap .flt_left {width:35%; text-align:left;}
	.pop_wrap .btn_auto {max-width:95%;font-size:11px;background:none;padding-right:0;padding-left:1%;text-align:center;}
}


.scale { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transition: all 0.3s ease-in-out;   }
.scale:hover { transform: scale(1.4); -webkit-transform: scale(1.4); -moz-transform: scale(1.4); -ms-transform: scale(1.4);
-o-transform: scale(1.4); z-index: 2; }

.doc_table{ border: 1px solid #c0c0c0; border-collapse: collapse; }
.doc_table th{ border: 1px solid #c0c0c0; padding: 7px; font-size : 16px; }
.doc_table td{ border: 1px solid #c0c0c0; padding: 7px; font-size : 13px; vertical-align : middle }
.doc_table .Value{width: 100px;}
.doc_table .Type{width: 200px;}
.doc_table .Name {width: 300px;}
.doc_table .Info{width: 500px;}
.doc_table .Info2{width: 400px;}
.doc_table .Info3{width: 300px;}
