﻿

/*---------------------------------------------------------------------------------*/
h1.title{
    text-align:center;
    font-size:30px;
    color:#019cdf;
    margin-top:25px;
}
    h1.title span.paragraph{
        display:block;
    }
ul.contentBox{
    margin:30px 0 0;
    padding:0;
    list-style:none;
    text-align:center;
}
    ul.contentBox li{
        display:inline-block;
        width:49%;
        vertical-align:text-top;
        background-color:#eee;
        padding:25px 10px 35px;
        min-height:349px;
    }
h2.titles{
    text-align:center;
    font-size:28px;
    color:#000;
    margin:0;
}
ul.menuListBox{
    margin:0;
    padding:0;
    list-style:none;
    text-align:center;
}
    ul.menuListBox li{
        margin-top:20px;
        width:100%;
        padding:0;
        min-height:auto;
    }
        ul.menuListBox li a{
            display:inline-block;
            padding:15px 20px;
            background-color:#019cdf;
            color:#fff;
            border-radius:5px;
            min-width:332px;
        }
        ul.menuListBox li a:hover{
            opacity:.85;
        }
.btnBox{
    text-align:center;
}
    .btnBox a{
        display:inline-block;
        padding:10px;
        width:49%;
        background-color:#abe6ff;
        color:#005981;
        vertical-align:top;
    }        
        .btnBox a span.paragraph:nth-child(1){
            font-size:20px;
        }
    .btnBox a:hover{
        opacity:0.85;
    }
        .btnBox a span.paragraph{
            display:block;
        }
        .btnBox a span.paragraph:nth-child(1){
            color:#111;
        }

#RedBlueGlasses{
    text-align:center;
    margin-top:30px;
}
    #RedBlueGlasses p.text{
        font-size:22px;
        margin:0 0 10px;
        color:#333;
    }
    #RedBlueGlasses span.text{
        font-size:22px;
        color:#666;
    }
    #RedBlueGlasses span.fontRed{color:#e10000;}
    #RedBlueGlasses span.fontBlue{color:#0f4ddb;}
    #RedBlueGlasses img{
        margin:0 10px;
    }

/*-----------------------------------------------------------
    Media Device Size
-----------------------------------------------------------*/
@media screen and (max-width:1024px){
    .wrapper{
        width:100%; min-width:100%;
    }
}
@media screen and (max-width:870px){
    h1.title{
        font-size:34px;
    }
    h2.titles{
        font-size:30px;
    }
    ul.menuListBox li a{
        font-size:22px;
    }
}
@media screen and (max-width:800px){
    ul.contentBox{
        margin-bottom:20px;
    }
    ul.contentBox li{
        width:100%;
        min-height:auto;
    }
    ul.contentBox li:last-child{
        margin-top:0;
        padding-top:0;
    }
    ul.menuListBox li:last-child{
        margin-top:20px;
    }
}
@media screen and (max-device-width:660px){
    /*h1.title{
        font-size:36px;
    }
    h2.titles{
        font-size:38px;
    }
    ul.menuListBox li a{
        font-size:36px;
        min-width:498px;
    }
    .btnBox a{
        width:100%;
        margin-bottom:15px;
        box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
    }*/
}
@media screen and (max-device-width:640px){
    .btnBox a{
        width:100%;
        margin-bottom:15px;
        box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
    }
}
@media screen and (max-width:630px){
    #RedBlueGlasses img{
        width:35%;
    }
}
@media screen and (max-width:610px){
    h1.title{
        font-size:30px;
    }
}
@media screen and (max-width:530px){
    #RedBlueGlasses p.text,
    #RedBlueGlasses span.text{
        font-size:20px;
    }
    #RedBlueGlasses img{
        width:30%;
    }
}
@media screen and (max-width:460px){
    h1.title,
    h2.titles{
        font-size:28px;
    }
}
@media screen and (max-width:440px){
    #RedBlueGlasses p.text,
    #RedBlueGlasses span.text{
        font-size:18px;
    }
    #RedBlueGlasses img{
        width:25%;
    }
}
@media screen and (max-width:420px){
    h1.title,
    h2.titles{
        font-size:26px;
    }
    ul.contentBox{
        margin-top:30px;
    }
        ul.menuListBox li a{
            padding:15px 10px;
            min-width:auto;
            width:100%;
        }
}
@media screen and (max-width:414px){
    h1.title{
        font-size:22px;
    }
    .btnBox a span.paragraph:nth-child(1){
        font-size:18px;
    }
}
@media screen and (max-width:400px){
    #RedBlueGlasses p.text,
    #RedBlueGlasses span.text{
        font-size:17px;
    }
    #RedBlueGlasses img{
        width:24%;
    }
}
@media screen and (max-width:390px){
    ul.menuListBox li a{
        font-size:20px;
    }
}
@media screen and (max-width:370px){
    #RedBlueGlasses p.text,
    #RedBlueGlasses span.text{
        font-size:17px;
    }
    #RedBlueGlasses img{
        width:22%;
    }
}
@media screen and (max-width:358px){
    h1.title,
    h2.titles{
        font-size:26px;
    }
}
@media screen and (max-width:320px){
    h1.title,
    h2.titles{
        font-size:25px;
    }
    ul.menuListBox li a{
        font-size:18px;
        padding:15px 5px;
    }
}