@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

HTML,BODY{
    margin: 0;
    font-family: 'GmarketSansLight', sans-serif;
    background-color: #fff8f4;
/*    background-color: #ccc;*/
}

DL,DT,DD{
    padding: 0; margin: 0;
}

.hide{ display: none !important; }
.clear{ clear: both; }
.content{
}


.title H2{
    font-family: 'GmarketSansBold';
    color: #f4a269;
    margin: 0;
}

#TopNav{
    top: 0;     width: 100vw;   position: absolute;
    z-index: 1000;
}
#TopNav .mainBar{
    /* background-color: #cf3028; */
}
#TopNav .subBar{
    text-align: right;
    color: #333333;
    /* background-color: rgba(255,255,255,0.5); */
}
#TopNav .subBar A{
    color: #333333;
    display: inline-block;
}

.mainKV IMG{
    display: block;
}

.footer{
    background-color: #ffccae;
    color: #000;
}
.footer A{
    font-family: 'GmarketSansMedium';
    color: #000;
}

.editArea{
    text-align: right;
}
.editArea A{
    font-weight: bold;
    position: absolute;
    z-index: 20;
}


@media (min-width: 320px) and (max-width: 767px){
    .desk{ display: none !important; }
    
    .title H2{ font-size: 4vw; margin: 4vw 0; text-align: center; }
    #TopNav{
        background-color: #fff;
        position: fixed;
        top: 0;
        box-shadow: 0 0 2vw rgba(0,0,0,0.2);
    }
    #TopNav .L A{
        display: inline-block;
        height: 12vw;
        overflow: hidden;
    }
    #TopNav .L IMG{
        margin-top: -3vw;
        height: 20vw;
    }
    #TopNav .L{
        float: left;
        padding-left: 5vw;
    }
    #TopNav .R{
        padding-top: 2vw;
        float: right;
    }
}
@media (min-width: 768px){
    .mob{ display: none !important; }
    .title{ margin-bottom: 30px !important; }
    .title H2{ font-size: 20px; margin-bottom: 10px; }
    .content{ width: 1100px; margin: 0 auto; }
    .grid{ width: 990px; margin: 0 auto; }
    .gridin{ width: 860px; padding: 0 0; margin: 0 auto; }
    .gridinMin{ width: 600px; padding: 0 57px; margin: 0 auto; }
    .content{ min-height: 50vh; }
    .content .title{ margin: 70px 0; }
    .footer{ font-size: 10px;}
    .footer .L{ float: left; padding: 40px 0; }
    .footer .R{ float: right; }
    .footer .etcMenu {
        font-size: 15px;
        padding: 40px 0 20px 0;
    }
    .footer .etcMenu B{
        font-weight: normal;
        margin: 0 20px;
    }
    #TopNav .subBar A{
        padding: 0.8em 1em;
    }
    #TopNav .L{ float: left;}
    #TopNav .R{
        float: right;
        padding-top: 25px;
    }
    .mainMenu{
        display: inline-block;
        padding-right: 30px;
    }
    .mainMenu A{
        display: inline-block;
        padding: 10px 20px;
        font-family: 'GmarketSansMedium';
        color: #000;
    }
}



