@charset "utf-8";
/* CSS Responsive */

@media only screen and (max-width:1600px){
    .menu {left: 200px; right: 250px;}
    .title_a {}
    .newsL > div {margin: 0 1.701% 85px 1.701%;}
    .tempB > div > div:nth-child(2) {padding: 75px 0px 0 4.256%;}
    .servAL > li {padding: 30px 10px 20px 10px;}
    .smarA > div > div:nth-child(1), .smarC > div > div:nth-child(1) {padding: 70px 2.696% 0 2.696%;}
    .smarB > div > div:nth-child(2) {padding: 70px 0px 0 7.66%;}
    .mainLeft > h2 {margin-bottom: 33px;}
    .prodL > div {margin: 0 2.7396% 75px 0;}
    .prodL > div:nth-child(4n+4) {margin: 0 0 75px 0;}
    .prodSR {padding: 30px 0 0 6%;}
    .prodSR div.text {padding: 0 15% 23px 8px;}
    .prodSC {padding: 55px 0 0 0;}
    .relatedP {padding: 80px 0 0 0;}
    .contAF > div:nth-child(3) {padding: 55px 0 20px 0;}
}
/*1600px_spc_end*/


@media only screen and (max-width:1400px){
    .title_a {margin-bottom: 25px;}
    .ind_AR div.text, .ind_CL div.text {padding: 0 0 4% 0;}
    .ind_B div.text > div:nth-child(1) {width: 52%; padding: 0; letter-spacing: -0.4px;}
    .ind_B div.text > div:nth-child(2) {width: 48%; padding: 0; letter-spacing: -0.4px;}
    .ind_CL {padding: 0 0 0 9%;}
    .footerC {width: 45.4255%;}
    .footerR {width: 36.1348%;}
    .newsL {padding: 0;}
    .newsL > div {margin: 0 1.701% 75px 1.701%;}
    .title_c {letter-spacing: 1.9px;}
    .tempA > div > div:nth-child(2) > span::before {left: -13%; top: 50%;}
    .tempC > div > div:nth-child(1) {padding: 47px 0 0 4%;}
    .tempC > div > div:nth-child(2) {padding: 0 0 0 50px;}
    .tempB > div > div:nth-child(2) {padding: 55px 0px 0 3%;}
    .tempD .title_c {margin-bottom: 0;}
    .tempD .photo_float {width: 68.5%;}
    .tempD .photo_float > div {margin-left: 2%; width: 32%;}
    .servAL > li {padding: 25px 10px 20px 10px;}
    .smarA > div > div:nth-child(1), .smarC > div > div:nth-child(1) {padding: 30px 2.36% 0 0;}
    .smarA > div > div:nth-child(2) > span::before {top: 13%;}
    .smarB > div > div:nth-child(2) {padding: 30px 0px 0 2.36%;}
    .smarB > div > div:nth-child(1) > span::before {top: 10%;}
    .mainLeft > h2 {margin-bottom: 30px;}
    .prodL > div {margin: 0 2.7396% 60px 0;}
    .prodL > div:nth-child(4n+4) {margin: 0 0 60px 0;}
    .prodL > div > h3, .prodL > div > div.text {padding: 0 10px;}
    .prodSR {padding: 0px 0 0 3.5%;}
    .prodSR div.text {padding: 0 10% 23px 8px;}
    .prodSC {padding: 50px 0 0 0;}
    .relatedP {padding: 70px 0 0 0;}
    .contAF {padding: 7.657% 6% 5.86% 6%;}
    .contAF > div:nth-child(1) {padding: 0 3% 0 0;}
    .contAF > div:nth-child(2) {padding: 0 0 0 3%;}
    .contAF > div:nth-child(3) {padding: 50px 0 20px 0;}
}
/*1400px_nb_end*/


