@charset "utf-8";
@media screen and (min-width:0px) and (max-width:319px) {
	.logo img{ width: 86%; display: block;}
	.shopbox,.oabox{ display: none;}
	.navbtn span{ padding: 0px 12px;}
	.navbtn span i{ padding-right: 32px;}
	.bannerfont{ width: 90%; left: 5%; margin-left: 0px;}
	.bannerfont img{ width: 90%;}
	.latestbox-t{ display: none;}
	.latestbox-c li .r{ display: none;}
	.latestbox-c{ padding: 0 62px 0 12px;}
    .newbox li.nd1 div .t{ padding: 6% 0px 2px; font-size: 20px;}
    .newbox li.nd1 div .c{ letter-spacing: 0.5em; padding-left: 0.5em; font-size: 12px;}
	.selectYear{ width: auto; margin-bottom: 50px;}
	.prolistDt .selectYear{ float: none; display: block; margin-bottom: 25px;}
	.prolistDt .more{ float: none; margin: 0px 0px 25px 0px;}
    .radiationList .img{ display: none;}
    .radiationList .con{ padding: 0px;}
    .radiationList li{ padding: 6% 2%;}
	.radiationList .con .t1,.radiationList .con .t2,.radiationList .con .t3{ float: none; width: 88%; padding-left: 6%;}
	.radiationList .con .t1{ line-height: 1.2; padding-bottom: 10px;}
	.bookList ul{ margin-left:0%;}
	.bookList li{ width: 100%; margin-left:0%;}
}
@media screen and (min-width:320px) and (max-width:480px) {
	.logo img{ width: 86%; display: block;}
	.oabox{ display: none;}
	.shopbox{ width: auto;}
	.shopbox .shopbtn span i{ padding: 0px 10px 0px 30px; background: url("img/c2.png") no-repeat scroll 6px center rgba(0, 0, 0, 0);}
	.shopbox .shopbtn span.sp2 i{ background: url("img/c1.png") no-repeat scroll 6px center rgba(0, 0, 0, 0);}
	.navbtn span{ padding: 0px 12px;}
	.navbtn span i{ padding-right: 32px;}
	.bannerfont{ width: 90%; left: 5%; margin-left: 0px;}
	.bannerfont img{ width: 90%;}
	.latestbox-t{ width: auto; padding: 0px 8px;}
	.latestbox-c li .r{ display: none;}
	.latestbox-c{ padding: 0 62px 0 12px;}
	.bannerfont{height: 274px;}
    .newbox li.nd1 div .t{ padding: 8% 0px 2px; font-size: 24px;}
    .newbox li.nd1 div .c{ letter-spacing: 0.5em; padding-left: 0.5em; font-size: 14px;}
    .wList li{ width: 96px;}
	.pbanner .pbanner-txt p.zh{ font-size: 30px;}
	.historyUl .year{ padding:0px 15% 40px;}
	.historyUl .txt{padding:0px 15%;}
	.selectYear{ width: auto; margin-bottom: 50px;}
	.prolistDt .selectYear{ float: none; display: block; margin-bottom: 25px;}
	.prolistDt .more{ float: none; margin: 0px 0px 25px 0px; display: inline-block;}
    .radiationList .img{ display: none;}
    .radiationList .con{ padding: 0px;}
    .radiationList li{ padding: 5% 2%;}
	.radiationList .con .t1,.radiationList .con .t2,.radiationList .con .t3{ float: none; width: 88%; padding-left:6%;}
	.radiationList .con .t1{ line-height: 1.2; padding-bottom: 10px;}
	.bookList ul{ margin-left: -5%;}
	.bookList li{ width: 45%; margin-left: 5%;}
}
@media screen and (min-width:481px) and (max-width:640px) {
	.oabox{ display: none;}
    .latestbox-t{ padding: 0px 8px; width: auto;}
	.latestbox-c li .r{ display: none;}
    .newbox li.nd1 div .t{ padding: 10% 0px 6px; font-size: 34px;}
    .newbox li.nd1 div .c{ letter-spacing: 0.8em; padding-left: 0.8em;}
	.historyUl .year{ padding:0px 12% 40px;}
	.historyUl .txt{padding:0px 12%;}
	.selectYear{ width: auto; margin-bottom: 50px;}
	.prolistDt .selectYear{ width: 222px;}
    .radiationList .img{ display: none;}
    .radiationList .con{ padding: 0px;}
    .radiationList li{ padding: 4% 2%;}
	.radiationList .con .t1,.radiationList .con .t2,.radiationList .con .t3{ float: none; width: 90%; padding-left: 5%;}
	.radiationList .con .t1{ line-height: 1.2; padding-bottom: 10px;}
	.bookList ul{ margin-left: -5%;}
	.bookList li{ width: 45%; margin-left: 5%;}
}
@media screen and (min-width:641px) and (max-width:860px) {
    .latestbox-t{ padding: 0px 8px; width: auto;}
    .newbox li.nd1 div .t{ padding: 12% 0px 10px;}
	.historyUl .year{ padding:0px 15% 40px;}
	.historyUl .txt{padding:0px 15%;}
    .radiationList .img{ display: none;}
    .radiationList .con{ padding: 0px;}
    .radiationList li{ padding: 4% 2%;}
	.radiationList .con .t1,.radiationList .con .t2,.radiationList .con .t3{ float: none; width: 94%; padding-left: 3%;}
	.radiationList .con .t1{ line-height: 1.2; padding-bottom: 10px;}
	.selectYear{ margin-bottom: 50px;}
	.bookList ul{ margin-left: -4%;}
	.bookList li{ width: 21%; margin-left: 4%;}
}
@media screen and (min-width:861px) and (max-width:1024px) {
	.nav dd.navL1{ width:12%; padding-left: 5%;}
	.newbox{ width: 96%; margin: 0px auto; padding: 10px 2% 0px; background-color: #f1f0f0;}
	.newbox li{ width: 24.25%; height: auto; padding-top: 1%; margin-left: 1%;}
	.inewbox{ width: 60%;}
	.irightbox{ width: 38%;}
    .newbox li.nd1 div .t{ padding: 5% 0px 6px; font-size: 34px;}
    .newbox li.nd1 div .c{ letter-spacing: 0.8em; padding-left: 0.8em;}
    #introductionPage .information .en{ font-size: 24px;}
	#introductionPage .information .c{ height: auto; }
	.molecularlist{ margin-left: -3.3%;}
	.molecularlist li{ margin-left: 3.3%; width: 30%;}
	.molecularlist li a{ padding: 50px 7% 0px; width: 86%;}
    .pboximg{ height: 400px;}
    #historyDl dd .tyear{ width: 20%;}
	#historyDl dd .tcon{ width: 70%; padding: 42px 5%;}
	#newUl ul{ margin-left: -3.3%;}
	#newUl li{ margin-left: 3.3%; padding: 25px 3% 34px; width: 24%;}
	#videoUl ul{ margin-left: -2.3%;}
	#videoUl ul li{ margin:0px 0px 2.3% 2.3%; width: 31%;height: auto;}
	#videoUl ul li a,#videoUl ul li a img{ height: auto;}
	.txtitem{ padding-top: 5%;}
	.txtitem .t{ font-size: 28px;}
	.prolistDD{ margin-left: -1.3%;}
	.prolistItem{ margin: 0px 0px 25px 1.3%; width: 32%;}
	.prolistItem .pi{ bottom: -25px;}
	.proBox{ margin: 0px 0px 25px 1.3%;}
	.radiationList .con .t1,.radiationList .con .t2,.radiationList .con .t3{ float: none; width: 94%; padding-left: 6%;}
	.radiationList .con .t1{ line-height: 1.2; padding-bottom: 10px;}
	.selectYear{ margin-bottom: 50px;}
	.welfareList{ margin-left: -3.3%;}
	.welfareList li{ width:30%; margin: 0px 0px 0px 3.3%;}
	.welfareList li .img{ width: 100%; height: auto;}
	.teamList{ margin-left: -2%;}
	.teamList li{ width: 23%; margin: 0px 0px 0px 2%;}
	.mapBox{ width: 50%;}
	.messBox{ width: 44%; padding: 0px 3%;}
	.bookList ul{ margin-left: -4%;}
	.bookList li{ width: 21%; margin-left: 4%;}
}
@media screen and (min-width:1025px) and (max-width:1279px){
	.historyBox .bx-wrapper .bx-prev{ left: -4%;}
	.historyBox .bx-wrapper .bx-next{ right: -4%; }
	.txtitem .t{ font-size: 38px;}
	.mapBox{ width: 50%;}
	.messBox{ width: 42%;}
}
@media screen and (min-width:1280px) and (max-width:1360px){
	.historyBox .bx-wrapper .bx-prev{ left: -10%;}
	.historyBox .bx-wrapper .bx-next{ right: -10%; }
	.txtitem .t{ font-size: 42px;}
}
@media screen and (min-width:1361px) and (max-width:1440px){
	.historyBox .bx-wrapper .bx-prev{ left: -12%;}
	.historyBox .bx-wrapper .bx-next{ right: -12%; }
}
@media screen and (min-width:1024px){
	#newUl li:hover{ background-color: #fff;transition: all 300ms ease 0s; -moz-transition: all 300ms ease 0s; /* Firefox 4 */ -webkit-transition: all 300ms ease 0s; /* Safari and Chrome */ -o-transition: all 0.2s ease-in-out 0s; /* Opera */ }
	#newUl li:hover .img .black{ display: block;}
	.prolistItem a:hover .img .black{ display: block; transition: all 300ms ease 0s;}
	.prolistItem a:hover .img .pmore{ display: block; margin-top: -24px; transition: all 300ms ease 0s;}
	.prolistItem a:hover .ki{ height: 10px; transition: all 300ms ease 0s;}
	.messbtn:hover{ background-color: #d01c1c; border: 1px solid #d01c1c;}
}
@media screen and (min-width:0px) and (max-width:1024px){
	.inner{width: 100%;}
	.top .inner .logo{ margin-left: 5%;}
	.ipanel{ padding: 20px 0px 60px;}
	.ipanel .inner{ width: 96%; overflow: hidden;}
	.bannerfont{ margin-top: -180px;}
	.banerBtns{ bottom: 78px;}
	.iboxbot{ width: 100%; height: auto; display: block;}
	.latestbox{ height: 40px;line-height: 40px; margin-bottom: 0px;}
	.latestbox-c{ height: 40px;}
	.latestbox-c li{ height: 40px; line-height: 40px;}
	.latestbox-bl .bx-prev{ height: 40px;}
	.latestbox-br .bx-next{height: 40px;}
	.ifooter{ padding: 0px;}
	.ifooter .inner{ padding:0px 0px 90px;}
	.ifooter .backtop{ margin-right: 2%;}
	.ifooter .foot,.ifooter .footMobile{ width: 90%; margin: 0px auto;}
	.pbanner{ height: 380px;}
	.pbanner .pb_centered{ display: none;}
	.pbanner .inner{ width: 90%; left: 5%; margin: 0px;}
	.pbanner .pbanner-txt{ top: 32%;}
	.ipmenu{ height: 235px;}
	.ipmenu .pbanner-txt{ top: 45%;}
	.innerBox{ width: 90%; margin: 0px auto;}
    .pbox{ padding: 50px 0px;}
    .pboxT{ padding-bottom: 50px;}
	.pboximg .pbi{display: none;}
	.pboximg .pbinner{ width: 90%; left: 5%; margin: 0px;}
	#newpage{ padding: 40px 0px;}
	#newpage .newNav{ padding-bottom: 20px;}
	#historyPage{ padding: 50px 0px 0px;}
	.historyDemo{ padding: 70px 0px;}
	.historyBox{ width: 90%;}
	.historyBox .bx-wrapper .bx-prev{ left: -2%;}
	.historyBox .bx-wrapper .bx-next{ right: -2%; }
	#culturePage{ margin-bottom: 40px;}
	#culturePage .c{ width: 100%; margin-bottom: 40px;}
	.productDL{ top: 0px;}
	#radiationPage{ padding: 50px 0px;}
	#marketPage{ height: 420px;}
	#marketPage .pb_centered{ display: none;}
	#marketPage .marketCon{ width: 90%; left: 5%; margin: 0px; top: 40%;}
	#marketPage .marketCon .markettxt{ width: 70%; padding: 6%; left: 9%; margin: 0px;}
	#COOPERATIONPage{ padding: 50px 0px;}
	.radiationPbox{ padding: 35px 0px;}
	#responsibilityPage{ padding: 40px 0px;}
	#welfarePage{ padding: 40px 0px;}
	#lovePage{ height: 500px;}
	#lovePage ul{ height: 500px; width: 100%;}
	#lovePage ul li{ height: 500px;}
	#lovePage ul li img{ display: none;}
	.loveTxt{ width: 80%; left: 5%; margin-left: 0px; padding: 8% 5% 80px;}
	#teamPage{ padding: 40px 0px;}
	#hrPage{ padding: 40px 0px;}
	#joinPage{ padding: 40px 0px;}
	.join-dl .jname,.join-dl .jnum,.join-dl .jbtn{padding: 0px 5%;}
	.join-dl .jnum{ display: none;}
	.join-dl .jname{ width: auto;}
	.join-dl .jcbox{ padding: 25px 5%;}
	.messbtn:active{ background-color: #d01c1c; border: 1px solid #d01c1c;}
}
@media screen and (min-width:0px) and (max-width:860px) {
    .navbox{ padding: 78px 0px 16px; border: 0px none;}
    .nav{ display: none;}
    .navMobile{ display: block;}
	.newbox{ margin: 0px auto; width: 100%; display: block; background: #f1f0f0; padding-top: 10px;}
	.newbox li{ width: 47%; padding: 2% 0px 0px 2%; float: left; margin: 0px;}
	.newbox li.nd1{ margin: 0px;}
	.inewbox{ width: 100%; float:none; margin-bottom: 20px;}
	.irightbox{ width: 100%; float: none;}
	.inewbox{ height: auto;}
	.inewul,.inewul ul li{ height: auto;}
	.inewbox .bx-wrapper .bx-next, .inewbox .bx-wrapper .bx-prev{ top: 50%; margin-top: -19px;}
	.inewbox .inewby{ padding: 8% 5%;}
	.inewbox .txt{ height: auto; padding-bottom: 10%;}
	.ihotbox{ margin-bottom: 20px;}
	.ivideobox,.ivideobox a,.ivideobox a img{ height: auto;}
	.foot{ display: none;}
	.footMobile{ display: block;}
    #introductionPage .information{ float: none; width: 100%; padding-bottom: 50px;}
    #introductionPage .illustration{ float: none; width: 100%;}
	#introductionPage .information .c{ padding: 40px 0px; height: auto; margin: 0px; line-height: 1.8;}
	.molecularlist{ margin: 0px;}
	.molecularlist li{ float: none; margin: 0px 0px 18px; height: auto; display: block;}
	.molecularlist li a{ width: 88%; padding: 40px 6% 38px; height: auto;}
	.molecularlist li .t{ height: auto; margin-bottom: 32px;}
	.molecularlist li .c{ height: auto; margin-bottom: 42px;}
    .pboximg{ height: 260px;}
    #historyDl{ padding: 50px 0px;}
    #historyDl dd{ padding-bottom: 20px;}
    #historyDl dd .tyear{ width: 60px; height: 58px; font: 18px/58px arial, helvetica, sans-serif; float: inherit;}
	#historyDl dd .tcon{ width: 90%; padding: 35px 5%;  float: inherit;}
	.newmenu .more span{ padding: 0px 16px;}
	#newUl ul{ margin: 0px;}
	#newUl li{ float: none; width: 88%; padding: 25px 6% 24px; margin:36px 0 0 0;}
	#newUl .t{ height: auto;}
	.npBox a .time{ display: none;}
	#videoUl ul{ margin:0px;}
	#videoUl ul li{ float: none; margin:0px 0px 6% 0px; width: 100%; height: auto;}
	#videoUl ul li a,#videoUl ul li a img{ height: auto;}
	.productDL .img, .productDL .con,.productDL dd.proItem1 .img{ float: none; width: 100%;}
	.txtitem{ padding: 8% 0px;}
	.txtitem .t{ font-size: 30px;}
	.prolistDD{ margin:0px;}
	.prolistItem{ float: none; width: 100%; margin: 0px 0px 25px 0px;}
	.prolistItem .pi{ bottom: -25px;}
	.proAct .img .pmore{ display: none;}
	.proimg{ padding: 30px 5% 46px;}
	.probanner .bx-wrapper .bx-prev{ left: 0%;}
	.probanner .bx-wrapper .bx-next{ right:0%;}
	.proBox{ margin: 0px 0px 25px 0px; float: none;}
	.welfareList{ margin:0px;}
	.welfareList li{ float: none; width:100%; margin: 0px 0px 20px 0px;}
	.welfareList li .img{ width: 100%; height: auto;}
	.welfareList li .txt{ height: auto; line-height: 1.4; padding: 15px 4%;}
	.teamList{ margin:0px;}
	.teamList li{ width:100%; margin: 0px 0px 5% 0px ;}
	.mapBox{ width: 100%; margin: 0px auto; float: none; height: 280px;}
	.messBox{ width: 90%; padding: 0px 5% 50px; float: none; margin: 0px auto; height: auto;}
	.messBox .c{ height: auto;}
	.messTBL td.fr{ width: 50px;}
	.boxSharp{ display: none;}
	.probtn a.prosharp{ display: none;}
    #videocontainer { width: 100%; height: 100%; }
    .theme-popover { width: 100%; height:50%; margin: 0px; border: none; top:25%; left: 0px; background: none; }
    .theme-popover .close { right: 0px; z-index: 99999; top: 0px; }
}