/* aside */
aside { width:300px; height:calc(100vh - 65px); padding:20px 20px 20px 0; position:sticky; top:65px; }
aside .dropdown button { width:100%; height:36px; padding:0 10px; border:1px solid #e5e7eb; border-radius:5px; display:flex; justify-content:space-between; align-items:center; background:none; }
aside .dropdown .dropdown-menu { width:100%; padding:10px; }
aside .dropdown .dropdown-menu li { padding:0 10px; margin-top:5px; line-height:30px; border-radius:5px; }
aside .dropdown .dropdown-menu li:first-child { margin:0; }
aside .dropdown .dropdown-menu li.on { background:#f0f3fa; }
aside .dropdown .dropdown-menu li:hover { background:#f0f3fa; }
aside .tab_list { height:calc(100% - 56px); overflow-y:auto; position:relative; }
aside .tab_list ul { margin-top:5px; }
aside .tab_list ul li .dep1 { width:100%; padding:10px 20px; border-radius:5px; font-weight:600; display:inline-block; }
aside .tab_list ul li .dep1:hover { color:#6639E5; }
aside .tab_list ul li p.dep1:hover { color:#1a1a1a; }
aside .tab_list ul li.on .dep1 { color:#6639E5; background:#f0f3fa; }
aside .tab_list ul li.on ul li.on .dep2 { color:#6639E5; }
aside .tab_list ul li .dep2 { width:100%; padding:10px 20px; border-radius:5px; color:#666; display:inline-block; }
aside .tab_list ul li .dep2:hover { color:#6639E5; }
main aside { width:250px; height:calc(100vh - 105px); padding:0 0 0 20px; position:sticky; top:85px; }

/* main aside */
main aside .tab_list ul li ul { margin:5px 0 0 20px; border-left:1px solid #e5e7eb; }
main aside .tab_list ul li .dep1.on { color:#6639E5; background:#f0f3fa; }
main aside .tab_list ul li .dep1.onn { color:#6639E5; background:#f0f3fa; }
main aside .tab_list ul li .dep2.on { color:#6639E5; }

/* main */
main { width:calc(100% - 300px); padding:20px 0; display:flex; }
main section { width:calc(100% - 250px); padding:0 30px; }
main section .title_box { padding-bottom:20px; border-bottom:1px solid #e5e7eb; }
main section .title_box .tab_title { color:#6639E5; }
main section .title_box .tab_name { font-size:36px; font-weight:700; }
main section .title_box .tab_sub { margin-top:20px; font-size:16px; font-weight:500; word-break:keep-all; }
main section .content_box .cont { padding-bottom:30px; }
main section .content_box .cont_title { margin:30px 0; display:flex; align-items:center; position:relative; }
main section .content_box .cont_title a { padding-right:10px; font-size:25px; font-weight:600; line-height:1; color:#7092c1; position:absolute; top:50%; left:-22px; transform:translateY(-50%); opacity:0; }
main section .content_box .cont_title h2 { margin:0px; font-size:30px; font-weight:600; }
main section .content_box .cont_title h3 { margin:0px; font-size:23px; font-weight:600; }
main section .content_box .cont_title:hover a, 
main section .content_box .cont_title:hover a { opacity:1; }
main section .content_box .cont table { border:1px solid #e5e7eb; }
main section .content_box .cont table tr { border-bottom:1px solid #e5e7eb; }
main section .content_box .cont table tr th { padding:0 20px; line-height:50px; border-right:1px solid #e5e7eb; background:#f5f8fb; }
main section .content_box .cont table tr td { padding:0 20px; line-height:50px; border-right:1px solid #e5e7eb; }
main section .content_box .cont img { width:100%; }
main section .content_box .cont p { margin-top:20px; font-size:16px; line-height:30px; white-space:pre-line; word-break:keep-all; }
main section .content_box .cont p strong { padding:5px 10px; border-radius:5px; font-weight:500; line-height:normal; display:inline-block; background:#f0f3fa }
main section .content_box .cont p span.blur { color:#888; }
main section .content_box .cont p span.circle { font-size:10px; line-height:19px; display:inline-block; }
main section .content_box .cont_title + p { margin:20px 0; }
main section .content_box .cont .img_box { padding:30px; margin-top:20px; background:#f5f8fb; }
main section .content_box .cont .img_box { display:flex; gap:20px; }
main section .content_box .cont .img_box div ul li { padding:20px 30px; display:flex; align-items:center; gap:15px; background:#fff; }
main section .content_box .cont .img_box div ul li span { width:30px; height:30px; display:inline-block; }
main section .content_box .cont p em { padding:0 10px; margin-bottom:10px; font-size:12px; border-radius:3px; display:inline-block; background:#ddd; }
.inquire_btn { padding:15px; color:#fff; font-weight:700; font-size:16px; border:0; border-radius:20px; position:fixed; bottom:30px; right:30px; display:flex; align-items:center; gap:5px; background:#6639E5; }
.inquire_btn span { width:22px; height:22px; background-size:110px; background-position:-44px 0; }

/************ InvenPro.html ************/
#InvenPro section .content_box .cont1 .function_list { padding:30px; display:flex; flex-wrap:wrap; gap:20px; background:#f5f8fb; }
#InvenPro section .content_box .cont1 .function_list li { width:calc((100% - 60px) / 4); padding:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:15px; background:#fff; }
#InvenPro section .content_box .cont1 .function_list li span.InvenPro_icon { width:30px; height:30px; display:inline-block; background:url('/image/InvenPro_icon.svg')no-repeat; }
#InvenPro section .content_box .cont1 .function_list li:nth-child(2) span { background-position:-30px 0; }
#InvenPro section .content_box .cont1 .function_list li:nth-child(3) span { background-position:-60px 0; }
#InvenPro section .content_box .cont1 .function_list li:nth-child(4) span { background-position:-90px 0; }
#InvenPro section .content_box .cont1 .function_list li:nth-child(5) span { background-position:0 -30px; }
#InvenPro section .content_box .cont1 .function_list li:nth-child(6) span { background-position:-30px -30px; }
#InvenPro section .content_box .cont1 .function_list li:nth-child(7) span { background-position:-60px -30px; }
#InvenPro section .content_box .cont1 .function_list li:nth-child(8) span { background-position:-90px -30px; }
#InvenPro section .content_box .cont1 .function_list li:nth-child(9) span { background-position:0 -60px; }
#InvenPro section .content_box .cont1 .function_list li:nth-child(10) span { background-position:-30px -60px; }
#InvenPro section .content_box .cont1 .function_list li:nth-child(11) span { background-position:-60px -60px; }
#InvenPro section .content_box .cont1 .function_list li:nth-child(12) span { background-position:-90px -60px; }
#InvenPro section .content_box .cont2 ul { margin-top:20px; }
#InvenPro section .content_box .cont2 ul li { margin-top:10px; padding-left:15px; font-size:16px; position:relative; }
#InvenPro section .content_box .cont2 ul li::after { content:''; display:block; width:7px; height:7px; border-radius:50%; position:absolute; top:50%; left:0; transform:translateY(-50%); background:#ddd; }
#InvenPro section .content_box .cont3 ul { padding:30px; display:flex; gap:10px; background:#f5f8fb; }
#InvenPro section .content_box .cont3 ul li { display:flex; flex-direction:column; gap:20px; align-items:center; }
#InvenPro section .content_box .cont4 ul { margin-top:20px; padding:30px; display:flex; align-items:flex-end; gap:10px; background:#f5f8fb; }
#InvenPro section .content_box .cont4 ul li { height:100%; display:flex; flex-direction:column; gap:20px; align-items:center; }
#InvenPro section .content_box .cont4 ul li:first-child { width:44%; }
#InvenPro section .content_box .cont4 ul li ul { margin:0; padding:0; flex-direction:column; align-items:center; }
#InvenPro section .content_box .cont4 ul li ul li { height:calc((100% - 20px) / 2); }
#InvenPro section .content_box .cont4 ul li ul li:first-child { width:auto; margin-bottom:47px; }
/************ product.html ************/
#product section .content_box .cont1 .img_box p { margin:0; }
#product section .content_box .cont1 .img_box img { width:calc((100% - 20px) / 2); }
#product section .content_box .cont1 .img_box div { width:calc((100% - 20px) / 2); }
#product section .content_box .cont1 .img_box div ul { display:flex; flex-wrap:wrap; gap:20px; }
#product section .content_box .cont1 .img_box div ul li { width:calc((100% - 20px) / 2); }
#product section .content_box .cont1 .img_box div ul li span.product_icon {  background:url('/image/product_icon.svg')no-repeat; }
#product section .content_box .cont1 .img_box div ul.first { margin-bottom:20px; }
#product section .content_box .cont1 .img_box div ul.first li:nth-child(2) span { background-position:-30px 0; }
#product section .content_box .cont1 .img_box div ul.first li:nth-child(3) span { background-position:0 -30px; }
#product section .content_box .cont1 .img_box div ul.first li:nth-child(4) span { background-position:-30px -30px; }
#product section .content_box .cont1 .img_box div ul.last li:nth-child(1) span { background-position:0 -60px; }
#product section .content_box .cont1 .img_box div ul.last li:nth-child(2) span { background-position:-30px -60px; }
#product section .content_box .cont1 .img_box div ul.last li:nth-child(3) span { background-position:0 -90px; }
#product section .content_box .cont1 .img_box div ul.last li:nth-child(4) span { background-position:-30px -90px; }
#product section .content_box .cont2 .img_box { flex-direction:column; }
#product section .content_box .cont2 .img_box p { margin:0; font-size:14px; }
#product section .content_box .cont3 .img_box img { width:75%; }
#product section .content_box .cont3 .img_box div { width:calc(25% - 20px); position:relative; }
#product section .content_box .cont3 .img_box div img { width:100px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
#product section .content_box .cont4 .img_box img { width:70%; }
#product section .content_box .cont4 .img_box div { width:calc(30% - 20px); }
#product section .content_box .cont4 .img_box div ul { display:flex; flex-direction:column; gap:20px; }
#product section .content_box .cont4 .img_box div ul li span.barcode_icon { background:url('/image/barcode_icon.svg')no-repeat; }
#product section .content_box .cont4 .img_box div ul li:nth-child(2) span { background-position:-30px 0; }
#product section .content_box .cont4 .img_box div ul li:nth-child(3) span { background-position:-60px 0; }
#product section .content_box .cont4 .img_box div ul li:nth-child(4) span { background-position:-90px 0; }
/************ inventory.html ************/
#inventory section .content_box .cont .img_box { align-items:center; }
#inventory section .content_box .cont .img_box img { width:75%; }
#inventory section .content_box .cont .img_box div { width:calc(25% - 20px); }
#inventory section .content_box .cont .img_box div ul { display:flex; flex-direction:column; gap:20px; }
/************ set.html ************/
#set section .content_box .cont table { margin-top:20px; }
/************ support.html ************/
#support section .content_box .cont dl dt { padding:15px 60px 15px 20px; font-size:16px; font-weight:400; line-height:30px; white-space:pre-line; word-break:keep-all; border:1px solid #e5e7eb; border-radius:10px; position:relative; cursor:pointer; }
#support section .content_box .cont dl dt::after { content:''; display:block; width:25px; height:25px; position:absolute; top:50%; right:25px; transform:translateY(-50%) rotate(90deg); background:url('/image/icon.svg')no-repeat -25px 0; }
#support section .content_box .cont dl dt:not(.first) { margin-top:20px; }
#support section .content_box .cont dl dd { padding:15px 20px; font-size:16px; line-height:30px; white-space:pre-line; word-break:keep-all; border:1px solid #e5e7eb; border-top:0; border-radius:0 0 10px 10px; background:#f5f8fb; display:none; }
#support section .content_box .cont dl dd span.blur { color:#888; }
#support section .content_box .cont dl dd span.circle { font-size:10px; line-height:19px; display:inline-block; }
#support section .content_box .cont dl dt.active { border-bottom:0; border-radius:10px 10px 0 0; }
#support section .content_box .cont dl dt.active::after { transform:translateY(-50%) rotate(-90deg); }
#support section .content_box .cont dl dt.active + dd { display:block; }

@media only screen and (max-width:768px){
   .inner_wrap > aside { width:100%; padding:20px; position:fixed; top:65px; left:-100%; background:#fff; z-index:1; }
   .inner_wrap > aside.open { left:0; transition:ease-in-out 0.3s; }
   main { width:100%; }
   main aside { display:none; }
   main section { width:100%; padding:0; }
   main section .title_box .tab_name { font-size:26px; }
   main section .title_box .tab_sub { margin-top:10px; font-size:15px; }
   main section .content_box .cont_title { margin:20px 0; }                                                                                                                                                                                                                                                                                                                                                                       
   main section .content_box .cont_title h2 { font-size:22px; }
   main section .content_box .cont_title h3 { font-size:18px; }
   main section .content_box .cont p { margin:10px 0; font-size:14px; line-height:23px; }
   main section .content_box .cont p span.circle { font-size:7px; line-height:16px; }
   main section .content_box .cont_title a { display:none; }
   main section .content_box .cont table tr th { padding:10px 5px; line-height:20px; text-align:center; font-size:13px; }
   main section .content_box .cont table tr th:nth-child(2) { width:23%; }
   main section .content_box .cont table tr td { padding:10px 5px; line-height:20px; text-align:center; font-size:13px; }
   main section .content_box .cont .img_box { padding:20px; flex-direction:column; gap:15px; }
   main section .content_box .cont .img_box div ul li { padding:15px 20px; }
   .inquire_btn { padding:10px; font-size:14px; border-radius:12px; }
   .inquire_btn img { width:16px; }

   /************ InvenPro.html ************/
   #InvenPro section .content_box .cont1 .function_list { padding:20px; gap:15px; }
   #InvenPro section .content_box .cont1 .function_list li { width:calc((100% - 20px) / 2); padding:15px 20px; gap:10px; }
   #InvenPro section .content_box .cont2 ul li { margin-top:5px; font-size:14px; }
   #InvenPro section .content_box .cont2 ul li::after { width:5px; height:5px; }
   #InvenPro section .content_box .cont2 ul li strong { width:auto; }
   #InvenPro section .content_box .cont3 ul { padding:20px; flex-wrap:wrap; gap:15px; }
   #InvenPro section .content_box .cont3 ul li { width:calc((100% - 15px) / 2); gap:10px; }
   #InvenPro section .content_box .cont4 ul { padding:20px; flex-direction:column; gap:15px; }
   #InvenPro section .content_box .cont4 ul li { gap:10px; }
   #InvenPro section .content_box .cont4 ul li:first-child { width:100%; }
   #InvenPro section .content_box .cont4 ul li ul { flex-direction:row; align-items:flex-end; gap:15px; }
   #InvenPro section .content_box .cont4 ul li ul li { width:50%; }
   #InvenPro section .content_box .cont4 ul li ul li:first-child { width:50%; margin:0; }
   /************ product.html ************/
   #product section .content_box .cont1 .img_box div { width:100%; }
   #product section .content_box .cont1 .img_box img { width:100%; }
   #product section .content_box .cont1 .img_box div ul { gap:15px; }
   #product section .content_box .cont1 .img_box div ul li { flex-direction:column; text-align:center; gap:10px; }
   #product section .content_box .cont2 .img_box { flex-direction:row; align-items:center; }
   #product section .content_box .cont2 .img_box div { width:auto }
   #product section .content_box .cont2 .img_box div img { width:50px; position:static; transform:none; }
   #product section .content_box .cont2 .img_box img { width:calc(100% - 70px); }
   #product section .content_box .cont3 .img_box img { width:100%; }
   #product section .content_box .cont3 .img_box div { width:100%; }
   #product section .content_box .cont3 .img_box div ul { gap:15px; }
   /************ inventory.html ************/
   #inventory section .content_box .cont .img_box div { width:100%; }
   #inventory section .content_box .cont .img_box div ul { gap:15px; }
   #inventory section .content_box .cont .img_box img { width:100%; }
   /************ set.html ************/
   #set section .content_box .cont table tr th:first-child { width:22%; }
   /************ support.html ************/
   #support section .content_box .cont dl dt { padding:10px 60px 10px 20px; font-size:14px; line-height:23px; }
   #support section .content_box .cont dl dd { padding:10px 20px; font-size:14px; line-height:23px; }
   #support section .content_box .cont dl dt:not(.first) { margin-top:10px; }
}