#get_express_table > thead > tr > th:first-child{text-align: left;} #get_express_table > tbody > tr > td:first-child{text-align: left;} #get_express_table .btn{padding:0 6px 0 6px;} #bom_order_detail table tr th,#bom_order_detail table tr td{text-align: center;} #bom_order_detail table tr td{word-break:break-all; word-wrap:break-all;} .css_quantity{max-width: 100%!important;} .css_quantity h1{display: inline-block;vertical-align: top;float: left;line-height: 34px;margin: 0;font-size: 28px;} .css_quantity .quantity{display: inline-block;vertical-align: top;background: none;border: navajowhite; outline: none;box-shadow: none;font-size: 28px;} .css_quantity b{display: inline-block;float: left;line-height: 30px;font-size: 28px; margin: 0 5px;} .css_quantity .qty_unit_ps{font-size: 22px;line-height: 34px;} #cpo_title_top{margin-top: 100px;} .website_my_bom_form{margin-top: 100px;} .o_website_payment{margin-top: 100px!important;} main>#wrap>.container{margin-top: 100px;} .portal-wrap>.container{margin-top: 10px!important;} .material_select li{padding: 2px 5px;} .material_select input{vertical-align: middle;margin: 0 0 2px 0;width: 15px;height: 15px;} .material_select .cpo-mft-qty{margin: 0 10px 0 5px;display: inline-block;} .cpo-warning{padding: 0 30px; animation: cpo_flicker 1000ms; -webkit-animation: cpo_flicker 1000ms; animation-iteration-count: 3; -webkit-animation-iteration-count: 3;} .cpo-warning .alert-warning{animation: cpo_flicker 1000ms; -webkit-animation: cpo_flicker 1000ms; animation-iteration-count: 3; -webkit-animation-iteration-count: 3;} .cpo-warning .alert-warning{font-size: 16px;color: #f80308;background-color: #f5f5f5; border-color: #ff0909;} @keyframes cpo_flicker{from{opacity: 1.0;}50%{opacity: 0.5;}to{opacity: 1.0;}} @-webkit-keyframes cpo_flicker{from{opacity: 1.0;}50%{opacity: 0.5;}to{opacity: 1.0;}} .o_livechat_button{z-index: 9!important;} .cpo_verifi_mail{position: fixed;top: 0;left: 0;width: 100%;height: 100%; background-color: rgba(0, 0, 0, 0.7);z-index: 1001;color: #fff;} .cpo_mail_con{width: 46%;font-size: 18px;font-weight: 600;background: #fff;color: #535050; margin: 150px auto 0;overflow: hidden;border-radius: 5px;} .cpo_mail_tt{text-align: center;font-weight: 600;background-color: #4a93fa;margin: 0; padding: 12px 0;color: #fff;} .cpo_mail_tips{padding: 20px;} .cpo_mail_con a{display: block;width: 24%;text-align: center;border: 1px solid #4a93fa; border-radius: 5px;line-height: 30px;margin: 10px auto;text-decoration: none;padding: 2px 10px; color: #fff;background: #4a93fa;} nav.side-navbar{background: #fff; min-width: 250px; max-width: 250px; color: #686a76; -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); z-index: 9; overflow: hidden;} nav.side-navbar a{color: inherit; position: relative; font-size: 0.9em;} nav.side-navbar a[data-toggle="collapse"]::before{content: '\f104'; display: inline-block; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-family: 'FontAwesome'; position: absolute; top: 50%; right: 20px;} nav.side-navbar a[aria-expanded="true"]{background: #EEF5F9;} nav.side-navbar a[aria-expanded="true"]::before{content: '\f107';} nav.side-navbar a i{font-size: 1.2em; margin-right: 10px; -webkit-transition: none; transition: none;} .ac-page .navbar-collapse.collapse{padding: 0;} .ac-page nav.side-navbar .sidebar-header{padding: 15px 15px 30px;} .ac-page nav.side-navbar .avatar{width: 55px; height: 55px;} .ac-page nav.side-navbar .avatar img{width: 55px; height: 55px; border-radius: 50%;} .ac-page nav.side-navbar .title{margin-left: 10px;} .ac-page nav.side-navbar .title h1{color: #333;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;max-width: 160px;line-height: 30px;} .ac-page nav.side-navbar .title p{font-size: 0.9em; font-weight: 200; margin-bottom: 0; color: #aaa;} .ac-page nav.side-navbar span.heading{text-transform: uppercase; font-weight: 400; margin-left: 20px; color: #ccc; font-size: 0.8em;height: 20px;overflow: hidden;} .ac-page nav.side-navbar ul{padding: 15px 0;} .ac-page nav.side-navbar ul li{} .ac-page nav.side-navbar ul li a{padding: 10px 15px; text-decoration: none; display: block; font-weight: 300; border-left: 4px solid transparent;} .ac-page nav.side-navbar ul li a:hover{background: #4a93fd; border-left: 4px solid #3b25e6; color: #fff;} .ac-page nav.side-navbar ul li a span.mc-qty{display: inline-block;padding: 0px 5px; background-color: #f53d20; border-radius: 50%; color: #ffffff;} .ac-page nav.side-navbar ul li li a{padding-left: 50px; background: #EEF5F9;} .ac-page nav.side-navbar ul li a small{font-weight: 600; color: #3fcf8e; font-size: 12px; margin-left: 5px;} .ac-page nav.side-navbar ul li.active > a small{color: #ffffff;} .ac-page nav.side-navbar ul li.active > a{background: #4a93fd; color: #fff; border-left: 4px solid #3b25e6;} .ac-page nav.side-navbar ul li.active > a:hover{background: #4a93fd;} .ac-page nav.side-navbar ul li li.active > a{background: #4a93fd;} .ac-page nav.side-navbar ul li ul{padding: 0;} .ac-page nav.side-navbar.shrinked{min-width: 90px; max-width: 90px; text-align: center;} .ac-page nav.side-navbar.shrinked span.heading{margin: 0;} .ac-page nav.side-navbar.shrinked ul li a{padding: 5px 2px; border: none; font-size: 0.8em; color: #aaa; -webkit-transition: color 0.3s, background 0.3s; transition: color 0.3s, background 0.3s; width: 100px; height: 30px; line-height: 30px; overflow: hidden; margin: 0 auto; text-align: center; max-width: 90px;} .ac-page nav.side-navbar.shrinked ul li a[data-toggle="collapse"]::before{content: '\f107'; -webkit-transform: translateX(50%); transform: translateX(50%); position: absolute; top: auto; right: 50%; bottom: 0; left: auto;} .ac-page nav.side-navbar.shrinked ul li a[data-toggle="collapse"][aria-expanded="true"]::before{content: '\f106';} .ac-page nav.side-navbar.shrinked ul li a:hover{color: #fff; border: none;} .ac-page nav.side-navbar.shrinked ul li a:hover i{color: #fff;} .ac-page nav.side-navbar.shrinked ul li a i{margin-right: 0; margin-bottom: 2px; display: block; font-size: 1rem; color: #333; -webkit-transition: color 0.3s; transition: color 0.3s; line-height: 20px; font-size: 20px;} .ac-page nav.side-navbar.shrinked ul li.active > a{color: #fff;} .ac-page nav.side-navbar.shrinked ul li.active > a i{color: #fff;} .ac-page nav.side-navbar.shrinked .sidebar-header .title{display: none;} .ac-page nav.navbar .menu-btn{margin-right: 20px; font-size: 1.2em; -webkit-transition: all 0.7s; transition: all 0.7s;} .ac-page nav.navbar .menu-btn span{width: 20px; height: 2px; background: #fff; display: block; margin: 4px auto 0; -webkit-transition: all 0.3s cubic-bezier(0.81, -0.33, 0.345, 1.375); transition: all 0.3s cubic-bezier(0.81, -0.33, 0.345, 1.375);} .login-page{position: relative; min-height: calc(100vh - 81px); background: #f0f4f8; padding: 0 !important;} .login-page .container{max-width: 100% !important; width: 100% !important; padding: 0 !important; z-index: 9; position: relative; min-height: calc(100vh - 81px); display: flex !important; align-items: stretch !important;} .login-page .form-holder{width: 100%; border-radius: 0 !important; overflow: hidden; margin: 0; box-shadow: none !important;} .login-page .form-holder .row{min-height: calc(100vh - 81px); height: calc(100vh - 81px); margin: 0; -webkit-align-items: stretch; align-items: stretch;} .login-page .form-holder div[class*='col-']{padding: 0; height: 100%; display: -webkit-flex; display: flex;} .login-page .form-holder .info{background: linear-gradient(180deg, #0d2845 0%, #1a4a7a 100%); color: #fff; width: 100%; padding: 0 56px 40px; margin: 0; position: relative; overflow: hidden; display: -webkit-flex !important; display: flex !important; -webkit-align-items: flex-start; align-items: flex-start; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center;} .login-page .form-holder .info::before{display: none;} .login-page .form-holder .info .content::before{content: ''; display: block; width: 56px; height: 4px; background: linear-gradient(90deg, #ff6b35, #ffaa70); border-radius: 2px; margin-bottom: 32px;} .login-page .form-holder .info h1{font-size: 40px; font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 16px; letter-spacing: -0.5px;} .login-page .form-holder .info p{font-weight: 300; color: rgba(255,255,255,0.7); font-size: 17px;} .login-page .info .content{position: relative; z-index: 1; width: 100%; max-width: 420px;} .login-page .form-holder .info .content::after{display: none;} .login-page .info .alert-ul{display: none;} .alert-ul{list-style: none; padding: 0; margin-top: 16px;} .alert-ul li{color: rgba(255,255,255,0.72); font-size: 0.88rem; line-height: 1.7; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.08);} .login-page .form-holder .form{background: #ffffff !important; width: 100%; padding: 0 !important; margin: 0; display: -webkit-flex !important; display: flex !important; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;} .login-page .form-holder .form .content{background: transparent; border-radius: 0; padding: 0 64px; box-shadow: none; width: 100%; max-width: 540px; position: relative;} .login-page .form-holder .form::before{content: ''; position: absolute; left: 0; top: 10%; height: 80%; width: 1px; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.08), transparent);} .login-page .login-card-header{margin-bottom: 20px; text-align: left; padding: 0 0 16px; border-bottom: 2px solid #f0f4f8;} .login-page .login-card-header h3{font-size: 26px; font-weight: 700; color: #0d1f3c; margin: 0 0 6px; line-height: 1.2; letter-spacing: -0.3px;} .login-page .login-card-header p{font-size: 15px; color: #6b7c93; margin: 0;} .login-page .oe_login_buttons .btn.cpo-none, .login-page .oe_login_buttons .cpo_login_btn.cpo-none{display: none !important;} .login-page .login-tagline{color: rgba(255,255,255,0.70); font-size: 17px; margin: 14px 0 38px; font-weight: 300; line-height: 1.55;} .login-page .login-features{list-style: none; padding: 0; margin: 0;} .login-page .login-features li{display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 14px; color: rgba(255,255,255,0.88); font-size: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.10);} .login-page .login-features li:last-child{border-bottom: none;} .login-page .lf-icon{font-size: 20px; width: 32px; text-align: center; -webkit-flex-shrink: 0; flex-shrink: 0;} .login-page .form-holder .form form{padding: 0 !important; margin: 0 !important;} .login-page .form-holder .form .form-group{margin-bottom: 20px !important; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; position: static;} .login-page .form-group label.label-material{-webkit-order: -1; order: -1; position: static !important; font-size: 15px !important; font-weight: 600 !important; color: #374151 !important; margin-bottom: 7px !important; top: auto !important; -webkit-transform: none !important; transform: none !important; -webkit-transition: color 0.2s !important; transition: color 0.2s !important; pointer-events: auto !important; cursor: default !important;} .login-page .form-group label.label-material.active{font-size: 15px !important; position: static !important; top: auto !important; color: #ff6b35 !important; -webkit-transform: none !important; transform: none !important;} .login-page input.input-material{-webkit-order: 1; order: 1; width: 100%; background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 8px; padding: 0 16px !important; height: 52px; font-size: 16px; color: #1e293b; -webkit-transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; outline: none; -webkit-appearance: none;} .login-page input.input-material:focus{background: #fff; border-color: #ff6b35 !important; box-shadow: 0 0 0 3px rgba(255,107,53,0.10); outline: none;} .login-page input.input-material.is-invalid{border-color: #dc3545 !important;} .login-page input:-webkit-autofill, .login-page textarea:-webkit-autofill, .login-page select:-webkit-autofill{-webkit-box-shadow: 0 0 0px 1000px #f8fafc inset !important; transition: background-color 50000s ease-in-out 0s;} .login-page .form-holder .cpo_reset_password_form{min-height: 35vh;} .login-page .oe_login_buttons .btn-primary, .login-page .oe_login_buttons .cpo_login_btn{display: block !important; width: 100% !important; background: linear-gradient(135deg, #ff6b35, #e8531f) !important; border: none !important; border-radius: 10px !important; padding: 13px !important; font-size: 16px !important; font-weight: 600 !important; color: #fff !important; box-shadow: 0 4px 18px rgba(255,107,53,0.32); -webkit-transition: all 0.2s; transition: all 0.2s; margin-bottom: 18px; cursor: pointer;} .login-page .oe_login_buttons .btn-primary:hover, .login-page .oe_login_buttons .cpo_login_btn:hover{background: linear-gradient(135deg, #e8531f, #d14010) !important; box-shadow: 0 6px 24px rgba(255,107,53,0.42); -webkit-transform: translateY(-1px); transform: translateY(-1px);} .login-page .oe_login_buttons a.btn{display: none !important;} .login-page .login-link-row{display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 6px; margin-top: 14px;} .login-page .form-holder .form a.forgot-pass, .login-page .form-holder .form a.forgot-pass, .login-page .form-holder .form a.signup{color: #ff6b35; font-size: 14px; font-weight: 600; text-decoration: none; display: inline-block; margin-top: 2px;} .login-page .form-holder .form a.forgot-pass:hover, .login-page .form-holder .form a.signup:hover{text-decoration: underline;} .login-page .form-holder .form small{color: #6b7c93; font-size: 0.95rem;} .login-page .form-holder .form form p.t-tips{color: #aaaaaa;} .login-page .form-holder .form form p.t-tips span{display: inline-block;} .login-page .form .content .alert{border-radius: 8px; font-size: 0.88rem; margin-bottom: 16px;} .login-page .copyrights{width: 100%; z-index: 9999; position: absolute; bottom: 0; left: 0; color: #fff;} @media (max-width: 991px){.login-page .form-holder .info{min-height: auto !important; padding: 60px 32px !important;}.login-page .form-holder .form{min-height: auto !important; padding: 48px 20px !important;}.login-page .form-holder .form .content{padding: 38px 28px; border-radius: 14px;}.login-page .form-holder .info .content::after{display: none;}} .cpo-inline-block{display: inline-block;} .cpo_help_banner{background: url("/website_cpo_sale/static/src/css/../images/banner/help-banner.png");} .help_group{position: relative;color: #0c0c0c;} .help_group i{position: absolute;top: 50%;left: 7px;width: 20px;height: 20px;margin-top: -10px; font-size: 20px;} .help_group input{line-height: 28px;padding: 5px 5px 5px 30px;border-top-left-radius: 5px; border-bottom-left-radius: 5px;border: 1px solid #ddd;width: 40%;margin: 0; float: left;} .help_group a.help_search{float: left;width: 10%;line-height: 28px;border: 1px solid #4a93fd;padding: 5px;margin: 0; border-top-right-radius: 5px;border-bottom-right-radius: 5px;font-size: 18px; background-color: #4a93fd;color: #ffffff;text-align: center;text-decoration: none;cursor: pointer;} .help-page .d-flex{padding-top: 20px;margin-bottom: 20px;} .help-page nav.side-navbar .avatar{width: 55px; height: 55px;} .help-page nav.side-navbar .avatar img{width: 55px; height: 55px; border-radius: 50%;} .help-page nav.side-navbar .title{margin-left: 10px;} .help-page nav.side-navbar .title h1{color: #333;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;max-width: 160px;line-height: 30px;} .help-page nav.side-navbar .title p{font-size: 0.9em; font-weight: 200; margin-bottom: 0; color: #aaa;} .help-page nav.side-navbar span.heading{text-transform: uppercase; font-weight: 400; margin-left: 20px; color: #ccc; font-size: 0.8em;height: 20px;overflow: hidden;} .help-page nav.side-navbar ul{padding: 0px 0;} .help-page nav.side-navbar ul li{} .help-page nav.side-navbar ul li a{padding: 8px 15px; text-decoration: none; display: block; font-weight: 300; border-left: 4px solid transparent; font-size: 14px;} .help-page nav.side-navbar ul li a:hover{background: #4a93fd; border-left: 4px solid #3fcf8e; color: #fff;} .help-page nav.side-navbar ul li a span.mc-qty{display: inline-block;padding: 0px 5px; background-color: #f53d20; border-radius: 50%; color: #ffffff;} .help-page nav.side-navbar ul li li a{padding-left: 50px; background: #EEF5F9;} .help-page nav.side-navbar ul li a small{font-weight: 600; color: #3fcf8e; font-size: 12px; margin-left: 5px;} .help-page nav.side-navbar ul li.active > a small{color: #ffffff;} .help-page nav.side-navbar ul li.active > a{background: #4a93fd; color: #fff; border-left: 4px solid #3fcf8e;} .help-page nav.side-navbar ul li.active > a:hover{background: #4a93fd;} .help-page nav.side-navbar ul li li.active > a{background: #4a93fd;} .help-page nav.side-navbar ul li ul{padding: 0;} .help-page nav.side-navbar.shrinked{min-width: 90px; max-width: 90px; text-align: center;} .help-page nav.side-navbar.shrinked span.heading{margin: 0;} .help-page nav.side-navbar.shrinked ul li a{padding: 5px 2px; border: none; font-size: 0.8em; color: #aaa; -webkit-transition: color 0.3s, background 0.3s; transition: color 0.3s, background 0.3s; width: 100px; height: 30px; line-height: 30px; overflow: hidden; margin: 0 auto; text-align: center;} .help-page nav.side-navbar.shrinked ul li a[data-toggle="collapse"]::before{content: '\f107'; -webkit-transform: translateX(50%); transform: translateX(50%); position: absolute; top: auto; right: 50%; bottom: 0; left: auto;} .help-page nav.side-navbar.shrinked ul li a[data-toggle="collapse"][aria-expanded="true"]::before{content: '\f106';} .help-page nav.side-navbar.shrinked ul li a:hover{color: #fff; border: none;} .help-page nav.side-navbar.shrinked ul li a:hover i{color: #fff;} .help-page nav.side-navbar.shrinked ul li a i{margin-right: 0; margin-bottom: 2px; display: block; font-size: 1rem; color: #333; -webkit-transition: color 0.3s; transition: color 0.3s; line-height: 20px; font-size: 20px;} .help-page nav.side-navbar.shrinked ul li.active > a{color: #fff;} .help-page nav.side-navbar.shrinked ul li.active > a i{color: #fff;} .help-page nav.side-navbar.shrinked .sidebar-header .title{display: none;} .help-page nav.navbar .menu-btn{margin-right: 20px; font-size: 1.2em; -webkit-transition: all 0.7s; transition: all 0.7s;} .help-page nav.navbar .menu-btn span{width: 20px; height: 2px; background: #fff; display: block; margin: 4px auto 0; -webkit-transition: all 0.3s cubic-bezier(0.81, -0.33, 0.345, 1.375); transition: all 0.3s cubic-bezier(0.81, -0.33, 0.345, 1.375);} .help-page .page-content .content-inner{padding: 0px 30px 15px;} .help-content .h-title{margin: 0 0 15px 0;font-weight: bold;} .help-content .h-thank{margin: 30px 0 0 0;font-weight: 600;} .h-ul li{margin-bottom: 15px;} .h-ul li p{margin: 0;line-height: 30px;display: inline-block;font-size: 16px;} .h-ul .img{width: 100%;margin-top: 5px;cursor: url("/website_cpo_sale/static/src/css/../images/tools_img/fd.png"), auto;} .textspan{display: none; line-height: 34px; padding: 0 15px; font-size: 16px; font-weight: bold;} .navbar .signin_signup{position: absolute; overflow: hidden; background-color: #fff; width: 200px; left: -120px; padding: 10px; top: 78px; box-shadow: 1px 1px 15px #ddd; border-radius: 10px; display: none;} .navbar .signin_signup span{display: block;} .navbar .signin_signup a.btn{padding: 0px 10px; width: 70%; margin: 8px auto;} header .navbar-nav{position: relative;} .web-alert{width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:99999;text-align: center;position:fixed;left:0;top:0;} .web-box{width:300px;position:absolute;top:30%;left:50%;margin-left:-150px;padding:20px;background:#fff;border-radius:5px;} .web-tips{padding-bottom:10px;border-bottom:1px solid #e5e5e5;font-size:20px;color:#f83;} .web-content{padding:10px 0;color:#333;border-bottom:1px solid #e5e5e5;} .web-btn-cf{width: 120px;color:#fff;border-radius:2px;padding:7px 0; background-color: #4a93fd;margin: 0 5px;border-radius: 5px; cursor: pointer;display: inline-block;} .web-btn-cc{width: 120px;border-radius:2px;padding:7px 0;color:#000; background:#eceaea;margin: 0 auto;border-radius: 5px;cursor: pointer; display: inline-block;} .web-btn-cc:hover{background-color: #4a93fd;color: #fff;} .slider-area{background-color: #0a1628; position: relative; overflow: hidden;} .cpo-slider-area-slider1{background-image: url('/website_cpo_sale/static/src/images/banner/hero-pcb-bg.jpg') !important; background-size: cover !important; background-position: center center !important;} .slider-area.height-82vh, .slider-area.height-82vh .single-slider.height-82vh{height: 90vh !important; min-height: 520px !important;} .slider-area .slider-active.owl-carousel, .slider-area .owl-stage-outer, .slider-area .owl-stage, .slider-area .owl-item{height: 100% !important;} .slider-area .index-quotation-from{position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; margin: 0 !important; padding: 0 !important; z-index: 5 !important; pointer-events: none !important;} .slider-area .cpo_index_quo_con{position: absolute !important; top: 0 !important; bottom: 0 !important; right: 0 !important; width: 50% !important; height: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; pointer-events: all !important; padding-top: 90px !important;} .slider-area .cpo-slider-content{position: static !important; top: auto !important; left: auto !important; transform: none !important; z-index: auto !important;} .slider-area::before{content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(10,22,40,0.78) 0%, rgba(13,34,65,0.70) 50%, rgba(15,45,87,0.65) 100%); z-index: 0; pointer-events: none;} .cpo-hero-left{padding: 20px 10px 20px 0; color: #fff; position: relative; z-index: 2;} .cpo-hero-badge{display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap;} .cpo-hero-badge span{display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 107, 53, 0.25); border: 1px solid rgba(255, 140, 80, 0.7); color: #ffb899; font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px; text-shadow: 0 1px 4px rgba(0,0,0,0.3);} .cpo-hero-badge .fa{font-size: 11px;} .cpo-hero-title{font-size: 52px !important; font-weight: 800 !important; line-height: 1.2 !important; color: #ffffff !important; margin: 0 0 18px 0 !important; text-shadow: 0 2px 24px rgba(0,0,0,0.4); letter-spacing: -1px;} .cpo-hero-sub{font-size: 18px !important; color: rgba(200, 220, 255, 0.9) !important; line-height: 1.7 !important; margin-bottom: 26px !important;} .cpo-hero-features{display: grid; grid-template-columns: auto auto; gap: 10px 20px; margin-bottom: 28px; justify-content: start;} .cpo-hero-feat-item{display: flex; align-items: center; gap: 8px; color: rgba(200, 220, 255, 0.9); font-size: 14px;} .cpo-hero-feat-item .fa{color: #4ade80; font-size: 15px; flex-shrink: 0;} .cpo-hero-btns{display: flex; gap: 14px; flex-wrap: wrap;} .cpo-hero-price-hint{margin: 10px 0 0 0 !important; font-size: 13px !important; color: rgba(180, 210, 255, 0.65) !important; letter-spacing: 0.2px;} .cpo-btn-primary{display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #ff6b35, #ff4500); color: #fff !important; font-size: 16px; font-weight: 700; padding: 13px 28px; border-radius: 6px; text-decoration: none !important; box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4); transition: all 0.25s ease; letter-spacing: 0.3px;} .cpo-btn-primary:hover{background: linear-gradient(135deg, #ff8255, #ff6b35); box-shadow: 0 6px 20px rgba(255, 107, 53, 0.55); transform: translateY(-1px); color: #fff !important; text-decoration: none !important;} .cpo-btn-outline{display: inline-flex; align-items: center; background: transparent; color: rgba(200, 220, 255, 0.9) !important; font-size: 15px; font-weight: 600; padding: 13px 24px; border: 1.5px solid rgba(200, 220, 255, 0.4); border-radius: 6px; text-decoration: none !important; transition: all 0.25s ease;} .cpo-btn-outline:hover{border-color: rgba(200, 220, 255, 0.8); color: #fff !important; background: rgba(255,255,255,0.08); text-decoration: none !important;} .index-quote-box{background: rgba(255, 255, 255, 0.97) !important; border-radius: 10px !important; box-shadow: 0 20px 60px rgba(0,0,0,0.35) !important;} .cpo-quo-tt{background: #0d2241 !important; border-radius: 8px 8px 0 0 !important;} .quo-tt-ls h4{color: rgba(200, 220, 255, 0.7) !important;} .quo-tt-active h4{color: #fff !important;} .cpo-stats-strip{background: linear-gradient(135deg, #0d2241 0%, #1a3a6e 100%); padding: 28px 0; border-top: 1px solid rgba(255,255,255,0.08);} .cpo-stats-grid{display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 16px;} .cpo-stat-item{text-align: center; padding: 8px 20px; position: relative;} .cpo-stat-item:not(:last-child)::after{content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 40px; width: 1px; background: rgba(255,255,255,0.15);} .cpo-stat-num{font-size: 32px; font-weight: 800; color: #ff6b35; line-height: 1; margin-bottom: 4px; font-family: 'Raleway', 'Arial', sans-serif;} .cpo-stat-num span{font-size: 18px; font-weight: 700; color: #ff9a6c;} .cpo-stat-label{font-size: 13px; color: rgba(200, 220, 255, 0.75); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 500;} .section-title > h2::before, .section-title > h1::before{background: linear-gradient(90deg, #ff6b35, #0d2241) !important; width: 60px !important;} .cpo-submit, .btn-primary{background: linear-gradient(135deg, #ff6b35, #e84d00) !important; border-color: #ff6b35 !important; font-weight: 600 !important; letter-spacing: 0.3px !important; transition: all 0.2s ease !important;} .cpo-submit:hover, .btn-primary:hover{background: linear-gradient(135deg, #ff8255, #ff6b35) !important; border-color: #ff8255 !important; box-shadow: 0 4px 12px rgba(255,107,53,0.4) !important; transform: translateY(-1px) !important;} .navbar-nav > li.active > a::after{background-color: #ff6b35 !important;} @media (max-width: 991px){.cpo-hero-title{font-size: 28px !important;}.cpo-hero-features{grid-template-columns: 1fr;}.cpo-stats-grid{gap: 8px;}.cpo-stat-item:not(:last-child)::after{display: none;}.cpo-stat-num{font-size: 26px;}} @media (max-width: 767px){.cpo-hero-left{padding: 30px 15px;}.cpo-hero-title{font-size: 24px !important;}.cpo-hero-btns{flex-direction: column;}.cpo-btn-primary, .cpo-btn-outline{text-align: center; justify-content: center;}} .cpo-hero-slide{background-size: cover !important; background-position: center center !important; background-color: #0a1628; min-height: unset !important; height: 100% !important; position: relative; overflow: hidden; padding-top: 90px !important;} .cpo-hero-slide::before{content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(5,12,24,0.82) 0%, rgba(10,22,40,0.75) 50%, rgba(12,30,55,0.68) 100%), radial-gradient(ellipse at 20% 50%, rgba(255,107,53,0.06) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(74,147,253,0.06) 0%, transparent 60%); pointer-events: none; z-index: 1;} .single-slider.bg-img::before{content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(5,12,24,0.82) 0%, rgba(10,22,40,0.75) 50%, rgba(12,30,55,0.68) 100%); pointer-events: none; z-index: 1;} .cpo-hero-slide .cpo-hero-bg-circuit{opacity: 0.04; position: absolute; inset: 0; overflow: hidden;} .cpo-hero-slide .cpo-hero-bg-circuit img{width: 100%; height: 100%; object-fit: cover; filter: invert(1);} .cpo-hero-slide .container{position: relative; z-index: 2;} .single-slider.bg-img .container, .single-slider.bg-img .slider-content{position: relative; z-index: 2;} .quotation-area{background: #f5f7fa;} .quotation-area .section-title h2{font-size: 32px; font-weight: 700; color: #0a1628; margin-bottom: 10px;} .quotation-area .section-title p{color: #667; font-size: 16px;} .cpo-pcb-type-card{background: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(10,22,40,0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid #e8edf5; height: 100%; display: flex; flex-direction: column;} .cpo-pcb-type-card:hover{transform: translateY(-6px); box-shadow: 0 12px 40px rgba(10,22,40,0.15); border-color: #ff6b35;} .cpo-pcb-type-header{background: linear-gradient(135deg, #0a1628 0%, #0d2347 100%); padding: 32px 20px; position: relative; overflow: hidden;} .cpo-pcb-type-header::before{content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(255,107,53,0.2) 0%, transparent 70%);} .cpo-pcb-type-header .cpo-pcb-icon{font-size: 48px; color: #ff6b35; position: relative; z-index: 1;} .cpo-pcb-type-header h3{color: #ffffff; font-size: 20px; font-weight: 700; margin: 12px 0 4px; position: relative; z-index: 1;} .cpo-pcb-type-header .cpo-pcb-sublabel{color: rgba(255,255,255,0.6); font-size: 13px; position: relative; z-index: 1;} .cpo-pcb-type-body{padding: 24px; flex: 1; display: flex; flex-direction: column;} .cpo-pcb-type-desc{color: #556; font-size: 14px; line-height: 1.7; margin-bottom: 16px;} .cpo-pcb-type-features{list-style: none; padding: 0; margin: 0 0 24px; flex: 1;} .cpo-pcb-type-features li{color: #334; font-size: 13px; padding: 5px 0; border-bottom: 1px solid #f0f2f5; display: flex; align-items: center;} .cpo-pcb-type-features li:last-child{border-bottom: none;} .cpo-pcb-type-features li::before{content: '✓'; color: #ff6b35; font-weight: 700; margin-right: 8px; flex-shrink: 0;} .cpo-pcb-type-card .cpo-btn-quote{display: block; background: linear-gradient(135deg, #ff6b35 0%, #e85a28 100%); color: #fff; padding: 12px; border-radius: 8px; font-weight: 700; font-size: 15px; text-decoration: none; transition: all 0.2s ease; border: none; text-align: center; margin-top: auto;} .cpo-pcb-type-card .cpo-btn-quote:hover{background: linear-gradient(135deg, #e85a28 0%, #d04a1a 100%); color: #fff; text-decoration: none; box-shadow: 0 4px 15px rgba(255,107,53,0.4);} .cpo-inner-hero{background: linear-gradient(135deg, #0a1628 0%, #0d2347 100%); padding: 60px 0 50px; position: relative; overflow: hidden; margin-top: 0;} .cpo-inner-hero::before{content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(255,107,53,0.1) 0%, transparent 60%);} .cpo-inner-hero .container{position: relative; z-index: 1;} .cpo-inner-hero h1{color: #ffffff; font-size: 36px; font-weight: 700; margin-bottom: 8px;} .cpo-inner-hero .cpo-inner-hero-sub{color: rgba(255,255,255,0.65); font-size: 16px;} .cpo-inner-hero .breadcrumb{background: transparent; padding: 0; margin: 12px 0 0;} .cpo-inner-hero .breadcrumb > li > a{color: #ff6b35;} .cpo-inner-hero .breadcrumb > li{color: rgba(255,255,255,0.5);} .cpo-apfc-area, .cpo-section-features{background: #ffffff;} .cpo-apfc-area .section-title h2, .section-title h2{color: #0a1628;} .cpo-apfc-area{background: #ffffff; padding-top: 50px !important; padding-bottom: 60px;} .cpo-apfc-area .section-title h1{font-size: 30px; font-weight: 700; color: #0a1628; position: relative; display: inline-block; padding-bottom: 14px;} .cpo-apfc-area .section-title h1::after{content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: linear-gradient(90deg, #ff6b35, #e85a28); border-radius: 2px;} .cpo-process .single-process{padding: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(10,22,40,0.07); transition: transform 0.3s ease, box-shadow 0.3s ease; background: #fff; border: 1px solid #eaeff6;} .cpo-process .single-process:hover{background-color: #fff; transform: translateY(-6px); box-shadow: 0 16px 40px rgba(10,22,40,0.14); border-color: #ff6b35;} .process-img{position: relative; margin-bottom: 0; overflow: hidden;} .process-img::after{content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(to bottom, transparent, rgba(10,22,40,0.15)); pointer-events: none;} .single-process .processpost-desc{padding: 18px 18px 20px;} .processpost-desc > h1{font-size: 18px; font-weight: 700; color: #0a1628; margin: 0 0 8px;} .processpost-desc > h1:hover{color: #ff6b35;} .processpost-desc > p{margin: 0 0 12px; color: #667; font-size: 13px; line-height: 1.6; height: auto; -webkit-line-clamp: 3;} .processpost-desc a.readmore{color: #ff6b35; font-size: 13px; font-weight: 700; text-transform: none; display: inline-flex; align-items: center; gap: 4px; transition: gap 0.2s;} .processpost-desc a.readmore:hover{color: #e85a28; gap: 8px;} .popular-package{background: linear-gradient(135deg, #0a1628 0%, #0d2347 100%); padding: 50px 0; position: relative; overflow: hidden;} .popular-package::before{content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(255,107,53,0.1) 0%, transparent 60%);} .popular-package .section-title h2{color: #ffffff; font-size: 26px; font-weight: 700;} .popular-package .section-title h2::before{background: #ff6b35;} .partner-logo{display: flex; justify-content: center; align-items: center; gap: 40px; flex-wrap: wrap; position: relative; z-index: 1;} .partner-logo .img{height: 44px; width: auto; max-width: 130px; object-fit: contain; filter: none; opacity: 1; background: rgba(255, 255, 255, 0.92); border-radius: 8px; padding: 8px 18px; transition: transform 0.3s, box-shadow 0.3s;} .partner-logo .img:hover{transform: scale(1.05); box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2);} .gallery-area{background: #f5f7fa; padding: 60px 0;} .cpo-video-title h2{font-size: 20px; font-weight: 700; color: #0a1628;} .cop-video-img{border-radius: 12px; overflow: hidden; position: relative; box-shadow: 0 8px 24px rgba(10,22,40,0.12); transition: box-shadow 0.3s ease;} .cop-video-img:hover{box-shadow: 0 16px 48px rgba(10,22,40,0.2);} .cpo-video-company, .cpo-video-process{position: relative;} .cpo-video-company::before, .cpo-video-process::before{content: ''; position: absolute; inset: 0; background: rgba(10,22,40,0.3); z-index: 1; border-radius: 12px; pointer-events: none;} .play-sec{position: relative; z-index: 2;} .testimonial-area{background: #ffffff !important; padding: 60px 0;} .testimonial-area .section-title h2{color: #0a1628; font-weight: 700;} .cpo-product-lb{padding: 0;} .cpo-product-item{border-radius: 10px; overflow: hidden; transition: transform 0.3s ease;} .cpo-product-item:hover{transform: translateX(4px);} .cpo-product-desc-one{background: linear-gradient(135deg, #0a1628 0%, #0d2347 100%); border-left: 4px solid #ff6b35;} .cpo-product-desc-one h3{color: #ffffff; font-size: 16px; font-weight: 700;} .cpo-product-desc-one span{color: rgba(255,255,255,0.75); font-size: 13px; line-height: 1.7;} .cpo-product-an ul li{background: #f5f7fa; border-radius: 6px; color: #334; font-size: 13px; font-weight: 600; transition: background 0.2s, color 0.2s;} .cpo-product-an ul li:hover, .cpo-product-an ul li.cpo-select-on{background: linear-gradient(135deg, #0a1628, #0d2347); color: #ff6b35;} #contact_us_banner_bg{background-color: #0a1628 !important; background-image: linear-gradient(135deg, #0a1628 0%, #0d2347 100%) !important; padding: 70px 0 60px; position: relative; overflow: hidden;} #contact_us_banner_bg::before{content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(255,107,53,0.12) 0%, transparent 60%); pointer-events: none;} #contact_us_banner_bg .container{position: relative; z-index: 1;} #contact_us_banner_bg .cpo_contas_title{background: transparent !important; padding: 0;} #contact_us_banner_bg .cpo_contas_title h2{color: #ffffff; font-size: 36px; font-weight: 700; margin-bottom: 8px;} #contact_us_banner_bg .cpo_contas_title h4{color: rgba(255,255,255,0.7); font-size: 18px; font-weight: 400;} .cu_content_section{background: #f5f7fa; padding: 50px 0;} .cu_form .form-group input, .cu_form .form-group textarea{border-color: #dde3ee; border-radius: 6px;} .cu_form .form-group input:focus, .cu_form .form-group textarea:focus{border-color: #ff6b35; box-shadow: 0 0 0 3px rgba(255,107,53,0.15);} .section-title > h2::before, .section-title > h1::before{background: #ff6b35 !important;} a.readmore{color: #ff6b35 !important;} a.readmore:hover{color: #e85a28 !important;} .btn-primary{background-color: #ff6b35 !important; border-color: #ff6b35 !important;} .btn-primary:hover, .btn-primary:focus{background-color: #e85a28 !important; border-color: #e85a28 !important;} .cpo_contas_title h1, .cpo_contas_title h4{text-align: center !important;} ul.wizard{display: flex !important; list-style: none !important; margin: 0 !important; padding: 0 !important; background: #0d1f3c !important; border-bottom: 2px solid #1a3a6b !important; border-radius: 0 !important; box-shadow: none !important; width: 100% !important; overflow: hidden !important; margin-top: 0 !important;} ul.wizard li{flex: 1 !important; position: relative !important; padding: 11px 6px 11px 20px !important; font-size: 12px !important; font-weight: 500 !important; color: #8aabcc !important; background: #0d1f3c !important; background-color: #0d1f3c !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; border: none !important; border-width: 0 !important; border-radius: 0 !important; transition: background 0.2s;} ul.wizard li.text-primary{color: #ffffff !important; background: linear-gradient(135deg, #ff6b35, #e85a28) !important; background-color: #ff6b35 !important; font-weight: 700 !important;} ul.wizard li.text-success{color: #4ade80 !important; background: #0c2010 !important; background-color: #0c2010 !important;} ul.wizard li .chevron{display: none !important;} ul.wizard li .chevron::before{display: none !important;} ul.wizard li .chevron::after{display: none !important;} ul.wizard li::after{content: '' !important; position: absolute !important; top: 0 !important; right: -10px !important; width: 0 !important; height: 0 !important; border-top: 21px solid transparent !important; border-bottom: 21px solid transparent !important; border-left: 10px solid #0d1f3c !important; z-index: 2 !important;} ul.wizard li.text-primary::after{border-left-color: #e85a28 !important;} ul.wizard li.text-success::after{border-left-color: #0c2010 !important;} ul.wizard li:last-child::after{display: none !important;} ul.wizard li:first-child{padding-left: 15px !important; border-radius: 0 !important;} ul.wizard li:last-child{border-radius: 0 !important; border-right-width: 0 !important;} #xiangdao{background: #0d1f3c !important; padding-left: 0 !important; padding-right: 0 !important;} #xiangdao .col-md-1{display: none !important;} #xiangdao .col-md-10{width: 100% !important; padding: 0 !important;} ul.wizard.pull-right{float: none !important; width: 100% !important;} .o_website_sale #wrap, .o_website_sale #wrapwrap{background: #0a1628;} .o_website_sale h1, .o_website_sale .page-header h1{color: #e8f4ff; font-weight: 700; border-bottom: 3px solid #ff6b35; padding-bottom: 8px; display: inline-block;} .o_website_sale table.table{background: #132340; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 16px rgba(0,0,0,0.4); border: 1px solid #1e3a5f;} .o_website_sale table.table thead{background: #0d1e38; color: #e8f4ff;} .o_website_sale table.table thead th{color: #e8f4ff !important; font-weight: 600; border: none; border-bottom: 2px solid #ff6b35 !important; padding: 12px 16px;} .o_website_sale table.table tbody tr{background: #132340; color: #c8dff4; border-bottom: 1px solid #1e3a5f;} .o_website_sale table.table tbody tr:hover{background: #1a3055;} .o_website_sale table.table td, .o_website_sale table.table th{border-color: #1e3a5f !important; color: #c8dff4;} .o_website_sale .btn-info{background: #ff6b35 !important; border-color: #ff6b35 !important; color: #fff !important;} .o_website_sale .btn-info:hover{background: #e85a28 !important;} .o_website_sale .oe_cart_summary, .o_website_sale #cart_summary{background: #132340; border: 1px solid #1e3a5f; border-radius: 8px; box-shadow: 0 2px 16px rgba(0,0,0,0.4); padding: 20px; color: #c8dff4;} .o_website_sale .oe_cart_summary h4, .o_website_sale #cart_summary h4{color: #e8f4ff;} .o_website_sale #cart_products .text-center{color: #7a9cc0;} .o_website_sale .oe_cart_steps, #progress_steps{background: #0d1e38; border-bottom: 1px solid #1e3a5f;} .o_website_sale dl.dl-horizontal dt, .o_website_sale dl.dl-horizontal dd{color: #c8dff4;} .o_website_sale input.form-control, .o_website_sale select.form-control, .o_website_sale textarea.form-control{background: #0d1e38; border-color: #2a4a70; color: #e8f4ff;} .o_website_sale input.form-control:focus, .o_website_sale select.form-control:focus{border-color: #ff6b35; box-shadow: 0 0 0 2px rgba(255,107,53,0.2);} .cpo_stencil_quotation_banner, .cpo_stencil_title, .cpo-stencil-header{background: linear-gradient(135deg, #0a1628 0%, #1a3a6b 60%, #0a1628 100%) !important; color: #fff !important; padding: 40px 0 30px !important; text-align: center;} .cpo_stencil_quotation_banner h1, .cpo_stencil_quotation_banner h2, .cpo_stencil_title h1, .cpo_stencil_title h2{color: #fff !important; font-weight: 700;} .cpo_stencil_quotation_banner h1 span, .cpo_stencil_title h1 span{color: #ff6b35 !important;} .cpo_small_nav_banner, .cpo-small-nav{background: linear-gradient(90deg, #0a1628, #1a3a6b) !important;} .cpo-small-nav > li > a{color: #fff !important;} .cpo-small-nav > li > a.cpo-stencil-a, .cpo-small-nav > li > a.active{background: #ff6b35 !important; color: #fff !important;} caption#tab_title{background: linear-gradient(135deg, #1a3a6b 0%, #0a1628 100%) !important; color: #ffffff !important; font-size: 16px !important; font-weight: 700 !important; padding: 14px 20px !important; text-align: left !important; border-bottom: 2px solid #ff6b35 !important;} caption#tab_title span{color: #8aabcc !important; font-size: 13px !important; font-weight: 400 !important;} table.table-bordered caption + tbody tr:first-child td{border-top: none;} .section-title{position: relative; margin-bottom: 36px;} .section-title h2{font-size: 28px !important; font-weight: 700 !important; color: #0a1628 !important; letter-spacing: 0.5px; margin-bottom: 12px !important;} .section-title h2::before, .section-title > h2::before{background-color: #ff6b35 !important;} .section-title p{color: #5a7a99; font-size: 15px; line-height: 1.7; max-width: 680px; margin: 0 auto;} .popular-package .section-title h2{color: #ffffff !important;} .popular-package .section-title h2::before{background-color: #ff6b35 !important;} .single-process{background: #fff !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 4px 20px rgba(10, 22, 40, 0.08) !important; border: 1px solid rgba(10, 22, 40, 0.06) !important; transition: transform 0.3s ease, box-shadow 0.3s ease !important; position: relative;} .single-process:hover{transform: translateY(-6px) !important; box-shadow: 0 12px 40px rgba(10, 22, 40, 0.15) !important; border-color: #ff6b35 !important;} .single-process::before{content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background: linear-gradient(90deg, #ff6b35, #ffaa80); transition: width 0.3s ease;} .single-process:hover::before{width: 100%;} .single-process .process-img{overflow: hidden; background: #f8fafc;} .single-process .process-img img{transition: transform 0.4s ease !important; width: 100%;} .single-process:hover .process-img img{transform: scale(1.05) !important;} .single-process .process-content, .single-process .cpo-process-content{padding: 16px 18px 18px !important;} .single-process h3, .single-process .process-content h3{font-size: 15px !important; font-weight: 700 !important; color: #0a1628 !important; margin-bottom: 8px !important;} .single-process p, .single-process .process-content p{font-size: 13px !important; color: #6b8fab !important; line-height: 1.6 !important;} .single-process .readmore{font-size: 13px !important; font-weight: 600 !important; color: #ff6b35 !important;} .single-menu-product{background: #f8fafc; border-radius: 12px; padding: 20px !important; box-shadow: 0 2px 12px rgba(10, 22, 40, 0.06); overflow: hidden;} .cpo-video-title h2{font-size: 22px !important; font-weight: 700 !important; color: #0a1628 !important;} .cpo-video-title h2::before{background-color: #ff6b35 !important;} .cpo-product-box{background: #f4f6f9; border-radius: 12px; padding: 16px;} .cpo-product-item{margin-bottom: 0; border-radius: 12px; overflow: hidden;} .cpo-product-img{width: 65% !important; margin-right: 3rem !important; padding: 0 !important; border-radius: 12px; overflow: hidden;} .cpo-product-img img{width: 100% !important; height: auto !important; border-radius: 12px !important; background: transparent !important; padding: 0 !important; display: block; transition: transform 0.4s ease;} .cpo-product-item:hover .cpo-product-img img{transform: scale(1.03);} .cpo-product-desc-one h3{font-size: 18px !important; font-weight: 700 !important; color: #ffffff !important; margin-bottom: 12px !important;} .cpo-product-desc-one span{font-size: 14px !important; color: rgba(255, 255, 255, 0.80) !important; line-height: 1.8 !important;} .cpo-product-an ul li{font-size: 14px !important;} .popular-package + div, .popular-package ~ div.pt-100, div[class*="pb-100"]{background: #fff;} .cpo-video-area, .cpo-video-section{background: #f8fafc; padding: 60px 0;} .cpo-about-area, .cpo-product-area{background: #fff; padding: 70px 0;} .pt-80{padding-top: 60px !important;} .pb-80{padding-bottom: 60px !important;} .pt-100{padding-top: 70px !important;} .pb-100{padding-bottom: 70px !important;} .footer-cta-strip{background: linear-gradient(135deg, #1a2a4a 0%, #0d1b35 100%); border-top: 3px solid #ff6b35; border-bottom: 1px solid rgba(255,107,53,0.3); padding: 28px 0;} .footer-cta-inner{display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;} .footer-cta-text{color: #fff; font-size: 20px; font-weight: 600; letter-spacing: 0.5px;} .footer-cta-text .fa{color: #ff6b35; margin-right: 10px; font-size: 22px;} .footer-cta-btn{display: inline-block; background: #ff6b35; color: #fff !important; padding: 10px 28px; border-radius: 4px; font-size: 15px; font-weight: 600; transition: all 0.2s; margin-left: 12px;} .footer-cta-btn:hover{background: #e85a24 !important; color: #fff !important; text-decoration: none;} .footer-cta-btn-outline{background: transparent !important; border: 2px solid #ff6b35; color: #ff6b35 !important;} .footer-cta-btn-outline:hover{background: #ff6b35 !important; color: #fff !important;} .footer-area-top.black-bg{background: #111827 !important;} .footer-area .black-bg-2{background: #0d1420 !important; border-top: 1px solid rgba(255,255,255,0.08);} .footer-area a:hover{color: #ff6b35 !important;} .footer-title > h4{position: relative; padding-bottom: 12px; margin-bottom: 4px;} .footer-title > h4::after{content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 30px; height: 2px; background: #ff6b35;} .footer-area-top.pt-60{padding-top: 60px !important;} .footer-logo-wrap{display: inline-block; background: rgba(255,255,255,0.92); border-radius: 8px; padding: 8px 16px; margin-bottom: 16px;} .footer-logo-wrap .footer-logo{width: 140px; display: block;} .copyright .text-muted{font-size: 13px !important; color: rgba(255, 255, 255, 0.65) !important; opacity: 1;} .error-tips{padding: 10px 0 24px;} .error-tips > p{font-size: 14px; color: #666; margin-bottom: 8px;} .error-tips h3{font-size: 15px; font-weight: 600; color: #333; margin: 18px 0 10px; padding-left: 2px;} .error-tips-ul{display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0;} .error-tips-ul li{display: flex; align-items: center; gap: 10px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 8px 12px 8px 8px; width: calc(33.33% - 7px); min-width: 200px; transition: box-shadow 0.2s, border-color 0.2s;} .error-tips-ul li:hover{box-shadow: 0 3px 10px rgba(0,0,0,0.09); border-color: #c8d8f8;} .error-tips-ul li img{width: 64px; height: 64px; object-fit: cover; border-radius: 6px; flex-shrink: 0;} .error-tips-ul li span{flex: 1; font-size: 13px; color: #444; line-height: 1.4;} .error-tips-ul li a{display: inline-block; background: #4a93fd; color: #fff !important; font-size: 12px; padding: 5px 12px; border-radius: 4px; text-decoration: none !important; white-space: nowrap; flex-shrink: 0;} .error-tips-ul li a:hover{background: #357ae8;} @media (max-width: 768px){.error-tips-ul li{width: calc(50% - 5px);}} @media (max-width: 480px){.error-tips-ul li{width: 100%;}} .cpo-slider-area-slider2{background-image: url('/website_cpo_sale/static/src/images/banner/hero-pcb-bg2.jpg') !important; background-size: cover !important; background-position: center !important;} .cpo-slider-area-slider3{background-image: url('/website_cpo_sale/static/src/images/banner/hero-pcb-bg4.jpg') !important; background-size: cover !important; background-position: center top !important;} .cpo-slider-area-slider3::before{background: linear-gradient(135deg, rgba(0,40,80,0.88) 0%, rgba(0,20,50,0.82) 100%) !important;} .cpo-hero-progress{position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 100; pointer-events: none;} .cpo-hero-prog-item{width: 80px; height: 5px; background: rgba(255,255,255,0.28); border-radius: 3px; overflow: hidden; cursor: pointer; pointer-events: auto;} .cpo-hero-prog-fill{height: 100%; width: 0%; background: #fff; border-radius: 2px; transition: none;} .cpo-hero-prog-item.active .cpo-hero-prog-fill{animation: cpoHeroFill 5s linear forwards;} .cpo-hero-prog-item.done .cpo-hero-prog-fill{width: 100% !important; animation: none !important;} @keyframes cpoHeroFill{from{width: 0%;}to{width: 100%;}} .slider-area .owl-dots{display: none !important;} .cpo-hero-nav-btn{position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; width: 44px; height: 44px; background: rgba(74,147,253,0.85); border: 1px solid rgba(74,147,253,1); color: #fff; font-size: 28px; line-height: 40px; text-align: center; cursor: pointer; opacity: 0; transition: opacity 0.3s ease, background 0.3s ease; pointer-events: all;} .cpo-hero-nav-prev{left: 15px;} .cpo-hero-nav-next{right: 15px;} .slider-area:hover .cpo-hero-nav-btn{opacity: 1;} .cpo-hero-nav-btn:hover{background: #242424; border-color: #242424;} 

