/* Table of Contents
==================================================
    #Base Grid - 12 column (Default / for Grid 1200px )
    #Tablet (for Grid 769px - 960px)
    #Tablet (for Grid 481px - 768px)
    #Mobile (for Grid 320px - 480px)



/********************************************************************************************* 

1.  Grid 960px

*********************************************************************************************/

.container {
    margin:0 auto;
    width: 960px;
    position: relative;
}
.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16 {
    display:inline;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}
.alpha {
    margin-left: 0;
}
.omega {
    margin-right: 0;
}
.beta {
    margin-left: 0;
    margin-right: 0;
}


.container .grid-1 {
    width:60px;
}
.container .grid-2 {
    width:140px;
}
.container .grid-3 {
    width:220px;
}
.container .grid-4 {
    width:300px;
}
.container .grid-5 {
    width:380px;
}
.container .grid-6 {
    width:460px;
}
.container .grid-7 {
    width:540px;
}
.container .grid-8 {
    width:620px;
}
.container .grid-9 {
    width:700px;
}
.container .grid-10 {
    width:780px;
}
.container .grid-11 {
    width:860px;
}
.container .grid-12 {
    width:940px;
}




/********************************************************************************************* 

2.  Grid 1024px (mediaqueries)

*********************************************************************************************/

@media only screen and (min-width: 960px) and (max-width: 1279px) {
    .org_ass img {
        position: relative;
        top: -2px;
    }
}


/********************************************************************************************* 

3.  Grid 720px (mediaqueries)

*********************************************************************************************/

@media only screen and (min-width: 720px) and (max-width: 959px) {
    .container {
        width: 720px;
    }

    .container .grid-1 {
        width:40px;
    }
    .container .grid-2 {
        width:100px;
    }
    .container .grid-3 {
        width:320px;
    }
    .container .grid-4 {
        width:220px;
    }
    .container .grid-5 {
        width:280px;
    }
    .container .grid-6 {
        width:340px;
    }
    .container .grid-7 {
        width:400px;
    }
    .container .grid-8 {
        width:460px;
    }
    .container .grid-9 {
        width:520px;
    }
    .container .grid-10 {
        width:580px;
    }
    .container .grid-11 {
        width:640px;
    }
    .container .grid-12 {
        width:700px;
    }

    /* header & main menu */
    #header {
        height: 80px !important;
    }

    #header #logo {
        width: 70px;
        height: 60px;
    }

    #header #main_menu {
        width: 200px;
        height: 80px;
    }
        #header #main_menu .main_tit {
            margin-top: 10px;
        }

        #header #main_menu .menu {
            position: absolute;
            display: none;
            top: 80px;
            right: 12px;
            width: 120px;
            background: #fff;
            border: 1px solid #ccc;           
            z-index: 999;
        }

        #header #main_menu .menu li {
            width: 100%;
            text-align: center;
        }



        #header #main_menu .user_container {
            width: 200px;
            top: 54px;
            right: 90px;
        }


       #main_menu #mob_menu {
            display: block;
        }

    /* ////////////////////////// */  

    /* dot_list ////////// */
    .container .dot_list li.first span {
        font-size: 14px !important;
    }  

    /* History */
    .container .history_details li .hd_date {
        width: 70px;
    }

    .container .history_details li .hd_desc {
        width: 80px;
    }

    .container .history_details li .hd_refno {
        width: 80px;
    }

    .container .history_details li .hd_remark {
        width: 80px;
    }

    .container .history_details li .hd_ap, 
    .container .history_details li .hd_lp {
        width: 60px;
        text-align: right;
    }

    .container .history_details li .hd_amount {        
        width: 80px;
        text-align: right;
    }

    .container .history_details li .hd_date,
    .container .history_details li .hd_desc, 
    .container .history_details li .hd_ap, 
    .container .history_details li .hd_lp,
    .container .history_details li .hd_amount {        
        margin-right: 8px;
    }
    
    /* Redeem */

    .container .redeem_details li .rd_desc {
        width: 130px;
        margin-right: 5px;
        margin-left: 24px;
    }

    .container .redeem_details li .rd_price,
    .container .redeem_details li .rd_point,
    .container .redeem_details li .rd_amount {
        width: 94px;
        margin-right: 5px;
        text-align: right;
    }

    .container .redeem_details li .rd_qty {
        width: 60px;
    }

    .container .redeem_details li .rd_button {
        width: 60px;
    }


    /* ////////////////////////// */  

    /* PROFILE */
    .container .profile_list li.grid-5 {
        width: 100%;
    }

    .container .profile_list li.grid-10 {
        width: 100%;
    }

    .container .edit_box .grid-5 input[type=text]{
        width: 280px;
    }

    .container .edit_box .grid-10 input[type=text] {
        width: 280px;
    }

    .container .edit_box input[type=password] {
        width: 280px;
    }

    /* ////////////////////////// */  

    /* others */
    .general_block.container p {
        padding: 0 0px;
    }

    .org_ass img {
        position: relative;
        top: -2px;
    }
}
    

/********************************************************************************************* 

4.  Grid lt 720px / Mobile (mediaqueries)

*********************************************************************************************/
    