@media only screen and (max-width:1279px){
    .frame_1410, .frame_1330, .frame_1306, .frame_1170 {padding: 0 50px;}
    .top-barC {height: 60px;}
    .logo {width: 90px; }
    .links {right: 20px;}
    .menu {left: 120px; right: 180px;}
    .sjj_nav_ul > li > a {padding: 0px 0px 14px 0;}
    #content {padding: 60px 0 0 0;}
    .banner {min-height: auto;}
    .title_a {margin-bottom: 20px;}
    .ind_AR {}
    .ind_AR div.text, .ind_CL div.text {padding: 0 0 20px 0; line-height: 1.7;}
    .ind_AR div.text p, .ind_CL div.text p {line-height: 1.7;}
    .ind_B div.text > div:nth-child(1) {width: 100%; padding: 0; letter-spacing: 0px; text-align: center;}
    .ind_B div.text > div:nth-child(2) {width: 100%; padding: 0px 0 0 0; letter-spacing: 0px; text-align: center;}
    .ind_B div.text > div p {text-align: center;}
    .ind_CL {padding: 0 0 0 4%;}
    .footerL {width: 20%;}
    .footerC {width: 52%;}
    .footerR {width: 28%; padding: 12px 0px 0px 4%;}
    .newsL > div {margin: 0 1.701% 60px 1.701%;}
    .tempA > div > div:nth-child(1) {padding: 34px 4.256% 0 0;}
    .tempA > div > div:nth-child(2) > span::before {left: -16%; top: 48%;}
    .smarA > div > div:nth-child(1), .smarC > div > div:nth-child(1) {padding: 0px 20px 0 0;}
    .smarA > div > div:nth-child(2) > span::before {top: 7.9%;}
    .smarB > div > div:nth-child(2) {padding: 0px 0px 0 20px;}
    .smarB > div > div:nth-child(1) > span::before {top: 7.9%;}
    .mainLeft > h2 {margin-bottom: 27px;}
    .prodL > div {margin: 0 2.7396% 45px 0;}
    .prodL > div:nth-child(4n+4) {margin: 0 0 45px 0;}
    .prodL > div > h3, .prodL > div > div.text {padding: 0px;}
    .prodSR {padding: 0px 0 0 2%;}
    .prodSR div.text {padding: 0 5% 23px 8px;}
    .relatedP {padding: 60px 0 0 0;}
    #cms-button-panel {width: calc(100% - 160px);}
    #cms-lower-panel > div.cms-lower-item {min-width: 576px;}
    .contAF {padding: 7.657% 5% 5.86% 5%;}
    .contAF > div:nth-child(1) {padding: 0 2% 0 0;}
    .contAF > div:nth-child(2) {padding: 0 0 0 2%;}
    .contAF > div:nth-child(3) {padding: 45px 0 20px 0;}
}
/*1200px_xl_end*/


