@charset "utf-8";

/* Visual*/
#develop_tool_visual { position:relative; width:100%; height:828px;}
#develop_tool_visual dl { position:absolute; top:50%; left:50%; color:#222; -webkit-transform:translate(0%,-50%); transform:translateY(0%,-50%); }
#develop_tool_visual dl dt { font-size: 94px; font-weight: 400; font-weight:600; }
#develop_tool_visual dl dt span { display:block; }
#develop_tool_visual dl dd { margin-top:20px; font-size:32px; }
#develop_tool_visual.develop_tool_visual { background:url('../images/02_development_tools/visual_develop_tools.jpg') no-repeat 50% 50%; background-size:cover; }
#develop_tool_visual.develop_tool_visual dl { left:50%; color:#fff; text-align:center; -webkit-transform:translate(-50%,-80%); transform:translateY(-50%,-80%); }
#develop_tool_visual.develop_tool_visual dl dt { font-size: 24px;font-weight: 400; font-weight:400; }
#develop_tool_visual.develop_tool_visual dl dd { margin-top:20px; font-size: 60px; font-weight:600; }
#develop_tool_visual.develop_tool_visual dl dd p { display:block; margin-top:20px; font-size:20px; font-weight:350; opacity: 0.7; }
#develop_tool_visual.visual_evks { background:url('../images/02_development_tools/visual_evks.jpg') no-repeat 50% 50%; background-size:cover; }
#develop_tool_visual.visual_sdk { background:url('../images/02_development_tools/visual_sdk.jpg') no-repeat 50% 50%; background-size:cover; }