/* /website_cpo_sale/static/src/css/cpo_index.css defined in bundle 'web.assets_frontend' */
 @keyframes myfirst{from{margin-left: 3px;}to{margin-right: 3px;}} @-moz-keyframes myfirst{from{margin-left: 3px;}to{margin-right: 3px;}} @-webkit-keyframes myfirst{from{margin-left: 3px;}to{margin-right: 3px;}} @-o-keyframes myfirst{from{margin-left: 3px;}to{margin-right: 3px;}} @keyframes changeWH{from{width: 100%;}to{width: 120%;}} @-moz-keyframes changeWH{from{width: 100%;}to{width: 120%;}} @-webkit-keyframes changeWH{from{width: 100%;}to{width: 120%;}} @-o-keyframes changeWH{from{width: 100%;}to{width: 120%;}} #about_us_banner_bg{background: url("/website_cpo_sale/static/src/css/../images/process/banner_bg_1.png");} #contact_us_banner_bg{background-image: url("/website_cpo_sale/static/src/css/../images/banner/help-banner.png"); background-size: 100% 100%; margin-top: 81px;} #contact_us_banner_bg h2, #contact_us_banner_bg h4{color: #ffffff;text-align: left;padding-left: 30px;} .text_describe h3{color: #2e8bc3; font-size: 28px; font-weight: 600;} .text_describe p{font-size: 1.4rem; color: #666;} .contactus-page::before{content: ''; width: 100%; height: 100%; display: block; z-index: -1; background-size: cover; -webkit-filter: blur(10px); filter: blur(10px); position: absolute; top: 0; right: 0;} .cu_customer_information{margin: 0 0 20px;} .cpo_massage_descrip{padding: 0;margin: 0;} .contactus-page .cu_form{width: 100%;} .contactus-page .form-holder .form #login, .contactus-page .form-holder .form #register{background-color: #ffffff!important;} .contactus-page input.input-material{width: 100%; border: none; border-bottom: 1px solid #d2d2d2; padding: 10px 0; outline-style: none;} .contactus-page input.input-material:focus{outline-style: none; border-bottom: 1px solid #4a93fd;} .contactus-page input.input-material ~ label{color: #aaa; position: absolute; top: 14px; left: 0; cursor: text; -webkit-transition: all 0.2s; transition: all 0.2s; font-weight: 300;} .contactus-page input.input-material ~ label.active{font-size: 14px; top: -15px; color: #4a93fd;} .contactus-page .form-group{max-width: 94%;margin-bottom: 30px;} .contactus-page .support_type_group{margin: 0 0 30px 0;} .contactus-page .support_type_group label{color: #777777;} #cu_content{width: 100%;border-radius: 8px;height: 150px;border: 1px solid #ccc;box-shadow: none;font-size: 13px;} #cpo_go_top{position: fixed; bottom: 30px; right: 28px; display: none; width: 44px; height: 44px; background: linear-gradient(135deg, #4a93fd, #1a6fe8); color: #fff; border-radius: 50%; box-shadow: 0 4px 14px rgba(74,147,253,0.45); cursor: pointer; z-index: 999; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; align-items: center; justify-content: center;} #cpo_go_top:hover{background: linear-gradient(135deg, #1a6fe8, #0d50c0); box-shadow: 0 6px 20px rgba(74,147,253,0.6); transform: translateY(-3px);} #cpo_go_top div{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;} #cpo_go_top .fa{font-size: 18px !important; line-height: 1;} #cpo_go_right{position: fixed; right: 0; top: 50%; margin-top: -5%; z-index: 999;} #cpo_go_right p a.cpo_a_btn{display: block!important; background-color: #1C86EE; border-radius: 10px; font-size: 16px; color: #FFFFFF; padding: 10px; margin-top: 10px; font-weight: bold; text-align: center; text-decoration: none;} #cpo_go_right p a.cpo_a_btn_hover{background-color: #FFFFFF; border: 1px solid #1C86EE; color: #1C86EE;;} .jig_fee_class{display: none;} #hint_lenght{display: none; font-size:12px; color:#db0700; margin:18px 0 -10px 0; padding-left:25px;} #hint_lenght_max{display: none; font-size:12px; color:#db0700; margin:18px 0 -10px 0; padding-left:25px;} #cpo_open_demo{margin-left: 20px; color: #2e8bc3;} #cpo_open_demo:hover{font-size: 27px; cursor: pointer;} #cpo_content_prompt_big{position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.8); z-index: 1000; overflow-y: scroll;} #demo_content_close{position: fixed; top: 50px; right: 30px; color: #FFFFFF;} .coupon-row{max-height: 366px;margin-top: 10px;overflow: hidden;} .cpo-7{max-height: 366px;position: relative;} .play_btn{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url("/website_cpo_sale/static/src/css/../images/tools_img/play.png") no-repeat 50% 50%; background-size: 70px 70px;z-index: 9;} .cpo-5{background: url("/website_cpo_sale/static/src/css/../images/tools_img/coupon_bg.png") no-repeat;background-size: 97% 100%;max-height: 366px;padding: 0;} .cpo-md-7 img{width: 100%;height: 366px;} .cpo-md-5{background-color: rgba(0, 0, 0, 0.5);width: 97%;height: 366px;} .cpo-left{width: 40%;height: 319px;float: left;text-align: center;} .cpo-right{width: 60%;max-height: 300px;float: left;overflow: hidden;} .cpo-right .no-coupon{font-size: 18px;color: #fff;font-weight: 600;margin: 60px 0 30px 0px;padding: 2px 10px;} .coupon-box{width: 270px;height: 110px;background: url("/website_cpo_sale/static/src/css/../images/tools_img/coupon_price.png") no-repeat; background-size: 270px 110px;color: #FFFFFF;margin-top: 25px;position: relative;display: inline-block;} .cpo-received{position: absolute;width: 100px;height: 100px;top: 50%;left: 50%;text-align: center;margin: -50px 0 0 -50px; border-radius: 50%;line-height: 100px;background-color: rgba(0,0,0,0.5);font-size: 20px;} .cpo-text{width: 60px;height: 100%;float: left;} .cpo-text .txt-span{display: block;width: 59%;text-align: center;color: #FFF;line-height: 25px;font-weight: 600;padding: 4px 0; margin: 0 auto;cursor: pointer;} .cpo-cont{width: 210px;height: 100%;float: left;} .coupon-top{width: 100%;height: 50%;} .coupon-top em{display: inline-block;margin: 10px 0 0 10px;font-size: 14px;vertical-align: top;} .coupon-top .txt-amount{display: inline-block;margin: 10px 0 0 2px;font-size: 22px;font-weight: 600;} .coupon-top .txt-condition{display: inline-block;margin: 10px 0 0 0;font-size: 12px;} .coupon-top .cpo-time{font-size: 12px;text-align: center;margin: 0;} .coupon-bottom{width: 100%;height: 50%;} .coupon-bottom .txt-p{font-size: 12px;margin: 0;padding: 5px 10px 0;} .cpo-coupon-message{font-size: 20px;margin-top: 80px;color: #fff;} .cpo-index-coupon{position: relative;} .mt-time2{position: absolute;top: 55px;right: -5px;margin-top: -17px;} .mt-time2 .btn{transform: rotate(90deg);} #order_tutorial{width: 100%;height: 642px;text-align: center;position: relative;margin-bottom: 20px;box-shadow: 1px 1px 15px; background-image: url("/website_cpo_sale/static/src/css/../images/tools_img/load_error.png");background-size: 100% 100%;} .order_tutorial_title{margin: 30px 0 25px 0;font-size: 25px;font-weight: 600;color: #2e8bc3;} #order_tutorial .video_load{width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 5;cursor: pointer; background-image: url("/website_cpo_sale/static/src/css/../images/video/index_video.png");background-size: 100% 100%;} #order_tutorial .video_load .load_gif{background-image: url("/website_cpo_sale/static/src/css/../images/tools_img/bf_black.png");width: 80px;height: 80px;display: block; background-size: 80px 80px;position: absolute;left: 50%;top: 50%;margin: -40px 0 0 -40px;} #order_tutorial .video_load .load_gif_load{background-image: url("/website_cpo_sale/static/src/css/../images/pcb_order_load.gif");width: 80px;height: 80px;display: block; background-size: 80px 80px;position: absolute;left: 50%;top: 50%;margin: -40px 0 0 -40px;} .list-inline > li{height: 25px;line-height: 25px;vertical-align: top;} .cpo_change_lang_us{display: inline-block;background-image: url("/website_cpo_sale/static/src/css/../images/tools_img/us.png");background-size: 40px 25px; width: 40px;height: 25px;} .cpo_change_lang_cn{display: inline-block;background-image: url("/website_cpo_sale/static/src/css/../images/tools_img/cn.png");background-size: 40px 25px; width: 40px;height: 25px;} table{-moz-border: 1px solid #ddd;} .panel_btn_position{position:fixed; top:0; background-color: #FFFFFF; left:0; z-index:999;} #panel_btn .panel-body p span{display: block; width: 88%; border-bottom: 1px dashed #000000; position: absolute; top: 50%; left: 50%; margin-left: -44%;} #panel_btn .panel-body .cpo_panel_btn{text-decoration: none; width: 240px; font-size: 20px; text-align: center; display: inline-block; padding: 5px; border-radius: 10px; margin: 5px 63px; background-color: #F5F5F5; font-weight: bold; position: relative; z-index: 10; color: #FFFFFF;} #panel_btn .panel-body .cpo_panel_btn:hover{color: #FFFFFF; background-color: #2e8bc3;} #cpo_advertising_con{position: fixed; left: 10px; top: 40%; z-index: 999; max-width: 334px;} #ad_wrap{border: 1px solid #1C86EE; border-radius: 10px; background-color: #FFFFFF; padding: 10px 15px;} #cpo_close_btn{position: absolute; top: 10px; right: 10px; color: #1C86EE; cursor: pointer;} #cpo_advertising_con h3{margin: 10px auto; text-align: center;} #cpo_advertising_con .ad_title_time p{text-align: center;} #cpo_advertising_con .ad_title_time span{padding: 2px 5px; font-weight: bold;} .cpo_pcba_title_style{text-align: center; font-size: 24px; font-weight: 600;} #cpo_my_company p{font-size: 16px; text-indent: 2em;} #cpo_my_company ul p{font-size: 16px; text-indent: 0;} #cpo_my_company ul li{font-size: 16px; padding: 2px 0; margin-left: 20px;} #contact_bg{background-image: url("/website_cpo_sale/static/src/css/../images/contact_bg.jpg");} .contactus_content{} .contactus_content h1{text-align: center; font-weight: 600; padding: 20px 0 0 0; margin: 0;} #con_add_pho .cu_info_cpo{overflow: hidden;} #con_add_pho .cu_info_cpo .cuic_title{position: relative;font-size: 18px; font-weight: 600;line-height: 26px;} #con_add_pho .cu_info_cpo .cuic_title i{display: inline-block;line-height: 26px;vertical-align: middle;} #con_add_pho .cpo_massage_contas{position: relative;} #con_add_pho h4 i{display: none;} #con_add_pho .cpo_massage_contas h4{margin: 0;} #con_add_pho .cpo_massage_contas h4 span{width: 100%; display: inline-block; text-align: left; font-size: 16px;} .cu_content_section{padding: 50px 0;} #con_add_pho .cpo_massage_descrip h4{text-align: left; color: #777777; font-size: 16px; margin: 0 0 30px;} #con_add_pho .cpo_mail_sale{margin: 0; display:inline-block; width:100%; color: #777777; font-size: 16px; text-align: left;} .contactus_content h4{font-size: 16px; padding-left: 20px;} .contactus_content .contact_tit{font-size: 16px; font-weight: 600; color: #0278E6;} .contactus_content .bottom_line{border-bottom: 3px solid #0278E6; width: 50px;} #ditu{padding: 20px 0;} #ditu img{width: 100%; height: 550px;} #cpo_foot_logo ul li{float: left; list-style: none; margin: 5px 5px; width: 80px; height: 80px;} #cpo_foot_logo ul li img{width: 80px; height: 80px;} #info{padding-left: 60px;} .cash-coupon-box{background-image: url("/website_cpo_sale/static/src/css/../images/tools_img/cpo-coupon.png"); background-repeat: no-repeat; background-size: 360px 110px; width: 360px; height: 110px; display: inline-block; vertical-align: top;} .cash-coupon-box-received{background-image: url("/website_cpo_sale/static/src/css/../images/tools_img/cpo-coupon_01.png"); background-repeat: no-repeat; background-size: 284px 110px; width: 284px; height: 110px; position: relative;} #cpo_receive_coupon .cash-coupon-box{margin: 5px 15px;} .cash-condition{display: inline-block; vertical-align: top; width: 42%; margin: 15px 0 0 10px;} .cash-coupon-content{position: relative;overflow: hidden;} .cpo_index_title{padding: 78px 20px!important;} .cash-box{display: inline-block;float: left;width: 50%;color: #ffffff;} .cash-left{color: #510000;width: 284px;padding-left: 15px;} .cash-right{width: 21%;} .cpo-cash-d{font-size: 14px;margin: 0 0 0 10px;max-height: 40px;overflow: hidden;max-width: 250px;} .cash-left .cpo-cash-money{display: inline-block; font-size: 36px; font-weight: 600; margin-top: 9px;} .cash-left .cpo-cash-money i{font-style: normal; font-size: 25px; display: inline-block; vertical-align: top;} .cpo-cash-btn{margin: 15px 0;color: #f2d025;display: inline-block;border-radius: 10px; padding: 2px 10px;background-color: #8a7c7c;font-size: 18px; cursor: pointer;width: 82%;height: 86px;opacity: 0;} .cpo-cash-receive{position: absolute;width: 100%;height: 110px;line-height: 110px; z-index: 99;left: 0;top: 0;text-align: center; background-color: rgba(0,0,0,0.6); font-size: 36px;font-weight: 700;border-radius: 10px; background-image: url("/website_cpo_sale/static/src/css/../images/tools_img/receiced_2.png");} a.cpo-cash-receive{position: absolute;width: 100%;height: 110px;line-height: 110px; z-index: 99;left: 0;top: 0;text-align: center; background-color: rgba(0,0,0,0.6);color: #ffffff; font-size: 30px;font-weight: 700;border-radius: 10px;} a.cpo-cash-receive:hover{color: #afbeff;} .cash-left .cash-money{color: #fff;display: inline-block;font-size: 32px; font-weight: 600;margin: 22px 0 0 45px;} .cash-left .cash-money i{font-size: 20px;font-style: normal;} .cash-left .cash-name{display: inline-block;margin: 5px 0 0 50px;text-align: center; font-size: 14px;color: #fff;} .cpo-cash-disc{font-size: 14px;margin: 25px 0 0 5px;} .set-space-between{display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center;} .hot-sale-list{width: 100%; height: 125px;} .hot-sale-list-header{width: 100%; height: 25px; background-color: #3aadf3; line-height: 25px; padding: 0 0.5em; border-top-left-radius: 5px; border-top-right-radius: 5px; display: flex;} .hot-sale-list-header span{width: 30%;color: #fff;font-weight: bold;font-size: 16px;} .hot-sale-list-header :nth-child(1){width: 16%;} .hot-sale-list-header :nth-child(3){text-align: center; width: 15%;} .hot-sale-list-header :nth-child(4){text-align: center;} .hot-sale-container{width: 100%; height: 100px; overflow: hidden; padding: 0 0.5em;} .the-detail{display: flex; flex-flow: row nowrap; justify-content: space-between; line-height: 26px; font-size: 16px;} .hot-sale-container:hover{cursor:pointer;} .hot-sale-container ul{margin-block-start: 0; margin-block-end: 0; list-style: none; padding-inline-start: 0;} .the-detail span{font-size: 0.9em; width: 30%;} .the-detail :nth-child(1){color: #000000; width: 16%;} .the-detail :nth-child(3){text-align: center; color: #000000; width: 15%;} .the-detail :nth-child(2){color: #006bff;} .the-detail :nth-child(4){color: #006bff; text-align: center;} .sale-list{top: -5px; position: relative; z-index: -1;} .hot-sale-container a:hover{color: #3e9df5 !important; cursor:pointer;} 