@media only screen and (max-width:992px){
    .mobile_9 {display:block;} .pc_9 {display:none;}
    .bg_saf {background-attachment: scroll;}
    .bg_bsc {-webkit-background-size: none; -moz-background-size: none; -o-background-size: none; background-size: none;}
    .a_nohover {pointer-events: initial;}
    .rotate_360:hover {text-decoration:none; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg);}
    .alpha_60:hover {filter:alpha(opacity=100);Opacity:1.0;}
    .scale_3:hover, .scale_05:hover {transform: scale(1.0, 1.0);}
    .translateY_t075:hover {-moz-transform:translateY(0); -webkit-transform:translateY(0); -o-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0); transition: all 0.5s ease 0s;}
    .flash-line-hover:hover::before {-webkit-animation-name: none!important; animation-name: none!important;}
	.frame_1410, .frame_1330, .frame_1306, .frame_1170 {padding: 0 20px;}
    #content {padding: 60px 0 0 0;}
    .logo {width: 90px; }
    .top-barC {height: 60px; box-shadow: 0px 0px 13px rgba(0, 0, 0, 0.2);}
    .title_a {margin-bottom: 30px;}
    .ind_AL, .ind_CR {order: 2; width: 100%;}
    .ind_AR, .ind_CL {order: 1; width: 100%; padding: 40px 20px;}
    .ind_AR h1, .ind_AR h2, .ind_CL h2 {text-align: center; flex-wrap: wrap; justify-content: center;}
    .ind_AR div.text, .ind_CL div.text {padding: 0 0 40px 0;}
    .ind_AR div.text, .ind_AR div.text p, .ind_CL div.text, .ind_CL div.text p {text-align: center; line-height: 2;}
    .ind_AR .btn_a, .ind_CL .btn_a {margin: auto;}
    .title_a span {padding: 0 15px;}
    .title_a span::before, .title_a span::after {height: 100%;}
    .ind_D > div.frame_1170 > div, .ind_E > div.frame_1170 > div {margin: 0 10px 40px 10px; width: calc(100% / 3 - 20px);}
    .ind_E h2 {margin-bottom: 30px;}
    .footer {flex-direction: column; padding: 40px 20px;}
    .footerL {width: 100%; padding: 0;}
    .footerC {width: 100%; max-width: 470px; margin: auto; padding: 30px 0; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16);}
    .footerR {width: 100%; max-width: 470px; margin: auto; padding: 30px 0 0 0;}
    .footerR > ul > li {width: calc(100% / 3);}
    .newsL > div {width: 30%; margin: 0 1.66% 60px 1.66%;}
    .pages {padding-top: 20px;}
    .subTL {order: 1; width: 50%;}
    .subT h1 {order: 3; width: 100%; padding: 10px 0 0 0; text-align: left;}
    .subTR {order: 2; width: 50%;}
    .subC {padding: 30px 0 7.518% 0;}
    .tempA, .tempB {padding: 0 0 60px 0;}
    .tempA > div > div:nth-child(1) {width: 100%; order: 2; padding: 60px 0 0 0;}
    .tempA > div > div:nth-child(2) {width: 100%; order: 1;}
    .tempA > div > div:nth-child(2) > span::before {left: -30px; top: auto; bottom: -30px;}
    .tempB > div > div:nth-child(1) {width: 100%; padding: 0; justify-content: flex-start;}
    .tempB > div > div:nth-child(1) > span::before {left: auto; top: auto; right: -40px; bottom: -40px;}
    .tempB > div > div:nth-child(2) {width: 100%; padding: 60px 0 0 0;}
    .tempC {padding: 0;}
    .tempC > div > div:nth-child(1) {width: 100%; order: 2; padding: 60px 0 0 0;}
    .tempC > div > div:nth-child(2) {width: 100%; order: 1; padding: 0; justify-content: flex-start;}
    .tempC > div > div:nth-child(2) > span::before {left: auto; top: auto; right: -40px; bottom: -40px;}
    .title_c {padding: 0 0 20px 39px;}
    .tempD .photo_float {width: 100%; float: none; justify-content: space-between; padding: 0 0 20px 0;}
    .tempD .photo_float > div {max-width: 279px; margin: 0;}
    .tempD .photo_float > div:nth-child(1) {margin-right: 5px;}
    .tempD .photo_float > div:nth-child(2) {margin: 0 5px;}
    .tempD .photo_float > div:nth-child(3) {margin-left: 5px;}
    .servA .photo {margin-bottom: 50px;}
    .servAL {padding-bottom: 20px;}
    .servAL > li {padding: 20px 10px;}
    .servAL > li > div.text {margin-bottom: 20px;}
    .smarA {padding: 20px 0 4.047% 0;}
    .smarA > div > div:nth-child(1), .smarB > div > div:nth-child(2) {order: 2; width: 100%; position: relative; z-index: 1; padding: 0;}
    .smarA > div > div:nth-child(2), .smarB > div > div:nth-child(1) {order: 1; width: 100%; padding: 0 0 60px 0;}
    .smarA > div > div:nth-child(2) > span::before {top: auto; bottom: -40px; width: 94.767%; padding-bottom: 56.578%;}
    .smarB > div > div:nth-child(1) > span::before {top: auto; bottom: -40px; right: 40%; width: 94.767%; padding-bottom: 56.578%;}
    .smarC > div > div:nth-child(1) {order: 2; width: 100%; position: relative; z-index: 1; padding: 0;}
    .smarC > div > div:nth-child(2) {order: 1; width: 100%; padding: 0 0 30px 0;}
    .mainLeft {width: 100%; padding: 0 0 20px 0; margin: 0;}
    .mainLeft::after {content: none;}
    .mainLeft > h2 {margin-bottom: 30px;}
    .mainLeft > h2, .mainLeft > h2 span {text-align: center;}
    .mainRight {width: 100%;}
    .mainRight > div.text, .prodL {padding: 40px 0 0 0;}
    .prodL > div {margin: 0 2.7396% 40px 0;}
    .prodL > div:nth-child(4n+4) {margin: 0 0 40px 0;}
    .prodSL {width: 100%;}
    .prodSR {width: 100%; padding: 40px 0 0 0px;}
    .prodSR h1 {margin-bottom: 10px; line-height: 1.4;}
    .prodSR div.text {padding: 0 0 23px 0px;}
    .prodSC {padding: 40px 0 0 0;}
    #cms-price-panel {padding: 0 0 15px 0px;}
    #cms-spec-panel {padding: 0 0 13px 0px;}
    #cms-lower-panel {padding: 0; margin: 25px 0 0 0;}
    .cms-lower-item-title {width: calc(100% - 33px - 102px - 36px - 160px);}
    .cms-lower-item-price {width: 160px; padding: 0 10px;}
    .prodSR .btnPNB {width: calc(100% - 0px); margin-left: 0px;}
    .relatedP {padding: 50px 0 0 0;}
    .contAF {padding: 5.5% 20px;}
    .contAF > div:nth-child(1) {padding: 0 10px 0 0;}
    .contAF > div:nth-child(2) {padding: 0 0 0 10px;}
    .contAF > div:nth-child(3) {padding: 40px 0 20px 0;}
}
/*992px_lg_end*/