.keyvy INPUT{ border: solid 1px #ee7f1a; }
.keyvy H1{ font-family: 'GmarketSansBold'; }
.keyvy H1 B{ color: #ff9347; }

.mainPage .programs DL{
    display: inline-block;
    border: solid 1px #f6b78b;
}
.mainPage .programs DT{
    display: block;
    text-align: center;
}

.mainPage .programs DD{
    display: table-cell;
    width: 100%;
    background-color: #ffc9a5;
    vertical-align: middle;
    text-align: center;
    font-family: 'GmarketSansBold';
    color: #555555;
}
.keyvy{
    background-repeat: no-repeat;
    background-position: top center;
    box-sizing: border-box;
}
.mainPage .keyvy{
    background-image: url(/as/img/kv_main.png);
}
@media (min-width: 320px) and (max-width: 767px){
    .keyvy{
        width: 100vw;       
        /* background-size: cover; */
        height: 93.05555vw; text-align: center;
    }
    .keyvy{
        padding-top: 20vw;
        text-align: center;
    }
    .keyvy H1{
        font-size: 5vw;

    }
    .keyvy P{
        padding: 5vw 10vw;
    }
    .mainPage .programs .gridin{
        padding-left: 7.777778vw;
    }
    .mainPage .programs DT IMG{ height: 27.777778vw; }
    .mainPage .programs DL{
        margin: 0 3vw 3vw 0;
    }
    .mainPage .programs DD{
        width: 39.86vw;     height: 11.38888vw;
        font-size: 2vw; }
    .mainPage .video IFRAME{
        width: 100vw;
        height: 56.25vw;
    }
}
@media (min-width: 768px){
    .keyvy{
        background-size: 1100px auto;
        height: 642px;
        padding-top: 250px;
    }
    .keyvy H1{
        font-size: 40.5px;
    }
    .keyvy P{
        width: 600px;
        font-size: 19px;
        margin: 25px 0;
    }
    .mainPage .keyvy .grid{
        padding-left: 33px;
    }
    .mainPage .programs{
        padding-left: 325px;
    }
    .mainPage .programs DT IMG{ height: 120px; }
    .mainPage .programs DD{
        width:168px; height: 47px;
        font-size: 10px;
    }
    .mainPage .video{
        margin-top: 65px;
        padding-top: 150px;
        background-image: url('/asset/img/bg_mainvideo.png');
        background-repeat: no-repeat;
        background-position: top;
        background-size: auto 470px;
    }
    .mainPage .title A{
        float: right;
    }
}





.members .logoarea{
}
.members .logoarea A{
    display: inline-block;
}
.members .logoarea SPAN{
    word-break: break-all;
}
.members .logoarea A{
    display: inline-block;
    color: #333;
    background-color: #fff;
    overflow: hidden;
    text-align: center;
}
.members .logoarea IMG{
    display: block;
    height: auto;
    vertical-align: middle;
}
.members .logoarea SPAN{
    display: table-cell;
    vertical-align: middle;
}

@media (min-width: 320px) and (max-width: 767px){
    .members .logoarea{
        padding-left: 5vw;
    }
    .members .logoarea A{
        margin: 1vw 2vw;
        width: 25vw;
        height: 25vw;
        border-radius: 25vw;
    }
    .members .logoarea IMG{
        width: 25vw;
    }
    .members .logoarea SPAN{
        width: 25vw;
        height: 25vw;
        font-size: 4vw;
    }
}
@media (min-width: 768px){
    .members{
        /* background-image: url(/as/img/bg_members.png); */
        background-repeat: repeat-y;
        background-size: 1100px auto;
        padding: 40px 0;
    }
    .members .logoarea{
        padding-left: 80px;
    }
    .members .logoarea A{
        margin: 20px 40px;
        width: 123px;
        height: 123px;
        border-radius: 123px;
    }
    .members .logoarea IMG{
        width: 123px;
    }
    .members .logoarea SPAN{
        width: 123px;
        height: 123px;
    }

    .productsBest{
        background-image: url(/as/img/bg_products.png);
        background-repeat: no-repeat;
        background-size: 1100px auto;
        background-position: top;
        padding-left: 118px;
        margin-bottom: 30px;
    }
    .productsBest .item{
        width: 274px; height: 274px;
        overflow: hidden;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
        display: inline-block;
    }
    .productsBest .item SPAN{
        display: none;
        padding: 1em;
    }
    .productsBest .item:hover SPAN{
        display: block;
    }
    .productsBest .item1, .productsBest .item2{
        margin-right: 15px;
    }
    .productsBest .item0{
        width: 467px; height: 286px;
        margin-bottom: 15px;
    }
    .productsBest .item4{
        width: 527px; height: 385px;
        margin: 15px 0 0 450px;
    }
    .productsPages{
        text-align: center;
        padding-top: 10px;
    }
    .productsPages A{
        color: #fedecb;
        display: inline-block;
        padding: 5px;
    }
    .productsPages .focus,
    .productsPages A:hover{
        color: #f4b28b;
    }
}


.aboutPage .message{
    background-repeat: no-repeat;
    background-position: bottom;
    font-family: 'GmarketSansMedium';
    background-image: url(/as/img/bg_about.png);
}
.aboutPage .keyvy{
    background-image: url(/as/img/kv_about.png);
}
.aboutPage .message{
}

@media (min-width: 320px) and (max-width: 767px){
    .aboutPage .message{
        background-size: contain;
        padding: 10vw;
    }
}
@media (min-width: 768px){
    .aboutPage .keyvy{
        height: 903px;
        padding: 570px 0 0 280px;
        text-align: right;
    }
    .aboutPage .keyvy H1{
        width: 600px;
    }
    .aboutPage .keyvy H1, .aboutPage .keyvy P{
        text-align: right;
    }
    .aboutPage .message{
        height: 789px;
        padding: 140px 0 0 80px;
        background-size: cover;
    }
    .aboutPage .message P{
        font-size: 11.5px;
        line-height: 2.4em;
    }
}


.datacenterPage .dataRow{
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    margin: 10px 0;
    padding: 20px;
    border-radius: 20px;
}
.datacenterPage date{
    font-size: 10px;
    display: block;
    text-align: right;
}
.datacenterPage P{
}
@media (min-width: 320px) and (max-width: 767px){
    
}
@media (min-width: 768px){

}



.eventsPage{
    
}
.events{
    vertical-align: top;
}
.events .item DIV{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    display: inline-block;
}
.events .item DL{
    display: block;
}
.events .item DT, .events .item DD{
    display: block;
}
.events .item DT{
    font-family: 'GmarketSansMedium';
    color: #000;
}
.events .item DD{
    color: #000;
}

.events .logo{
    position: absolute;
    border-radius: 50%;
    box-shadow: 0 0.5em 1em rgba(0,0,0,0.2);
}




@media (min-width: 320px) and (max-width: 767px){
    .eventsLG{              margin-bottom: 50px; }
    .eventsLG .item{        background-color: #fff; }
    .eventsLG .item DIV{
        width: 100vw;        background-size: cover;
        height: 50vw;      background-position: center; }
    .eventsLG DL{
        padding: 22px;      background-color: #fff; }
    .eventsLG DT{
        font-size: 1.2em;
    }
    .eventsLG DD{
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* ellipsis line */
        -webkit-box-orient: vertical;
        line-height: 1.3em;
        height: 2.6em;
    }
    .eventsMD{              margin-bottom: 8px; }
    .eventsMD .item{
        width: 90vw;       vertical-align: top;
        margin: 0 5vw;  display: inline-block;
        background-color: #fff; }
    .eventsMD .item:hover{
        box-shadow: 0 5px 10px rgba(0,0,0,0.2); }
    .eventsMD .item DIV{
        width: 90vw;       background-size: cover;
        height: 45vw;      background-position: center; }
    .eventsMD .logo{        display: none; }
    .eventsMD DL{
        padding: 22px;      min-height: 135px; }
    .eventsMD DT{
        font-size: 1em;
        vertical-align: middle;
        color: #000;
        margin-bottom: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* ellipsis line */
        -webkit-box-orient: vertical;
        line-height: 1.3em;
        max-height: 2.6em;
    }
    .eventsMD DD{
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* ellipsis line */
        -webkit-box-orient: vertical;
        line-height: 1.3em;
        height: 2.6em;
    }
}
@media (min-width: 768px){
    .eventsPage .keyvy{
        background-image: url(/as/img/kv_event.png);
        background-position: top center;
        height: 920px;
        padding: 570px 0 0 280px;
        box-sizing: border-box;
    }
    .eventsKV .item DIV{
        display: block;     height: 520px; }
    .eventsKV .logo{
        width: 160px;       height: 160px;
        margin: 30px 0 0 30px; }
    .eventsKV .item DL{
        width: 100%;        display: table; }
    .eventsKV .item DT, .eventsKV .item DD{
        height: 60px;       display: table-cell;
        color: #595757;   vertical-align: middle; }
    .eventsKV .item DT{
        width: 445px;       padding-left: 180px;
        font-size: 1.2em;   text-align: center;
        font-weight: bold; }
    .eventsLG{              margin-bottom: 50px; }
    .eventsLG .item{        background-color: #fff; }
    .eventsLG .item DIV{
        width: 100%;        background-size: cover;
        height: 500px;      background-position: center; }
    .eventsLG DL{
        padding: 22px;      background-color: #fff; }
    .eventsLG DD{
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* ellipsis line */
        -webkit-box-orient: vertical;
        line-height: 1.3em;
        height: 2.6em;
    }
    .eventsMD{              margin-bottom: 8px; }
    .eventsMD .item{
        width: 280px;       vertical-align: top;
        margin: 0 0 0 8px;  display: inline-block;
        background-color: #fff; }
    .eventsMD .item:hover{
        box-shadow: 0 5px 10px rgba(0,0,0,0.2); }
    .eventsMD .item DIV{
        width: 280px;       background-size: cover;
        height: 210px;      background-position: center; }
    .eventsMD .item:first-child{ margin-left: 0; }
    .eventsMD .logo{        display: none; }
    .eventsMD DL{
        padding: 22px;      min-height: 135px; }
    .eventsMD DT{
        font-size: 1.2em;
        vertical-align: middle;
        color: #000;
        margin-bottom: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* ellipsis line */
        -webkit-box-orient: vertical;
        line-height: 1.3em;
        max-height: 2.6em;
    }
    .eventsMD DD{
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* ellipsis line */
        -webkit-box-orient: vertical;
        line-height: 1.3em;
        height: 2.6em;
    }
    .eventsSM{              padding-bottom: 100px; }
    .eventsSM .item{
        float: left;        margin: 0 0 30px 13px; }
    .eventsSM .item DIV{
        width: 320px;       height: 190px;
        background-size: cover; }
    .eventsSM .dc{          margin-left: 0; }
    .eventsSM .logo{
        width: 90px;        margin-top: 120px;
        height: 90px;       margin-left: -10px; }
    .eventsSM .item DL{
        display: table;     margin-top: 140px; }
    .eventsSM .item DT{
        width: 320px;       display: table-cell;
        height: 50px;       vertical-align: middle;
        padding: 0 10px 0 100px; }
}



.membersPage .searchForm{
    
}




.companyPage .toparea{
    height: 100px;
}
.companyPage .header{
    
}

.companyPage .prodList .info{ 
    display: none !important;
    border: solid 1px #ff0000;
}

.expoPage .toparea{
    height: 520px;
    background-size: cover;
    background-position: center;
}
.expoPage .header DT DIV{
    display: inline-block;
    width: 120px; height: 120px;
    border-radius: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 0.5em 1em rgba(0,0,0,0.2);
}

.expoPage .header DL,
.companyPage .header DL{
    display: table;
}
.expoPage .header DT,
.companyPage .header DT{
    display: table-cell;
    text-align: center;
    width: 125px;
}
.companyPage .header DT IMG{
    border-radius: 100%;
}

.expoPage .header DD,
.companyPage .header DD{
    display: table-cell;
    vertical-align: middle;
    padding-left: 100px;
}
.expoPage P,
.companyPage P{
    font-size: 1.2em;
}

.products{
}
.products .item{
    display: inline-block;
    vertical-align: top;
    background-color: #fff;
}



.highlayer{
    background-color: rgba(0,0,0,0.3);
    position: fixed;
    top: 0; left: 0;
    z-index: 1000;
    display: block;
    width: 100vw; height: 100vh;
    box-sizing: border-box;
    padding: 50px;
    text-align: center;
}
.companyPage .productDetail{
    background-color: #fff;
}

@media (min-width: 320px) and (max-width: 767px){
    .expoPage .header DIV{
        width: 20vw !important;
        height: 20vw !important;
        margin-top: -10vw;
        background-color: #fff;
    }
    .expoPage .toparea{
        width: 100vw;
        height: 50vw;
    }
    .expoPage .header DD,
    .expoPage .header DT{
        display: block;
        padding: 0;
        text-align: center;
    }
    .expoPage .header H1{
        width: 100vw;
        font-size: 5vw;
    }
    .expoPage P{
        width: 90vw;
        margin: 0 5vw;
    }
    .products .item IMG{
        width: 45vw;
    }
    .products .item{
        width: 45vw;
        height: 60vw;
        margin: 0 0px 3vw 3vw;
        cursor: pointer;
    }
    .products .item SPAN{
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* ellipsis line */
        -webkit-box-orient: vertical;
        line-height: 1.3em;
        height: 2.6em;
        padding: 0 1em;
    }
    .products .dc{
        margin-left: 0;
    }
}
@media (min-width: 768px){
    .productDetail{
        background-color: #fff;
        box-shadow: 0 0.5em 1em rgba(0,0,0,0.2);
        width: 500px;
        padding: 20px;
        padding-bottom: 50px;
        display: inline-block;
        margin: 0 auto;
        margin-top: 50px;
    }
    .productDetail SPAN{
        display: block;
        font-weight: bold;
        font-size: large;
        padding: 10px;
        padding-bottom: 20px;
    }
    .productDetail IMG{
        width: 100%; height: auto;
    }
    .expoPage{
        padding-bottom: 50px;
    }
    .expoPage .toparea{
        margin-bottom: 20px;
    }
    .expoPage .members{
        margin-top: 50px;
    }
    .membersPage .keyvy{
        background-image: url(/as/img/kv_members.png);
        height: 970px;
        padding: 440px 0 0 20px;
        box-sizing: border-box;
    }
    .membersPage .searchForm{
        height: 330px;
        padding: 0 150px;
        padding-top: 100px;
        box-sizing: border-box;
        text-align: center;
    }
    .membersPage .searchForm inpit{
        
    }
    .products .item IMG{
        width: 200px;
    }
    .products .item{
        width: 200px;
        height: 250px;
        margin: 0 0px 20px 15px;
        cursor: pointer;
    }
    .products .item:first-child{
        margin-left: 0px !important;
    }
    .products .item SPAN{
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* ellipsis line */
        -webkit-box-orient: vertical;
        line-height: 1.3em;
        height: 2.6em;
        padding: 0 1em;
    }
    .products .dc{
        margin-left: 0;
    }
}