/* /website_cpo_sale/static/src/css/animate.css defined in bundle 'web.assets_frontend' */
 .animated{-webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;} .animated.infinite{-webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;} @-webkit-keyframes bounce{from, 20%, 53%, 80%, to{-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}40%, 43%{-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0);}90%{-webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0);}} @keyframes bounce{from, 20%, 53%, 80%, to{-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}40%, 43%{-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0);}70%{-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0);}90%{-webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0);}} .bounce{-webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom;} @-webkit-keyframes flash{from, 50%, to{opacity: 1;}25%, 75%{opacity: 0;}} @keyframes flash{from, 50%, to{opacity: 1;}25%, 75%{opacity: 0;}} .flash{-webkit-animation-name: flash; animation-name: flash;} @-webkit-keyframes pulse{from{-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}50%{-webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05);}to{-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}} @keyframes pulse{from{-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}50%{-webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05);}to{-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}} .pulse{-webkit-animation-name: pulse; animation-name: pulse;} @-webkit-keyframes rubberBand{from{-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}30%{-webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1);}40%{-webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1);}50%{-webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1);}65%{-webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1);}75%{-webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1);}to{-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}} @keyframes rubberBand{from{-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}30%{-webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1);}40%{-webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1);}50%{-webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1);}65%{-webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1);}75%{-webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1);}to{-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}} .rubberBand{-webkit-animation-name: rubberBand; animation-name: rubberBand;} @-webkit-keyframes shake{from, to{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}10%, 30%, 50%, 70%, 90%{-webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0);}20%, 40%, 60%, 80%{-webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0);}} @keyframes shake{from, to{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}10%, 30%, 50%, 70%, 90%{-webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0);}20%, 40%, 60%, 80%{-webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0);}} .shake{-webkit-animation-name: shake; animation-name: shake;} @-webkit-keyframes headShake{0%{-webkit-transform: translateX(0); transform: translateX(0);}6.5%{-webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg);}18.5%{-webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg);}31.5%{-webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg);}43.5%{-webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg);}50%{-webkit-transform: translateX(0); transform: translateX(0);}} @keyframes headShake{0%{-webkit-transform: translateX(0); transform: translateX(0);}6.5%{-webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg);}18.5%{-webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg);}31.5%{-webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg);}43.5%{-webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg);}50%{-webkit-transform: translateX(0); transform: translateX(0);}} .headShake{-webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake;} @-webkit-keyframes swing{20%{-webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg);}40%{-webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg);}60%{-webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg);}80%{-webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg);}to{-webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg);}} @keyframes swing{20%{-webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg);}40%{-webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg);}60%{-webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg);}80%{-webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg);}to{-webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg);}} .swing{-webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing;} @-webkit-keyframes tada{from{-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}10%, 20%{-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);}30%, 50%, 70%, 90%{-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);}40%, 60%, 80%{-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);}to{-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}} @keyframes tada{from{-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}10%, 20%{-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);}30%, 50%, 70%, 90%{-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);}40%, 60%, 80%{-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);}to{-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}} .tada{-webkit-animation-name: tada; animation-name: tada;} @-webkit-keyframes wobble{from{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}15%{-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);}30%{-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);}45%{-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);}60%{-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);}75%{-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);}to{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} @keyframes wobble{from{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}15%{-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);}30%{-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);}45%{-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);}60%{-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);}75%{-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);}to{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} .wobble{-webkit-animation-name: wobble; animation-name: wobble;} @-webkit-keyframes jello{from, 11.1%, to{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}22.2%{-webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg);}33.3%{-webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg);}44.4%{-webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg);}55.5%{-webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg);}66.6%{-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg);}77.7%{-webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg);}88.8%{-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg);}} @keyframes jello{from, 11.1%, to{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}22.2%{-webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg);}33.3%{-webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg);}44.4%{-webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg);}55.5%{-webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg);}66.6%{-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg);}77.7%{-webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg);}88.8%{-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg);}} .jello{-webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center;} @-webkit-keyframes bounceIn{from, 20%, 40%, 60%, 80%, to{-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}0%{opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3);}20%{-webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1);}40%{-webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9);}60%{opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03);}80%{-webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97);}to{opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}} @keyframes bounceIn{from, 20%, 40%, 60%, 80%, to{-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}0%{opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3);}20%{-webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1);}40%{-webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9);}60%{opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03);}80%{-webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97);}to{opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}} .bounceIn{-webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-name: bounceIn; animation-name: bounceIn;} @-webkit-keyframes bounceInDown{from, 60%, 75%, 90%, to{-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}0%{opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0);}60%{opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0);}75%{-webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0);}90%{-webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0);}to{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} @keyframes bounceInDown{from, 60%, 75%, 90%, to{-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}0%{opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0);}60%{opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0);}75%{-webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0);}90%{-webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0);}to{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} .bounceInDown{-webkit-animation-name: bounceInDown; animation-name: bounceInDown;} @-webkit-keyframes bounceInLeft{from, 60%, 75%, 90%, to{-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}0%{opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0);}60%{opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0);}75%{-webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0);}90%{-webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0);}to{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} @keyframes bounceInLeft{from, 60%, 75%, 90%, to{-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}0%{opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0);}60%{opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0);}75%{-webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0);}90%{-webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0);}to{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} .bounceInLeft{-webkit-animation-name: bounceInLeft; animation-name: bounceInLeft;} @-webkit-keyframes bounceInRight{from, 60%, 75%, 90%, to{-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}from{opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0);}60%{opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0);}75%{-webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0);}90%{-webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0);}to{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} @keyframes bounceInRight{from, 60%, 75%, 90%, to{-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}from{opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0);}60%{opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0);}75%{-webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0);}90%{-webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0);}to{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} .bounceInRight{-webkit-animation-name: bounceInRight; animation-name: bounceInRight;} @-webkit-keyframes bounceInUp{from, 60%, 75%, 90%, to{-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}from{opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0);}60%{opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0);}75%{-webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0);}90%{-webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0);}to{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} @keyframes bounceInUp{from, 60%, 75%, 90%, to{-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}from{opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0);}60%{opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0);}75%{-webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0);}90%{-webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0);}to{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} .bounceInUp{-webkit-animation-name: bounceInUp; animation-name: bounceInUp;} @-webkit-keyframes bounceOut{20%{-webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9);}50%, 55%{opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1);}to{opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3);}} @keyframes bounceOut{20%{-webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9);}50%, 55%{opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1);}to{opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3);}} .bounceOut{-webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-name: bounceOut; animation-name: bounceOut;} @-webkit-keyframes bounceOutDown{20%{-webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0);}40%, 45%{opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0);}to{opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0);}} @keyframes bounceOutDown{20%{-webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0);}40%, 45%{opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0);}to{opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0);}} .bounceOutDown{-webkit-animation-name: bounceOutDown; animation-name: bounceOutDown;} @-webkit-keyframes bounceOutLeft{20%{opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0);}to{opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0);}} @keyframes bounceOutLeft{20%{opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0);}to{opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0);}} .bounceOutLeft{-webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft;} @-webkit-keyframes bounceOutRight{20%{opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0);}to{opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0);}} @keyframes bounceOutRight{20%{opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0);}to{opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0);}} .bounceOutRight{-webkit-animation-name: bounceOutRight; animation-name: bounceOutRight;} @-webkit-keyframes bounceOutUp{20%{-webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0);}40%, 45%{opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0);}to{opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0);}} @keyframes bounceOutUp{20%{-webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0);}40%, 45%{opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0);}to{opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0);}} .bounceOutUp{-webkit-animation-name: bounceOutUp; animation-name: bounceOutUp;} @-webkit-keyframes fadeIn{from{opacity: 0;}to{opacity: 1;}} @keyframes fadeIn{from{opacity: 0;}to{opacity: 1;}} .fadeIn{-webkit-animation-name: fadeIn; animation-name: fadeIn;} @-webkit-keyframes fadeInDown{from{opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);}to{opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} @keyframes fadeInDown{from{opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);}to{opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} .fadeInDown{-webkit-animation-name: fadeInDown; animation-name: fadeInDown;} @-webkit-keyframes fadeInDownBig{from{opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0);}to{opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} @keyframes fadeInDownBig{from{opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0);}to{opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} .fadeInDownBig{-webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig;} @-webkit-keyframes fadeInLeft{from{opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}to{opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} @keyframes fadeInLeft{from{opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}to{opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} .fadeInLeft{-webkit-animation-name: fadeInLeft; animation-name: fadeInLeft;} @-webkit-keyframes fadeInLeftBig{from{opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0);}to{opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} @keyframes fadeInLeftBig{from{opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0);}to{opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} .fadeInLeftBig{-webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig;} @-webkit-keyframes fadeInRight{from{opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);}to{opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} @keyframes fadeInRight{from{opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);}to{opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} .fadeInRight{-webkit-animation-name: fadeInRight; animation-name: fadeInRight;} @-webkit-keyframes fadeInRightBig{from{opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0);}to{opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} @keyframes fadeInRightBig{from{opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0);}to{opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} .fadeInRightBig{-webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig;} @-webkit-keyframes fadeInUp{from{opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);}to{opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} @keyframes fadeInUp{from{opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);}to{opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} .fadeInUp{-webkit-animation-name: fadeInUp; animation-name: fadeInUp;} @-webkit-keyframes fadeInUpBig{from{opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0);}to{opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} @keyframes fadeInUpBig{from{opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0);}to{opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} .fadeInUpBig{-webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig;} @-webkit-keyframes fadeOut{from{opacity: 1;}to{opacity: 0;}} @keyframes fadeOut{from{opacity: 1;}to{opacity: 0;}} .fadeOut{-webkit-animation-name: fadeOut; animation-name: fadeOut;} @-webkit-keyframes fadeOutDown{from{opacity: 1;}to{opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);}} @keyframes fadeOutDown{from{opacity: 1;}to{opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);}} .fadeOutDown{-webkit-animation-name: fadeOutDown; animation-name: fadeOutDown;} @-webkit-keyframes fadeOutDownBig{from{opacity: 1;}to{opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0);}} @keyframes fadeOutDownBig{from{opacity: 1;}to{opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0);}} .fadeOutDownBig{-webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig;} @-webkit-keyframes fadeOutLeft{from{opacity: 1;}to{opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}} @keyframes fadeOutLeft{from{opacity: 1;}to{opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}} .fadeOutLeft{-webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft;} @-webkit-keyframes fadeOutLeftBig{from{opacity: 1;}to{opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0);}} @keyframes fadeOutLeftBig{from{opacity: 1;}to{opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0);}} .fadeOutLeftBig{-webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig;} @-webkit-keyframes fadeOutRight{from{opacity: 1;}to{opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);}} @keyframes fadeOutRight{from{opacity: 1;}to{opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);}} .fadeOutRight{-webkit-animation-name: fadeOutRight; animation-name: fadeOutRight;} @-webkit-keyframes fadeOutRightBig{from{opacity: 1;}to{opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0);}} @keyframes fadeOutRightBig{from{opacity: 1;}to{opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0);}} .fadeOutRightBig{-webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig;} @-webkit-keyframes fadeOutUp{from{opacity: 1;}to{opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);}} @keyframes fadeOutUp{from{opacity: 1;}to{opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);}} .fadeOutUp{-webkit-animation-name: fadeOutUp; animation-name: fadeOutUp;} @-webkit-keyframes fadeOutUpBig{from{opacity: 1;}to{opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0);}} @keyframes fadeOutUpBig{from{opacity: 1;}to{opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0);}} .fadeOutUpBig{-webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig;} @-webkit-keyframes flip{from{-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}40%{-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}50%{-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}80%{-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}to{-webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}} @keyframes flip{from{-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}40%{-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}50%{-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}80%{-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}to{-webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}} .animated.flip{-webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip;} @-webkit-keyframes flipInX{from{-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0;}40%{-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}60%{-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1;}80%{-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg);}to{-webkit-transform: perspective(400px); transform: perspective(400px);}} @keyframes flipInX{from{-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0;}40%{-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}60%{-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1;}80%{-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg);}to{-webkit-transform: perspective(400px); transform: perspective(400px);}} .flipInX{-webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX;} @-webkit-keyframes flipInY{from{-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0;}40%{-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}60%{-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1;}80%{-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg);}to{-webkit-transform: perspective(400px); transform: perspective(400px);}} @keyframes flipInY{from{-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0;}40%{-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}60%{-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1;}80%{-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg);}to{-webkit-transform: perspective(400px); transform: perspective(400px);}} .flipInY{-webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY;} @-webkit-keyframes flipOutX{from{-webkit-transform: perspective(400px); transform: perspective(400px);}30%{-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1;}to{-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0;}} @keyframes flipOutX{from{-webkit-transform: perspective(400px); transform: perspective(400px);}30%{-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1;}to{-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0;}} .flipOutX{-webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important;} @-webkit-keyframes flipOutY{from{-webkit-transform: perspective(400px); transform: perspective(400px);}30%{-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1;}to{-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0;}} @keyframes flipOutY{from{-webkit-transform: perspective(400px); transform: perspective(400px);}30%{-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1;}to{-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0;}} .flipOutY{-webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY;} @-webkit-keyframes lightSpeedIn{from{-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0;}60%{-webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1;}80%{-webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1;}to{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;}} @keyframes lightSpeedIn{from{-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0;}60%{-webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1;}80%{-webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1;}to{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;}} .lightSpeedIn{-webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;} @-webkit-keyframes lightSpeedOut{from{opacity: 1;}to{-webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0;}} @keyframes lightSpeedOut{from{opacity: 1;}to{-webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0;}} .lightSpeedOut{-webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;} @-webkit-keyframes rotateIn{from{-webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0;}to{-webkit-transform-origin: center; transform-origin: center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;}} @keyframes rotateIn{from{-webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0;}to{-webkit-transform-origin: center; transform-origin: center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;}} .rotateIn{-webkit-animation-name: rotateIn; animation-name: rotateIn;} @-webkit-keyframes rotateInDownLeft{from{-webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0;}to{-webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;}} @keyframes rotateInDownLeft{from{-webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0;}to{-webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;}} .rotateInDownLeft{-webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft;} @-webkit-keyframes rotateInDownRight{from{-webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0;}to{-webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;}} @keyframes rotateInDownRight{from{-webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0;}to{-webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;}} .rotateInDownRight{-webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight;} @-webkit-keyframes rotateInUpLeft{from{-webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0;}to{-webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;}} @keyframes rotateInUpLeft{from{-webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0;}to{-webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;}} .rotateInUpLeft{-webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft;} @-webkit-keyframes rotateInUpRight{from{-webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0;}to{-webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;}} @keyframes rotateInUpRight{from{-webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0;}to{-webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;}} .rotateInUpRight{-webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight;} @-webkit-keyframes rotateOut{from{-webkit-transform-origin: center; transform-origin: center; opacity: 1;}to{-webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0;}} @keyframes rotateOut{from{-webkit-transform-origin: center; transform-origin: center; opacity: 1;}to{-webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0;}} .rotateOut{-webkit-animation-name: rotateOut; animation-name: rotateOut;} @-webkit-keyframes rotateOutDownLeft{from{-webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1;}to{-webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0;}} @keyframes rotateOutDownLeft{from{-webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1;}to{-webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0;}} .rotateOutDownLeft{-webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft;} @-webkit-keyframes rotateOutDownRight{from{-webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1;}to{-webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0;}} @keyframes rotateOutDownRight{from{-webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1;}to{-webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0;}} .rotateOutDownRight{-webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight;} @-webkit-keyframes rotateOutUpLeft{from{-webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1;}to{-webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0;}} @keyframes rotateOutUpLeft{from{-webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1;}to{-webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0;}} .rotateOutUpLeft{-webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft;} @-webkit-keyframes rotateOutUpRight{from{-webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1;}to{-webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0;}} @keyframes rotateOutUpRight{from{-webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1;}to{-webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0;}} .rotateOutUpRight{-webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight;} @-webkit-keyframes hinge{0%{-webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}20%, 60%{-webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}40%, 80%{-webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1;}to{-webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0;}} @keyframes hinge{0%{-webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}20%, 60%{-webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}40%, 80%{-webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1;}to{-webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0;}} .hinge{-webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-name: hinge; animation-name: hinge;} @-webkit-keyframes jackInTheBox{from{opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom;}50%{-webkit-transform: rotate(-10deg); transform: rotate(-10deg);}70%{-webkit-transform: rotate(3deg); transform: rotate(3deg);}to{opacity: 1; -webkit-transform: scale(1); transform: scale(1);}} @keyframes jackInTheBox{from{opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom;}50%{-webkit-transform: rotate(-10deg); transform: rotate(-10deg);}70%{-webkit-transform: rotate(3deg); transform: rotate(3deg);}to{opacity: 1; -webkit-transform: scale(1); transform: scale(1);}} .jackInTheBox{-webkit-animation-name: jackInTheBox; animation-name: jackInTheBox;} @-webkit-keyframes rollIn{from{opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);}to{opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} @keyframes rollIn{from{opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);}to{opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} .rollIn{-webkit-animation-name: rollIn; animation-name: rollIn;} @-webkit-keyframes rollOut{from{opacity: 1;}to{opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);}} @keyframes rollOut{from{opacity: 1;}to{opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);}} .rollOut{-webkit-animation-name: rollOut; animation-name: rollOut;} @-webkit-keyframes zoomIn{from{opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3);}50%{opacity: 1;}} @keyframes zoomIn{from{opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3);}50%{opacity: 1;}} .zoomIn{-webkit-animation-name: zoomIn; animation-name: zoomIn;} @-webkit-keyframes zoomInDown{from{opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}60%{opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}} @keyframes zoomInDown{from{opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}60%{opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}} .zoomInDown{-webkit-animation-name: zoomInDown; animation-name: zoomInDown;} @-webkit-keyframes zoomInLeft{from{opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}60%{opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}} @keyframes zoomInLeft{from{opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}60%{opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}} .zoomInLeft{-webkit-animation-name: zoomInLeft; animation-name: zoomInLeft;} @-webkit-keyframes zoomInRight{from{opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}60%{opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}} @keyframes zoomInRight{from{opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}60%{opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}} .zoomInRight{-webkit-animation-name: zoomInRight; animation-name: zoomInRight;} @-webkit-keyframes zoomInUp{from{opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}60%{opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}} @keyframes zoomInUp{from{opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}60%{opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}} .zoomInUp{-webkit-animation-name: zoomInUp; animation-name: zoomInUp;} @-webkit-keyframes zoomOut{from{opacity: 1;}50%{opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3);}to{opacity: 0;}} @keyframes zoomOut{from{opacity: 1;}50%{opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3);}to{opacity: 0;}} .zoomOut{-webkit-animation-name: zoomOut; animation-name: zoomOut;} @-webkit-keyframes zoomOutDown{40%{opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}to{opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}} @keyframes zoomOutDown{40%{opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}to{opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}} .zoomOutDown{-webkit-animation-name: zoomOutDown; animation-name: zoomOutDown;} @-webkit-keyframes zoomOutLeft{40%{opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);}to{opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center;}} @keyframes zoomOutLeft{40%{opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);}to{opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center;}} .zoomOutLeft{-webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft;} @-webkit-keyframes zoomOutRight{40%{opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);}to{opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center;}} @keyframes zoomOutRight{40%{opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);}to{opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center;}} .zoomOutRight{-webkit-animation-name: zoomOutRight; animation-name: zoomOutRight;} @-webkit-keyframes zoomOutUp{40%{opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}to{opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}} @keyframes zoomOutUp{40%{opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}to{opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}} .zoomOutUp{-webkit-animation-name: zoomOutUp; animation-name: zoomOutUp;} @-webkit-keyframes slideInDown{from{-webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible;}to{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} @keyframes slideInDown{from{-webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible;}to{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} .slideInDown{-webkit-animation-name: slideInDown; animation-name: slideInDown;} @-webkit-keyframes slideInLeft{from{-webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible;}to{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} @keyframes slideInLeft{from{-webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible;}to{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} .slideInLeft{-webkit-animation-name: slideInLeft; animation-name: slideInLeft;} @-webkit-keyframes slideInRight{from{-webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible;}to{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} @keyframes slideInRight{from{-webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible;}to{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} .slideInRight{-webkit-animation-name: slideInRight; animation-name: slideInRight;} @-webkit-keyframes slideInUp{from{-webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible;}to{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} @keyframes slideInUp{from{-webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible;}to{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} .slideInUp{-webkit-animation-name: slideInUp; animation-name: slideInUp;} @-webkit-keyframes slideOutDown{from{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}to{visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);}} @keyframes slideOutDown{from{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}to{visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);}} .slideOutDown{-webkit-animation-name: slideOutDown; animation-name: slideOutDown;} @-webkit-keyframes slideOutLeft{from{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}to{visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}} @keyframes slideOutLeft{from{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}to{visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}} .slideOutLeft{-webkit-animation-name: slideOutLeft; animation-name: slideOutLeft;} @-webkit-keyframes slideOutRight{from{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}to{visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);}} @keyframes slideOutRight{from{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}to{visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);}} .slideOutRight{-webkit-animation-name: slideOutRight; animation-name: slideOutRight;} @-webkit-keyframes slideOutUp{from{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}to{visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);}} @keyframes slideOutUp{from{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}to{visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);}} .slideOutUp{-webkit-animation-name: slideOutUp; animation-name: slideOutUp;} 

/* /website_cpo_sale/static/src/css/mobile_style.css defined in bundle 'web.assets_frontend' */
 @media screen and (max-width: 300px){header a.navbar-brand img{height: 55px; margin-top: 0;}header .container ul li a{padding: 5px 7px !important; height: 36px!important; line-height: 32px!important;}} @media screen and (max-width: 400px){#modal_express .form_express{width: auto!important; height: auto!important; line-height: inherit!important; text-align: center;}#modal_express .express_conter{float: none!important;}.modal-footer{text-align: center!important;}.website_news .news_right{width: 64%!important;}.my-video-dimensions{width: 350px!important;height: 214px!important;margin: auto auto;}.coupon-top em{margin: 10px 0 0 0!important;}.cpo-7{padding: 0;}.cpo_country_list{max-width: 268px;}.combo-select{max-width: 268px;}.cpo_country_list input{width: 266px;}#cpo_foot_logo ul li{width: 76px;height: 76px;}#cpo_foot_logo ul li img{width: 76px;height: 76px;}} @media screen and (max-width: 500px){header .navbar{position: relative;}header .navbar-default .navbar-collapse{width: 100%;margin: auto auto;}header .container ul.nav{background-color: #FFFFFF; z-index: 1000; width: 100%; height: 100%; margin-top: 0;}header .container ul li{line-height: 36px;}header .container ul li a{height: 100%; line-height: 36px; padding: 0 0 0 15px;}header .navbar .navbar-nav>li>a{padding: 5px 10px;}.navbar.navbar-static-top ul.nav > li.divider{margin-top: 0; padding: 0;}.navbar-nav .open .dropdown-menu{background-color: #FFFFFF;}.container > .navbar-header{padding-top: 1px; height: 60px; background: #FFFFFF; width: 100%;}.navbar-header .logo .img-responsive{height: 100%;}#row_style .row{margin: 0!important;}#panel_btn{position: static!important; left: 0!important; margin-left: 0!important;}#panel_btn .panel-body p span{display: none;}#cpo_foot_logo ul{height:100px; padding-left:0;}#info{padding-left: 15px;}header a.navbar-brand.logo{width: 80%;height: 60px;}.slick-prev{width: 16%;left: -3%;z-index: 9;}.slick-next{width: 16%;right: -3%;z-index: 9;}.cpo-material-box{position: relative;}.cpo-product-an ul li{margin: 35px 0;font-size: 12px;padding: 10px 2px;}.mat-time .cpo-mat-discr{margin-top: 5px;}#index-coupon .cash-coupon-box{margin: 2px 0;}#cpo_receive_coupon .cash-coupon-box{margin: 5px 0;}.banner-left .ad-process h1{font-size: 10px;margin: 24px 0 16px 0;}.banner-left .ad-process .ad-money .m-title{font-size: 16px;margin-top: 10px;}.banner-left .ad-process .ad-money .m-digis{font-size: 25px;}.natifi-cont{padding: 10px;}.navbar-default .navbar-nav > li > a:hover{background-color: #ffffff;border-bottom: none;}.step_process{display: none;}.cpo_product_left .content_lb{margin: auto;}.cpo_product_right .content_lb{margin: auto;}.news_right{width: 65% !important;}.website_news{margin-top: 10px}.product_left_title p{max-width: 100%;}.cpo_order_content .col-md-5{padding: 10px 5px;}.cpo-5{background: url(/website_cpo_sale/static/src/css/../images/tools_img/coupon_bg.png) no-repeat 0px 0px;background-size: 100% 100%;margin-top: 5px;}.coupon-row{max-height: 100%;}.my-video-dimensions{width: 384px;height: 214px;margin: auto;}.cpo-md-5{width: 100%;margin: auto;}.cpo-left{width: 30%;}.cpo-right{width: 68%;}#my_iframe{max-width: 414px;}#process_video{height: 231px;}#order_tutorial{min-height: 231px;height: 100%;}#cpo_col_md_padding{padding: 0;min-width: 100%!important;}#cpo_quotations_list{padding: 0 5px;}.cpo-banner-line .pcb_line .pcb_dimensions input{width: 33%;}#cpo_col_md_padding .pcb_instant_quote .pcb_line{margin: 2px auto 0!important;padding-bottom: 10px!important;}.cpo-banner-line .pcb_line .pcb_pub_style .pcba_unit{width: 18%!important;}.electronic_search{width: 78%;}.stencil_pub_style select.cpo_stencil_size{width: 64%;padding: 2px 0;font-size: 12px;}.height-82vh{height: 100vh;}.cpo-slider-content{top: -164px;right: 0;}.cpo_index_title{position: relative; top: -250px; width: 338px; left: 0;}.redister_content{width: 90%;margin: 18% auto 0;}.cpo_index_title h1{font-size: 20px!important;}.cpo_index_title h4{font-size: 14px;}.owl-dots{bottom: 70px;}.slider-active.owl-carousel .owl-nav div{display: none;}.cpo-slider-content{left: 0;}.cpo-slider-c-p{width: 100%;}.cpo-w88{width: 84%;}.cpo_board{width: 40%;}input.cpo-submit{width: 66%;}.slider-content-wrap{padding: 20px;}.cpo-mt-100{height: 100%;max-height: 226px;padding: 0;}.cpo-flex-item{width: 45%;}.banner-left{margin-top: 360px;}.cpo-apfc-area{padding-top: 0!important;}.cpo-notification{box-shadow: none;}.natifi-close{top: 6%;}.stamp-box{padding: 0;width: 350px;}.stamp .par{width: 194px!important;}.stamp-box .copy{min-height: 112px;}.mt-time2{top: 130px; right: 39%;}.mt-time2 .btn{transform: rotate(0deg);}#create_pcba_order input.cpo-w88{width: 84%!important;}#movie_process .modal-dialog, #movie_company .modal-dialog{width: 342px;margin: auto auto;}#movie_company_video{width: 340px!important;}#movie_process_video{width: 340px!important;}#movie_process .modal-body{padding: 0!important;}#movie_company .modal-body{padding: 0!important;}.cpo-product-an ul{width: 100%;}.cpo-product-img{width: 100%;margin-right: 0;}.cpo-product-desc-one{width: 100%;}.cpo-pd-item{min-height: 190px;}.copyright .text-muted{font-size: 14px; text-align: center;}.copyright .social-icon ul{text-align: center;}.open-time ul li span{float: inherit;}.order-nav-ul{flex-wrap: wrap;}.order-nav-li{flex: auto;}.order-nav-active{background: none;}.flex_form{padding: 0 15px;}.show_pcb_special{width: 50%;}.pcb_other_fee{width: 100%;}.cpo-box{margin: 0 auto 10px;}.cpo-box .cpo-box-select{width: 90%;}.cpo-box .cpo-box-input{width: 64%;}.cpo-box .cpo-box-width{width: 40%;}.cpo-box .cpo-box-length{width: 40%;}.pcb_need_special_btn{width: 50%;}.cpo_pcb_special .cpo-box .cpo-box-select{width: 90%;}.cpo_pcb_special .cpo-box .cpo-box-input{width: 90%;}.cpo_pcb_special .special_title{font-size: 16px;margin-bottom: 30px;}.terms_conditions_btn{position: relative;left: 50%;margin-left: -35px;bottom: 0;}.cpo_temrs_content{padding: 0 15px;}.cpo_service_box{margin-top: 40px;}.help-container{padding: 0;}.help-page .d-flex{flex-wrap: wrap;}.help-page nav.side-navbar{max-width: 100%;min-width: 100%;}.help-page .navbar-collapse{padding: 0 0 10px 0;}.help-page .navbar-toggle .icon-bar{background-color: #888;}.cpo_conversation_content h2.conversation_title{font-size: 20px;}.cpo_im_box_p p{font-size: 15px;}.cpo_update_file{padding: 5px 0 10px 0;}.cpo_update_file .cpo_file_line{margin-top: 5px;}.panel_img_size{display: none;}.cpo_input_material a{margin-bottom: 5px;}#pcb_need{width: 50%;}#cpo_calcula_title{position: static;}.special_line{height: 100%;}.cpo_pcb_special .special_title{height: 100%;line-height: 18px;text-align: center;}.special_length_line{text-align: center;}.cpo_pcb_special .special_title{text-align: center;}.cpo_about_us{display: none!important;}.show_pcb_info{width: 45%!important;}.cpo_conversation_content{display: none!important;}#cpo_shrink_magnify{display: none;}.cpo_calcula_title{max-width: 100%;}.cpo_try_quantity_title{margin-top: 5px;}.cpo_try_order_quantity{padding-top: 5px;}.cpo_stencil_special .stencil_special_re{width: 96%;}.pcb_other_fee{left: 0;}.cpo-fee .cpo-big-line label{padding-left: 5px;}.cpo-fee .cpo-control{width: 40%;}.cpo-fee .cpo-big-line input.form-control{width: 70%;}.cpo-order-detailed .special_line{width: 100%;}.cpo-order-detailed .cpo-big-line label{width: 48%;}.generated_order_upload .order_upload_btn{font-size: 12px;padding: 4px;}.oe_website_sale .oe_cart table thead, .oe_website_sale #modal_optional_products table thead{display: contents!important;}#cpo_delivery_methods{text-align: left;}#cpo_delivery_methods .methods_chinapcbone{vertical-align: bottom;}#cpo_delivery_methods .methods_select{display: block;}#pcb_sale_quotation_line{font-size: 12px;}.orders_vertical_align{font-size: 12px;}.orders_vertical_align .cpo-xs-4-span{padding: 0;}table.dataTable tbody th, table.dataTable tbody td{font-size: 12px!important;}#cart_products tbody th, #cart_products tbody td{padding: 2px 5px!important;font-size: 12px;}.get_express_table .col-xs-4{padding: 2px;}.express_ul li p.cpo_express_ul_p{display: block;line-height: 18px;text-align: left;margin: 0;padding: 0;}.express_ul li{height: 100%;}.express_ul li a{width: 100%;display: block;visibility: initial!important;text-align: center;}.express_ul .cpo_provider_name{margin-left: 0px;}.express_ul .cpo_provider_no{margin-left: 0px;}.content-inner header.ac-header .container-fluid{padding: 0;}.ac-page .container-fluid{padding: 0 10px;}.item-flex .item{min-width: 33.33333%;}section.dashboard-counts .number strong, section.dashboard-paid .number strong{font-size: 20px;}section.dashboard-counts .icon i, section.dashboard-paid .icon i{font-size: 20px;}section.dashboard-counts .title, section.dashboard-paid .title{font-size: 12px;}#ele_cpo_all{position: static!important; display: none;}#all_cpo_ele_right{position: relative!important; margin-left: 0!important;}#cpo_header_selection{overflow: scroll; margin-left: 0!important;}#table2xx_wrapper{overflow: scroll;}.contactus_content h4{padding-left: 0!important;}#con_add_pho .cpo_massage_descrip{padding: 10px;}#xiangdao{max-width: 414px; display: none;}#quotation_row_sty{margin: 0;}#ele_table{width: 95%; padding-left: 30px; padding-right: 30px;}#ele_table #hint_lenght{margin-top: 0;}#ele_table_middle{width: 95%; padding-left: 30px; padding-right: 30px;}#ele_table_middle #button_jisuan{margin-top: 5%; margin-left: 40%;}#ele_table_right{width: 95%; padding-left: 30px; padding-right: 30px;}#pcb_quo .table .pcb_urgent{width: 65%!important; margin-top: 5px;}.js_cpo_delete_product{display: block!important;}#cpo_confirm_back_bom{position: absolute; right: 36%; top: 80%;}#pcb_form_act #check_file_atta{font-size: 12px!important; padding: 4px 6px!important;}#cpo_title_top .cpo_select_font{height: 120px;}#cpo_title_top #select_nav .cpo_check_excel_set{width: 100%;}#cpo_title_top #select_nav .cpo_bom_fields_ref{float: right;}#content_table{overflow: scroll;}#mfesecure-ts-image{margin-bottom: 40px!important;}.o_chat_window{z-index: 1000004!important;}#bom_order_detail_row .cpo_text_right{float: left!important;}#cpo_pcb_quotation .form-group .form-control{font-size: 12px!important; padding-right: 0!important; padding-left: 0!important;}#cpo_pcb_btn{margin: 10px auto!important; text-align: center!important;}.pcb_surface .cpo_pcb_surface{width: 40%!important;}.pcb_surface .cpo_pcb_surface_more{width: 40%!important;}.pcb_surface .cpo_pcb_surface .pcb_immersion_title{margin-left:5px!important;}.row_padding_value{padding-left: 15px!important; padding-right: 15px!important;ght: 0!important;}#pcb_col_md_8{height: 100%!important; padding: 60px 14px!important; width: 96%!important; margin-left: -48%!important;}#pcb_col_md_8 .table tr td{line-height: 20px!important;}#pcb_myModal .pcb_confirm_radio .pcb_urgent_day{width: 21%!important;}#cpo_pcb_expedited_select{position: static!important; right: 0;}#pcb_select_result .pcb_surface{width: 100%!important;}.check_data{width: 50%;}.cpo_td_sp3{overflow: scroll;}#pcb_need{width: 44%;}.cpo_input_needpcb_group .set_contetn .set_pcs_qty{width: 60px;padding: 5px 0;}.cpo_input_size .set_contetn{padding: 0;}#cpo_iframe{width: 100%!important;height: 216px;margin: auto;}.ac-page .navbar-toggle .icon-bar{background-color: #888;}.ac-page .d-flex{flex-wrap: wrap;}.ac-page nav.side-navbar{min-width: 100%;max-width: 100%;}.ac-page .pi-info{flex-wrap: wrap;}.ac-page .pi-info .pi-info-left{width: 100%;}.ac-page .pi-info .pi-info-left .pi-tx{width: 70px;height: 70px;}.ac-page .pi-info .pi-info-left .pi-tx img{width: 60px;height: 60px;margin: 4px auto;}.ac-page .pi-info .pi-info-right{width: 100%;margin-left: 0;}.ac-page .pi-info .pi-info-right .pi-info-ul .pi-info-li p.pi-info-balance{width: 60%;}.ac-page .pi-info .pi-info-right .pi-info-ul .pi-info-li p.pi-info-balance input{font-size: 24px;}.ac-page .pi-info-li label{font-size: 14px;}.cpo-od-ul{width: 500px;}.cpo-od-ul .cpo-od-li .od-li-content .od-li-span{font-size: 12px;}#home_order_details_Modal .modal-dialog{width: 94%;}#home_order_details_Modal .order-details-data .odd-li div{min-width: 100%;}.ac-page .card-body .cpo_message_tabel{width: 500px;}#cpo_message_content_form .form-group .message-content{width: 68%;}} @media screen and (min-width: 501px) and (max-width: 767px){header .container ul.nav{background-color: #FFFFFF; z-index: 1000; height: 300px; margin-top: 0;}.navbar-nav > li > .dropdown-menu{background-color: #FFFFFF;}.navbar-nav > li{background-color: #FFFFFF;}.navbar-default .navbar-collapse{margin-top: 30px;}.navbar.navbar-static-top ul.nav > li.divider{margin-top: 0; padding: 0;}header .container ul li a{height: 40px; line-height: 21px;}#panel_btn{left: 0!important; margin-left: 0!important;}#panel_btn .panel-body p{display: -webkit-flex; display: flex; display: -ms-flexbox;}#panel_btn .panel-body .cpo_panel_btn{flex: 1; max-width: 240px; font-size: 14px; margin: 5px 5px; -ms-flex: 1;}#cpo_foot_logo ul{height:100px; padding-left:0;}#info{padding-left: 15px;}.js_cpo_delete_product{display: block!important;}#ele_cpo_all{width: 100%!important; position: static!important;}#all_cpo_ele_right{margin-left: 15px!important;}#xiangdao{max-width: 414px; display: none;}#quotation_row_sty{margin: 0;}#ele_table{width: 95%; padding-left: 30px; padding-right: 30px;}#ele_table #hint_lenght{margin-top: 0;}#ele_table_middle{width: 95%; padding-left: 30px; padding-right: 30px;}#ele_table_middle #button_jisuan{margin-top: 5%; margin-left: 40%;}#ele_table_right{width: 95%; padding-left: 30px; padding-right: 30px;}#cpo_confirm_back_bom{position: absolute; right: 40%; top: 80%;}#cpo_title_top .cpo_select_font{height: 120px;}#cpo_title_top #select_nav .cpo_check_excel_set{width: 100%;}#cpo_title_top #select_nav .cpo_bom_fields_ref{float: right;}#content_table{overflow: scroll;}#mfesecure-ts-image{margin-bottom: 40px!important;}.o_chat_window{z-index: 1000004!important;}#cpo_pcb_btn{margin: 10px auto!important; text-align: center!important;}#pcb_col_md_8{padding: 60px 40px!important; width: 98%!important; margin-left: -48%!important;}#cpo_pcb_expedited_select{position: static!important; right: 0;}.cpo_about_us{display: none!important;}} @media screen and (min-width: 768px) and (max-width: 1199px){#panel_btn{left: 0!important; margin-left: 0!important;}#panel_btn .panel-body .cpo_panel_btn{width: 200px; margin: 5px 30px;}#cpo_foot_logo ul{height:100px; padding-left:0;}#info{padding-left: 15px;}} @media screen and (min-width: 768px) and (max-width: 991px){header .container ul li a{font-size: 10px; padding: 10px 4px; line-height: 68px;}.navbar.navbar-static-top ul.nav > li.divider{margin-top: 0; padding: 0;}#ele_cpo_all{float: left;}#all_cpo_ele_right{float: right;}#cpo_pcb_btn{margin: 10px auto!important; text-align: center!important;}.container > .navbar-header{width: 18%!important; margin-top: 18px!important;}#pcb_col_md_8{margin-left: -54%!important; width: 110%!important;}.website_news{height: 120px;}.website_news .cpo_md6_over{overflow: hidden;}.step_process li.online_quote .process_photo{background: url("/website_cpo_sale/static/src/css/../images/process/stepprocess_01.png") 16px 7px no-repeat;background-size: 20px 20px;}.step_process li.add_to_cart .process_photo{background: url("/website_cpo_sale/static/src/css/../images/process/stepprocess_03.png") 16px 7px no-repeat;background-size: 20px 20px;}.step_process li.review_order .process_photo{background: url("/website_cpo_sale/static/src/css/../images/process/stepprocess_05.png") 16px 7px no-repeat;background-size: 20px 20px;}.step_process li.billing_shipping .process_photo{background: url("/website_cpo_sale/static/src/css/../images/process/stepprocess_07.png") 16px 7px no-repeat;background-size: 20px 20px;}.step_process li.wait_confirm .process_photo{background: url("/website_cpo_sale/static/src/css/../images/process/stepprocess_09.png") 16px 7px no-repeat;background-size: 20px 20px;}.step_process li.delivery .process_photo{background: url("/website_cpo_sale/static/src/css/../images/process/stepprocess_11.png") 16px 7px no-repeat;background-size: 20px 20px;}.step_process li.confirmation .process_photo{background: url("/website_cpo_sale/static/src/css/../images/process/stepprocess_13.png") 16px 7px no-repeat;background-size: 20px 20px;}.step_process li .process_decoration{width: 5px;margin-top: 18px;}.step_process li .process_photo{width: 52px;height: 38px;margin: 0 10px;}.step_process p{font-size: 12px;}.online_prompt{height: 38px;}.my-video-dimensions{width: 100%;}.cpo_product_right .content_lb{max-width: 100%;}.product_left_title p{max-width: 100%;}.cpo_product_left .content_lb{max-width: 100%;}.content_lb .lb_click_item{max-width: 100%;}.content_lb .lb_click_item img{width: 100%!important;}.cpo_order_people img{width: 100%;}.cpo_why_select_from{margin: 20px 0;}} @media screen and (min-width: 991px) and (max-width: 1199px){#ele_cpo_all{float: left;}#all_cpo_ele_right{margin-left: 0!important; width: 60%; float: right;}.container > .navbar-header{width: 19%!important;}.pcb_surface .cpo_pcb_surface{width: 40%!important;}.pcb_surface .cpo_pcb_surface_more{width: 40%!important;}#pcb_col_md_8 .table tr td{line-height: normal!important;}#pcb_col_md_8{padding: 60px 40px!important; margin-left: -46%!important;}#pcb_price_calculate .pcb_all_fee_details{}.step_process li.online_quote .process_photo{background: url("/website_cpo_sale/static/src/css/../images/process/stepprocess_01.png") 16px 7px no-repeat;background-size: 26px 26px;}.step_process li.add_to_cart .process_photo{background: url("/website_cpo_sale/static/src/css/../images/process/stepprocess_03.png") 16px 7px no-repeat;background-size: 26px 26px;}.step_process li.review_order .process_photo{background: url("/website_cpo_sale/static/src/css/../images/process/stepprocess_05.png") 16px 7px no-repeat;background-size: 26px 26px;}.step_process li.billing_shipping .process_photo{background: url("/website_cpo_sale/static/src/css/../images/process/stepprocess_07.png") 16px 7px no-repeat;background-size: 26px 26px;}.step_process li.wait_confirm .process_photo{background: url("/website_cpo_sale/static/src/css/../images/process/stepprocess_09.png") 16px 7px no-repeat;background-size: 26px 26px;}.step_process li.delivery .process_photo{background: url("/website_cpo_sale/static/src/css/../images/process/stepprocess_11.png") 16px 7px no-repeat;background-size: 26px 26px;}.step_process li.confirmation .process_photo{background: url("/website_cpo_sale/static/src/css/../images/process/stepprocess_13.png") 16px 7px no-repeat;background-size: 26px 26px;}.step_process li .process_decoration{width: 15px;}.step_process li .process_photo{width: 64px;margin: 0 10px;}.step_process p{font-size: 12px;}#cpo_col_md_padding{min-width: 426px;}} @media screen and (min-width: 768px){#panel_btn .panel-body p{display: -webkit-flex; display: flex;}#panel_btn .panel-body .cpo_panel_btn{flex: 1; -ms-flex: 1 0 0px; -ms-min-width: 300px;}#select_nav .cpo_nav_content{display: -webkit-flex; display: flex; min-width: 1024px;}#select_nav .cpo_nav_content .select_item{flex: 1; flex-shrink: 0; -ms-flex: 1 0 0px;}#select_nav .select_item i{height: 20px; line-height: 25px;}#cpoUploadModal .modal-dialog{width: 800px;}.cpo-banner-ul .cpo-banner-li{width: 400px;}} @media screen and (min-width: 1199px){#xiangdao ul li{width: 12%;}} @media screen and (min-width: 1200px) and (max-width: 1335px){#cpo_col_md_padding{min-width: 456px;}} @media screen and (max-width: 767px){.slider-area .index-quotation-from{position: static !important; margin: 0 !important; padding: 0 !important; height: auto !important;}.slider-area .cpo_index_quo_con{position: static !important; width: 100% !important; height: auto !important; padding: 0 10px 20px !important; display: block !important; pointer-events: all !important;}.slider-area .cpo-slider-content{position: static !important; transform: none !important;}.slider-area .container_quotation{display: flex; flex-direction: column;}.slider-area .col-md-6.pl-0.h0{display: none !important;}.slider-area.height-82vh, .slider-area .single-slider.height-82vh, .height-82vh{height: auto !important; min-height: 340px;}.slider-area .col-md-6.pl-0{width: 100% !important; padding: 0 15px !important;}.index-quote-box{width: 100% !important; max-width: 100% !important; border-radius: 0 !important;}.cpo-quo-tt{display: flex !important;}.cpo-quo-tt .quo-tt-ls{flex: 1 !important; text-align: center !important;}.navbar-brand.logo img, .navbar-brand.logo span img{max-height: 40px !important; width: auto !important;}.col-md-8.cpo_col_pcba_md8, #pcb_col_md_8, #cpo_pcb_all_data{width: 100% !important; margin-left: 0 !important; padding: 15px !important; float: none !important;}.col-md-4.cpo_col_pcba_md4, #pcb_price_calculate, #cpo_pcba_price_display{width: 100% !important; position: static !important; float: none !important; margin-top: 20px !important;}.col-md-6.col-sm-6, .col-sm-6{width: 100% !important;}#cart_products td, .td_product_name{display: block !important; width: 100% !important;}.col-md-3.cpo_my_account_sidebar{width: 100% !important; margin-bottom: 15px !important;}.col-md-9.cpo_my_account_content{width: 100% !important;}footer .col-md-3, footer .col-md-4, footer .col-md-2{width: 100% !important; margin-bottom: 20px !important;}.col-lg-4.col-md-6.cpo_advertage_products_col{width: 50% !important;}} @media screen and (max-width: 400px){.col-lg-4.col-md-6.cpo_advertage_products_col{width: 100% !important;}} @media screen and (max-width: 767px){.cpo_help{top: auto !important; bottom: 70px !important; right: 8px !important; border-radius: 20px !important; opacity: 0.85 !important;}.cpo_help .help-content a{width: 36px !important; height: 36px !important; line-height: 36px !important; margin: 3px 0 !important;}.cpo_help .help-content a i{font-size: 14px !important; line-height: 36px !important;}.cpo_help .help-content a .tips-content{display: none !important;}.cpo_help .help-show{display: none !important;}} 

/* /website_cpo_sale/static/src/css/im_chat_box.css defined in bundle 'web.assets_frontend' */
 @keyframes cpo_breathe{from{opacity: 1.0;}50%{opacity: 0.3;}to{opacity: 1.0;}} @-webkit-keyframes cpo_breathe{from{opacity: 1.0;}50%{opacity: 0.3;}to{opacity: 1.0;}} .o_livechat_button{bottom: 37%!important; right: 0!important; padding: 0!important; border: none!important; white-space: normal!important; min-width: 55px!important; background-color: rgba(60, 60, 60, 0)!important;} #cpo_shrink_magnify{width: 30px; height: 26px; position: absolute; top: 5px; right: 15px; padding: 0; z-index: 999;} .cpo_im_box_p{position: absolute; width: 44px; height: 44px; top: 0; left: 0; border-radius: 50%; margin-top: -27px; margin-left: 12px;} .cpo_im_box_p p{margin-bottom: 0; display: inline-block;} .cpo_conversation_icon{max-width: 55px; display: inline-block; -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); animation:cpo_breathe 2000ms infinite; -webkit-animation:cpo_breathe 2000ms infinite;} .cpo_conversation_content h2.conversation_title{margin-top: 5px; margin-bottom: 5px;} .cpo_conversation_content{display: inline-block; padding-right: 30px;} .cpo_im_box_ico{font-size:30px;} #cpo_customer_service{position: absolute; right: 0; bottom: 28px; z-index: -99;} 

/* /website_cpo_sale/static/src/css/cpo_pcb_quotation.css defined in bundle 'web.assets_frontend' */
 .row_padding_value{padding-left:0; padding-right:0;} #pcb_title{margin-bottom: 40px;} #cpo_pcb_quotation .form-group .form-control{box-shadow: none; position: relative; text-decoration: none; line-height: 20px;} .cpo_pcb_qty_total .cpo_pcb_qty_parent{width: 20%; display: inline-block; padding-right: 0; padding-left: 0;} .cpo_pcb_qty_total .cpo_pcb_qty{width: 100%; text-align: center; box-shadow: none; outline: none; border: none; display: inline-block; height: 20px; padding: 0 5px;} .cpo_pcb_qty_total .cpo_pcb_qty_unit{display: inline-block; width: 14%; text-align: center; box-shadow: none; outline: none; border: 1px solid #ccc;} #cpo_pcb_quotation .cpo_pcb_specification{display: none;} .cpo_pcb_specification .cpo_pcb_panel{border: none;} .cpo_pcb_panel_size .cpo_pcb_area .pcb_panel_pcs{width: 76%; text-align: center; border: none; outline: none;} .cpo_pcb_panel_size .cpo_pcb_area .unit_sku{width: 47%; text-align: center; border: none; outline: none;} .cpo_pcb_panel_size .cpo_pcb_area span{font-size: 16px; font-weight: bold;} .cpo_pcb_panel_size .cpo_pcb_area .cpo_pcb_pcs_parent{position: relative; display: inline-block; width: 20%; padding-left: 0; padding-right: 0;} .cpo_pcb_panel_size .cpo_pcb_area .cpo_pcb_parent{position: relative; display: inline-block; width: 25%;} .cpo_pcb_panel_size .cpo_pcb_area .cpo_pcb_pcs_parent{width: 18%;} .cpo_pcb_panel_size .cpo_pcb_area .pcb_unit_sku{border-left: none; border-top: none; border-right:none; padding-left: 0; padding-right: 0;} .cpo_pcb_panel_size .cpo_pcb_area .cpo_pcb_parent .cpo_pcb_unit{position: absolute; right: 4px; top: 7px; font-style: normal; color: #407dbd;} .cpo_pcb_layer_number .cpo_pcb_layer_parent{display: inline-block; width: 20%; padding: 6px 0;} .cpo_pcb_layer_number .cpo_pcb_layer{text-align: center; width: 100%; outline-style: none; border: none; padding: 0 5px; display: inline-block;} .pcb_order .cpo_pcb_order{width: 30%; text-align: center; margin-right: 5px; margin-top: 5px; outline-style: none; border: 1px solid #ccc; cursor: pointer; padding-left: 0; padding-right: 0;} .pcb_order .cpo_pcb_raw{width: 100%; cursor: pointer; text-align: center; outline: none; border: none; font-size: 14px; position: absolute; left: 0;} .pcb_order .cpo_pcb_order_other{width: 100%; text-align: center; outline: none; border: none; font-size: 12px; position: absolute; left: 0; top: 6px;} #cpo_pcb_quotation .pcb_raw_material_select{display: none;} .cpo_pcb_combine_number .cpo_pcb_combine{width: 14%; text-align: center; margin-right: 5px; outline-style: none; border: 1px solid #ccc;} #cpo_pcb_quotation #order_change_val{font-size: 12px; position: relative;} .pcb_thickness .cpo_pcb_thickness input{width: 58%; text-align: center; border: none; outline: none;} .pcb_thickness .cpo_pcb_thickness .cpo_pcb_unit{position: absolute; right: 4px; top: 6px; font-style: normal; color: #407dbd;} #cpo_pcb_quotation .cpo_pcb_thickness{width: 20%; text-align: center; margin-right: 5px; outline-style: none; border: 1px solid #ccc; cursor: pointer;} .pcb_silkscreen_color .cpo_pcb_silkscreen{width: 20%; text-align: center; margin-right: 5px; outline-style: none; border: 1px solid #ccc; cursor: pointer; padding: 6px 0; font-size: 12px; margin-top: 5px;} .pcb_surface .cpo_pcb_surface{width: 32%; text-align: center; margin-right: 5px; margin-top: 5px; outline-style: none; border: 1px solid #ccc; cursor: pointer; padding: 6px 0;} .pcb_surface .pcb_surface_three{text-align: left; padding-right: 0; padding-left: 2px;} .pcb_surface .pcb_surface_three .pcb_immersion_gold{width: 32%; height: 32px; padding-right: 0; padding-left: 0; float: right; margin-top: -6px; border: none; border-left: 1px solid #ccc;} .pcb_surface .cpo_pcb_surface_more{width: 32%; text-align: center; margin-right: 5px; margin-top: 5px; outline-style: none; border: 1px solid #ccc; cursor: pointer; padding: 6px 0;} .pcb_surface .cpo_pcb_surface_more .pcb_immersion_gold{width: 32%; height: 32px; padding-right: 0; padding-left: 0; float: right; margin-top: -6px; border: none; border-left: 1px solid #ccc;} .pcb_hole .cpo_pcb_hole{width: 30%; text-align: center; margin-right: 5px; margin-top: 5px; outline-style: none; border: 1px solid #ccc; cursor: pointer;} .pcb_stencil .cpo_pcb_stencil{width: 25%; text-align: center; margin-right: 5px; margin-top: 5px; outline-style: none; border: 1px solid #ccc; cursor: pointer;} .pcb_text_color .cpo_pcb_text{width: 14%; text-align: center; margin-right: 5px; outline-style: none; border: 1px solid #ccc; cursor: pointer;} #cpo_pcb_stencil_fee{display: none;} .cpo_pcb_copper_weight .cpo_pcb_cppper{width: 46%; text-align: center; margin-right: 5px; outline-style: none; border: 1px solid #ccc; padding-left: 6px; padding-right: 0; cursor: pointer;} .cpo_pcb_copper_weight .cpo_pcb_cppper .pcb_outer_copper{width: 30%; margin-top: -6px; height: 32px; border: none; padding-left: 16px; padding-right: 0; border-left: 1px solid #ccc;;} .cpo_pcb_copper_weight .cpo_pcb_cppper .pcb_inner_copper{width: 30%; margin-top: -6px; height: 32px; border: none; padding-left: 16px; padding-right: 0; border-left: 1px solid #ccc;;} .cpo_pcb_copper_weight .cpo_pcb_cppper .inner_copper_value{display: inline-block; position: absolute; top: 0; right: 44px; width: 15%; padding: 6px 0; outline: none; border: none; text-align: center;} .cpo_pcb_copper_weight .cpo_pcb_cppper .outer_copper_value{display: inline-block; position: absolute; top: 0; right: 44px; width: 15%; padding: 6px 0; outline: none; border: none; text-align: center;} #pcb_copper_in_out .pcb_copper_unit{padding-right: 5px;} .pcb_flying_probe .cpo_pcb_flying{width: 35%; text-align: center; margin-right: 5px; outline-style: none; border: 1px solid #ccc; cursor: pointer;} #cpo_pcb_quotation .pcb_surface_treatment{width: 32%; text-align: center; margin-right: 5px; margin-top: 5px; outline-style: none; border: 1px solid #ccc; cursor: pointer; padding: 0 0;} #cpo_pcb_quotation .cpo_pcb_input_click{width: 100%; outline: none; margin: 0; border: 0; border-radius: 5px; padding: 6px 0; text-align: center;} #cpo_pcb_quotation .pcb_gold_finger{display: none;} #cpo_pcb_quotation .pcb_gold_finger .pcb_gold_finger{color: #ff1010; margin: -15px 0 10px 0;} #cpo_pcb_quotation .pcb_gold_finger .table{margin-bottom: 0;} #cpo_pcb_quotation .pcb_gold_finger .table td{padding: 4px;} #cpo_pcb_quotation .pcb_gold_finger .cpo_border_right{border-right: 1px solid #ddd;} #cpo_pcb_quotation .pcb_gold_finger .gold_thickness, #cpo_pcb_quotation .pcb_gold_finger .gold_finger_size{width: 46%;} #cpo_pcb_quotation .pcb_gold_finger .gold_thickness_unit{margin-left: 5px;} #cpo_pcb_quotation .pcb_gold_finger .cpo_pcb_fold_finger{text-align: center; outline: none;} #cpo_pcb_quotation .pcb_gold_finger .numbers_gold_size_width, #cpo_pcb_quotation .pcb_gold_finger .numbers_gold_size_height{width: 20%;} #cpo_pcb_quotation .pcb_gold_finger .pcb_gold_size{} #cpo_pcb_quotation .pcb_immersion_gold_select{display: none;} #pcb_immersion_gold_table select{width: 40%; text-align: left; padding-left: 8%;} #pcb_immersion_gold_table input{width: 40%; text-align: left; padding-left: 11%;} .pcc_test_hint{color: #ff1010; margin-top: -15px;} #cpo_pcb_quotation .pcb_test_hint_cont .pcc_test_hint{color: #ff1010; margin-top: -15px;} .pcb_special_requirements .cpo_btn_requirement{text-align: center;} .pcb_special_requirements .cpo_btn_requirement .btn{margin: auto auto;} .pcb_special_requirements .cpo_btn_requirement .btn .cpo_requirement_icon{margin-right: 8px;} .pcb_special_requirements .cpo_btn_requirement .pcb_special_plus{width: 18px; height: 18px; display: inline-block; background-image: url("/website_cpo_sale/static/src/css/../images/plus.png"); background-size: 18px 18px; vertical-align: middle; margin-right: 5px;} .pcb_special_requirements .cpo_btn_requirement .pcb_special_subtract{width: 18px; height: 18px; display: inline-block; background-image: url("/website_cpo_sale/static/src/css/../images/subtract.png"); background-size: 18px 18px; vertical-align: middle; margin-right: 5px;} #cpo_pcb_quotation .pcb_active{border: 1px solid #0E76A8;} #cpo_pcb_quotation .pcb_active:after{content: ""; position: absolute; bottom: 0; right: 0; background: url(/website_cpo_sale/static/src/css/../images/cpo_pcb.png) no-repeat; width: 14px; height: 14px; background-size: 14px 14px;} #pcb_col_md_8{display: none; height: 100%; position: absolute; width: 136%; padding: 60px 100px; left: 50%; top: 0; margin-left: -45%; background-color: #FFFFFF; z-index: 5;} #pcb_col_md_8 .table .pcb_hole_density{width: 35%; display: inline-block;} #pcb_col_md_8 .table tr td{padding: 0px 5px 0 0; line-height: 35px;} #pcb_col_md_8 .table .form-control{border-top: none; border-bottom: none; text-align: center;} #pcb_col_md_8 .table .special_input_width{width: 40%; display: inline-block;} #pcb_col_md_8 .pcb_put_away_box{text-align: center;} #pcb_col_md_8 #pcb_put_away{margin: auto auto;} #pcb_col_md_1{padding-left: 0;} #cpo_pcb_btn{margin: 300% 0 0 -20px;} #pcb_select_result{} #pcb_select_result tr td input{outline: none; border: none; width: 100%;} #pcb_select_result tr td{padding: 10px 0;} #pcb_select_result tr td .pcb_size_width, #pcb_select_result tr td .pcb_size_length, #pcb_select_result tr td .pcb_area{width: 40%;} #cpo_pcb_calculate{width: 80px; height: 80px; border-radius: 50%; font-size: 30px; border: 0px solid #337ab7; outline: none; background-image: url("/website_cpo_sale/static/src/css/../images/anniu.png"); background-size: 80px 80px;} #cpo_pcb_calculate i{display: block; margin: auto auto;} #pcb_select_result .pcb_surface_treatment{position: relative;} #pcb_select_result .pcb_surface{position: absolute; left: 0; width: 160%;} #pcb_details_btn{display: none; width: 44%; margin: auto auto;} #pcb_fee_table{border-top: 1px solid #cccccc; margin-top: 10px; position: relative;} #pcb_price_calculate .pcb_fee_total{outline: none; border: none; max-width: 60%; padding-left: 10px;} #pcb_price_calculate td{min-width: 130px;} #pcb_price_calculate{position: relative;} #pcb_price_calculate .pcb_all_fee_details{width: 100%; display: none; background-color: #ddd; width: 100%; position: absolute; bottom: 100%; left: 0;} #pcb_price_calculate .pcb_all_fee_details input{background-color: #ddd;} #pcb_board_all_fee{position: relative;} #pcb_seet_up_process{position: relative;} #pcb_set_process_fee{position: absolute; left: 0; bottom: 100%; display: none; width: 100%; background-color: #ddd;} #pcb_set_process_fee input{background-color: #ddd;} #pcb_price_calculate .pcb_fee_line{line-height: 30px; border-bottom: 1px solid #CCCCCC;} #pcb_price_calculate .pcb_fee_line input{line-height: 26px;} #pcb_price_calculate .pcb_calculate_title{display: inline-block; min-width: 39%;} #pcb_price_calculate .pcb_calculate_cont{display: inline-block; margin-bottom: 0; max-width: 40%;} .pcb_test_fee_active{display: none; position: relative;} #pcb_test_fee .pcb_construction_cost{top: 100%; left: 0;} #pcb_test_fee .pcb_construction_cost{line-height: 15px; margin-top: 5px; color: #ff1010; display: none;} #pcb_price_calculate .pcb_important_note{color: #337ab7; margin-left:5px;} #pcb_fee_table .cpo_pcb_process_fee{display: none;} #pcb_fee_table .cpo_pcb_film_fee{display: none;} #pcb_order_load_content{position: fixed; display: none; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(250,250,250,0.5); z-index: 999999999999;} #pcb_order_load_content .load_img_parent{width: 128px; height: 128px; position: absolute; top: 35%; left: 50%; margin-top: -64px; margin-left: -64px;} #pcb_quo table tr td:nth-child(even){text-align: center;} #cpo_pcb_detail_peice tr td i{font-style: normal; font-weight: bold;} #cpo_pcb_detail_peice .pcb_span_base_style{padding: 0 5px; width: 130px; display: inline-block; text-align: left;} #cpo_pcb_expedited_select .pcb_span_base_style{padding: 0 5px; width: 130px; display: inline-block; text-align: left;} #cpo_pcb_detail_peice .cpo_pcb_select_td_parent{display: none;} #cpo_pcb_detail_peice .cpo_pcb_select_a, #cpo_pcb_expedited_select .cpo_pcb_select_a{text-align: center;} #cpo_pcb_detail_peice .cpo_pcb_select_delivery_period, #cpo_pcb_expedited_select .cpo_pcb_select_delivery_period{width: 20px!important; height: 20px; cursor: pointer; position: relative; background: url(/website_cpo_sale/static/src/css/../images/did_select.png) no-repeat; background-size: 20px 20px; border: aliceblue;} #cpo_pcb_detail_peice a.pcb_active:after, #cpo_pcb_expedited_select a.pcb_active:after{content: ""; position: absolute; bottom: 0; right: 0; background: url(/website_cpo_sale/static/src/css/../images/select_02.png) no-repeat; width: 19px; height: 19px; background-size: 20px 20px;} #cpo_pcb_expedited_select tr td i{font-style: normal; font-weight: bold;} #cpo_pcb_expedited_select .pcb_span_base_style{padding: 0 5px; width: 130px; display: inline-block; text-align: left;} #pcb_quo .table .pcb_urgent{width: 40%; display: inline-block; position: relative; text-decoration: none; cursor: pointer;} #pcb_quo .pcb_active{border: 1px solid #0E76A8;} #cpo_pcb_expedited_btn{margin-top: 50px;} #pcb_select_expedited_days{position: relative;} #cpo_pcb_expedited_select{display: none; position: absolute; right: -102%; top: 0;} #cpo_pcb_expedited_btn .cpo_pcb_quick_title{font-size: 18px; font-weight: 600;} #pcb_myModal .pcb_confirm_style_urgent{height: 20px;} #pcb_myModal .pcb_confirm_style_urgent input{text-align: left; width: 35%; padding-right: 15px; border: none; outline: none;} #pcb_myModal .pcb_confirm_style_urgent span{margin-right: 10px;} #pcb_myModal .pcb_confirm_radio .radio{padding-left: 20px;} #pcb_myModal .pcb_confirm_radio .pcb_radio_label{margin-right: 15px;} #pcb_myModal .pcb_confirm_radio .pcb_urgent_day{padding: 6px 12px; margin-right: 10px; width: 12%; text-align: center; display: inline-block; line-height: 26px; padding: 4px 10px; cursor: pointer; text-decoration: none; position: relative; margin-bottom: 5px;} #pcb_myModal .cpo_pcb_modal_line{display: inline-block; padding-left: 0; padding-right: 0; max-width: 55%;} #pcb_myModal .cpo_pcb_modal_title{width: 40%;} #pcb_myModal .pcb_active{border: 1px solid #0E76A8;} #pcb_myModal .pcb_active:after{content: ""; position: absolute; bottom: 0; right: 0; background: url(/website_cpo_sale/static/src/css/../images/cpo_pcb.png) no-repeat; width: 14px; height: 14px; background-size: 14px 14px;} .cpo_js_quantity{outline: none; border: none; -webkit-box-shadow: none; box-shadow: none; background-color: #FFFFFF!important;} #cart_products .form-control{-webkit-box-shadow: none; box-shadow: none; width: 50px; text-align: center; display: inline-block; vertical-align: middle; line-height: 20px; height: 20px;} 

/* /website_cpo_sale/static/src/css/cpo_pcb_modern.css defined in bundle 'web.assets_frontend' */
 body .cpo_content_row{background: #f5f7fa; padding-bottom: 40px;} #xiangdao{margin-bottom: 0 !important;} #xiangdao + .container{padding-top: 0 !important; margin-top: 0 !important;} .order-nav-list{padding-top: 0 !important; margin-top: 0 !important;} .order-nav-ul{display: flex; gap: 12px; padding: 10px 0; border-bottom: none; margin: 0 auto; justify-content: center; width: 100%; list-style: none;} .order-nav-list{text-align: center;} .order-nav-li{list-style: none; flex: 1; max-width: 240px; height: 44px; line-height: 44px;} .order-nav-li a{display: block; height: 44px; line-height: 44px; padding: 0 20px; border-radius: 22px; background: #fff; border: 2px solid #dde3ef; color: #666; font-weight: 600; font-size: 14px; transition: all .2s ease; text-decoration: none; text-align: center; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.06);} .order-nav-li a:hover{border-color: #0052cc; color: #0052cc; background: #f5f8ff; text-decoration: none;} .order-nav-active a{background: linear-gradient(135deg, #1a73e8, #0052cc) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 3px 10px rgba(0,82,204,.3) !important;} table caption, #tab_title{background: linear-gradient(135deg, #0052cc 0%, #003d99 100%); color: #fff; padding: 14px 20px; font-size: 17px; font-weight: 600; border-radius: 10px 10px 0 0; text-align: left; caption-side: top;} table caption span, #tab_title span{font-size: 13px; font-weight: 400; opacity: .85; margin-left: 10px;} .quotation-content{background: #fff; border-radius: 0 12px 12px 12px; box-shadow: 0 2px 16px rgba(0,0,0,.08); overflow: hidden;} .quo-content-ul{padding: 0; margin: 0; list-style: none;} .quo-active{display: flex;} .cpo_col_pcba_md8 form{padding: 24px 20px;} .pcb_active_set{display: inline-flex; align-items: center; justify-content: center; padding: 5px 14px; margin: 3px 4px 3px 0; border-radius: 20px; border: 1.5px solid #dce3ed; background: #f8fafc; font-size: 13px; color: #445; cursor: pointer; transition: all .15s; font-weight: 500; line-height: 1.4;} .pcb_active_set:hover{border-color: #0052cc; color: #0052cc; background: #f0f4ff;} .pcb_active_set.pcb_active{background: #0052cc; border-color: #0052cc; color: #fff; box-shadow: 0 2px 8px rgba(0,82,204,.25);} .cpo_pcb_solder_color_circle{width: 18px; height: 18px; border-radius: 50%; display: inline-block; margin-left: 8px; vertical-align: middle; border: 2px solid #fff; box-shadow: 0 0 0 1px #ddd;} .cpo_special_btn, .btn.cpo_special_btn{background: linear-gradient(135deg, #ff6600, #ff8533); border: none; color: #fff; border-radius: 20px; padding: 6px 18px; font-weight: 600; font-size: 13px; box-shadow: 0 2px 8px rgba(255,102,0,.3);} #cpo_calcula_title{background: #f8fafc; border-left: 1px solid #e8ecf0;} .cpo_smt_assembly_cost{text-align: center; padding: 12px 0 4px;} .btn.cpo_calculation{background: linear-gradient(135deg, #0052cc, #0066ff); border: none; color: #fff; border-radius: 8px; padding: 12px 0; font-size: 15px; font-weight: 600; width: 88%; box-shadow: 0 4px 14px rgba(0,82,204,.35); transition: all .2s;} .btn.cpo_calculation:hover{transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,82,204,.45); background: linear-gradient(135deg, #0047b3, #005ce6);} .cpo_price_reminder{color: #0052cc; font-size: 13px; text-align: center; margin: 6px 0 16px;} .cpo_assembly_cost{display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f0f2f5; font-size: 14px;} .cpo_assembly_cost:last-child{border-bottom: none;} .cpo_cost_span{color: #556; font-weight: 400;} .cpo_assembly_cost .cpo_cost_fee{color: #0052cc; font-weight: 700; font-size: 15px;} .cpo_assembly_cost .cpo_cost_fee i{font-style: normal; font-size: 13px; margin-right: 2px;} .cpo_assembly_cost .cpo_cost_fee input{border: none; background: transparent; color: inherit; font-weight: inherit; font-size: inherit; text-align: right; width: auto; outline: none; padding: 0;} .cpo_assembly_cost.cpo_all_fee{background: #fff4f0; border-radius: 8px; padding: 12px 10px; margin: 8px 0; border: 1px solid #ffd4b8; border-bottom: 1px solid #ffd4b8 !important;} .cpo_assembly_cost.cpo_all_fee .cpo_cost_fee{color: #ff4400; font-size: 18px;} .cpo_try_quantity_title{background: linear-gradient(90deg, #0052cc, #0066ff) !important; border-radius: 6px !important; padding: 8px 0 !important; font-size: 13px; border: none !important; margin-top: 12px;} .cpo_quantity_content{border-radius: 0 0 6px 6px; overflow: hidden;} .cpo_quantiry_line{height: 32px !important;} .cpo_expedited_title{background: linear-gradient(90deg, #336699, #0052cc) !important; border-radius: 6px !important; border: none !important; margin-top: 8px;} .cpo_pcb_quotation .form-group{margin-bottom: 12px;} #cpo_calcula_title .cpo_assembly_cost{display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #f0f2f5; flex-wrap: nowrap;} #cpo_calcula_title .cpo_assembly_cost .cpo_cost_span{flex: 1 1 auto; width: auto !important; height: auto !important; line-height: 1.5; font-size: 13px; color: #556;} #cpo_calcula_title .cpo_assembly_cost .cpo_cost_fee{flex: 0 0 auto; width: auto !important; height: auto !important; text-align: right; padding-left: 8px; white-space: nowrap;} #cpo_calcula_title .cpo_cost_fee input{width: auto !important; min-width: 55px; max-width: 120px; text-align: right; font-weight: 600;} .cpo_upload_file_box{border: 2px dashed #c8d6e8; border-radius: 8px; text-align: center; padding: 14px; margin: 12px 0; background: #f8fafc; transition: all .2s;} .cpo_upload_file_box:hover{border-color: #0052cc; background: #f0f4ff;} .row-m-0 table{border: none !important; margin-bottom: 0;} .row-m-0 table caption{caption-side: top; padding: 14px 20px; font-size: 17px; font-weight: 600; background: linear-gradient(135deg, #0052cc 0%, #003d99 100%); color: #fff; text-align: left; border-radius: 0;} .cpo-params-section-title{display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; margin: 16px 0 12px; background: #f0f4ff; border-radius: 6px; border: 1px solid #dce8f5; cursor: default;} .cpo-params-section-title span{font-size: 13px; font-weight: 600; color: #0052cc; letter-spacing: .5px;} .cpo-advanced-toggle{display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 6px 14px; border-radius: 20px; background: #fff; border: 1.5px solid #0052cc; color: #0052cc; font-size: 13px; font-weight: 500; transition: all .2s;} .cpo-advanced-toggle:hover{background: #0052cc; color: #fff;} .cpo-advanced-toggle .toggle-icon{transition: transform .3s; display: inline-block;} .cpo-advanced-toggle.expanded .toggle-icon{transform: rotate(180deg);} .cpo-advanced-section{overflow: hidden; max-height: 0; transition: max-height .4s ease; padding-top: 0;} .cpo-advanced-section.expanded{max-height: 1200px; overflow: visible; padding-top: 4px;} #cpo_calcula_title .cpo_assembly_cost{padding: 5px 0 !important; font-size: 13px;} .cpo_smt_assembly_cost{padding: 6px 0 2px;} .cpo_price_reminder{margin: 3px 0 8px !important;} .btn.cpo_calculation{padding: 10px 0; font-size: 14px;} .cpo_try_quantity_title{display: none !important;} .cpo_expedited_title{display: none !important;} .cpo_try_order_quantity .cpo_try_icon, .cpo_try_order_quantity .cpo_try_select_icon, .cpo_try_expedited_list .cpo_try_icon, .cpo_try_expedited_list .cpo_try_select_icon{display: none !important;} .cpo_try_order_quantity{margin-top: 10px;} .cpo_try_order_quantity::before{content: "数量比价"; display: block; font-size: 11px; font-weight: 600; color: #8899b0; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 5px;} .cpo_try_expedited_list{margin-top: 10px;} .cpo_try_expedited_list::before{content: "⚡ 加急交货"; display: block; font-size: 11px; font-weight: 600; color: #e07020; letter-spacing: 0.5px; margin-bottom: 5px;} .cpo_try_order_quantity .cpo_quantity_content, .cpo_try_expedited_list .cpo_quantity_content{display: flex !important; flex-direction: row !important; gap: 5px !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important;} .cpo_try_order_quantity .cpo_quantiry_line, .cpo_try_expedited_list .cpo_quantiry_line{flex: 1 !important; height: auto !important; padding: 7px 3px !important; padding-left: 3px !important; text-align: center !important; background: #ffffff !important; border-radius: 8px !important; border: 1.5px solid #dde6f0 !important; cursor: pointer !important; transition: all 0.18s ease !important; box-shadow: 0 1px 3px rgba(0,30,80,.06) !important; position: relative !important;} .cpo_try_order_quantity .cpo_quantiry_line:hover, .cpo_try_expedited_list .cpo_quantiry_line:hover{border-color: #0052cc !important; box-shadow: 0 2px 8px rgba(0,82,204,.18) !important; transform: translateY(-2px) !important;} .cpo_try_order_quantity .cpo_quantiry_line.cpo_quantity_select{background: linear-gradient(135deg, #ff6600, #ff8c00) !important; border-color: #ff6600 !important; box-shadow: 0 3px 10px rgba(255,102,0,.35) !important; transform: translateY(-2px) !important;} .cpo_try_expedited_list .cpo_quantiry_line.cpo_quantity_select{background: linear-gradient(135deg, #0052cc, #0066ff) !important; border-color: #0052cc !important; box-shadow: 0 3px 10px rgba(0,82,204,.35) !important; transform: translateY(-2px) !important;} .cpo_try_order_quantity .cpo_try_quantity, .cpo_try_expedited_list .cpo_try_quantity{display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; gap: 2px !important; line-height: 1.2 !important;} .cpo_try_order_quantity .cpo_try_quantity span{display: block !important; width: 100% !important; text-align: center !important; line-height: 1.25 !important;} .cpo_try_order_quantity .cpo_try_quantity span:first-child{font-size: 13px !important; font-weight: 800 !important; color: #1a3a66 !important; letter-spacing: -0.3px;} .cpo_try_order_quantity .cpo_try_quantity span:last-child{font-size: 10.5px !important; color: #e05000 !important; font-weight: 600 !important;} .cpo_try_order_quantity .cpo_quantity_select .cpo_try_quantity span{color: #fff !important;} .cpo_try_expedited_list .cpo_try_quantity span{display: block !important; width: 100% !important; text-align: center !important; line-height: 1.25 !important;} .cpo_try_expedited_list .cpo_try_quantity span:first-child{font-size: 16px !important; font-weight: 800 !important; color: #e07020 !important; letter-spacing: -0.5px;} .cpo_try_expedited_list .cpo_try_quantity span:last-child{font-size: 9px !important; color: #aab !important; font-weight: 500 !important; text-transform: uppercase;} .cpo_try_expedited_list .cpo_quantity_select .cpo_try_quantity span{color: rgba(255,255,255,.93) !important;} 

/* /website_mail/static/src/css/website_mail.css defined in bundle 'web.assets_frontend' */
.js_follow[data-follow='on'] .js_follow_btn , .js_follow[data-follow='off'] .js_unfollow_btn{display: none;} 

/* /website_payment/static/src/css/website_payment.css defined in bundle 'web.assets_frontend' */
input#cc_number{background-repeat: no-repeat; background-position: 14px 14px;} div.card_placeholder{background-image: url("/website_payment/static/src/img/placeholder.png"); background-repeat: no-repeat; width: 32px; height: 20px; position: absolute; top: 34px; right: 20px; -webkit-transition: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955); pointer-events: none;} div.amex{background-image: url("/website_payment/static/src/img/amex.png"); background-repeat: no-repeat;} div.diners{background-image: url("/website_payment/static/src/img/diners.png"); background-repeat: no-repeat;} div.discover{background-image: url("/website_payment/static/src/img/discover.png"); background-repeat: no-repeat;} div.jcb{background-image: url("/website_payment/static/src/img/jcb.png"); background-repeat: no-repeat;} div.mastercard{background-image: url("/website_payment/static/src/img/mastercard.png"); background-repeat: no-repeat;} div.visa{background-image: url("/website_payment/static/src/img/visa.png"); background-repeat: no-repeat;} ul.payment_method_list img.img-rounded{max-width: 100px; max-height: 40px;} 

/* /website_sale/static/src/css/website_sale.css defined in bundle 'web.assets_frontend' */
 .oe_product{border: 1px solid rgba(100, 100, 100, 0.2);} .products_pager{text-align: center;} .products_pager > div{margin: 0 auto; display: inline-block;} .products_pager > div > *{vertical-align: middle; float: none; padding: 0;} .products_pager > div > ul{padding-left: 10px;} .products_pager > ul{margin-left: auto; margin-right: auto;} .oe_website_sale ul ul{margin-left: 1.5em;} .oe_website_sale .td-product_name, .oe_website_sale h1[itemprop="name"], .oe_website_sale .oe_product_cart form h5{word-wrap: break-word;} .oe_website_sale .td-product_name{min-width: 140px;} .oe_website_sale .td-img{width: 100px;} .oe_website_sale .td-qty{width: 130px;} .oe_website_sale .td-price, .oe_website_sale .td-price-total{width: 100px;} @media (max-width: 767px){.oe_website_sale .td-img, .oe_website_sale .td-price-total{display: none;}.oe_website_sale .td-qty{width: 60px;}.oe_website_sale .td-price{width: 80px;}} @media (max-width: 476px){.oe_website_sale .td-qty{width: 60px;}.oe_website_sale .oe_cart table thead, .oe_website_sale #modal_optional_products table thead{display: none;}.oe_website_sale .oe_cart table td.td-img, .oe_website_sale #modal_optional_products table td.td-img{display: none;}.oe_website_sale .oe_cart a span.hidden-xs, .oe_website_sale #modal_optional_products a span.hidden-xs{display: none !important;}.oe_website_sale .oe_cart a span.visible-xs-inline, .oe_website_sale #modal_optional_products a span.visible-xs-inline{display: inline !important;}} .o_alternative_product{margin: auto;} .oe_product{position: relative;} .oe_product .oe_product_image{position: absolute; left: 15px; right: 15px; top: 15px; bottom: 55px; text-align: center;} .oe_product .oe_product_image img{max-width: 100%; max-height: 100%; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 4;} .oe_product section{position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; padding: 0 15px 24px 10px; min-height: 56px; border-top: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.75); z-index: 5;} .oe_product .product_price{padding: 5px 0; position: absolute; bottom: 0;} .oe_product .oe_product_cart{position: relative; width: 100%; height: 100%;} .oe_product .oe_subdescription{font-size: 0.8em; overflow: hidden; margin-bottom: 10px;} .oe_mycart .input-group-addon{padding-left: 6px; padding-right: 6px;} .oe_product.oe_image_full .oe_product_image{left: 0; right: 0; top: 0; bottom: 0;} .oe_product.oe_ribbon_promo .ribbon-wrapper{display: block;} .oe_product .ribbon-wrapper{display: none; width: 85px; height: 88px; z-index: 5; overflow: hidden; position: absolute; top: 0; right: 0;} .oe_product .ribbon{font: bold 15px Sans-Serif; color: white; text-align: center; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); position: relative; padding: 7px 0; left: -5px; top: 15px; width: 120px; cursor: default;} #products_grid > table tr:not(:first-child) > td{height: 100%;} #products_grid.col-md-12 > table > tbody > tr > td:empty, #products_grid.col-md-9 > table > tbody > tr > td:empty{height: 0;} #products_grid.col-md-12 .oe-height-1{height: 75px;} #products_grid.col-md-12 .oe-height-2{height: 150px;} #products_grid.col-md-12 .oe-height-4{height: 300px;} #products_grid.col-md-12 .oe-height-6{height: 450px;} #products_grid.col-md-12 .oe-height-8{height: 600px;} #products_grid.col-md-9 .oe-height-1{height: 70px;} #products_grid.col-md-9 .oe-height-2{height: 140px;} #products_grid.col-md-9 .oe-height-4{height: 280px;} #products_grid.col-md-9 .oe-height-6{height: 420px;} #products_grid.col-md-9 .oe-height-8{height: 560px;} #products_grid .oe_product.oe_grid .oe_subdescription{max-height: 40px;} @media (min-width: 992px){#products_grid.col-md-12 .oe-height-1{height: 95px;}#products_grid.col-md-12 .oe-height-2{height: 190px;}#products_grid.col-md-12 .oe-height-4{height: 380px;}#products_grid.col-md-12 .oe-height-6{height: 570px;}#products_grid.col-md-12 .oe-height-8{height: 760px;}#products_grid.col-md-12 .oe_product.oe_grid .oe_subdescription{max-height: 70px;}#products_grid.col-md-9 .oe-height-1{height: 72px;}#products_grid.col-md-9 .oe-height-2{height: 144px;}#products_grid.col-md-9 .oe-height-4{height: 288px;}#products_grid.col-md-9 .oe-height-6{height: 432px;}#products_grid.col-md-9 .oe-height-8{height: 576px;}} @media (min-width: 1200px){#products_grid.col-md-12 .oe-height-1{height: 125px;}#products_grid.col-md-12 .oe-height-2{height: 250px;}#products_grid.col-md-12 .oe-height-4{height: 500px;}#products_grid.col-md-12 .oe-height-6{height: 750px;}#products_grid.col-md-12 .oe-height-8{height: 1000px;}#products_grid.col-md-9 .oe-height-1{height: 95px;}#products_grid.col-md-9 .oe-height-2{height: 190px;}#products_grid.col-md-9 .oe-height-4{height: 380px;}#products_grid.col-md-9 .oe-height-6{height: 570px;}#products_grid.col-md-9 .oe-height-8{height: 760px;}#products_grid .oe_product.oe_grid .oe_subdescription{max-height: 120px;}} @media (max-width: 768px){#products_grid table, #products_grid tbody, #products_grid tr, #products_grid td{float: left; width: 100%; display: inline-block;}#products_grid .oe_product{float: left; width: 100%; display: inline-block;}#products_grid .oe_product.oe_grid{height: 400px;}#products_grid .oe_product.oe_grid section{background: rgba(100, 100, 100, 0.2);}#products_grid .oe_product .oe_subdescription{max-height: 200px;}.products_pager .pagination{margin: 5px auto !important;}} @media (max-width: 400px){#products_grid .oe_product.oe_grid{height: 270px;}#products_grid .oe_product.oe_list{height: 200px;}#products_grid .oe_product.oe_list section{background: rgba(100, 100, 100, 0.2);}#products_grid .oe_product .oe_product_image{top: 0; bottom: 65px;}#products_grid .oe_product.oe_image_full .oe_product_image{bottom: 50px;}} .oe_cart a span.visible-xs-inline, #modal_optional_products a span.visible-xs-inline{display: none !important;} .oe_cart a span.hidden-xs, #modal_optional_products a span.hidden-xs{display: inline !important;} .oe_cart table td:first-child{min-width: 76px;} .oe_cart > .oe_structure{clear: both;} div#payment_method div.list-group{margin-left: 40px;} div#payment_method .list-group-item{padding-top: 5px; padding-bottom: 5px;} @media (min-width: 400px){.oe_product.oe_list{border: none; border-bottom: 1px solid rgba(100, 100, 100, 0.2); width: 100%; min-height: 100px; position: relative; padding-bottom: 5px; padding-left: 180px;}.oe_product.oe_list .oe_product_image{top: 0; bottom: 0; left: 0; right: 0; width: 170px;}.oe_product.oe_list section{position: relative; border: 0; top: auto; bottom: auto; left: auto; right: auto; background: transparent;}} .oe_website_sale .row .row .col-md-12{float: none;} .css_attribute_color{display: inline-block; border: 1px solid #999999; text-align: center;} .css_attribute_color input{margin: 8px; height: 13px; opacity: 0;} .css_attribute_color.active{border: 3px ridge #66ee66;} .css_attribute_color.active input{margin: 6px;} .css_not_available_msg{display: none;} .css_not_available.js_product > *:nth-child(4) > *{display: none;} .css_not_available.js_product .product_price, .css_not_available.js_product .css_quantity{display: none;} .css_not_available.js_product .css_not_available_msg{display: block;} .css_quantity{max-width: 125px;} .css_quantity input[name="add_qty"]{text-align: center;} option.css_not_available{color: #ccc;} label.css_not_available{opacity: 0.6;} label.css_attribute_color.css_not_available{opacity: 1; background-image: url("/website_sale/static/src/img/redcross.png"); background-size: cover;} .product_detail_img{margin-left: auto; margin-right: auto; display: block; max-height: 500px;} .oe_default_price{display: none;} .discount .oe_default_price{display: block;} .oe_website_sale input.js_quantity{min-width: 48px; text-align: center;} .oe_website_sale input.quantity{padding: 0;} .oe_overlay_options .dropdown ul[name="size"] table{margin-left: 20px;} .oe_overlay_options .dropdown ul[name="size"] td{margin: 0; padding: 0; width: 20px; height: 20px; border: 1px #dddddd solid; cursor: pointer;} .oe_overlay_options .dropdown ul[name="size"] td.selected{background-color: #B1D4F1;} .oe_overlay_options .dropdown ul[name="size"] table.oe_hover td.selected{background-color: transparent;} .oe_overlay_options .dropdown ul[name="size"] table.oe_hover td.select{background-color: #B1D4F1;} ul.wizard{padding: 0; margin-top: 20px; list-style: none outside none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065);} ul.wizard li{border: 1px solid #d4d4d4; border-right-width: 0; position: relative; float: left; padding: 0 10px 0 20px; margin: 0; line-height: 38px; background: #fbfbfb;} ul.wizard li .chevron{position: absolute; top: 0; right: -10px; z-index: 1; display: block; border: 20px solid transparent; border-right: 0; border-left: 10px solid #d4d4d4;} ul.wizard li .chevron:before{position: absolute; top: -20px; right: 1px; display: block; border: 20px solid transparent; border-right: 0; border-left: 10px solid #fbfbfb; content: "";} ul.wizard li.text-success{background: #f3f4f5;} ul.wizard li.text-success .chevron:before{border-left: 10px solid #f5f5f5;} ul.wizard li.text-primary{background: #f1f6fc;} ul.wizard li.text-primary .chevron:before{border-left: 10px solid #f1f6fc;} ul.wizard li:first-child{padding-left: 15px; border-radius: 4px 0 0 4px;} ul.wizard li:last-child{border-radius: 0 4px 4px 0; border-right-width: 1px;} ul.wizard li:last-child .chevron{display: none;} .label-optional{font-weight: normal;} #o_shop_collapse_category li a{display: inline-block; width: 80%; padding-left: 3px;} #o_shop_collapse_category li i.fa{cursor: pointer;} .mycart-popover{max-width: 500px; min-width: 250px;} .mycart-popover .cart_line{border-bottom: 1px #EEE solid;} td.noborder{border: none !important;} .border_primary{border: 1px solid #337ab7;} .js_change_shipping{cursor: pointer;} a.no-decoration{cursor: pointer; text-decoration: none !important;} #o-carousel-product .carousel-inner div.item{height: 400px;} #o-carousel-product .carousel-inner div.item img{max-height: 100%;} #o-carousel-product .carousel-control{background-image: none !important;} #o-carousel-product .carousel-indicators{background-color: transparent; margin: 10px 0 0; overflow-y: hidden; position: static; text-align: left; white-space: nowrap; width: 100%; height: 100px !important; text-align: center; list-style-position: inside;} #o-carousel-product .carousel-indicators li{background-color: transparent !important; border-radius: 0; display: inline-block; margin: 0 !important; width: 54px !important; height: 54px !important; border: 0 !important; box-shadow: none !important;} #o-carousel-product .carousel-indicators li img{display: block; opacity: 0.5;} #o-carousel-product .carousel-indicators li.active img{opacity: 1;} .ecom-zoomable img[data-zoom]{cursor: zoom-in;} .break-word{word-wrap: break-word;} .o_website_sale_animate{opacity: 0.7; position: absolute; height: 150px; width: 150px; z-index: 1020;} .o_red_highlight{background: #db0700 !important; box-shadow: 0 0 0px 0px rgba(240, 8, 0, 0.4); transition: all 0.5s linear;} .o_shadow_animation{box-shadow: 0 0 5px 10px rgba(240, 8, 0, 0.4) !important;} #coupon_box form{max-width: 300px;} .font-weight-normal{font-weight: normal;} 

/* /website_sale/static/src/css/website_mail.css defined in bundle 'web.assets_frontend' */
 .oe_msg img.oe_msg_avatar{width: 50px; margin-right: 10px;} .oe_msg_attachment{display: inline-block; width: 120px; margin: 4px 2px; min-height: 80px; position: relative; border-radius: 3px; text-align: center; vertical-align: top;} .oe_msg_attachment a img.oe_attachment_embedded{display: block; position: relative; margin: 0px; margin-left: 10px; width: 100px; height: 80px; border-radius: 1px; border: solid 3px white; -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.19); -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.19); box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.19);} .oe_msg_attachment a div.oe_attachment_name{display: inline-block; max-width: 100%; padding: 1px 3px; margin-top: 2px; margin-bottom: 5px; background: #f4f5fa; overflow: hidden; color: #4c4c4c; text-shadow: none; border-radius: 3px; word-wrap: break-word;} 

/* /website_cpo_sale/static/src/css/cpo_service.css defined in bundle 'web.assets_frontend' */
 .cpo_service_box{margin-top: 82px;} #cpo_terms_title{margin: 25px auto;} #cpo_temrs_conditions{margin-bottom: 40px;} #cpo_temrs_conditions .cpo_temrs_content h4{font-weight: 600; font-size: 16px;} #cpo_temrs_conditions .cpo_temrs_content p{margin-bottom: 0;} #cpo_terms_and_conditions{width: 100%; height: 70px; position: fixed; bottom: 2px; left: 0; border-top: 1px solid #DDDDDD; background-color: rgba(255, 255, 255, 0.8); z-index: 2000;} #cpo_terms_and_conditions:hover{background-color: rgba(255, 255, 255, 1);} #cpo_terms_and_conditions .row{padding: 10px 0; margin: 0; height: 100%;} #cpo_accept_temrs_conditions{width: 90px; float: right; margin-top: 10px;} 

/* /electron/static/src/css/templates_style.css defined in bundle 'web.assets_frontend' */
.cpo_electronic .cpo_ele_container{text-align: center;} .cpo_electronic .oe_search_button,.cpo_electronic .oe_search_box{border: 1px solid #FF9900;} .cpo_electronic .title{background-color : #69c; text-align: center; margin-bottom: 60px;} #cpo_header_selection{margin-left:39px;} #cpo_header_selection td{padding:2px; margin: 0 auto;} #cpo_header_selection select{border: 1px solid #FF9900;} #cpo_header_selection table button{margin-top: 10px; background-color: #fff; border: none; outline-style: none;} #ele_cpo_container{margin-bottom: 90px;} #ele_cpo_all{border-right: 1px solid #000000;} #ele_cpo_all ul{margin: 10px 0 0 0; padding: 0;} #ele_cpo_all li{list-style: none; padding-left: 10px;} #ele_cpo_all h3{width: 100%; color: #FFFFFF; background-color: #337AB7; margin: 0 auto; padding: 14px 0; text-align: center;} #ele_cpo_all p{border-bottom: 2px solid #0c0c0c;} .containerxx .con_right{padding: 10px; margin: 0 10px;} #category_cpo_ele li a{font-size: 16px; font-weight: bold; cursor: pointer;} #all_cpo_ele_con>li{list-style: none; font-weight: bold; font-size: 16px;} #all_cpo_ele_con li ul li{font-size: 14px; font-weight: 500; margin: 5px 0;} #table2xx th{vertical-align: middle; padding: 0; text-align: center; font-size: 12px;} #table2xx td{vertical-align: middle; padding: 0; text-align: left; font-size: 12px; text-align: center; padding: 0 5px;} #table2xx td img{text-align: center; margin: auto auto;} #table2xx p{text-align: center; margin-bottom: 0; padding: 0 15px;} 

/* /website_form/static/src/less/website_form.less defined in bundle 'web.assets_frontend' */
 .o_website_form_flex{display: flex; flex-wrap: wrap;} .o_website_form_flex_item{flex-basis: 33%;} @media (max-width: 991px){.o_website_form_flex_item{flex-basis: 50%;}} @media (max-width: 767px){.o_website_form_flex_item{flex-basis: 100%;}} .o_website_form_field_hidden{display: none;} .editor_enable .o_website_form_field_hidden{display: block; opacity: 0.5;} .editor_enable .s_website_form .form-field select{pointer-events: none;} .o_website_form_required .control-label:after, .o_website_form_required_custom .control-label:after{content: ' *';} #editable_select.form-control{height: 100%;} .form-field input[type=file].form-control{height: 100%;} 

/* /website_portal_sale/static/src/less/website_portal_sale.less defined in bundle 'web.assets_frontend' */
 .orders_vertical_align{display: flex; align-items: center;} .orders_label_text_align{vertical-align: 15%;} .cell_overflow{overflow: hidden;}