@media only screen and (max-width:768px){
	.mobile_7 {display: block;} .pc_7 {display:none;}
    html, body, div, h1, h2, h3, h4, h5, h6, p {text-align: left;}
    .ind_B, .ind_B div.text {padding: 40px 0;}
    .ind_B h2 {}
    .ind_D, .ind_E {padding: 40px 0 0 0;}
    .path {padding: 18px 0px 25px 0px;}
    .newsL > div {margin: 0 1.66% 50px 1.66%;}
    .pages {padding-top: 15px;}
    .newsA > div:nth-child(1) {width: 100%; padding: 0 0 20px 0;}
    .newsA > div:nth-child(2) {width: 100%;}
    .servA .photo {margin-bottom: 40px;}
    .servAL {padding-bottom: 10px;}
    .servAL > li {padding: 20px 0px;}
    .prodL > div, .prodL > div:nth-child(4n+4) {width: 32%; margin: 0 2% 40px 0;}
    .prodL > div:nth-child(3n+3) {margin: 0 0 40px 0;}
    .contAF {padding: 30px 20px;}
    .contAF textarea {height: 235px;}
    .contAF > div:nth-child(1) {width: 100%; padding: 0;}
    .contAF > div:nth-child(2) {width: 100%; padding: 0;}
    .contAF > div > ul > li:nth-child(1) {width: 105px; padding: 7px 0 0 19px;}
    .contAF > div > ul > li:nth-child(2) {width: calc(100% - 105px);}
}
/*768px_md_end*/


