/*********************** weller ***************************/


/************* sub 공통 *************/
h4 { font-size: 1.6rem; padding-top: 60px; color: #60c5e1; }
.title_box { height: 139px;
             background: url('../../submenu_bg.jpg') no-repeat; 
             background-size: contain; /* 원본비율 */ 
             background-position: right; 
             border: 1px solid #e2e2e2; border-top: none;
             margin: -20px 0 20px; 
             padding: 0 8px;
           }
.title_box p { font-size: 0.8rem; line-height: 2em; letter-spacing: -0.2px; }

h5 { font-size: 1.2rem; padding: 59px 20px 0;  }
h5 span { border: 2px solid #0192d1; margin-right: 20px; font-size: 0.85rem;}

h6 { font-size: 1.2rem; color: #0192d1; line-height: 2.4em; padding-left: 20px;}

.contents .txt_box, .site_c .txt_box { border-bottom: 1px solid #e2e2e2; margin-bottom: 40px; }
/* 경로 */
.contents .txt_box p, .site_c .txt_box p { font-size: 0.75rem; float: right; padding: 0 10px; color: #8e8e8e; opacity: 70%; }
.contents .txt_box p a img, .site_c .txt_box p a img { width: 14px; padding-right: 8px; }
.contents .txt_box p > a, .site_c .txt_box p > a { padding: 4px 8px; line-height: 3em; }
.contents .txt_box p > a:last-child, .site_c .txt_box p > a:last-child { color: #0192d1; font-weight: bold; }

/******************* left menu *********************/
#left_menu { width: 240px; float: left; margin-right: 20px; }

#left_menu ul { padding-bottom: 40px; }
#left_menu ul li { padding: 0 10px; margin: 4px 0; }
#left_menu ul li.on { background-color: #777; color: #fff; }
#left_menu ul li.on a { background: url('../../sub_arr_w.png') no-repeat; background-position: right; background-size: 14px; }

#left_menu ul li a { display: block; font-size: 0.95rem; line-height: 2.4em; padding: 4px 8px; }
#left_menu ul li:hover a { background: url('../../sub_arr.png') no-repeat; background-position: right; background-size: 14px; }
#left_menu ul li:hover { color: #2e2e2e; font-weight: bold; background-color: rgba(0,0,0,0.04); }


/******************* _box *********************/
.contents { width: 1000px; float: right; }


/******************* info *********************/
.contents ._box { text-align: center; padding: 0 0 80px; }


/******************* link *********************/
.contents .g_box { text-align: left; padding-left: 40px; margin: 40px 0 80px;}
.contents .g_box .img_box { text-align: center; height: 460px; overflow: hidden; margin-bottom: 40px; }


.link_list { padding-left: 24px; }
.link_list li { list-style: disc; font-size: 0.9rem; line-height: 2em; margin-left: 20px; }
.link_list li:hover { color: #0f0f0f; background-color: #e6f6ff; }
.link_list li ul li:hover { color: #0f0f0f; background-color: #fff; }


/******************* 개요 *********************/
.contents .c_box { text-align: left; padding-left: 40px; margin: 40px 0 80px;}
.contents .c_box p span { display: block; }
.contents .c_box strong { line-height: 2.2em; font-size: 1.05rem; }
.contents .c_box strong .line { display: block; width: 20px; border-top: 4px solid orange; padding-bottom: 18px; }
.contents .c_box > p { font-size: 0.95rem; line-height: 2em; padding-bottom: 40px; padding-left: 10px; }
.contents .c_box > p span a {  }
.contents .c_box > p span a:hover { border-bottom: 1px solid orange; padding: 4px 0; color: orange; }


/******************* 대리점 및 취급점 *********************/
/* agency Object */
.tbl_type,.tbl_type th,.tbl_type td { border:0; } 
.tbl_type { width:96%; margin: 0 auto; border-bottom:2px solid #e2e2e2; font-family:Tahoma; font-size:0.85rem; }
.tbl_type caption { display:none; }
.tbl_type th { padding:7px 0 4px; border-top:2px solid #dcdcdc; background-color:#f5f7f9; color:#666; font-family:'돋움',dotum; font-size:0.75rem; font-weight:bold; }
.tbl_type td { padding:6px 0 4px; border-top:1px solid #e2e2e2; }

.tbl_type tr:hover { background-color: #f0f5fa; color: #2e2e2e; }
.tbl_type tr:hover font { color: #2e2e2e; }

.tbl_type .tr_c { background-color: #019ed1; color: #fefefe; font-size: 0.85rem; }
.tbl_type tr.tr_c:hover { background-color: #019ed1; color: #fefefe; }
/* //agency Object */


/******************* 오시는 길 *********************/
.contents .map_box { text-align: left; padding-left: 40px; margin: 40px 0 80px;}

.contents .map_box .img_box { height: 460px; overflow: hidden; margin: 0 auto 40px; }

.map_box p { margin-left: 40px; color: #2e2e2e; line-height: 1.8em; }
.map_box p span { color: #7e7e7e; }

.map_box h6 { padding-top: 20px; }

.map_box table { margin-left: 40px; margin-bottom: 40px; }
.map_box th { padding: 10px 0; color: #7e7e7e; }
.map_box td { padding-left: 12px; font-size: 1.02rem; line-height: 1.4em; color: #2e2e2e; }
.map_box .td_t { font-size: 1.08rem; color: #7e7e7e; padding-bottom: 4px; }



/************************ 자료실 **************************/
.contents .m_box { text-align: center; width: 92%; margin: 0px auto 80px; }
.contents .m_box .m_main { padding-bottom: 40px; display: block; }
.contents .m_box .m_main iframe { width: 100%; min-height: 518px; padding-top: 40px; }

/* m_box 미니 슬라이드 */
.m_box #banner_wrap{ position:relative; width: 920; margin: 0px auto; }
.contents .m_box ul { width: 100%; text-align: center;}
.contents .m_box ul li { height: 280px; overflow: hidden; margin: 0 0 40px; background-color: #fff; }
.m_box #slide_banner li a { display: block; }
.m_box #slide_banner img{ width:100%; margin: 0 auto; }
.m_box #slide_banner span { font-size: 0.85rem; line-height: 1.4em; font-weight: bold; color: #5e5e5e; display: block; text-align: left; padding: 8px 0 0 4px; }

.m_box #prevBtn, .m_box #nextBtn { color: #2e2e2e; display: block; padding: 0 8px; line-height: 2em; }
.m_box #prevBtn{position:absolute;left: -30px;top: calc((224px / 2) - 16px); }
.m_box #nextBtn{position:absolute;right: -30px;top: calc((224px / 2) - 16px); }

/* 슬라이드 이미지 hover */
.m_box ul li a > div { position: relative; }
.m_box ul li a div .op { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.m_box ul li:hover a div .op { background-color: rgba(0,0,0,0.4); }
.m_box #slide_banner li:hover span { color: #0192d1; }


/**************************** 뉴스레터 ******************************/
.contents .n_box { padding: 40px 0 80px; }
.contents .n_box .bg { background-color: #0192d1; padding: 20px; color: #fff; border-radius: 10px;}
.n_box .bg h6 { font-size: 2.4rem; font-family: none; font-weight: normal; color: #fff; margin-bottom: 10px; }
.n_box .bg h6 span { font-weight: bold; }
.n_box .bg > p { padding-left: 20px; font-size: 0.95rem; line-height: 1.8em; }
.n_box .bg > p:last-child { padding-bottom: 20px; border-bottom: 2px solid #e0f4fd; border-radius: 10px}
.contents .n_box ul { width: calc(100% - 40px); padding: 40px 20px; }
.contents .n_box li { float: left; width: calc(25% - 22px); height: 340px; overflow: hidden; margin: 0 10px 40px; border: 1px solid #e0f4fd; }
.contents .n_box li:hover { border: 1px solid #0192d1; }
.contents .n_box li a { display: block;}
.contents .n_box li a img { width: 100%; }


/**************************** 기술자료 ******************************/
.t_box_1 { margin: 40px 0 240px; }
.t_table { text-align: center; width: 100%; font-size: 0.7rem; border-top: 1px solid #ccc; }
.t_table th { background-color: #f2f2f2; font-size: 0.8rem; line-height: 1.8em; border-bottom: 1px solid #ccc; }
.t_table td { cursor: pointer; line-height: 2.2em; border-bottom: 1px solid #e9e9e9; height: 30px; }
.t_table td:nth-child(2) { font-size: 0.8rem; width: 80%; }

.t_table tr:hover { background-color: rgba(150,150,150,0.05); }
.t_table tr:hover td:nth-child(2) { text-decoration: underline; }

.t_box .list_b, .t_box_1 .list_b { text-align: center; padding-bottom: 80px; }
.t_box .list_b a, .t_box_1 .list_b a{ font-size: 0.75rem; color: #8e8e8e; padding: 10px; line-height: 2em; }
.t_box .list_b .on, .t_box_1 .list_b .on { font-weight: bold; color: #2e2e2e; }


/******************** 기술자료 list **********************/
.t_listbox {  }

.t_listbox table { margin: 40px 0; width: 100%; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.t_listbox table tr { line-height: 2.4em; font-size: 0.8rem; color: #292929; }
.t_listbox table tr th { background-color: #eee; text-align: right; padding-right: 10px; width: 18%; }
.t_listbox table tr td { padding-left: 10px; }

.t_listbox > p.listbox_t { font-size: 0.8rem; padding-left: 20px; padding-bottom: 80px; }
.t_listbox > p.listbox_t img { padding: 20px 0; }
.t_listbox > p.listbox_t span { display: block; padding: 10px 0; }
.t_listbox > p.listbox_t span a { color: #0192d1; }
.t_listbox > p.listbox_t span a:hover { font-weight: bold; }

.t_listbox .listbox_b { padding-bottom: 20px; }
.t_listbox .listbox_b a { font-size: 0.7rem; 
                          font-weight: bold; 
                          line-height: 2em; 
                          display: inline-block; 
                          margin-right: 14px; 
                        }

.t_table { margin-bottom: 20px; }

.t_table tr.on { background-color: rgba(150,150,150,0.05) }
.t_table tr.on td:nth-child(2) { text-decoration: underline; }

/** 2 **/
.listbox_t iframe { margin: 20px 0; }


/**************************** 다운로드 ******************************/
.t_table .note { background-color: #f3f9ff; }
.t_table .note td:first-child { color: orange; font-weight: bold; font-size: 0.75rem; }
.t_table .note:hover { background-color: #cce6ff; color: #2e2e2e; font-weight: }
.t_table .note:hover td:first-child { color: orangered; } 
.t_box .t_listbox .listbox_t span a.downl { border: 1px solid #a7a7a7; 
                                            border-radius: 4px; 
                                            padding: 8px 12px; 
                                            margin: 0 12px; 
                                            font-size: 0.7rem; 
                                            font-weight: bold; 
                                            color: #2e2e2e; 
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f1f1f1+61,e1e1e1+92,f6f6f6+100 */
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(241,241,241,1) 61%, rgba(225,225,225,1) 92%, rgba(246,246,246,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 61%,rgba(225,225,225,1) 92%,rgba(246,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 61%,rgba(225,225,225,1) 92%,rgba(246,246,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */

                                          }
.t_listbox > p.listbox_t span .downl:hover { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2f2f2+0,e2e2e2+12,e5e5e5+23,eaeaea+35,ffffff+100 */
background: rgb(242,242,242); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(242,242,242,1) 0%, rgba(226,226,226,1) 12%, rgba(229,229,229,1) 23%, rgba(234,234,234,1) 35%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(242,242,242,1) 0%,rgba(226,226,226,1) 12%,rgba(229,229,229,1) 23%,rgba(234,234,234,1) 35%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(242,242,242,1) 0%,rgba(226,226,226,1) 12%,rgba(229,229,229,1) 23%,rgba(234,234,234,1) 35%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
 }
.listbox_t span > a { font-size: 0.8rem; }
.listbox_t span.txt_s { font-size: 0.7rem; color: #9a9a9a;}


/********************* list NEW *****************************/
.t_listbox .new, .t_table tr td .new { background-color: #ff7c7c; color: #fff; padding: 2px; font-size: 0.6rem; margin-right: 8px; }


/**************************** 사이트맵 ******************************/
.site_c { width: 100%; }
.site_c ._box ul li a { display: block; }
.site_c ._box { width: calc(100% - 160px); margin: 0 auto; text-align: center; }
.site_c ._box > ul > li { float: left; 
                          width: calc((100% / 4) - 20px); 
                          margin: 0 10px; 
                          padding-bottom: 40px;
                           }
.site_c ._box > ul > li > a { background-color: #0192d1; 
                              line-height: 2.5em; 
                              color: #fff; 
                              font-weight: bold; 
                              border-radius: 4px; 
                            }

.site_c ._box > ul > li > ul { padding-top: 10px; 
                               font-size: 0.85rem;
                             }
.site_c ._box > ul > li > ul li { line-height: 2.4em; }
.site_c ._box > ul > li > ul li:hover { background-color: rgba(150,150,150,0.1) }