@charset "utf-8";
body { margin:0; padding:0; width:100%; background:#FFF; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; color:#2e3c49; font-size:1rem;}
html { padding:0; margin:0; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;}
 
a { text-decoration:none;}
p { line-height:1.6rem; font-size:1rem;}
/* main */
.main {width:100%; padding:0; margin:0 auto; }
img { border:0;}
.header { background:#fff; border-bottom:1px solid #CCC; padding-top:8px; padding-bottom:8px; }
.block_header {margin:0 auto; width:85%; padding:0; border:none; }
h1 { font-size:1.4rem; color:#081d31;  padding-right:5px;}
h4, h3, h2 { font-size:1.2rem; font-weight: 300;}
h2 {font-size:1.5rem; }
h3 { margin-bottom:10px; font-weight:400;} 
blockquote { line-height:1.6rem; color:#2e3c49;  margin:0;}
/* logo */
.logo { float:left; padding:0; margin:0; margin-top:5px;}
.logo img { max-width:169px;}
/* table */
 table { background:#CCC; margin-bottom:10px; width:100%; border:0; border-collapse: collapse;}
 table td { background-color:#FFF; border:1px solid #ddd; padding:5px; vertical-align:middle;  
    line-height: normal;
  color: #2e3c49;
  line-height: 1.8em; }

 table th { text-align:left; padding:5px; border-left:1px solid #ddd;}

/* menu */	
.menu { padding:0; margin:0; float:right; font-size:1rem; }
.menu ul { padding:20px 0; margin:0; list-style:none; border:0; float:right;}
.menu ul li { float:left; margin:0; padding:0; border:0;}
.menu ul li a { float:left; margin:0; padding:0px 10px; color:#fff; font:normal 1rem  Arial, Helvetica, sans-serif; text-decoration:none; border-right:1px dashed #949494;}
.menu ul li a:hover { color:#00aaea;}
.menu ul li a.active {color:#da7a00; } 
/********** slider **********/
 
 
.main .bottry {background: #00aaea url(../images/icon/bottom-bg.jpg) center top / cover no-repeat; width:100%}
.main .slider .con, .main .bottry .con { margin:69px auto; width:80%; padding:0;}
.bottry {background: #00aaea url(../images/icon/bottom-bg.jpg) center top / cover no-repeat; padding:25px; display: flex;}
.bottry .con .pic img {max-width:98%; margin-left:2%;}
.bottry .con { margin:69px auto; width:80%;  display: flex;
    justify-content: center;
    gap: 20px;  }
	.bottry .con p { font-size:1.2em;}
.bottry .con .int { width:50%;  color:#FFF; display: flex;
    flex-direction: column; 
    justify-content: center;  
    align-items: center;}
.bottry .con .pic { width:50%;   display: flex;
    flex-direction: column; 
    justify-content: center;  
    align-items: center;} 

.slider .con .int, .main .slider .con .pic { width:50%; float:left; }
.slider .con .int { color:#fff;}
.slider .con .pic img { max-width:100%;}
.slider {background: #00aaea url(../images/icon/top-bg.png) center bottom / cover no-repeat; display: inline-block; margin:0 auto;} 
.slider .con h1 { color:#FFF; font-size:1rem; font-weight:400;}
.slider .con .big { font-size:2.6rem; line-height:2.7rem; margin-block-start: 0.3em;  margin-block-end: 0.3em; font-weight:500;}
.slider .con .infs .guarantee { color:#FFF;}
.slider .con .bt { float:left;}
.slider .con .bt a { background:#06d9fa; color:#FFF;}
.slider .con .bt a:hover { background:#7cb937; color:#FFF;}
.slider .con h2, .faq h2 { font-size:2em; font-weight:500;} 

.guide { width:90%; margin:60px auto; padding:0; }
.guide .con h2 { text-align:center;}
.faq { width:70%; margin:55px auto; padding:0}
.faq h2 { text-align:center; margin-block-end: 0;}
.faq p { margin-block-start: 0.2em;}
.faq-container { max-width: 660px; margin: 20px auto;}
.faq-container details { margin: 10px 0; padding: 15px; border: 1px solid #ddd; border-radius: 8px; background-color: #f9f9f9;}
.faq-container summary { list-style: none; cursor: pointer; font-weight: normal; font-size: 1rem; color: #333; }
.faq-container summary::-webkit-details-marker { display: none;}
.faq-container summary::before { content: "▶"; display: inline-block; margin-right: 8px; transition: transform 0.3s;}
.faq-container details[open] summary::before { content: "▼"; transform: rotate(90deg);}
.faq-container details p { margin: 10px 0 0 20px; color: #666; line-height: 1.6; font-size:1rem;} 
.faq-container details p a:hover { text-decoration:underline;}
.faq-container details h4 { display:inline;}
.faq-container details ul { padding-left:25px;}
.faq-container details ul li { font-size:1rem;}
.bt { line-height:35px; } 
.bt a { background: #F6F6F6; padding-top:12px; padding-bottom:12px; padding-left:40px; padding-right:40px; color:#00aaea;  border-radius: 8px 8px 8px 8px; }
.bt a:hover { background: #FFF; color: #F60; }
.bt, .view { line-height:50px; text-align: center; margin:15px auto 10px auto; } 
.bt a { background: #7cb937; padding-top:16px; padding-bottom:16px; padding-left:50px; padding-right:50px; color:#fff;  border-radius: 20px 20px 20px 20px; }
.view a { background: url(../images/view.png) left no-repeat; padding-left:25px; color:#FFF;}
.view a:hover { text-decoration:underline;}
.bt a:hover { background:  #00aaea; color: #fff; }
.view { float:left; margin-left:20px;}

.bs { line-height:50px; text-align: center; margin:15px auto 10px auto; } 
.red { color:#F00;}
.right .bs a { background: #7cb937; padding-top:12px; color:#FFF; padding-bottom:12px; padding-left:40px; padding-right:40px;  border:1px solid #ccc; border-radius: 8px 8px 8px 8px; }
.right .bs a:hover { background: #6fa531; color: #fff; }
.right h2 { font-size:2em; font-weight:600;}

.right .demo { margin:20px auto 30px auto; font-size:15px; display: flex; justify-content: center; align-items: center;  }
.right .demo a { background:url(../images/track.png) left 15px center no-repeat #090; 
    white-space: nowrap;  
    display: inline-block;
    padding: 13px 20px 13px 45px; 
    border: none;
    border-radius: 30px; 
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    min-width: 80px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); color:#FFF;} 
.right .demo a:hover {  background:url(../images/track1.png) left 15px center no-repeat #F60;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); font-size: 15px; color:#FFF;}
.right .demo span a:hover { color:#F60; }


.home, .fea { margin:55px auto; padding:0; width:85%;}
.reals { font-size:22px; text-align:center; color:#7061e2;}
.home table, .home table td, .fea table, .fea table td { border:0;}
.home table td, .home table th, .home table { padding:25px;  border:0;}
.home table td img { max-width:95%;}
.home h2{color: #7061e2; line-height:2.0rem; font-weight:600;}

.fea h2, .mmms h2 { font-size: 2rem; text-align:center; font-weight:500; }
.fea h3 { font-weight:600; margin-block-start: 0.5em; margin-block-end: 0.5em; line-height:1.5rem;}
 
.fea .con { width:27%; padding:2% 2% 2% 2%; margin-left:2%; margin-bottom:2%;  
    border: 1px solid #e9e9e9;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 15px; float:left;
 }
.fea .con p { line-height:1.5em;}
.fea img { max-width:170px;}
.steps { width:70%;} 
.steps h2 { margin-bottom:40px;}
.steps td { padding:0; text-align:center; background:#F9F9F9;}
.start {  background:#F9F9F9; padding:30px 0 30px 0; }
 
.mmms { text-align:center; margin:55px auto; }
.homerev { margin:0 auto; padding:0; width:85% }
.homerev td { border:0; vertical-align:top; text-align:left; padding:10px; font-size:1rem;}
.homerev img { max-width:130px;  border-radius:10px;}
.home .con {margin:55px auto; padding:0; width:85%; display: flex;
    justify-content: center;
    gap: 20px;}
.home .con .pic, .home .con .int { float:left; width:50%; display: flex;
    flex-direction: column; 
    justify-content: center;  
    align-items: center;}
.home .con .pic img { max-width:98%;}

.home .con .pic { display: flex;
    flex-direction: column; 
    justify-content: center;  
    align-items: center;}


/********* slider2 ************/
.slider2 {background: #fff url(../images/slider_bg2.gif) top repeat-x; margin:0 auto; padding:0; height:89px;}
.slider2_resize { width:950px; margin:0 auto; padding:0;}
.slider2_resize h2 {width:445px; float: left; font:bold 36px Arial, Helvetica, sans-serif; color:#fff;   margin:0; padding:20px 0 0 30px; line-height:1.2em; text-transform:uppercase;}
.slider2_resize p { width:350px; float: right; font:normal 1rem  Arial, Helvetica, sans-serif; color:#212121; margin:0; padding:20px 0 0 10px; line-height:1.8em;}
#slider { margin:0; padding:0; list-style:none; }
#slider li { margin:0; padding:0; list-style:none; }
#slider li { width:960px; height:400px; overflow:hidden; padding:0; margin:0; }
 

.body_resize .mychoice { margin-top:25px; font-size: clamp(15px, 4vw, 22px);
            line-height: 1.6;
            padding: 2vw; }
.body_resize .mychoice h1 {text-align:center; font-size:1.8rem;}
.body_resize .mychoice h2 { text-align:center; font-size:1.8rem;}
.body_resize .mychoice td { font-size:14px;  }
.body_resize .mychoice .bt { line-height:60px; text-align: center; margin:15px auto 10px auto;    } 
.body_resize .mychoice .bt a { background: #7cb937; padding-top:19px; padding-bottom:19px; padding-left:59px; padding-right:59px; color:#fff;  border:1px solid #ccc; border-radius: 8px 8px 8px 8px; }
.body_resize .mychoice .bt a:hover { background:  #00aaea; color: #fff; }
.body_resize .right h3 { font-weight:600; font-size:1.5em;}
.body_resize .right h2 {margin-block-end: 0.3em; font-size:1.8em; font-weight:600;}
/*bloga_resize*/
.bloga_resize {background: url(images/bg_body_top.gif) top repeat-x; height:234px;}
.bloga_resize2 {background: url(images/bg_body_top2.gif) top repeat-x; height:46px;}
.bloga_resizee { width:950px; margin:0 auto;  padding:0;}
.bloga { width:289px; float:left; margin:0; padding:10px 5px 10px 20px;}
.bloga h2 { font: bold 18px Arial, Helvetica, sans-serif; color:#fff; border-bottom:1px solid #3d3d3d; padding:10px 5px; margin:0;}
.bloga p { color:#acacac; font:normal 11px Arial, Helvetica, sans-serif; line-height:1.8em; padding:5px 5px; margin:0;}
.bloga img { float:left; margin:10px 10px; padding:0;}
.bloga a { color:#ac5400; text-decoration:none;}
.menu_sub { padding:0; margin:0; width:380px; float:left;}
.menu_sub ul { padding:9px 0; margin:0; list-style:none; border:0;}
.menu_sub ul li { float:left; margin:0; padding:0; border:0;}
.menu_sub ul li a { float:left; margin:0; padding:11px 17px; color:#fff; font:normal 12px  Arial, Helvetica, sans-serif; text-decoration:none;}
.menu_sub ul li a:hover { background:#ebebeb; color:#282828;}
.menu_sub ul li a.active {background:#ebebeb; color:#282828;} 
/********** block index **********/
.body { border-top:1px solid #fff; font-size:1rem;}
.body h2 { font:bold 1.5rem Arial, Helvetica, sans-serif; color:#0b0b0b; padding:10px 0; margin:0; font-weight: 300;}
.body h3, .body h3 a { font:bold 1.2rem Arial, Helvetica, sans-serif; color:#252525; padding:10px 0; margin:0; font-weight: 300;}
.body h4 { font:bold 1.2rem Arial, Helvetica, sans-serif; color:#252525;  padding:10px 5px; margin:0; font-weight: 300;}
.body p { font:normal 1rem Arial, Helvetica, sans-serif; color:#2e3c49; line-height:1.8em; padding-bottom:15px; margin:0; }
.body p.grey { font: normal 11px Arial, Helvetica, sans-serif; color:#b0b0b0; line-height:1.8em; padding:5px 5px; margin:0;}
.body p span { color:#ac5400;}
.body a { font: Arial, Helvetica, sans-serif; color:#00aaea; text-decoration:none;}
.body em { color:#383838;}
.body img {  margin:10px 5px; padding:0;}
.body img.nomargin { float:none; text-align:center; margin:10px 1px; padding:0;}
.body img.work { float:left; margin:10px 30px 10px 10px; padding:0;}
.body_resize { width:85%; margin:0 auto; padding:0; max-width:960px; container-type: inline-size; container-name: box;   font-size: clamp(14px, 4cqi, 24px); }
.right { margin:15px 5px 25px 5px;}
.right img { border-radius:20px 20px 20px 20px; }
.right .bread { font-size:14px;}
.right .bread a { color: #2e3c49;}
.right .blogpic { margin-bottom:15px;}
.right a {color:#00aaea;} 
.right a:hover {  color:#7cb937; color:#F60;} 
.right h1 { font-size:2.0rem;  margin-top: 0; padding-top: 10px; padding-bottom: 15px; margin-bottom:0; font-weight: 600; 
} 
.right ul { list-style:none; margin:10px 5px; padding:0;}
.right li { font: 1rem Arial, Helvetica, sans-serif; color:#2e3c49; padding:5px 20px; margin:0;  line-height: 1.5rem; background:url(../images/bt-libg.png) no-repeat left top 11px; }
.right li p { margin-bottom:5px;} 
.left { width:26%; float:right; margin:20px 5px 10px 5px; padding:5px;  color:#2e3c49;}
.buttoms { width:200px; margin:10px auto; text-align:center; padding:0;}
.buttoms a { font: bold 12px Arial, Helvetica, sans-serif; color:#9f9f9f; text-decoration:none; padding:3px 5px; margin:0 3px;}
.buttoms a:hover { color:#000; background:#f1f1f1; border:1px solid #d6d6d6;}
/********** contact form **********/
#contactform { margin:0; padding:5px 10px;}
#contactform * { color:#F00;}
#contactform ol { margin:0; padding:0; list-style:none;}
#contactform li { margin:0; padding:0; background:none; border:none; display:block;}
#contactform li.buttons { margin:5px 0 5px 0;}
#contactform label { margin:0; width:110px; display:block; padding:10px 0; color:#6d6d6d; font: bold 12px Arial, Helvetica, sans-serif; text-transform:capitalize; float:left;}
#contactform label span { color:#F00;}
#contactform input.text { width:380px; border:1px solid #d4d4d4; margin:10px 0; padding:5px 2px; height:16px; background:#fff; float:left;}
#contactform textarea { height:300px; width:380px; border:1px solid #d4d4d4; margin:10px 0; padding:2px; background:#fff; float:left;}
#contactform li.buttons input { padding:3px 0 3px 110px; margin:0; border:0; color:#FFF; float:left;}
p.response { text-align:center; color:#666666; font: normal 11px  Georgia, "Times New Roman", Times, serif; line-height:1.8em; width:auto;}
/*************footer**********/
.footer {padding:10px 0;  margin:0; border-top:1px solid #fff; background:#212121; color:#CCC; border-top:3px solid #00aaea; font-size:13px;}
.footer p { font-size:0.9rem;}
.footer a { font-size:13px; color:#ccc; }
.footer a:hover { color:#00aaea; }
.footer h4 { margin:10px 0 20px 0; padding:0; font-size:1rem;}
.footer .con{width:80%; margin:0 auto; padding:0; }
 
.b-logo img { max-width:160px;}
.footer .con .product { width:26%; margin-top:10px; margin-left:2%; float:left; line-height:22px;}
.footer .con .w20 { width:20%; margin-left:2%;}
.footer .con .product img { max-width:200px;}
.footer .con .product h4 { margin-bottom:10px; font-size:18px; font-weight:400;}
.footer .con .product ul { margin:0; padding:0; font-size:13px;}
.footer .con .product ul li { list-style: none; margin:0; padding:0; line-height:1.8rem; border-bottom:1px solid #333; background:url(../images/bt-libg.png) left no-repeat; padding-left:15px;}
.footer .con .hot {margin-top:10px; width:25%; float:left; line-height:1.2rem;}
.footer .copyright { width:100%; text-align:center; border-top: 1px solid #555; padding:10px 0; margin-top:15px; color:#999;}
.footer .copyright .dis { width:80%; max-width:1000px; margin:0 auto; padding:0; text-align:left;}
.footer .copyright .dis h4 { margin-bottom:0; font-weight:400;}
.footer .copyright .dis p {margin-block-start: 0;}
.footer .copyright span { margin-right:35px;}
.footer .copyright a { color:#999}
.footer .copyright a:hover {color:#00aaea; }
 
 

p.clr, .clr { clear:both; padding:0; margin:0; background:none;}
li.bg, .bg { clear:both; border-top:1px solid #dcdcdc; padding:0; margin:20px 0; background:none; line-height:0;}
.clear { clear:both;}

p#controls { margin:0; position:relative; }
#prevBtn,
#nextBtn { display:block; margin:0; overflow:hidden; width:29px; height:29px; position:absolute; left:-65px; top:-220px; }
#nextBtn { left:1055px; }
#prevBtn a { display:block; width:30px; height:30px; background:url(images/l.png) no-repeat 0 0; }
#nextBtn a { display:block; width:30px; height:30px; background:url(images/r.png) no-repeat 0 0; }
#prevBtn a:hover { display:block; width:30px; height:30px; background:url(images/l-h.png) no-repeat 0 0; }
#nextBtn a:hover { display:block; width:30px; height:30px; background:url(images/r-h.png) no-repeat 0 0; }

.body_resize .why { width:100%; margin-bottom:35px;}
.body_resize .why h2{ text-align:left;}
.body_resize .why img { width: 65%; border-radius:20px 20px 20px 20px;  }
.body_resize .why .con { width:70%; float:left; }
.body_resize .why .whypic { width:30%; float:right;}
.body_resize .why .whypic img, .body_resize .peace .pic .im img { max-width:80%;}
.body_resize .why .con h4 { padding-top:10px;}
.body_resize .why .right { margin:0; padding:0; background:none; padding-top:5px; }
.body_resize .why .right img { margin:10px 5px;}

.peace, .system { width:100%; margin:35px 0;   color:#6d6d6d; line-height: 1.8em;}
.peace .pic { width:30%; float:left; text-align:center; margin:0 auto; padding:0;}
.peace .pic .im {margin:0 auto; padding:0; }
.peace .infor { width:70%; float:right; height:auto; padding-bottom:25px;}
.peace .infor h2 { text-align:left; margin-top:30px; padding:15px 15px 0 15px;}
.peace .infor p {padding:15px 15px 0 15px;}
.peace .infor .start { width:250px; margin:25px auto auto; padding:5px; text-align:center; }
.peace .infor .start a { border-radius:10px 10px 10px 10px; color:#fff; background:#7bbb39; padding:18px 25px 18px 25px; font-size:1rem;   line-height:2.2rem;}
.peace .infor .start a:hover {background: #339900; }

.system img {  width: 100%; margin:0 auto; padding:0;}
.system .android,  .system .iphone{ width:50%; float:left;}
.system .android { background: #E4F8EC ;}
.system .android .pic, .system .iphone .pic { width:50%; margin:0 auto; padding:0;}
.system .iphone { background-color: #F5F5F5;}
.system .android .con,  .system .iphone .con{ padding:15px;}

.device { margin-top:35px;}
.device h2, .system h2, .why h2, .features h2, .review h2  { text-align:center;  margin:55px 0 20px 0;}
.device td { font-size:1rem; vertical-align:text-top; padding:10px;}
.features { text-align:center; width:100%; margin-top:10px;}
.features h1 { font-size:2.0rem;}
.features p { color:#FFF;}
.features h4 { color:#FFF;}
.features .detail{ width:18%; float:left;  background: #00aaea; margin-bottom:1%; padding:1%; }
.features .detail img { }
.mar-r { margin-right:0;}
.features .detail:hover { background: #66CCFF ;}

.review .step { width:31%; float:left; text-align:center; margin-left:1%;}
.left .review { margin-bottom:25px;}
.left .review img { width:20%}
.right .trynow { margin: 25px auto auto; padding: 5px; text-align: center; margin-bottom:25px;}
.right h4 { padding-bottom:10px; margin-bottom: 0; font-weight:500; display:inherit;}
.right p { padding-top:0; margin-top: 0; margin-bottom: 15px;}
.right .trynow a { border-radius:10px 10px 10px 10px; color:#fff; padding:20px 29px 20px 29px; background:#7bbb39; line-height:2.2rem;}
.right .trynow a:hover {background: #339900;}
.right img { max-width:100%; width:auto; display: block; margin: 0 auto;}
.right .topimg { text-align:center; }
.right .topimg img {width:100%; max-width:100%;} 
.right table td { color:#2e3c49;}
.right table td img { width:20px; vertical-align:middle;}

.left .recommendation{ background:#f8fafd; padding:15px; border: 1px solid #eaf0fa; margin:0 0 25px 0; text-align:center;}
.left .recommendation img { margin:0 0 15px 0; width:100%;}
.left p.cen { text-align:center;}
.left .latestpost,  .left .review { background:#f8fafd; padding:15px; border: 1px solid #eaf0fa;}
.left .latestpost h4, .left .review h4 { padding-left:0; padding-bottom:0; margin-bottom: 0; margin-top: 10px; font-weight: 500;
} 
.left .latestpost ul { margin:0; padding-top:15px; padding-bottom:15px; padding-left:0;}
.left .latestpost ul li { list-style:none; color:#2e3c49; padding-bottom:5px; font-size:1rem; font-weight:300; line-height:1.4rem; }
.left .latestpost ul li a { color:#2e3c49; font-size:1rem; font-weight:300;}
.left .latestpost ul li a:hover { color:#00aaea;}

blockquote { background:#E6F1F9; padding:20px 45px 8px 50px; background:url(../images/blockquotebg.png) top 8px left 15px no-repeat #F9F9F9; margin:5px 0 15px 0; border-radius:20px; }
.right ol li { background-image:none; padding-left:0; margin-left:0;}
.right ol li ul { padding-left:0; margin-left:0;}
hr { border:1px dashed #CCC; margin:15px 0 30px 0;}
.cen { text-align:center;}
.cen img { max-width:90%;}
.speimg { float:left; width:40%; margin-top:30px;} 
.speimg img, .speimgc img { max-width:100%; }
.spep {float:right; margin-left:5%; width:55%; margin-top:30px;}
.spepc {float:left;  width:55%; margin-top:30px;}
.speimgc { float:right; width:40%;  margin-top:30px; }


.right .iphone {  }
.right .iphone table { border:0; }
.right .iphone table td { border:0; }
.right .iphone table td img { width:90%;}
.85 { width:85%;}
.guarantee { color:#2e3c49; text-align:center; margin-bottom:35px; font-size:13px; color:#666;}
.reviews {background-color: ; padding-top:5px; padding-bottom:10px;}
.review { margin:30px auto; }
.review a { color:#00aaea;}
.review h2 { font-size:1.8rem;}
.review h1 { font-size:2.2rem; text-align:center;}
.review h3 {font-size:1.4rem;}
.review h4 { line-height:25px; margin-bottom:10px; padding:0; margin-top:0;}
.review .pros {width:46%; float:left;}
.review .cons {width:46%; float:right;}
.review .sum { font-size:1rem; line-height:1.8rem; padding:15px; border:1px solid #ddd;}
ol { margin:0 0 20px 0; padding-left:22px; }
ol li {  color:#2e3c49; line-height:1.7rem; font-size:1rem; padding-bottom:10px;}

 
ul { margin:0; padding-left:20px;}
ul li { padding-bottom:15px; line-height:1.5rem;}
.cens { text-align:center;}
.cens img { max-width:75%;}

.reco { background:#39F; border-radius:20px 20px 20px 20px; padding:1%; margin-bottom:25px; display: flex; }
.reco .lefts { color:#FFF;  width:65%; float:left;}
.reco .righs {  width:30%; display: flex; justify-content: center; align-items: center; float:right;}
.reco .lefts, .reco .rights { flex: 1; padding: 20px; }
.reco .righs .butts a { background:#F90; color:#FFF; border-radius: 30px;  padding:13px 18px 15px 18px;}
.reco .righs .butts a:hover { background: #FF6600;  }
.reco .lefts h2 { font-size:1.5rem;}
 .pri { text-align:center; color:#F60;}
 
/********** 202060213 **********/
 /* style.css */
.scroll-container {
    display: flex;
    align-items: center;
    max-width: on a web page.
    margin: 0 auto;
    position: relative;
}

.article-list-wrapper {
    overflow-x: auto;
	white-space: nowrap; 
    scroll-behavior: smooth;
    flex-grow: 1;
    padding: 10px 0;
}

.article-list {
    display: inline-flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.article-item {
    display: inline-block;
    width: 300px;
    margin-right: 15px;
    padding: 15px; padding-bottom:25px;
    border: 1px solid #eee;
    border-radius: 8px;
    background-color: #f9f9f9;
    white-space: normal;
    vertical-align: top;
}
.article-item a { color:#2e3c49;}
.scroll-btn {
    background-color: #ccc;
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.5em;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 1;
}

.scroll-btn:hover {
    background-color: #999;
}

.left-btn {
    margin-right: 10px;
}

.right-btn {
    margin-left: 10px;
}

.article-list-wrapper::-webkit-scrollbar {
    display: none;
}
.learn { font-size:15px;}
.learn a { color:#fff; background-color:#7cb937; padding:5px 15px 7px 15px; border: 1px solid #7cb937; border-radius:8px; text-decoration:none;}
.learn a:hover { background: #6fa531; color: #fff; } 
.media { overflow: scroll;}

.procons { margin:0 auto; padding:15px; border:1px solid #ddd; border-radius:20px 20px 20px 20px;}
.procons table { border-radius: 20px 20px 20px 20px; background:#00aaea; }
.procons th { color:#FFF; font-size:19px;} 
.procons th, .procons td { border:0; padding-left: 15px; vertical-align: top;}
.procons p { margin-bottom:5px; line-height:1.5rem;}