@media only screen and (max-width:576px){
    .mobile_5 {display: block;} .pc_5 {display:none;}
    .ind_AR h1, .ind_AR h2, .ind_CL h2 {letter-spacing: 0px;}
    .ind_D, .ind_E {padding: 40px 0 10px 0;}
    .ind_D > div.frame_1170 > div, .ind_E > div.frame_1170 > div {margin: 0 auto 30px auto; width: 100%;}
    .ind_D > div.frame_1170 > div > div.photo, .ind_E > div.frame_1170 > div > div.photo {margin-bottom: 10px;}
    .footerC, .footerR {max-width: 100%; width: auto;}
    .footerC > ul > li:nth-child(2) label {display: block;}
    .footerR > ul > li {width: calc(100% / 2); padding: 0 5px;}
    .footerR > ul > li h5 {text-align: center;}
    .subDiv {padding: 0 0 50px 0;}
    .subM {margin-bottom: 25px;}
    .newsL > div {width: 48.5%; margin: 0 3% 40px 0%;}
    .newsL > div:nth-child(2n+2) {margin: 0 0 40px 0%;}
    .pages {padding-top: 10px;}
    .pages .prev {margin: 5px 15px 5px 0px!important;}
    .pages .next {margin: 5px 0px 5px 15px!important;}
    .subC {padding: 30px 0 40px 0;}
    .tempA, .tempB, .tempD, .smarB {padding: 0 0 50px 0;}
    .servA, .contA {padding: 20px 0 0 0;}
    .servA .photo {margin-bottom: 10px;}
    .servAL {padding-bottom: 20px;}
    .servAL > li {width: 100%; padding: 30px 0; margin-bottom: 0;}
    .servAL > li {border-left: 0!important; border-bottom: 1px solid #d2d2d2!important;}
    .servAL > li:last-child {border-bottom: 0!important;}
    .smarA {padding: 20px 0 50px 0;}
    .prodL > div, .prodL > div:nth-child(4n+4), .prodL > div:nth-child(3n+3) {width: 48%; margin: 0 4% 40px 0;}
    .prodL > div:nth-child(2n+2) {margin: 0 0 40px 0;}
    #cms-button-panel {width: 100%; padding: 10px 0 0 0;}
    #cms-price-panel > span + span {margin-left: 20px;}
}
/*576px_sm_end*/


@media only screen and (max-width:430px){
    .links {top: 22px;}
    .links > div {margin-left: 10px;}
    .links a:link, .links a:visited {font-size: 0;}
    .links_search font {font-size: 0; min-height: 0px; height: 20px;}
    .search_open {width: 110px;}
    .search {height: 30px; top: -5px; right: 30px;}
    .search_btn, .search_pic::before {height: 20px;}
    .links_member ul {top: 37px;}
    .links_member ul li a {font-size: 15px!important;}
    .links_cart span {top: -13px; right: -11px;}
    .ind_AR h1, .ind_AR h2, .ind_CL h2 {line-height: 1.5;}
    .ind_B h2 {letter-spacing: 2px;}
    .title_b > span {padding: 0 25px;}
    .title_b > span img {width: 20px; top:4px;}
    .pages .prev {margin: 5px 5px 5px 0px!important;}
    .pages .next {margin: 5px 0px 5px 5px!important;}
    .tempA, .tempB, .tempD, .smarB {padding: 0 0 40px 0;}
    .title_c {padding: 0 0 10px 30px; letter-spacing: 1px;}
    .title_c img {width: 20px; top:4px;}
    .smarA {padding: 20px 0 40px 0;}
    #cms-price-panel > span + span {margin-left: 0px; display: block;}
    #cms-button-panel button img {margin-right: 5px;}
    .contAF {padding: 25px 15px;}
    .contAF textarea {padding: 10px; height: 150px;}
    .inputB {padding: 0 10px;}
    .selectA {padding: 0 12% 0 6px;}
    .contAF > div > ul > li:nth-child(1) {width: 80px; padding: 10px 0 0 10px;}
    .contAF > div > ul > li:nth-child(2) {width: calc(100% - 80px);}
    .contAFB .inputC {width: calc(50% - 4px);}
}
/*430px_xs_end*/

@media only screen and (max-width:350px){
    .ind_B h2 {letter-spacing: 0px;}
    .newsL > div, .newsL > div:nth-child(2n+2) {width: 100%; margin: 0 auto calc(20px + 2%) auto;}
    .prodL > div, .prodL > div:nth-child(4n+4), .prodL > div:nth-child(3n+3), .prodL > div:nth-child(2n+2) {width: 100%; margin: 0 auto 40px auto;}
    .btnP, .btnN {padding: 0;}
    .btnP a img, .btnB a img {margin-right: 7px;}
    .btnN a img {margin-left: 7px;}
    .footerC > ul > li:nth-child(1), .footerC > ul > li:nth-child(2) {width: 100%; text-align: center;}
}
/*350px_xs_end*/