body,html{padding: 0;margin: 0;}
.clear{clear: both;margin: 0px;padding: 0px;display: block;}
img{max-width: 100%;}
.block{display: block;}
ul{list-style: none;padding: 0;margin: 0;}
li{display: inline-block;}
a{color: #000;text-decoration: none;}


#header #country{display: none;position: absolute;right: 30px;top: 112px;width: 880px;background: #fff;padding: 16px;z-index: 1;border-radius: 6px;box-shadow: 0 0 6px #ccc;}
#header #country.active{display: block;}
#header #country li{width: 33%;float: left;margin: 0;box-sizing: border-box;padding: 16px 10px 16px 80px;}
#header #country li img{width: 30px;float: left;-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;}
#header #country li:hover img{-webkit-filter: none;-moz-filter: none;-ms-filter: none;-o-filter: none;filter: none;filter: none;}
#header #country li div{margin-left: 40px;color: #1b1b1b;}
#header #country li div p.title{color: #7c7b7c;margin: 0;}
#header #country li div p:last-child{white-space: pre-line;}

#footer{background: #eee;padding: 60px 130px;box-sizing: border-box;}
#footer .site-info{margin-bottom: 1rem;position: relative;}
#footer .menu-footer-container #menu-footer>li.share{width: 75%;text-align: right;}
#footer .site-info .share ul{display: inline-block;}
#footer .site-info .share li{width: 2rem;margin: 1.2rem 0 0 0.5rem;}
#footer .site-info .share img{width: 2rem;margin: 0;}
#footer .menu-footer-container #menu-footer>li{width: 25%;float: left;line-height: 3rem;margin: 0;}
#footer .menu-footer-container #menu-footer>li:nth-child(4n){text-align: right;}
#footer .menu-footer-container #menu-footer>li:nth-child(4n+2) a{margin-left: 30%;width: 100%;display: block;}
#footer .menu-footer-container #menu-footer>li:nth-child(4n+3) a{margin-left: 50%;width: 100%;display: block;}
#footer .menu-footer-container #menu-footer>li a{color: #3c3c3c;font-weight: normal;}
#footer .fb .logo{width: 16rem;float: left;}
#footer .fb a,#footer .fb .legal{float: right;color: #3c3c3c;margin-left: 2rem;}
#footer .fb .legal{position: relative;}
#footer .model{position: absolute;bottom: 30px;right: 0;width: 50vw;height: 50vh;display: none;}
#footer .model.active{display: block;}
#footer .model>span{position: fixed;left: 0;top: 0;bottom: 0;right: 0;}
#footer .model .box{position: relative;width: 100%;height: 100%;background: #fff;padding: 1rem;overflow: hidden;box-sizing: border-box;}
#footer .model .box .close{position: absolute;left: 10px;top: 10px;color: #ccc;cursor: pointer;}
#footer .model .box>ul li{width: 25%;float: left;text-align: center;}
#footer .model .box>ul li span{cursor: pointer;display: inline-block;background: #fff;border: 1px solid #dc2d28;color: #dc2d28;width: 60%;border-radius: 4px;padding: 5px 0;text-align: center;}
#footer .model .box>ul li.active span{background: #dc2d28;color: #fff;}
#footer .model .box .intro{position: absolute;left: 1rem;top: 4rem;right: 1rem;bottom: 1rem;overflow-y: auto;}
#footer .model .box .intro h1{font-size: 1.25rem;}
#footer .fb .logo a{margin: 0;}
#footer .click{display: none;position: fixed;left: 0;top: 0;right: 0;bottom: 0;}
#footer .click.active{display: block;}
#footer .click .box{position: absolute;top: 40%;left: 50%;font-size: 0.875rem;border-radius: 8px;box-shadow: 0 0 4px #ccc ;background: #fff;width: 20rem;text-align: center;padding: 1rem;box-sizing: border-box;text-align: center;margin-left: -10rem;}
#footer .click .box p{margin: 0;}
#footer .click .box .ok{text-align: right;cursor: pointer;}
#footer .click .box .ok a{margin-top: 1rem;display: inline-block;background: #dc2d28;border-radius: 6px;color: #fff;padding: 0.5rem 1rem;text-decoration: none;}
#footer .copyright{font-size: 1rem;text-align: center;color: #3c3c3c;}
#footer .notsell{font-size: 1rem;color: #3c3c3c;cursor: pointer;margin-bottom: 2rem;}
#footer .notsell span{display: inline-block;width: 32.3%;font-size: 0.875rem;font-style: italic;}
#footer .notsell a{display: inline-block;width: 33%;color: #3c3c3c;font-weight: normal;text-decoration: none;font-size: 0.875rem;font-style: italic;}

@media ( min-width: 1200px ) {
    .mobile{display: none;}
    #header{position: relative;margin-bottom: 20px;padding: 30px;font-size: 16px;line-height: 1.5;}
    #header .logo{width: 256px;float: left;padding-top: 15px;}
    #header nav{margin-left: 266px;}
    #header nav .toggle{text-align: right;}
    #header nav .toggle li:last-child{margin-left: 120px;cursor: pointer;}
    #header nav .toggle li img{margin-left: 15px;}
    #header nav .primary{text-align: right;margin-top: 10px;}
    #header nav .primary .sub-menu{display: none;}
    #header nav .primary>li{margin-left: 40px;position: relative;}
    #header nav .primary>li::after{content: '';width: 100%;height: 24px;position: absolute;top: 100%;left: 0;}
    #header nav .primary>li:hover .sub-menu{display: block;position: absolute;right: 0;top: calc(100% + 24px);box-shadow: 0 0 10px #ccc;background: #fff;padding: 16px 0;width: 450px;border-radius: 4px;text-align: left;}
    #header nav .primary>li .sub-menu::before{content: "";display: block;position: absolute;border: 10px solid transparent;border-bottom-color: #ccc;width: 0;height: 0;right: 30px;left: inherit;top: -32px;}
    #header nav .primary>li .sub-menu::after{content: "";display: block;position: absolute;border: 10px solid transparent;border-bottom-color: #fff;top: -31px;width: 0;height: 0;right: 30px;}
    #header nav .primary>li:nth-child(3) .sub-menu::before{right: 93px;}
    #header nav .primary>li:nth-child(3) .sub-menu::after{right: 93px;}
    #header nav .primary>li:nth-child(4) .sub-menu::before{right: 53px;}
    #header nav .primary>li:nth-child(4) .sub-menu::after{right: 53px;}
    #header nav .primary .sub-menu li{width: 45%;}
    #header nav .primary .sub-menu li a{padding: 8px 16px;display: block;}
    #header nav .primary .sub-menu li img{width: 30px;margin-right: 10px;vertical-align: middle;}
    #header nav .primary>li:nth-child(2) .sub-menu li:nth-child(2n){width: 45%;}
    #header nav .primary>li:nth-child(2) .sub-menu li:nth-child(2n+1){width: 45%;}
    #header nav .primary>li:nth-child(4) .sub-menu li:nth-child(2n){width: 30%;}
    #header nav .primary>li:nth-child(4) .sub-menu li:nth-child(2n+1){width: 70%;}
}
@media ( max-width: 1200px ) {
    .pc{display: none;}
    #header{position: relative;margin: 0 16px;padding: 32px 0;font-size: 16px;line-height: 1.5;}
    #header .logo{width: 160px;float: left;}
    #header nav{margin-left: 160px;}
    #header nav .mobile{text-align: right;}
    #header nav .mobile li{margin-left: 12px;}
    #header #country{left: 16px;top: 16px;right: 16px;bottom: 16px;width: initial;position: fixed;overflow-y: scroll;}
    #header #country li{width: 100%;padding: 1rem;}
    #header #primary.active{display: block;position: fixed;left: 0;top: 0;right: 0;bottom: 0;background: #fff;overflow-y: scroll;}
    #header #primary p img{vertical-align: middle;margin-left: 10px;}
    #header #primary p{border-bottom: 1px solid #dcd7ca;padding: 16px;margin: 0;}
    #header nav .primary>li{display: block;border-bottom: 1px solid #dcd7ca;padding: 16px 0;}
    #header nav .primary>li>a{margin-left:  16px;}
    #header nav .primary>li:last-child{display: none;}
    #header nav .primary>li>span{float: right;width: 16px;height: 10px;padding: 0 20px;margin-top: 7px;background: url(https://www.canadiansolar.com/wp-content/themes/twentytwenty/assets/images/4.png) no-repeat center;background-size: 16px 100%;border-left: 2px solid #dcd7ca;}
    #header nav .primary>li.active>span{transform: rotate(180deg);border-left: 0;border-right: 2px solid #dcd7ca;}
    #header nav .primary .sub-menu{display: none;}
    #header nav .primary>li.active .sub-menu{display: block;margin-top:16px;}
    #header nav .primary .sub-menu li{display: block;padding: 16px;border-top: 1px solid #dcd7ca;}
    #header nav .primary .sub-menu li:last-child{padding: 16px 16px 0;}
    #header nav .primary .sub-menu li img{width: 30px;margin-right: 10px;vertical-align: middle;}
    #footer{background: none;}
	#footer .site-info{margin: 0;}
	#footer .site-info .share{text-align: right;}
	#footer .site-info .share li{margin: 0 0.5rem 0 0;}
	#footer .copyright{font-size: 0.75rem;line-height: 3;}
	#footer .notsell{margin-bottom: 1rem;}
	#footer .notsell span{width: 50%;margin-bottom: 1rem;font-size: 0.75rem;line-height: 3;}
	#footer .footer-menu{display: inline-block;}
	#footer{padding: 20px;}
    #footer .menu-footer-container #menu-footer>li{width: 50%;font-size: 0.75rem;line-height: 3;text-align: left!important;}
    #footer .menu-footer-container #menu-footer>li a{margin-left: 0!important;}
	#footer .fb a,#footer .fb .legal{float: none;display: block;margin-left: 0;}
	#footer .fb .logo{float: none;}
	#footer .model{z-index: 1000;position: fixed;left: 1rem;top: 1rem;width: calc(100vw - 2rem);height: calc(100vh - 2rem);}
	#footer .model .box>ul li span{width: 95%;white-space: nowrap;overflow: hidden;}
	#footer .model .box .close{left: 3px;top: 3px;}
	#footer .model .box .close img{width: 10px;}
	#footer .menu-footer-container li{font-size: 0.75rem;}
	#footer .notsell{font-size: 0.75rem;}
	#footer .notsell span{font-size: 0.75rem;}
	#footer .notsell a{font-size: 0.75rem;width: 50%;}
	#footer .copyright{font-size: 0.75rem;}
}
#footer .primary-menu {
    font-size: 1rem;
    margin: 0;
    font-size: 0.875rem;
    display: block;
}

#footer .primary-menu * {
    color: #3c3c3c !important;
    font-size: 0.875rem;
}

#footer .primary-menu li {
    margin: 0;
    padding-right: 0.5rem;
    margin-right: 0.5rem;
    border-right: 1px solid #d0cece;
}
#footer .primary-menu li:last-child {
    border: 0;
}

#footer .primary-menu * {
    display: inline;
}