@media only screen and (max-width: 719px) {
    .container {
        width: 94%;
    }
    .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16 {
        width:100%;
        margin-left: 0px;
        margin-right: 0px;
    }
    .alpha {
        margin-left: 0;
    }
    .omega {
        margin-right: 0;
    }
    .beta {
        margin-left: 0;
        margin-right: 0;
    }
    .container .grid-1, .container .grid-2, .container .grid-3, .container .grid-4, .container .grid-5, .container .grid-6, .container .grid-7, .container .grid-8, .container .grid-9, .container .grid-10, .container .grid-11, .container .grid-12 {
        width:100%;
    }


    /* header & main menu */
    #header {
        height: 80px !important;
    }

    #header #logo {
        width: 58px;
        height: 50px;
        margin: 14px 5px 14px 0;
    }

    #header #main_menu {
        width: 150px;
        height: 80px;
    }
        #header #main_menu .main_tit {
            width: 100px;
            height: 20px;
            margin: 10px 5px 10px 0;
        }



        #header #main_menu .menu {
            position: absolute;
            display: none;
            top: 80px;
            right: 12px;
            width: 120px;
            background: #fff;
            border: 1px solid #ccc;            
            z-index: 999;
        }

        #header #main_menu .menu li {
            width: 100%;
            text-align: center;
        }



        #header #main_menu .user_container {
            width: 130px;
            height: 26px;
            top: 48px;
            right: 105px;
            text-align: right;
            font-size: 12px;
            z-index: 994;
        }

            #header #main_menu .user_container a {
                margin-right: 5px;
            }

            #header #main_menu .user_container .logout {
                position: absolute;
                top: -34px;
                right: 10px;
            }

        #main_menu #mob_menu {
            display: block;
            font-size: 12px;
            top: 40px;
            right: 5px;
            padding: 7px 28px 5px 10px;
        }

    /* ////////////////////////// */  
    
    /* PROFILE */
    .container .profile_list li.grid-5 {
        width: 100%;
    }

    .container .profile_list li.grid-10 {
        width: 100%;
    }

    .container .edit_box .grid-5 input[type=text]{
        font-size: 14px;
        width: 230px;
    }

    .container .edit_box .grid-10 input[type=text] {
        font-size: 14px;
        width: 230px;
    }

    .container .edit_box input[type=password] {
        font-size: 14px;
        width: 230px;
    }

    .container .profile_list .display_label,
    .container .profile_list .display_value {
        font-size: 14px;
        min-width: 90px;
        padding: 0 5px 0 0;
    }

    /* ////////////////////////// */  

    /* others */
    .anno_block.container .ass_sayhi {
        width: 260px;
        margin: 15px auto -30px auto;
    }

    .org_ass img {
        position: relative;
        top: -4px;
    }


    /* login */
    .login_block.container .ass_sayhi {
        width: 260px;
        margin: 15px auto -26px auto;
    }

    .container .login_box {
        width: 260px;
        padding: 20px 10px;
    }

    .container .login_box input[type=text], 
    .container .login_box input[type=password] {
        width: 190px;
        padding: 10px 5px 10px 65px;
    }

    .container .login_box input[type=submit] {
        width: 100%;
    }

    .container .login_box fieldset {
        width: 100%;
    }

    .login_block.container .shadow {
        width: 100%;
        margin: 30px auto;
    }


    /* basic */
    .general_block.container {
        padding: 30px 0;
    }

    .general_block.container p {
        font-size: 14px;
        line-height: 28px !important;
        padding: 0 0px;
    }

    .container h2 {
        font-size: 32px;
        line-height: 40px;
        margin-bottom: 10px;
    }

    .container h3 {
        font-size: 18px;
        line-height: 28px;
        padding-bottom: 5px;
    }

    .container .basic_box {
        padding: 20px;
    }

    #footer p.container {
        font-size: 12px;
    }

    #back-to-top, .touch-device #back-to-top:hover {
        right: 10px !important;
    }


    /* dot_list ////////// */
    .container .dot_list li {
        font-size: 12px;
    }

    .container .dot_list li.first span {
        font-size: 14px !important;
    }  

    /* point details */
    .container .point_details li .date {
        width: 70px;
        padding: 0 5px;
    }


    /* history */
    .container .history_details li.first {
        height: 1px;
        padding: 0;
    }
    .container .history_details li.first span {
        display: none;
    }

    .container .history_details li {
        height: auto;
        margin: 10px 0 10px 15px;
        padding: 5px 10px;
        background-image: none !important;
    }

    .container .history_details li:before {
        left:-25px;
    }

    .container .history_details img.clip {
        left:-14px;
    }

    .container .history_details li span {
        display: block;
        width: 100% !important;
        margin: 0 !important;
        text-align: left !important;
        line-height: 18px;        
        padding: 3px 0!important;
        top: 0!important;
    }

    .container .history_details li span b {
        font-weight: bold;
    }

    .container .history_details li.viewmore:before {
        top: 16px;
        left: -24px;
    }

    .container .history_details .more {
        left: -25px;
    }


    .container .history_details li:hover {
        background: #F0F0F0;
    }



    /* Redeem */
    .container .redeem_details li.first {
        height: 1px;
        padding: 0;
    }
    .container .redeem_details li.first span {
        display: none;
    }

    .container .redeem_details li {
        height: auto;
        margin: 10px 0 10px 15px;
        padding: 5px 10px;
    }

    .container .redeem_details li:before {
        left:-25px;
    }

    .container .redeem_details img.clip {
        left:-14px;
    }

    .container .redeem_details li span {
        display: block;
        width: 100% !important;
        margin: 0 !important;
        text-align: left !important;
        line-height: 18px;        
        padding: 3px 0!important;
        top: 0!important;
    }

    .container .redeem_details li span b {
        font-weight: bold;
    }

    .container .redeem_details li.viewmore:before {
        top: 16px;
        left: -24px;
    }

    .container .redeem_details .more {
        left: -25px;
    }

    .container .redeem_details input.qty {
        height: 18px;
    }

    .container .redeem_details li:hover {
        background: #F0F0F0;
    }


    /* ////////////////////////// */  

}





/********************************************************************************************* 

5.  Responsive Image

*********************************************************************************************/


img.scale, img.responsive {
    max-width: 100%;
    height: auto;
}

img.original {    
    display: block;
    width: 100%;
    height: auto;
}