div[class^="card"]{}
        div[class^="card"], div[class^="card"] ul { overflow:hidden}
        div[class^="card"] li { box-sizing:border-box; width:300px; display:inline; float:left; position:relative}
        div[class^="card"] li p { font-family:CS ChatThaiUI; font-size: 16px; line-height: 22px}
        div[class^="card"] li img { display:block; width:100%; height:auto;}
        div[class^="card"] li a { color:#494949; display: block; position: relative}
        div[class^="card"] h2 { font-size:24px; line-height:34px; padding:16px 0 6px 14px;}
        div[class^="card"] h3 { font-weight: normal; font-family:'kittithada_roman'; font-size:30px; line-height: 26px; padding: 6px 0 0; }

    .temp-1200 { width: 1200px; clear: both}
    .temp-900 { width: 900px; display: inline; float: left;}
    .temp-300 { width: 300px; display: inline; float: left;}
    .temp-300 div[class^=card] { padding: 0 10px;}

    div[class^=zone] { width:100%; clear: both; box-sizing: border-box; padding:20px 0; }
    div[class^=zone].parallax {padding: 10px 0;background-attachment: fixed; background-size: cover;}
    div[class^=zone].parallax div[class^="card"] { background: #FFF;}
    .parallax .wrap { box-shadow: 0 1px 4px rgba(0,0,0,0.3)}
    .view-all{ clear: both;font-size: 14px; margin:0 10px; text-align: right; padding:20px 0 15px;}
    .view-all a {color: #fff; background-color: #22b573; padding:10px 20px 7px; border-radius:4px; display: inline-block}
    .view-all a:hover {color: #fffb0a;}
    
    div[class^=zone] .wrap { background: #FFF; border-radius: 10px; box-sizing: border-box;}
    
    div.card-A li { padding:10px 10px 7px}
        div.card-A li:first-child { width: 600px; padding:10px 10px 9px;}

        .temp-900 div.card-A li:nth-child(4), .temp-900 div.card-A li:nth-child(5), .temp-900 div.card-A li:nth-child(6), .temp-900 div.card-A li:nth-child(7), .temp-900 div.card-A li:nth-child(8), .temp-900 div.card-A li:nth-child(9), .temp-900 div.card-A li:nth-child(10), .temp-900 div.card-A li:nth-child(11) { width: 225px; }
        div.card-A li h3 { font-size:40px;line-height:34px;padding: 0 30px; box-sizing: border-box; position: absolute; top: 50%; left: 0; font-family:'kittithada_roman'; color: #FFF; width: 100%; transform: translateY(-50%); text-align: center;}
        div.card-A li:first-child h3 { font-size:50px; line-height: 50px;padding: 0 60px; box-sizing: border-box; }
        .temp-900 div.card-A li:nth-child(4) h3, .temp-900 div.card-A li:nth-child(5) h3, .temp-900 div.card-A li:nth-child(6) h3, .temp-900 div.card-A li:nth-child(7) h3, .temp-900 div.card-A li:nth-child(8) h3, .temp-900 div.card-A li:nth-child(9) h3, .temp-900 div.card-A li:nth-child(10) h3, .temp-900 div.card-A li:nth-child(11) h3 { font-size:40px; }

        div.card-A li a:before { content:""; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.2); position: absolute; top: 0; left: 0}
        .temp-300 div.card-A li:first-child h3 { line-height: 30px;}
        .temp-300 div.card-A li { width: 100%; padding:10px 10px 7px}
        .temp-300 div.card-A li h3 { font-size:40px;}

        .temp-900 div.card-B li { width: 225px; padding:10px}
        .temp-1200 div.card-B li { width:240px; padding:10px}
        div.card-B li h3 { position: absolute; bottom:0; left: 0; color: #FFF; width: 100%; padding:6px 10px; box-sizing: border-box; background: rgba(0,0,0,0.6)}
        .temp-300 div.card-B li { width: 50%; padding:4px}
    
    div.card-C li { width:25%; padding:10px;}
        div.card-C li h3 { font-size:30px; height:47px; padding: 6px 0 6px; overflow: hidden;}
        div.card-C li p { height: 67px; overflow: hidden}
        .temp-300 div.card-C li { width: 50%; padding:4px}
        .temp-300 div.card-C li h3 { font-family:CS ChatThaiUI; font-size: 16px; line-height: 22px; height:69px; }
        .temp-300 div.card-C li p { display: none;}
    
    div.card-D li { width: 50%; padding:10px; overflow: hidden; height: 162px;}
        div.card-D li h3 { padding: 0 0 6px; }
        div.card-D li img { width: 44%; height: auto; display: inline; float: left; margin-right:14px; }       
        .temp-1200 div.card-D li { height: 212px; }
        .temp-1200 div.card-D li h3 { font-size:30px; line-height: 30px;}
        .temp-1200 div.card-D li img { margin-right:18px;}
        .temp-900 div.card-D li h3 { font-size:26px; max-height: 74px; overflow: hidden;}
        .temp-900 div.card-D li p { max-height: 65px; overflow: hidden;}
        .temp-300 div.card-D ul { padding-top:4px;}
        .temp-300 div.card-D li { width:100%; padding:6px 0; height:auto}
        .temp-300 div.card-D li img { width: 36%; height: auto; display: inline; float: left; margin-right:14px; }
        .temp-300 div.card-D li h3 { font-family: CS ChatThaiUI; font-size: 15px;line-height: 22px; }
    
    div.card-E li { padding: 10px 10px 0; width: 22%;}
        div.card-E li h3 { font-family:CS ChatThaiUI; font-size: 16px; line-height: 22px; height:69px; overflow: hidden}
        div.card-E li:first-child { width: 54%;}
        div.card-E li:first-child h3 { font-family:'kittithada_roman'; font-size:30px; line-height:26px; padding: 6px 0 0; height: auto}
        .temp-1200 div.card-E li { padding: 10px 10px 0; width:18%;}
        .temp-1200 div.card-E li:first-child { width: 44%; }
        .temp-1200 div.card-E li:first-child h3 { padding: 6px 0;}
        .temp-300 div.card-E li { width:100%; padding:6px 0}
        .temp-300 div.card-E li img { width: 36%; height: auto; display: inline; float: left; margin-right:14px; }
        .temp-300 div.card-E li h3 { font-size: 16px; }
        .temp-300 div.card-E li:first-child h3 { font-size:34px; }
        .temp-300 div.card-E li:first-child img { width: 100%; display: block; float: none; margin: 0}
    
    div.card-F li { padding: 10px 10px 5px; width: 25%;}
        div.card-F li h3 { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,.6); color: #FFF; padding:6px 8px; box-sizing: border-box; font-size: 26px;}
        div.card-F li:first-child { width: 50%;}
        div.card-F li:first-child h3 { font-size:32px; padding:8px 16px; line-height: 30px; }
        .temp-1200 div.card-F li { width: 20%;}
        .temp-1200 div.card-F li:first-child { width: 40%; }

    div.card-G li { padding: 10px; width: 33%;}
        div.card-G li h3 { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,.6); color: #FFF; padding:8px; box-sizing: border-box; font-size: 26px;}
        .temp-1200 div.card-G li h3 { font-size: 32px; line-height: 30px; padding: 12px;}

    div.card-H li { padding: 10px; width: 27%;}
        div.card-H li p { height: 64px; overflow: hidden}
        div.card-H li:first-child { width: 46%;}
        div.card-H li h3 { font-size:30px; height:47px; padding: 6px 0 6px; overflow: hidden;}
        div.card-H li:first-child h3 { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; background: rgba(0,0,0,.6); color: #FFF; box-sizing: border-box; font-size: 32px; line-height: 30px; padding: 12px;}
        .temp-1200 div.card-H li { width: 21.33%;}
        .temp-1200 div.card-H li:first-child { width: 36%;}

    div.card-I li { padding: 10px; width: 50%;}
        div.card-I li img { width: 47%; height: auto; display: inline; float: left; margin-right:10px;}
        div.card-I li:first-child { width: 50%;}
        div.card-I li h3 { font-size:28px; padding: 0; }
        div.card-I li p {height: 68px; overflow: hidden;}
        div.card-I li:first-child h3 { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; background: rgba(0,0,0,.6); color: #FFF; box-sizing: border-box; font-size: 32px; line-height: 30px; padding: 12px;}
        .temp-1200 div.card-I li img { width: 38%;}
        div.card-I li:first-child img { width: 100%; height: auto; display: block; float: none; margin: 0}
        .temp-1200 div.card-I li { padding: 10px; width: 35%;  }
        .temp-1200 div.card-I li a {height: 118px; overflow: hidden}
        .temp-1200 div.card-I li:first-child { width: 30%;}
        .temp-1200 div.card-I li:first-child a { height: 255px; overflow: hidden}
        .temp-1200 div.card-I h3 { font-size: 26px; line-height: 24px;}

    div.card-market li { width:32.33%; margin:0.5%; padding: 0; border:1px solid #ccc; border-radius: 6px; overflow: hidden; box-shadow: 0 0 5px rgba(0,0,0,0.3);}
    div.card-market li h3 { font-size:30px; height:47px; padding:8px; overflow: hidden; color: #000;}
    div.card-market li p { height: 67px; padding:8px;}
    div.card-market li a { display: block;}
    div.card-market .poster { position: relative; padding: 6px; overflow: hidden;}
    div.card-market .poster .avatar { width:50px; height:50px; border-radius: 50%; overflow: hidden; float: left; display: block; margin-right:8px}
    div.card-market .poster strong { display: block; color: #259048;  line-height:30px; font-size: 18px}
    div.card-market .poster span { font-size: 15px;}
    div.card-market .text-market { padding:0 16px 10px;}


.listpage .card-C { margin-top:50px;}
.listpage .card-C h3 {font-family: CS ChatThaiUI; font-size: 16px; line-height: 22px; height: 67px; color: #000}
.listpage .card-B h3 { color: #FFF; height: auto; font-weight: normal;font-family: 'kittithada_roman'; font-size: 30px;  line-height: 26px;}    
.listpage .view-all { width:1200px; margin: 0 auto;}
.listpage .view-all a { padding: 20px 20px 17px; display: block; font-size: 18px;}

.listpage .view-more { clear: both; font-size: 14px; margin: 0 10px; text-align: right; padding: 20px 0 15px;}
.listpage .view-more a { color: #fff; background-color: #22b573; padding: 10px 20px 7px; border-radius: 4px; display: inline-block;}


div[class^="card"] h2 {padding: 26px 0 6px 14px;}
.topbillboard {width:970px; margin:0 auto;}
.topbillboard .banner_position iframe {margin:5px 0;}
.temp-1200 .card-banner .banner_position { margin:16px auto 10px; width: 970px;}

.temp-300 .card-banner .banner_position { margin-top:64px;}
.temp-300 .card-banner { padding: 0 !important;}
.temp-300 .card-banner .banner_position:nth-child(2) { margin-top:20px;}
.temp-300 .card-banner .banner { margin:76px auto 0}