/*==========================================
Old Screen
==========================================*/

@media screen and (max-width: 1280px ) and (min-width: 1024px) {
#homeTitle h1 {font-size:32px; }
h1 {font-size:28px; line-height:32px}
h2 {font-size:24px; line-height:30px}
#homeTitle p {font-size:20px; line-height:20px}
#homeTitle img {height:85px}
#homeTitle p span, p, .undoreset p, .undoreset li {font-size:16px; line-height:24px}
.products li figcaption, .products li .over div {font-size:16px}
nav #mainNav > li {margin:0 20px}
nav #mainNav > li > a, .sideBar ol li a {font-size:17px}
.sideBar .title, .sideBar ul > li > a {font-size:18px}
.sideBar li a {height:60px; line-height:60px}
.btnStyle01 {width:230px; height:52px; line-height:52px; font-size:20px}
.innerContent {padding-left:40px}
#aboutVideo iframe {height:350px}
}

/*==========================================
Tablet
==========================================*/

@media screen and (max-width: 1023px ) and (min-width: 768px) {
.mainLogo img {width:110px}
.mobileIcon {display:block}
.pageContainer {margin-top:58px}
.m_hide {display:none}
.m_show {display:block}
#homeTitle h1 {font-size:32px; }

h1 {font-size:28px; line-height:32px}
h2 {font-size:24px; line-height:30px}
#homeTitle p {font-size:20px; line-height:20px}
#homeTitle img {height:85px}
#homeTitle p span, p, .undoreset p, .undoreset li {font-size:16px; line-height:24px}
.products li figcaption, .products li .over div {font-size:16px}
.products li:hover .over {opacity:0}
#home .mainContent {display:block}
#homeLeft, #homeRight {width:100%}
#homeRight {height:600px}
.products li figcaption, .products li .over div {font-size:16px}
nav #mainNav > li {margin:0 15px}
nav #mainNav > li > a, .sideBar ol li a {font-size:17px}
.sideBar .title, .sideBar ul > li > a {font-size:18px}
.sideBar .title {background-image:url('../images/icons/icon_arrowD01.png'); background-repeat:no-repeat; background-position:right 30px center}

.sideBar li a {height:60px; line-height:60px}
.btnStyle01 {width:200px; height:44px; line-height:44px; font-size:16px} 
#headerTop {height:auto; border-bottom:5px solid #d91a5b}
#headerTop .mainLogo {margin:5px 0}
#headerTop .clear.flex {display:block}
#headerTop .searchBar {width:100%; margin:10px 0}
#aboutText {float:none; width:100%}
#aboutVideo {float:none; width:640px; margin:0 auto}
#aboutVideo iframe {width:100%; height:480px;}
#chronicle {display:block; height:auto}
#chronicle li {width:25%; margin-bottom:25px}
#chronicle li:nth-child(5) .event {border-left:1px solid #fff}
#products {display:block}
#productList {width:100%; padding-left:0}
.sideBar {width:100%; margin-bottom:30px}
.sideBar li {display:none; }
.sideBar li a {padding-left:30px}
.sideBar li.title {display:list-item; padding-left:30px}
#productDetail {display:block}
#productDesc .tabContent #formula li {padding:14px 32px}
.productImg, #productDesc {width:100%}
.productImg {height:400px; padding:35px 60px; margin-bottom:30px}
.productImg img {width:auto; height:100%; margin:0 auto}
#contactForm .col-2 {width:100%;}
#contactInfo {display:block}
#contactInfo div {width:50%}
#contactInfo #contactFax {border-left:0}

#map {width:600px;}
}

/*==========================================
Mobile
==========================================*/

@media screen and (max-width: 767px ) {
.mobileIcon {display:block}
.pageContainer {margin-top:58px}
.m_hide {display:none}
.m_show {display:block}
#headerTop .mainLogo img {width:41px}
#headerTop .clear.flex {display:block}
#headerTop .searchBar {width:100%; margin:10px 0}
#home .mainContent {display:block}
#homeLeft, #homeRight {width:100%}
#homeRight {height:500px}
#homeTitle h1 {font-size:28px; margin-bottom:0}
h1 {font-size:28px; line-height:32px}
h2 {font-size:24px; line-height:30px}
#homeTitle p {font-size:16px; line-height:20px}
#homeTitle img {height:75px}
#homeTitle p span {font-size:13px}
p, .undoreset p, .undoreset li {font-size:16px; line-height:24px}
.products li figcaption, .products li .over div {font-size:16px}
.products li:hover .over {opacity:0}
#leftSlider .swiperCaption {height:32px; line-height:32px; bottom:40px; font-size:20px}
#aboutText {float:none; width:100%}
#aboutVideo {width:100%;}
#aboutVideo iframe {float:none; width:100%; height:300px;}
#chronicle {display:block; height:auto}
#chronicle li {width:50%; margin-bottom:25px; margin-right:0}
#chronicle li:nth-child(odd) .event {border-left:1px solid #fff}
#products {display:block}
#productList {width:100%; padding-left:0}
.sideBar {width:100%; margin-bottom:30px}
.sideBar li {display:none; width:100% !important}
.sideBar li a {padding-left:30px}
.sideBar li.title {display:list-item; padding-left:30px; background-image:url('../images/icons/icon_arrowD01.png'); background-repeat:no-repeat; background-position:right 30px center}
#productDetail {display:block}
.productImg {padding:40px; margin-bottom:30px}
.productImg, #productDesc {width:100%}
#productDesc .tabMenu a {font-size:20px}
#productDesc .tabContent iframe {height:300px}
#productDesc .tabContent #formula li {padding:14px 12px}
#headerTop {height:auto; border-bottom:5px solid #d91a5b}
#headerTop .mainLogo {margin:5px 0}
p.font13 {margin:10px 0; line-height:20px; text-align:center}
.btnStyle01 {width:160px; height:36px; line-height:36px; font-size:16px} 
.btnStyle01.fLeft {float:none; margin:40px auto 0 auto}
#contactInfo {display:block}

#contactForm .col-2 {width:100%;}
.wrap2 {width:90%}
#contactInfo {display:block}
#contactInfo div {width:50%; height:200px;}
#contactInfo #contactFax {border-left:0}
#contactForm .btnStyle01 {float:right; margin-bottom:20px}

.flex-fLeft li {width:48%; margin-right:4%}
.flex-fLeft li:nth-child(even) {margin-right:0}

#map {width:100%}


}


@media screen and (max-width: 460px ) {
	/*
.flex-fLeft li {width:100%; margin-right:0}
*/
#contactForm .tableTr {display:block}
#contactForm .tableTr div {width:100%}
#contactInfo div {width:100%; padding-top:0; border:0; height:auto}
#contactInfo div p {margin-bottom:0px;}
}