/* 메인 */
.developtools_container { position:relative; display:block; height:404px; }
.developtools_container ul { position:absolute; left:50%; top:-250px; display:block; width:100%; max-width:1204px; height:654px; background: #fff; transform: translateX(-50%); -webkit-transform: translateX(-50%); }
.developtools_container ul li { float:left; width:33.333%; padding:70px 50px; text-align:center; box-sizing: border-box; }
.developtools_container ul li a { display:block; }
.developtools_container ul li a .icon { display:inline-block; width:200px; height:200px; border-radius:100%; }
.developtools_container ul li a .icon1 { background: url('../images/02_development_tools/main_icon01.jpg') no-repeat left top; }
.developtools_container ul li a .icon2 { background: url('../images/02_development_tools/main_icon02.jpg') no-repeat left top; }
.developtools_container ul li a .icon3 { background: url('../images/02_development_tools/main_icon03.jpg') no-repeat left top; }
.developtools_container ul li a .text1 { margin:40px 0 20px; font-size:26px; font-weight:500; color:#222; }
.developtools_container ul li a .text2 { line-height:28px; font-size:18px; font-weight:400; color:#999; }

.developtools_container ul li:hover a .text1 { color:#a12642; }
.developtools_container ul li:hover a .icon { box-shadow: 10px 10px 80px #ddd; }
.developtools_container ul li:hover a .icon1 { background: url('../images/02_development_tools/main_icon01_on.jpg') no-repeat left top; }
.developtools_container ul li:hover a .icon2 { background: url('../images/02_development_tools/main_icon02_on.jpg') no-repeat left top; }
.developtools_container ul li:hover a .icon3 { background: url('../images/02_development_tools/main_icon03_on.jpg') no-repeat left top; }


/* sticky-menu */
.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; }
.sticky-menu a { display:inline-block; line-height:78px; letter-spacing:-0.025em; vertical-align:middle; }
.sticky-menu .left_link { float:left; }
.sticky-menu .left_link a { padding-right:60px; font-size:18px; font-weight:500; transition:all .5s; }
.sticky-menu .left_link a:hover { font-weight:600; color:#a12642; }
.sticky-menu .left_link a.on { font-weight:600; color:#a12642; }
.sticky-menu .right_link { float:right; text-align:right; }
.sticky-menu .right_link .btn_inquiry { width:174px; 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; }
.sticky-menu .right_link .btn_inquiry:hover { color:#fff; background: #a12642; }
.sticky-menu .right_link .btn_share { margin-left:10px; width:54px; height:80px; font-size:0; background:url('../images/common/icon-share.png') no-repeat right center; }

.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;}
.sticky-menu .right_link .share_area a { line-height:44px; }


.sub-max-inner { position:relative; max-width:1200px; margin:0 auto; } 

h3.h3_title { padding:0 0 40px; font-size:36px; font-weight:700; color:#222; }
h4.h4_title { padding:0 0 20px; font-size:24px; font-weight:600; color:#222; }

.after_area:after { display:block; content:''; clear:both; }

.list_type01 > li { line-height:32px; padding-left:12px; font-size:18px; color:#666; background: url('../images/common/ico_dot.png') no-repeat left 12px; box-sizing: border-box; }
.list_half > li { float:left; width:50%; }

.list_type02 { float:left; width:50%; }
.list_type02 > li { line-height:32px; padding-left:12px; margin:0 0 10px; font-size:18px; color:#666; background: url('../images/common/ico_dot.png') no-repeat left 12px; box-sizing: border-box; }


.common_text_area { line-height:32px; padding:80px 0; font-size:18px; color:#666; }
.common_text_area .line { margin-top:20px; }
.common_text_area.pt0 { padding-top:0; border:none; }
.common_text_area.ptb0 { padding:0; }

.border_box { padding:50px; border:1px solid #ddd; }

.content_box { margin:0 0 100px; }

.grey_bg { padding:60px 0; background: #f7f7f7; }

.mb_box { margin-bottom:20px; }


/* 제품 특징 */
.slim_charactor_list dl { display:table; float:left; width:50%; margin:20px 0; }
.slim_charactor_list dl dt { display:table-cell; max-width:140px; vertical-align: middle; }
.slim_charactor_list dl dd { display:table-cell; width:422px; padding-left:40px; text-align:left; vertical-align: middle; }

.common_wide_box { position: relative; display:block; width:100%; }
.common_wide_box dl { position:absolute; left:50%; top:50%; width:602px; transform: translate(-602px, -50%); }
.common_wide_box dl dt { margin:0 0 20px; font-size:48px; font-weight:500; color:#222; }
.common_wide_box dl dt span { display:inline-block; }
.common_wide_box dl dd { line-height:32px; font-size:18px; color:#666; }
.common_wide_box dl dd span { display:block; }

.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:620px; }
.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:0; background: url('../images/02_development_tools/common_wide_box_bg01.jpg') no-repeat 50% 50%; }
.common_wide_box.bg02 { height:600px; margin:0; background: url('../images/02_development_tools/common_wide_box_bg02.jpg') no-repeat 50% 50%; }
.common_wide_box.bg03 { height:600px; margin:0 0 80px; background: url('../images/02_development_tools/common_wide_box_bg03.jpg') no-repeat 50% 50%; }


/* 표 형식 */
.table_container .table_outline { display:block; }

.table_container .horizon_table { width:100%; border-spacing:0; border-collapse: collapse; border-top:2px solid #ccc; }
.table_container .horizon_table tbody th { background: #f4f4f4; }
.table_container .horizon_table tbody th, .table_container .horizon_table tbody td { width:240px; padding:15px 0; font-size:16px; text-align: center; border-bottom:1px solid #ddd; word-break:keep-all; }
.table_container .horizon_table tbody td { line-height:26px; color:#666; border-left:1px solid #ddd; }
.table_container .horizon_table tbody td b { color:#222; }


#modules_content .horizon_table tbody th:first-child { border-right:1px solid #ddd;  }


/* 다운로드 */
.quick_down { display:block; height:170px; line-height:170px; margin:0 0 100px; background:url('../images/01_modules/quick_down_bg01.jpg') no-repeat left top; }
.quick_down p { display:inline-block; padding:0 60px; font-size:30px; font-weight:500; color:#fff; background: url('../images/common/icon-arrow-right6.png') no-repeat right 50%; }


/* 애플리케이션 */
.appli_list > li { display:block; float:left; width:12%; margin-right:2.6%; text-align: center; }
.appli_list > li:last-child { margin-right:0; }
.appli_list > li > img { width:100%; }
.appli_list > li > p { margin-top:20px; font-size:18px; color:#222; }


/* Swiper*/
.swiper-wrapper-related { width:3000px; height:250px; position:relative; margin:0 auto; overflow:hidden; }
.swiper-container-related { position:relative; width:100%; margin:0 auto; overflow:hidden; padding:0 25px; box-sizing:border-box;}
.product_related{max-width: 1204px; margin: 0 auto;}
.product_related .slide-li { height:200px; float:left; text-align:center;}
.product_related .slide-li .related_sum { height:180px; display:inline-block; overflow:hidden; }
.product_related .slide-li h3 { font-weight:500; }
.product_related .slide-li .related_sum img{ height:70%; height:auto; }

.swiper-container-related .swiper-button-prev {
    position: absolute;
    top: 20%;
    left:-12px;
    height: 96px;
    z-index: 2;
    cursor: pointer;
    background:url('../images/common/btn-slide-prev_02.png') center center no-repeat;
    background-color:none;
    width:96px;
    overflow:hidden;
    outline:0;
  }
  .swiper-container-related .swiper-button-next {
    position: absolute;
    top: 20%;
    right:-12px;
    height: 96px;
    z-index: 10;
    cursor: pointer;
    background:url('../images/common/btn-slide-next_02.png') center center no-repeat;
    width:96px;
    outline:0;
  }

  .sdk_infomation_box { display:block; text-align:center; border:1px solid #ddd; }
  .sdk_infomation_box .box { padding:20px 0; }
  .sdk_infomation_box .box .title { display:inline-block; width:30%; font-size:24px; font-weight:700; color:#222; text-align:center; vertical-align: middle; }
  .sdk_infomation_box .box .right_list { display:inline-block; width:68%; padding-right:55px; vertical-align: middle; box-sizing:border-box; }
  .sdk_infomation_box .box .right_list li { display:inline-block; line-height:57px; font-size:20px; font-weight:500; color:#222; margin:10px 0; border-radius:29px;}

  .sdk_infomation_box .box1 .right_list li { width:32%; background: #f4f4f4; }
  .sdk_infomation_box .box1 .right_list li:nth-child(2) { margin:0 1.2%; }
  .sdk_infomation_box .box2 { border-top:1px solid #ddd; border-bottom:1px solid #ddd; }
  .sdk_infomation_box .box2 .right_list li { width:100%; background: #f4e9e9; }
  .sdk_infomation_box .box2 .right_list li.half { width:48%; }
  .sdk_infomation_box .box2 .right_list li:last-child { margin-left:3.2%; }
  .sdk_infomation_box .box3 .right_list li { width:100%; background: #f4f4f4; }