/*
Copyright (C) Hello@CreatorsMeetup.net
@author mr.Zero (mrZeroKr@Gmail.com)
V. 1.16.02
*/

@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
* { margin: 0; padding: 0}

HTML,BODY,#HS { padding: 0; font-size: 10px; margin: 0; width: 100%; overflow-x: hidden !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; } 

* { letter-spacing: -0.01em; box-sizing: border-box; } 

H1,H2,H3,DL,DT,DD { margin: 0; padding: 0; } 

ul,ol,li { list-style: none; padding: 0; margin: 0}

A { text-decoration: none; } 

.N{
    border: solid 2px #ff0000;
}
.hide { display: none !important; }
.clear{ clear: both; }
.center { text-align: center; } 

.fbox { width: 100vw; height: 100vh; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: center center; } 

.wide { width: 100%; } 
.sky{ color: #0097E0; }

#High { width: 100vw; height: 100vh; background-color: rgba(0, 53, 108, 0.9); position: fixed; top: 0; text-align: center; z-index: 2000; overflow: scroll; } 

#High IMG {
    cursor: pointer;
    max-width: 500px;
    height: auto;
} 

@media (min-width: 769px) and (max-width: 1430px){
    #EMenu{
        position: fixed;
        top: 5px;
        right: 5px;
    }
}
@media (min-width: 768px){
    #High .inner { padding-top: 20vh; padding-bottom: 10vh; } 
    DL{ display: table; }
    DT,DD{ display: table-cell }
}
@media (min-width: 320px) and (max-width: 767px){
 #High .inner { padding: 5vw; } 
    DT{ height: 3vw; }
}


.mainPage .area{
    width: 100vw; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: center center; } 
}



.mainPage #area1 #movieArea { width: 100vw; position: absolute; height: 100vh; overflow: hidden; } 

.mainPage #area1 #movieArea VIDEO { position: relative; } 

.mainPage #area1 #Layer { 
    position: absolute; 
    top: 0;
    z-index: 10;
    width: 100vw; height: 100vh; 
    text-align: center; text-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.3); } 

.mainPage #area1 #Layer SECTION {
    display: table-cell; 
    width: 100vw; height: 100vh;
    vertical-align: middle; color: #fff; } 

.mainPage #area1 #BMenu { position: absolute; width: 100vw; overflow: hidden; text-align: center; z-index: 800; } 

.mainPage #BMenuS B { color: #fff; display: block; font-weight: normal; } 

.mainPage #BMenuS DIV { background-color: rgba(255, 255, 255, 0.5); height: 1px; text-align: left; } 

.mainPage #BMenuS DIV I { width: 0px; height: 1px; display: none; background-color: #00ABE7; } 



@media (min-width: 320px) and (max-width: 767px){
    .mainPage #area1 #Layer H1 { 
        font-size: 17vw; margin-top: -20vh; } 
    .mainPage #area1 #Layer H1 SPAN { 
        display: block; font-size: 0.5em; margin-bottom: -0.6em; } 
    .mainPage #area1 #Layer H2 BR { display: none; } 
    .mainPage #area1 #Layer H2 { font-size: 4vw; word-break: keep-all; padding: 0 10vw; } 
    .mainPage #area1 #BMenu {
        margin-top: 20vh;
    } 
    .mainPage #BMenuO { display: none; } 
    .mainPage #BMenuS{
        display: block;
        text-align: center;
    }
    .mainPage #BMenuS DD{
        vertical-align: top;
        display: inline-block;
        margin: 1vw !important;
        width: 20vw !important;
    }
    .mainPage #BMenuS B {
     padding-top: 4vw;
     font-size: 3vw; 
     width: 100%;
    } 

 .mainPage #BMenuS I { display: none !important; } 

 .mainPage #BMenuM { background-color: #0056AE; padding: 10vw; } 

 .mainPage #BMenuM IMG { float: left; margin-right: 5vw; width: 14vw; height: auto; } 

 .mainPage #BMenuM A { display: block; background-color: #fff !important; color: #717171; margin-top: 5vw; padding: 5vw 3vw; } 

 .mainPage #BMenuM H2 { color: #fff; font-size: 5vw; } 

 .mainPage #BMenuM H3 { font-size: 4.2vw; font-weight: 400; margin-bottom: 1vw; } 

 .mainPage #BMenuM H4 { font-size: 3vw; font-weight: 100; } 
 }

@media (min-width: 768px){
    .mainPage #popup{
        z-index: 1000;
        position: absolute;
        top: 12px;
        left: 12px;
    }
    .mainPage #popup .popup_wrap {
        width: 640px;
        height: 550px;
        background: url(/en/img/popup-bg-en.png);
        background-color: #fff;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        color: #717171;
        letter-spacing: 0em;
    }
    .mainPage #popup .popup_wrap .popup_Link { position: absolute; right: 68px; bottom: 60px; }
    .mainPage #popup .popup_wrap .popup_Link > a{
        display: block;
        text-decoration: none;
        color: #717171;
        display: block;
        font-size: 12px;
        height: 16px;
        margin-bottom: 4px;
    }
    .mainPage #popup .popup_wrap .popup_Link>a>img { padding-right: 4px;}
    .mainPage #popup .popup_wrap .popup_button { width: 100%; display: flex; position: absolute; bottom: 20px; 
    justify-content: space-between; padding: 0px 30px;}
    .mainPage #popup .popup_wrap .popup_button span { display: inline-block; cursor: pointer;font-size: 12px; line-height: 1.5; }
    .mainPage #popup .popup_wrap .popup_button span:first-child {
        background: url(/img/popup-close.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: left center;
        padding-left: 24px; 
    }
    .mainPage #popup .popup_wrap .popup_button span:last-child {
        background: url(/img/popup-close.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: right center;
        padding-right: 24px;
    }

    .mainPage #popup > IMG{
        margin-left: -325px;
        width: 650px;
        height: 550px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    }
 .mainPage #area1 #Layer H1 { font-size: 75px; } 

 .mainPage #area1 #Layer H2 { font-size: 30px; } 

 .mainPage #area1 #BMenu { height: 300px; } 

 .mainPage #area1 #BMenu DD { display: inline-block; width: 250px; height: 300px; margin: 0 20px; } 

 .mainPage #BMenuS { width: 100vw; }

 .mainPage #BMenuS B { cursor: pointer; font-size: 18px; padding-top: 10px; height: 130px; } 

 .mainPage #BMenuS DIV { margin-top: 170px; } 

 .mainPage #BMenuO { width: 100vw; top: 0px; position: absolute; } 

 .mainPage #BMenuO SPAN { display: block; opacity: 0; } 

 .mainPage #BMenuO DIV { z-index: 300; cursor: pointer; position: relative; display: inline-block; top: 300px; width: 251px; height: 300px; background-color: #01abe8; color: #fff; box-sizing: border-box; padding: 24px; text-align: left; vertical-align: top; } 

 .mainPage #BMenuO .plus { float: right; } 
    .mainPage #BMenuO SPAN IMG:last-of-type{
        width: 50%;
    }

 .mainPage #BMenuO H3 { font-size: 18px; } 

 .mainPage #BMenuO H4 { font-size: 16px; color: rgba(255, 255, 255, 0.5); height: 40px; } 

 .mainPage #BMenuO P { font-size: 15px; } 

 .mainPage #BMenuO #O1 { background-image: url(img/bmenu1.png); } 

 .mainPage #BMenuO #O2 { background-image: url(img/bmenu2.png); } 

 .mainPage #BMenuO #O3 { background-image: url(img/bmenu3.png); } 

 .mainPage #BMenuO #O4 { background-image: url(img/bmenu4.png); } 



 .mainPage #popup{
    z-index: 1000;
    position: absolute;
    top: 22px;
    left: 20px;
}
.mainPage #popup .popup_wrap {
    width: 640px;
    height: 550px;
    background: url(/en/img/popup-bg-en.png);
    background-color: #fff;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: #717171;
}
.mainPage #popup .popup_wrap .popup_Link { position: absolute; right: 40px; bottom: 60px; }
.mainPage #popup .popup_wrap .popup_Link > a{
    display: block;
    text-decoration: none;
    color: #717171;
    display: block;
    font-size: 12px;
    height: 16px;
    margin-bottom: 4px;
}
.mainPage #popup .popup_wrap .popup_Link>a>img { padding-right: 4px;}
.mainPage #popup .popup_wrap .popup_button { width: 100%; display: flex; position: absolute; bottom: 20px; 
justify-content: space-between; padding: 0px 30px;}
.mainPage #popup .popup_wrap .popup_button span { display: inline-block; cursor: pointer;font-size: 12px; line-height: 1.5; }
.mainPage #popup .popup_wrap .popup_button span:first-child {
    background: url(/img/popup-close.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    padding-left: 24px; 
}
.mainPage #popup .popup_wrap .popup_button span:last-child {
    background: url(/img/popup-close.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right center;
    padding-right: 24px;
}

.mainPage #popup > IMG{
    margin-left: -325px;
    width: 650px;
    height: 550px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
 }















.mainPage .areaBox{
    width: 100vw;
    height: 1080px;
}
.mainPage .areaBox H3 { color: #0056AE; } 

.mainPage .areaBox P { color: #717171; } 

.mainPage .areaBox A { background-color: #fff; border: solid 1px #0056AE; color: #0056AE; } 

@media (min-width: 320px) and (max-width: 767px){
 .mainPage #area3 .header { position: absolute; color: #0097E0; font-size: 3vw; padding: 10vw; } 

    .mainPage #area3 H2{ 
        color: #0097E0; font-size: 4vw;
        font-weight: 500;
        margin-top: -4vw;
        margin-bottom: 2vw;
    }
 .mainPage #area3 .header DD { display: none; } 

/* .mainPage #area3 SECTION { background-position: 70%; } */

 .mainPage .areaBox {
     width: 100vw;
     display: inline-block;
     float: left;
    } 

 .mainPage .areaBox DIV { padding: 10vw; padding-top: 15vw; } 

 .mainPage .areaBox H3 { font-size: 5vw; } 

 .mainPage .areaBox P { font-size: 3vw; padding: 4vw 0; } 

 .mainPage #area3 .scrollArea { overflow-x: scroll !important; width: 100vw; } 

 .mainPage #area3 .scrollInner { width: 300vw; }
 .mainPage .areaCol2 .scrollInner{
     width: 200vw !important;
    }

    .mainPage #area3 .areaBox A {
         padding: 1vw !important; 
         font-size: 3vw;
         border: solid 1px #0056AE !important; border-radius: 1vw;
    } 

 }

@media (min-width: 768px){
    .mainPage .areaBox H2{ display: none; }
 .mainPage .areaBox H3 { font-size: 37px; color: #0056AE; } 

 .mainPage .areaBox P { font-size: 24px; padding: 35px 0; } 

 .mainPage .areaBox A { font-size: 16px; padding: 5px 8px; border-radius: 5px; } 

 .mainPage .header { position: absolute; width: 100vw; z-index: 500; } 

 .mainPage .header DL { color: #0056AE; width: 1124px; margin: 0 auto; display: table; margin-top: 200px; } 

 .mainPage .header DT { display: table-cell; text-align: left; font-size: 20px; vertical-align: top; } 

 .mainPage .header DD { display: table-cell; width: 190px; text-align: right; vertical-align: top; } 

 .mainPage .header A { display: inline-block; width: 150px; border-top: solid 1px rgba(255, 255, 255, 0.5); color: #fff; text-align: center; font-size: 18px; padding-top: 10px; } 

 .mainPage .header .focus,
 .mainPage .header A:hover { color: #0056AE !important; border-top: solid 3px #0056AE !important; } 

 .mainPage .areaBox { float: left; } 

 .mainPage .areaBox DIV { padding: 315px 0 0 154px; /* padding: 315px 0 0 154px; */}

 .mainPage .scrollArea { width: 100vw; overflow: hidden; } 

 .mainPage .scrollInner { width: 500vw; } 

.mainPage #area2{
     height: 1080px;
} 

 .mainPage #area2 SECTION { /* height: 450px; */
 /* margin-top: -31vw; */}

 .mainPage #area2 H3 { color: #0056AE; } 

 .mainPage #area2 P { padding: 0; } 

 .mainPage .aboutRoll { width: 350vw; display: table; padding-top: 450px; position: absolute; z-index: 300; /* margin-top: -50vw; */
 /* clear: both; */}

 .mainPage .aboutRoll P { width: 25vw; height: 239px; font-size: 24px; word-break: break-all; /* width: 400px; */}

 .mainPage .aboutRoll DD { display: table-cell; /* width: 542px; */
 padding: 3vw; box-sizing: border-box; vertical-align: top; /* border: solid 1px #ff0000; */}

 .mainPage .aboutRoll IMG { width: 30vw; transform: scale(1); transition: all 0.5s ease-in-out; } 

 .mainPage .aboutRoll IMG:hover { transform: scale(1.1); } 

 .mainPage .aboutRoll DIV { width: 30vw; height: 16.236vw; overflow: hidden; } 
 }

.mainPage #area2 .header DL { color: #0056AE; } 

.mainPage .area2-1,
.mainPage .area2-2,
.mainPage .area2-3,
.mainPage .area2-4 { background-image: url(img/main-area-2.png); background-size: cover; /* text-align: center; */}

. .mainPage .area5-1,
.mainPage .area5-2,
.mainPage .area5-3 { background-image: url(img/main-area-2.png); background-size: cover; } 

.mainPage #area2 P { color: #0056AE; font-weight: 300; font-size: 23px; width: 400px; word-break: keep-all; } 

.mainPage #area3 { position: relative; z-index: 300; } 

.mainPage #area3 .header A,
.mainPage #area5 .header A { color: #A7A7A7; border-color: #A7A7A7; } 

.mainPage #area5 { /* background-color: #EDEDED; */
 height: 900px border: solid 1px #ff0000 !important; } 

.mainPage #area5 A { padding: 0; background-color: inherit; } 


.mainPage .areaBox A { display: inline-block; border: none; } 

 .mainPage #area3 .areaBox A { border: solid 1px #0056AE; } 

@media (min-width: 768px){
    .mainPage .area3-1 { background-image: url(img/main-area-3-1.png); } 
    .mainPage .area3-2 { background-image: url(img/main-area-3-2.png); } 
    .mainPage .area3-3 { background-image: url(img/main-area-3-3.png); } 
    .mainPage #area3 .areaBox{
        height: 1080px;
        background-position: center center;
    }
}

@media (min-width: 320px) and (max-width: 767px){
    .mainPage #area2 { display: none; } 
    .mainPage #area3 .areaBox A{
        padding: 0.5vw 1vw;
    }
    .mainPage #area3 .areaBox{
        height: 144vw;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;
    }
    .mainPage .area3-1 { background-image: url(img/main-area-31.png); } 
    .mainPage .area3-2 { background-image: url(img/main-area-32.png); } 
    .mainPage .area3-3 { background-image: url(img/main-area-33.png); } 
}

.mainPage .area4-1 { background-image: url(img/main-area-4-1.png); } 
.mainPage .area4-2 { background-image: url(img/main-area-4-2.png); } 
.mainPage .area4-3 { background-image: url(img/main-area-4-3.png); } 

#area5{ height: 880px; }
.mainPage .area5-1 { background-image: url(img/main-area-5.png); } 
.mainPage .area5-2 { background-image: url(img/main-area-52.png); } 
.mainPage .area5-3 { background-image: url(img/main-area-53.png); } 





#EMenu SVG { display: none; } 

@media (min-width: 768px) {
 HTML,BODY,#HS { font-size: 10px; position: relative; } 
 }

@media (min-width: 320px) and (max-width: 767px) {
 HTML,BODY,#HS { font-size: 2vw; } 
    

    .mainPage .area5{ display: none !important; }
    .mainPage .area5 IMG { width: 100vw; } 
    .mainPage #area5,
    .mainPage #area5 .areaBox{
        height: inherit !important;
        background-color: #fff;
        background-image: none;
    }
    .mainPage #area5 .header{
        position: absolute;
        padding: 10vw;
    }
    .mainPage #area5 .grid{
        padding-bottom: 0;
    }
    .mainPage #area5 .header DT{ display: none; }
    .mainPage #area5 .header #s52{ display: none; }
    .mainPage #area5 .header #s53{ display: none; }
    .mainPage #area5 .header #s51{
        color: #0097E0 !important;
        font-size: 5vw;
        text-transform: uppercase;
    }
    .mainPage #area5 .area5-1{
/*        display: none;*/
        padding-top: 5vw
    }
    .mainPage #area5 .area5-1 IMG{ display: none; }
    .mainPage #area5 .area5-1 SPAN{
        color: #0056AE;
        font-size: 4vw;
        font-weight: bold;
        padding: 0;
        height: inherit;
    }
    .mainPage #area5 .area5-1 SMALL{
        padding: 0;
        display: block;
        padding-top: 3vw;
        font-size: 2vw;
    }
    .mainPage #area5 .area5-1 A{
        background-color: inherit !important;
        height: inherit !important;
        width: inherit !important;
        display: block !important;
        margin: 0;
        box-shadow: none;
        border-bottom: solid 1px #8D8D8D;
        padding: 5vw 0;
    }
    .mainPage #area5 .area5-2 A:first-child{
        display: none !important;
    }
    .mainPage #area5 .area5-2{
    }
    .mainPage #area5 .area5-2 A{
        width: 80vw;
        height: inherit !important;
        margin: 0 !important;
        margin-bottom: 10vw !important;
        background-color: #EDEDED !important;
        box-shadow: none;
    }
    .mainPage #area5 .area5-2 IMG{
        width: 80vw;
        height: auto;
    }
    .mainPage #area5 .area5-2 SPAN{
        padding: 0;
        color: #0097E0;
        height: auto;
        font-size: 4.5vw;
        background-color: #EDEDED;
        padding: 5vw;
        padding-bottom: 0;
    }
    .mainPage #area5 .area5-2 SMALL{
        display: block;
        padding: 5vw;
    }
    .mainPage #area5 .area5-3{
        display: none;
    }
}



#Nav, #NavSub { top: 0px; position: fixed; width: 100vw; z-index: 1000; } 

#Nav A { display: inline-block; } 

.footer{ color: #fff; line-height: 1.8em; } 
.footer B { display: inline-block; }
.footer A { color: #fff; } 
.footer I{
    display: inline-block;
    width: 10px; height: 1em;
    border-left: solid 1px #fff;
}

.grid { margin: 0 auto; max-width: 1432px; } 

@media (min-width: 768px) {
    .M, .mobile { display: none !important; } 
    .footer {
        height: 270px;      font-size: 13px;    background-color: #717171;
    } 
    .footer DL {
        width: 100%;        display: table;     padding-top: 55px;
    } 
    .footer DT DIV{ margin: 15px 0 0 34px; }
    .footer DD {
        width: 165px;       padding-left: 30px; display: table-cell; 
        font-size: 12px;    vertical-align: top;
    } 
    .footer DD IMG{
        margin: 10px 0 0 10px;
        width: 34px; height: auto;
    }
}

@media (min-width: 300px) and (max-width: 767px) {
    .D,
    .desk {     display: none !important; } 
    .footer {   background-color: #0056AE; } 
    .footer .grid { padding: 6vw 12vw 12vw 12vw; } 
    .footer IMG {
        display: block;     height: 4.5vw;       
        margin-bottom: 5vw;
    }
    .footer DL{ display: block; }
    .footer DT{
        display: block;     height: inherit; }
    .footer DT DIV{
        margin: 0;          display: block;
        font-size: 2.8vw;   line-height: 1.8em; }
    .footer DD{
        padding-top: 5vw;
        display: block;
    }
    .footer A { padding: 2vw; margin: 0 3vw 0 0; } 
    .footer DD:nth-last-child(2),
    .footer DD:last-child{ display: none; }
    .footer DD BR{ display: none; }

    /* 브라우져 창 줄였을 경우 팝업 */
    #popup {
        font-size: 2rem;
    }
    .mainPage #popup{
        z-index: 1000;
        position: fixed;
        top: 72px;
        left: 50%;
        transform: translateX(-50%);
    }
    .mainPage #popup .popup_wrap {
        width: 86vw;
        height: 524px;
        position: relative;
        background: url(/en/img/popup_mo_en.png);
        background-color: #fff;
        background-size: contain;
        background-repeat: no-repeat;
        color: #717171;
    }
    .mainPage #popup .popup_wrap .popup_Link {display: none; }
    .mainPage #popup .popup_wrap .popup_Link > a{
        display: block;
        text-decoration: none;
        color: #717171;
        display: block;
        font-size: 12px;
        height: 16px;
        margin-bottom: 4px;
    }
    .mainPage #popup .popup_wrap .popup_Link>a>img { padding-right: 4px;}
    .mainPage #popup .popup_wrap .popup_button { width: 100%; display: flex; position: absolute; bottom: 16px; 
    justify-content: space-between; padding: 0px 16px;}
    .mainPage #popup .popup_wrap .popup_button span { display: inline-block; cursor: pointer;font-size: 12px; line-height: 1.5; }
    .mainPage #popup .popup_wrap .popup_button span:first-child {
        background: url(/img/popup-close.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: left center;
        padding-left: 24px; 
    }
    .mainPage #popup .popup_wrap .popup_button span:last-child {
        background: url(/img/popup-close.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: right center;
        padding-right: 24px;
    }

    .mainPage #popup > IMG{
        margin-left: -325px;
        width: 650px;
        height: 550px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    }




}





@media (min-width: 320px) and (max-width: 767px){
 #Nav { background-color: #fff; text-align: center; padding: 0 !important;  box-shadow: 0 1vw 2vw rgba(0, 0, 0, 0.2); z-index: 2000; } 

 #Nav .mobile IMG { height: 9.6vw; width: auto; } 
    #Nav .mobile{
        width: 100vw;
        height: 9.6vw; background-image: url(img/logo.png); background-repeat: no-repeat; background-position: center center; background-size: auto 16vw;
    }
    
 #Nav #stackBtn { top: 0; right: 0; width: auto; position: absolute; height: 9.6vw; } 
    

 #NavSub { z-index: 1000; background-color: #fff; width: 100vw; height: 100vh; overflow-y: scroll; } 

 #NavSub A { color: #000; } 

 .submob { padding: 10vw; padding-top: 30vw; } 

.submob .smhead{ border-bottom: solid 1px #ccc;  }
.submob .smarea { display: none; } 
 .submob A { font-size: 3vw; padding: 1vw 0; display: block; } 
.submob A:hover { color: #000; text-decoration: underline; } 
.submob B A { font-size: 4vw; font-weight: 400; color: #0056AE !important; padding: 4vw 0; } 
.submob dl { 
    display: table; width: 60vw; margin-bottom: 2vw;
    border-top: solid 1px #ccc;
    margin-left: 20vw;
} 
.submob dt A, .submob dd A{
    font-size: 3.5vw;
    color: #717171;
}
.submob dt { display: table-cell; width: 30vw; } 
.submob dd { display: table-cell; padding: 2vw 0; }
    .submob .sns{
        padding: 10vw 0;
        text-align: right;
    }
    .submob .sns B{
        color: #0056AE;
        font-size: 3vw;
        display: block;
        padding-top: 5vw;
        padding-bottom: 3vw;
    }
    .submob .sns A{
        display: inline-block;
        margin-left: 3vw;
        padding: 0;
    }
    .submob .sns IMG{
        width: 9.066667vw;
    }
    
    #NavSub #Family,
    #NavSub #Lang{
        background-color: #717171;
        text-align: center;
        padding: 3vw 5vw;
        color: #fff;
        font-size: 4vw;
        position: fixed;
        top: 10vw;
        width: 100vw;
    }
    #NavSub #Lang A{
        color: #fff;
    }
    #NavSub #Lang .family{
        position: absolute;
        right: 5vw;
/*        float: right;*/
        border: solid 1px #fff;
        padding: 0.7vw 2vw;
        font-size: 3vw;
        border-radius: 1.5vw;
    }
    #NavSub #Family{
        top: 20vw;
    }
    #NavSub #Family A{
        color: #fff;
        display: inline-block;
        width: 40vw;
        padding: 3vw;
    }
 }

@media (min-width: 768px) {
 #Nav DL { width: 1432px; display: table; } 

 #Nav DD,
 #Nav DT { display: table-cell; height: 90px; vertical-align: middle; } 

 #Nav DD { /*width: 300px; */ width:180px} 

 #Nav DT { display: table; } 

 #Nav DT A { /*width: 130px;*/ width:117px; height: 90px; font-size: 15px; padding-left: 20px; color: #fff; display: table-cell; font-weight: bold; vertical-align: middle; } 

 #EMenu { text-align: right; } 

 #EMenu A { color: #fff; display: inline-block; margin-left: 6px; border: solid 1px #fff; padding: 3px 6px; border-radius: 3px; } 

 #EMenu SVG { max-height: 8px; } 

 #EMenu A:hover { color: #fff !important; background-color: #0056AE; } 

 #EMenu A:hover g,
 #EMenu A:hover circle,
 #EMenu A:hover path { fill: white !important; stroke: white !important; } 

 #Nav #homeBtn {
     width: 354px; height: 90px; color: rgba(0, 0, 0, 0); 
     background-image: url(img/logo_w.png); 
     background-size: contain;
     margin-right: 80px; } 

 .navfix { background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } 

 .navfix #homeBtn { background-image: url(img/logo.png) !important;; } 

 .navfix DT A { color: #717171 !important; } 

 .navfix DT A:hover { color: #0056ae !important; } 

 .navfix #EMenu A { color: #717171 !important; border-color: #717171 !important; } 

 .navfix #EMenu A:hover { color: #fff !important; background-color: #0056AE; } 

 .navfix #EMenu A:hover g,
 .navfix #EMenu A:hover circle,
 .navfix #EMenu A:hover path { fill: white !important; stroke: white !important; } 

 .navfix #EMenu CIRCLE,
 .navfix #EMenu PATH,
 .navfix #EMenu G { fill: #717171 !important; stroke: #717171 !important; } 

 #NavSub { z-index: 900; top: 90px; background-color: #ededed; text-align: left; } 

 #NavSub DL { display: table; } 

 #NavSub A:hover { color: #0056ae;; } 

 #NavSub A { display: block; color: #717171; font-weight: bold; font-size: 1.2em; padding: 5px 5px 5px 20px; } 

 #NavSub A I { width: 10px; height: 10px; margin-left: 3px; vertical-align: middle; display: inline-block; background-image: url(img/smenu-open.png); } 

 #NavSub A DIV A { padding: 3px 30px !important; } 

 #NavSub DT { width: 435px; } 

 #NavSub DD { display: table-cell; width: 130px; padding: 10px 0 20px 0; } 

 #NavAnchor { position: fixed; z-index: 2000; right: 20px; height: 100vh; display: table; } 

 #NavAnchor DIV { display: table-cell; vertical-align: middle; } 

 #NavAnchor A { display: block; padding: 5px; margin: 20px 0; color: #fff; font-size: 14px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } 

 #NavAnchor SPAN { display: inline-block; border: solid 1px #fff; vertical-align: middle; width: 15px; height: 15px; margin-right: 5px; border-radius: 15px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } 

 #NavAnchor A:hover SPAN { background-color: #fff; } 

 #Family { text-align: center; padding: 30px; } 

 #Family A {
     display: inline-block; padding: 0; 
     margin: 0 15px;
     width: 251px; height: 170px;
     background-color: #0056AE;
     background-size: cover;
     background-blend-mode: multiply;
     color: #fff;
     margin-bottom: 15px;
} 
#Family A:hover{ background-color: #00A9FA; }
#Family B{
    color: #fff;
    font-size: 24px;
    display: table-cell;
    width: 251px; height: 170px;
    text-align: center; vertical-align: middle;
}
#Family .fs1{ background-image: url(img/fmenu1.png)}
#Family .fs2{ background-image: url(img/fmenu2.png)}
#Family .fs3{ background-image: url(img/fmenu3.png)}
/* #Family .fs4{ background-image: url(img/fmenu4.png)} */
#Family .fs4{ background-image: url(img/motor1.png)}

 #NavSub #Search { text-align: center; padding: 30px; background-color: #EDEDED; } 

 #NavSub #Search INPUT { width: 620px; font-size: 20px; border: none; padding: 15px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } 

 #NavSub #Result { width: 620px; display: inline-block; text-align: left; } 

 #NavSub #Result HR { padding: 0; margin: 0; border: none; border-top: solid 1px #999; } 

 #NavSub #Result H3 { color: #717171; font-size: 24px; font-weight: 500; padding: 30px 0; margin: 0; } 

 #NavSub #Result SPAN { color: #0097E0; } 

 #NavSub #Result A { font-size: 20px; font-weight: 500; margin: 20px 0; padding: 0; color: #717171; } 

 #NavSub #Result A:hover { text-decoration: underline; } 
 }




















@media (min-width: 768px) { } 

@media (min-width: 320px) and (max-width: 767px) { } 



.subPage .page { min-width: 1445px; max-width: 1920px; margin: 0 auto; background-position: top center; text-align: center; } 

.subPage {
    background-image: url(img/contentBG.png); 
    background-repeat: repeat-x; 
    background-position: 0 520px; 
} 

.keyvi { height: 520px; background-repeat: no-repeat; background-size: cover; background-position: center; } 

.keyvi H1 {
    font-size: 75px; 
    font-weight: 900;
    width: 100vw;
    text-align: center; 
    color: #fff; 
    text-transform: uppercase;
} 

.group1 { background-image: url(img/hline1.png); } 

.group2 { background-image: url(img/hline2.png); } 

.group3 { background-image: url(img/hline3.png); } 

.group4 { background-image: url(img/hline4.png); } 

.group5 { background-image: url(img/hline3.png); } 

.gridin { max-width: 1124px; margin: 0 auto; } 


.cardList ul {display: flex; flex-wrap: wrap;}

.cardList ul li { 
    /* width: 26vh; */
    width: 30%;
    margin: 30px 0 0 32px;
    border: solid 1px #ddd;
}

.cardList ul li a { 
    display:block;
    width: 100%;
    height: 200px;
}

.cardList ul li a .txt {
    display: block;
    height: 100%;
    position: relative;
    padding: 35px 20px 0;
}

.cardList ul li a .txt .title {
    position: relative;
    display:block;
    font-weight: bold;
    font-size: 25px;
    color: #000;
 }

.cardList ul li a .txt .downloadBtn { 
    position: absolute;
    display: flex;
    font-size: 15px;
    font-weight: bold;
    color: #000;
    bottom: 20px;
    left: 20px;
}

.cardList ul li a .txt .downloadBtn i.down {
    background: no-repeat url("/img/download.svg");
    background-size: cover;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 1rem;
}

@media screen and (min-width: 767px) and (max-width: 1105px) {
    .cardList ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .cardList ul li {
        width: 26vh;
    }
}

@media screen and (max-width: 767px) {
    .cardList ul li {
        width:100%;
    }
}

.hdiv .loadSection {
    display: flex;
    justify-content: center;
    flex-direction: row;
    margin-top: 5rem;
}

.hdiv .loadSection .btn-wrap {
    /* display: flex; */
    display: none;
    flex-direction: column;
}

.hdiv .loadSection .btn-wrap button.loadBtn {
    width: 5rem;
    height: 5rem;
    background-color: #fff;
    border: solid 2px #0056AE;
    border-radius: 30px;
    color: #0056AE;
    font-size: 40px;
    font-weight: bold;
    padding-bottom: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.hdiv .loadSection .btn-wrap .loadTxt {
    margin-left: 0.5rem;
    margin-top: 0.5rem;
}

.content { max-width: 1204px; margin: 0 auto; min-height: 500px; background-color: #fff; font-size: 12px; font-weight: 300; padding-bottom: 100px; background-repeat: no-repeat; } 


.content .head H2 { } 
.content P{ word-break: keep-all; }

.ldiv OL LI { list-style-type: decimal; margin-left: 1em; } 

@media (min-width: 320px) and (max-width: 767px){
 .content { padding: 0 10vw; padding-bottom: 10vw; } 

 .keyvi {
     height: 69.333333vw;
     background-size: cover;
     padding-top: 10vw;
    } 

 .keyvi H1 { font-size: 8vw;
     letter-spacing: 0.02em;
     height: 60vw;
     display: table-cell;
     vertical-align: middle;
    } 

 .content .head { } 

 .content .head H2 { font-size: 5.866667vw; padding-top: 10vw; color: #717171; font-weight: 500; } 

 .content H3 {
     font-size: 5.7vw; 
     font-weight: 500; 
     padding-top: 4vw; 
     word-break: keep-all;
 color: #0056AE; } 
    .content .first H3{
     margin-bottom: -10vw;
    }

 .content H4 { font-size: 4.6vw; font-weight: 500; margin-top: 2em; margin-bottom: 1em; color: #0097E0; } 

 .content P { margin-bottom: 2em; line-height: 1.7em; font-size: 3.9vw; font-weight: 500; /* word-break: keep-all; */
 color: #707070; } 

 .content IMG { max-width: 80vw; height: auto; } 
 .hdiv DD, .pdiv DD,
 .ldiv DD{ font-size: 3vw; }
 .ldiv,
 .cdiv,
 .hdiv { display: table; width: 100%; margin-bottom: 10vw !important; } 

 LABEL { font-size: 5vw !important; margin-bottom: 3vw !important; } 
    .pdiv DT{
        height: inherit !important;
    }
    .pdiv H3{
        margin-bottom: 5vw;
    }

 .hdiv H3 { padding-bottom: 3vw; font-size: 5.8vw; } 

 .hdiv BIG { font-size: 4vw; display: block; padding-top: 3vw; padding-bottom: 3vw; } 
 }

@media (min-width: 768px){
 .keyvi BR { display: none; } 
 .keyvi {
     height: 520px;
     padding-top: 100px;
     box-sizing: border-box;
 } 
 .keyvi H1 { font-size: 75px; 
     line-height: 1em;
     letter-spacing: 0.02em;
     text-shadow: 0 0.05em 0.1em rgba(0, 0, 0, 0.2);
     height: 270px;
     vertical-align: middle;
     display: table-cell;
} 

 .content .head { width: 1204px; margin-bottom: 80px; height: 150px; margin-top: -150px; position: relative; border-bottom: solid 1px #8D8D8D; } 

 .content .head H2 { font-size: 53px; padding-top: 20px; text-align: center; color: #0056AE; } 

 .content H2 { font-size: 29px; font-weight: 600; margin-bottom: 20px; line-height: 1.6em; color: #0056AE; } 

 .content H3 { font-size: 36px; font-weight: 600; 
     margin-bottom: 20px;  line-height: 1.6em; color: #0056AE; } 

 .content H3 SMALL { font-size: 36px; font-weight: 400; display: block; margin-bottom: -0.8em; } 

 .content H3 B { font-size: 36px; } 

 .content H4 { font-size: 20px; font-weight: 500; margin-bottom: 1em; } 

 .content P { margin-bottom: 25px; line-height: 1.7em; font-size: 16px; word-break: keep-all; } 

 .ldiv,
 .cdiv,
 .hdiv { display: table; width: 100%; } 

 .ldiv DT, .cdiv DT, .hdiv DT, .pdiv DT,
 .ldiv DD, .cdiv DD, .pdiv DD,
 .hdiv DD { display: table-cell; line-height: 1.7em; font-size: 16px; word-break: keep-all; } 

 .hdiv DD { width: 542px; vertical-align: top; padding-bottom: 20px; } 

 .hdiv BIG { display: block; margin-top: 30px; margin-bottom: 20px; font-size: 24px; font-weight: 400 !important; } 

 .pdiv{ width: 100%; }
 .pdiv DT { width: 736px; vertical-align: top;} 
    .pdiv DT P{
        margin-top: 80px;
    }
    
 .ldiv DT { width: 280px; } 

 .ldiv DD { vertical-align: top; font-size: 16px; } 

 

 .cdiv DD { text-align: center; } 
    .titleImg {
        position: absolute;
        margin-left: 455px;
    }
    .titleOver{
        position: relative;
        z-index: 100;
    }
}





@media (min-width: 768px){
 .breadcrumb { color: #717171; padding-top: 20px; font-size: 16px; } 

 .breadcrumb .desk A { color: #717171; margin: 0 0.5em; } 

 .breadcrumb .desk .menu { margin-left: 1em; } 

 .breadcrumb .desk A:hover,
 .breadcrumb .desk .focus { border-bottom: solid #0056AE; color: #0056AE; font-weight: 500; } 
 }

@media (min-width: 320px) and (max-width: 767px){
 .breadcrumb { margin-left: -10vw; width: 100vw; } 

 .breadcrumb .mobile { display: table; width: 100vw; } 

 .breadcrumb .mobile DD { width: 33.3vw; display: table-cell; border: solid 1px #707070; border-right: none; background-color: #F5F5F5; } 

 .breadcrumb .mobile DD:first-child { border-left: none; } 

 .breadcrumb SELECT { width: 33.3vw; border: none; background-color: #F5F5F5; padding: 2vw; font-size: 3vw; color: #505050; } 
    .breadcrumb .mobile DIV{
        position: absolute;
        z-index: 1000;
    }
    .breadcrumb .mobile DIV A{
        display: block;
        width: 33.3vw; 
        background-color: #F5F5F5; 
        padding: 2vw; 
        font-size: 3vw; 
        color: #505050;
        border: solid 1px #707070;
        border-top: none;
    }
    .breadcrumb .mobile B A{
        display: block;
        width: 33.3vw; 
        background-color: #F5F5F5; 
        padding: 2vw; 
        font-size: 3vw; 
        font-weight: normal;
        color: #505050;
        background-image: url(img/arrowMM.png);
        background-repeat: no-repeat;
        background-position: 28vw center;
    }
}




.popuppage {
    background-color: #fff;
    margin: 0 auto;
}
.popuppage header {
    color: #0056AE;
}
@media (min-width: 768px){
    .popuppage {
        max-width: 1124px;
        padding: 85px 97px;
    }
    .popuppage header {
        margin-bottom: 40px;
        border-bottom: solid 1px #0056AE;
    }
    .popuppage header H2 {
        font-size: 55px;
        margin-bottom: 20px;
    }
    .popuppage header H3 {
        font-size: 30px;
        margin-bottom: 40px;
    }
}
@media (min-width: 320px) and (max-width: 767px){
    
    .popuppage {
        padding: 5vw;
    }
    .popuppage header H2 {
        font-size: 6vw;
        font-weight: 500;
        margin-bottom: 4vw;
    }
    .popuppage header H3 {
        font-size: 4vw;
        font-weight: 500;
        margin-bottom: 10vw;
    }
}




.GridTable{
    width: 100%;
    color: #717171;
}
.GridTable TH, .GridTable TD{
    padding: 2em;
    vertical-align: middle;
}
.GridTable TH{
    font-size: 18px;
    background-color: #ccddef;
}
.GridTable TD{
    font-size: 16px;
    background-color: #ededed;
}


.PT1{ padding-top: 1rem; }
.PT2{ padding-top: 2rem; }
.PT3{ padding-top: 3rem; }
.PT4{ padding-top: 4rem; }
.PT5{ padding-top: 5rem; }
.PT10{ padding-top: 10rem; }
.MT1{ margin-top: 1rem; }
.MT2{ margin-top: 2rem; }
.MT3{ margin-top: 3rem; }
.MT5{ margin-top: 5rem; }
.MT10{ margin-top: 10rem; }


.content LABEL {
    display: block;
    color: #0097E0;
    font-size: 24px;
    font-weight: 600;
    padding-bottom: 10px;
    background-image: url(img/labelLine.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    margin-bottom: 45px;
}

.content BIG {
    color: #0097E0;
    /* font-size: 18px; */
    font-weight: 600;
}

@media (min-width: 320px) and (max-width: 767px) {
    .content LABEL {
        font-size: 4.6vw !important;
        font-weight: 500;
    }
    .GridTable TH, .GridTable TD{
        padding: 1em;
        font-size: 2vw;
    }
}



.content #SideMenu {
    /* border: solid 1px #ff0000; */
    width: 130px;
    position: absolute;
    margin-left: -200px;
    background-image: url(img/sideLine.png);
    background-repeat: no-repeat;
    background-position: left top;
    padding-top: 3px;
}

.content #SideMenu A {
    display: block;
    padding: 10px 0;
    color: #717171;
    font-size: 14px;
    font-weight: 400;
    background-image: url(img/sideLine.png);
    background-repeat: no-repeat;
    background-position: left bottom;
}

.content #SideMenu A:hover,
.content #SideMenu .focus {
    color: #0056AE;
    font-weight: 700;
}

.grayBtn {
    display: inline-block;
    background-color: #8D8D8D;
    color: #fff;
    font-size: 14px;
    padding: 4px 8px;
    vertical-align: middle;
}

.grayBtn SVG {
    vertical-align: sub;
    margin-bottom: 1px;
    margin-left: 5px;
}

.grayBtn:hover {
    background-color: #0056AE;
}

.whiteBtn {
    display: inline-block;
    background-color: #fff;
    border: solid 1px #8D8D8D;
    border-radius: 3px;
    color: #8D8D8D;
    font-size: 14px;
    font-weight: 500;
    padding: 4px 8px;
    vertical-align: middle;
}
.ctaBtn{
    display: inline-block;
    background-color: #0056AE;
    border-radius: 3px;
    color: #fff;
    font-size: 18px;
    font-weight: 300;
    padding: 15px 40px;
    vertical-align: middle;
}



.WideTab{
    display: table;
    width: 100%;
    margin-top: 80px;
    margin-bottom: 100px;
}
.WideTab A{
    display: table-cell;
    width: 50%;
    height: 60px;
    text-align: center;
    vertical-align: middle;
    color: #717171;
    font-size: 18px;
    font-weight: 600;
    background-color: #EDEDED;
    border-bottom: solid 1px #8D8D8D;
    border-top: solid 4px #EDEDED;
}
.WideTab A:first-child{
    border-right: solid 1px #8D8D8D;
}
.WideTab3 A{
    width: 33.3%;
}
.WideTab .focus{
    font-size: 37px;
    font-weight: 700;
    color: #0056AE;
    background-color: #fff;
    border-top-color: #8D8D8D;
    border-bottom-color: #fff;
    vertical-align: bottom;
}
.tappage IMG{
    max-width: 100%;
}
@media (min-width: 320px) and (max-width: 767px) {
    .WideTab{
        margin: 8vw 0;
    }
    .WideTab A{
        font-size: 3vw;
        height: 6vw;
    }
    .WideTab .focus{
        font-size: 5vw !important;
    }
}



PRE IMG {
    transform: scale(1);
    transition: all 0.5s ease-in-out;
}

PRE IMG:hover {
    transform: scale(1.1);
}

PRE {
    display: inline-block;
    overflow: hidden;
}


.sns {
    float: right;
    z-index: 1000;
}







@media (min-width: 768px) {
    .talentPage .values SECTION{
        background-image: url(img/rp11-big.png);
        background-repeat: no-repeat;
        background-position: center top;
        min-height: 570px;
        padding-top: 100px;
    }
    .talentPage .values IMG{ display: none; }
    .talentPage .values DIV{
        width: 350px;
        font-size: 16px;
        margin-bottom: 30px;
        line-height: 2em;
    }
    .talentPage .values H3{
        text-align: center;
        font-size: 35px;
        font-weight: 500;
        color: #717171;
        margin-top: 80px;
    }
    .talentPage .values H3 I{
        font-style: normal;
        color: #0056AE;
    }
    .talentPage .values .L{
        float: left;
    }
    .talentPage .values .R{
        float: right;
        text-align: right;
    }
    .talentPage .values H4{
        font-size: 30px;
        color: #0056AE;
        padding-bottom: 10px;
        margin-bottom: 5px;
        border-bottom: solid 1px #8D8D8D;
    }
    .talentPage .values SPAN{
        display: inline-block;
        width: 280px;
        word-break: keep-all;
    }
}

.jobfieldPage .hdiv DD{
    vertical-align: top;
    width: inherit;
}
.jobfieldPage .hdiv DT{
    padding-right: 40px;
}
.jobfieldPage LI B{
    color: #0097E0;
    display: inline-block;
    padding-right: 10px;
}
.jobfieldPage LI{
    margin: 1em 0;
}
@media (min-width: 320px) and (max-width: 767px) {
    .jobfieldPage .hdiv,
    .talentPage .values DIV{
        display: table;
        margin-bottom: 5vw;
    }
    .talentPage .values .clear{
        margin-bottom: 0;
    }
    .talentPage .values IMG{
        width: 20vw;
        margin-right: 5vw;
    }
    .jobfieldPage .jobfields DT, .jobfieldPage .jobfields DD,
    .talentPage .values I, .talentPage .values SPAN{
        display: table-cell;
        vertical-align: top;
    }
    .talentPage .values H4{
        margin-top: 0;
        margin-bottom: 1vw;
    }
    .jobfieldPage .hdiv I{
        display: inline-block;
        width: 20vw;
        height: 20vw;
        border-radius: 10vw;
        overflow: hidden;
        text-align: center;
    }
    .jobfieldPage .hdiv DT IMG{
        height: 20vw; width: auto;
        margin-left: -6.5vw;
    }
    .jobfieldPage .hdiv H4{
        margin-top: 0;
        font-size: 3vw;
        color: #505050;
    }
}


.benefitPage .benefit{
    margin: 0 auto;
    text-align: center;
}
.benefitPage .benefit DT{
    padding: 0 50px
}
.benefitPage .benefit{
    font-size: 16px;
}
.benefitPage .benefit H3{
    font-size: 30px;
    padding: 20px 0;
    margin-bottom: 0;
}


@media (min-width: 768px) {
    .benefitPage .benefitM{ display: none; }
}
@media (min-width: 320px) and (max-width: 767px) {
/*    .benefitPage .benefit{ display: none !important;}*/
    .benefitPage .ctaBtn{
        padding: 3vw;
    }
    .benefitPage .benefitM {
        display: table;
        width: 100%;
    }
    .benefitPage .benefitM I{
        background-color: #EDEDED;
        display: inline-block;
        width: 20vw; height: 20vw;
        border-radius: 10vw;
        margin-bottom: 5vw;
    }
    .benefitPage .benefitM IMG{
        margin-top: 5vw;
        width: 10vw; height: auto;
    }
    .benefitPage .benefitM TH{
        vertical-align: top;
        padding-top: 3vw;
    }
    .benefitPage .benefitM TD{
        vertical-align: top;
        padding-top: 3vw;
        padding-left: 2vw;
    }
    .benefitPage .benefitM H4{
        padding: 0;
        margin: 0;
        margin-bottom: 2vw;
        color: #717171;
    }
    .benefitPage .benefitM TD BR{ display: none; }
}


.overview LABEL{
    margin-bottom: 0;
    background-image: none;
}
.overview DL{
    width: 100%;
    background-image: url(img/labelLine.png);
    background-repeat: no-repeat;
    background-position: left top;
}
.overview DT H4{
    color: #0056AE;
    font-size: 30px;
    font-weight: 900;
    margin-bottom: 20px;
}
.overview DT H5{
    color: #0056AE;
    font-size: 30px;
    font-weight: 400;
    margin-bottom: 20px;
}
.overview DT A{
    display: inline-block;
    background-color: #fff;
    border: solid 1px #0056AE;
    border-radius: 0.3em;
    color: #0056AE;
    font-size: 16px;
    font-weight: 500;
    padding: 4px 8px;
    vertical-align: middle;
}
.overview DT A:hover{
    background-color: #0056AE;
    color: #fff;
}


@media (min-width: 768px) {
    .overview DT DIV{ position: absolute; }
    .overview DL{
        padding: 40px 0 78px 0;
    }
    .overview DT, .overview DD{
        height: 340px;
        vertical-align: top;
        box-sizing: border-box;
    }
    .overview DD{
        width: 776px;
        text-align: right;
    }
    .overview DT P{
        display: table-cell;
        height: 300px;
        vertical-align: bottom;
    }
}
@media (min-width: 320px) and (max-width: 767px) {
    .overview DL{
        display:flex;
        flex-direction: column;
        margin-bottom: 10vw;
/*        flex-direction: column-reverse;*/
    }
    .overview DT{
        order: 2;
        display: block;
        height: auto;
    }
    .overview DT P{
        display: block;
        height: auto;
    }
    .overview DD{
        order: 1;
        display: block;
        width: 80vw;
        height: 30vw;
    }
    .overview DT H4{
/*        display: inline-block;*/
/*        margin-top: 5vw;*/
        padding-top: 3vw;
        margin-bottom: 2vw;
        font-size: 4vw;
    }
    .overview DT H5 BR{ display: none; }
    .overview DT H5{
        font-size: 4vw;
    }
    .overview DT A{
/*        display: inline-block;*/
        vertical-align: text-bottom;
/*        position: absolute;*/
        font-size: 3vw;
/*        margin-left: 5vw;*/
        right: 10vw;
    }
    .overview DT P{
        clear: both;
        margin-bottom: 5vw;
    }
}


.business DL{
    width: 100%;
}
.business DD{ text-align: right; }
.business DD A{
    color: #0056AE;
    font-size: 16px;
    font-weight: 400;
    border: solid 1px #0056AE;
    border-radius: 0.2em;
    padding: 0.2em 0.6em;
}
.business DT{
    font-size: 24px;
    color: #0097E0;
}
.business H4{
    font-size: 30px;
    color: #0056AE;
    margin-bottom: 20px;
}
@media (min-width: 320px) and (max-width: 767px) {
    .business DL{
        margin: 5vw 0 10vw 0;
        height: inherit;
    }
    .business DT BR{ display: none; }
    .business DT{
        display: block;
        height: inherit;
        word-break: keep-all;
        font-size: 4vw;
    }
    .business H4{
        margin: 0 0 2vw 0;
        font-size: 4vw;
    }
    .business DD{
        display: block;
        height: inherit;
        text-align: left;
        padding-top: 5vw;
    }
    .business DD A{
        font-size: 3vw;
    }
}
@media (min-width: 768px){
    .business DL{
        margin: 20px 0 80px 0;
    }
}



.products{
    background-color: #EDEDED;
    padding: 40px;
    padding-bottom: 0;
    background-image: url(img/labelLine.png);
    background-repeat: no-repeat;
    background-position: 40px top;
}
.products DL{
    display: inline-block;
    margin-left: 40px;
    padding-bottom: 40px;
    float: left;
}
.products .mc{ margin-left: 0; }
.products DD, .products DT{ display: block; }
.products DD IMG{
    height: 220px; width: auto;
}
.products DD{
    background-color: #fff;
    width: 348px;
    text-align: center;
}
.products DT{
    color: #0097E0;
    font-size: 24px;
    padding-top: 30px;
    width: 348px;
    text-decoration: underline;
}

@media (min-width: 320px) and (max-width: 767px) {
    .products{
        width: 100vw;
        margin-left: -10vw;
        padding-right: 0;
    }
    .products DL{
        width: 38vw;
        height: 35vw;
        margin: 0 4vw 5vw 0;
        background-color: #fff;
    }
    .products DD{
        width: 100%;
    }
    .products DT{
        width: 100%;
        color: #717171;
        font-size: 2vw;
        padding: 4vw 2vw;
    }
    .products IMG{
        max-width: 100%;
        max-height: 25vw;
    }
}


.newsList DL{
    width: 100%; border-bottom: solid 1px #8D8D8D;
}

@media (min-width: 320px) and (max-width: 767px) {
    .newsList DT IMG{ display: none; }
    .newsList DD{
        padding: 2vw 0;
    }
    .newsList DD DIV{
        color: #717171;
        position: absolute;
        padding-top: 2.5em;
    }
    .newsList DD H4{
        margin: 0;
        height: 1.3em;
        width: 100%;
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
}
@media (min-width: 768px) {
    .newsList DT, .newsList DD{ padding: 40px 0; }
    .newsList DT{
        width: 348px;       text-align: center;
        vertical-align: middle;
    }
    .newsList DT PRE{
        width: 348px;       height: 220px;
        background-color: #eee;
    }
    .newsList DT IMG{
        width: 348px;       height: auto;
    }
    .newsList DD{
        font-size: 16px;
        color: #717171;
        height: 220px;
        padding-left: 40px;
        vertical-align: top;
    }
    .newsList DD DIV{
        position: absolute;
        margin-top: 200px;
    }
    .newsList H4{
        font-size: 30px;
        color: #0056AE;
        word-break: keep-all;
    }
}



@media (min-width: 320px) and (max-width: 767px) {
    .moviesPage LABEL{ display: none !important; }
    .movieList DL{
        display: block;
        margin: 5vw 0;
        background-color: #EDEDED;
    }
    .movieList DT{
        display: block;
        height: inherit;
/*        position: absolute;*/
    }
    .movieList DT IMG{
/*        display: none;*/
    }
    .movieList DD{
        display: block;
        height: inherit;
        padding: 3vw;
    }
    .movieList DD H4{
        margin: 0;
    }
    .movieList DD DIV{
        color: #717171;
    }
}
@media (min-width: 768px) {
    .movieList DL{
        display: inline-block;
        float: left;
        margin: 0 0 40px 40px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }
    .movieList DT{
        display: block;
        width: 348px; height: 200px;
        overflow: hidden;
        text-align: center;
    }
    .movieList DT IMG{
    /*    width: 348px;*/
        height: 200px;
    }
    .movieList DD{
        width: 348px;
        height: 200px;
        padding: 20px;
        display: block;
    }
    .movieList H4{
        font-size: 20px;
        font-weight: 300;
        color: #717171;
    }
    .movieList DD DIV{
        font-size: 16px;
        color: #717171;
    }
}


.bbsPage H3{
    margin-top: 80px;
}
.bbsPage SECTION{
    margin: 40px 0 80px 0;
}
.bbsPage .buttons DT A{ background-color: #0056AE; }
.bbsPage .buttons A{
    display: inline-block;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    padding: 15px 60px;
    border-radius: 0.5em;
    background-color: #BABABA;
}
.bbsPage #NewsView DIV IMG{
    margin-top: 40px;
    max-width: 1124px;
}
.bbsPage #NewsView{
    margin-top: -40px !important;
/*    border: solid 1px #ff0000;*/
}
@media (min-width: 320px) and (max-width: 767px) {
    .bbsPage #NewsView IMG{
        max-width: 80vw !important;
    }
    .bbsPage IFRAME{
        width: 80vw;
        height: 50vw;
    }
}


.motor { background-image: url(img/motorline.png); }
.motor H4 { color: #0056AE; }
.motor DL DD { width: 445px; }
.motor DL DT { text-align: center; }
.motor DL DD:first-child { text-align: right; }
.motor P { padding-top: 0 !important; }


.buttons{
    border-top: solid 1px #8D8D8D;
    padding: 80px 0;
    text-align: center;
}
.buttons A{
    display: inline-block;
    width: 155px;
    padding: 15px 0;
    background-color: #BABABA;
    text-align: center;
    color: #fff;
    font-size: 18px;
    font-weight: 300;
    border-radius: 0.3em;
    margin: 0 15px;
}
.buttons .blue{ background-color: #0056AE; }
.buttons .sky{ background-color: #0097E0; }
.buttons .pink{ background-color: #DB2572; }

@media (min-width: 320px) and (max-width: 767px) {
    .buttons{
        padding: 5vw 0;
    }
    .buttons A{
        width: inherit !important;
        font-size: 4vw !important;
        padding: 2vw 4vw !important;
        margin: 0 1vw !important;
    }
}

.BasicForm{
    width: 100%;
    font-size: 20px;
    font-weight: 300;
    color: #717171;
    margin: 10px 0;
    border-spacing: 0;
    border-top: solid 1px #8D8D8D;
}
.BasicForm TH{
    background-color: #EDEDED;
    border-bottom: solid 1px #8D8D8D;
    color: #717171;
    font-size: 14px;
    font-weight: 300;
    padding: 20px 5px;
    text-align: left;
}
.BasicForm TD{
    border-bottom: solid 1px #8D8D8D;
    color: #717171;
    font-size: 14px;
    font-weight: 300;
    padding: 5px 20px;
}
.BasicForm .center{
    text-align: center !important;
}
.BasicForm SELECT,
.BasicForm INPUT[type='password'],
.BasicForm INPUT[type='text']{
    width: 100%;
    padding: 10px;
    border: solid 1px #8D8D8D;
}

.qnaPage TEXTAREA{
    width: 100%;
    padding: 10px;
    border: solid 1px #8D8D8D;
}

.HomePR .grid IMG{
    width: 251px; height: 158px;
}
.HomePR .grid A{
    display: inline-block !important;
    width: 251px; height: 420px !important;
    background-color: #fff !important;
    margin-right: 40px;
    border-radius: 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    color: #717171;
    vertical-align: top;
    overflow: hidden;
}
.HomePR .grid SPAN{
    display: block;
    padding: 40px 20px 0 20px;
    height: 220px;
}
.HomePR .grid SMALL{
    padding: 0 20px;
}
.HomePR .grid .double{
    width: 542px;
}
.HomePR .grid .double SPAN{
    height: inherit;
}
.HomePR .grid .double IMG{
    width: 502px; height: 282px;
    margin-top: 40px;
}

.promotionPage .cdiv LABEL {
    text-align: left;
}
.promotionPage .cdiv DIV {
    padding-top: 1em;
    text-align: right;
}


@media (min-width: 320px) and (max-width: 767px) {
    .root_daum_roughmap{
        width: 80vw !important;
        height: 60vw !important;
    }
    .networkPage IFRAME{
        width: 80vw;
        height: 60vw;
    }
    
    .col2DD{
        width: 90vw;
        text-align: left;
    }
    .col2DD DD{
        width: 38vw;
        display: inline-block;
        margin: 0 4vw 5vw 0;
        vertical-align: top;
    }
    .col2DD IMG{
        width: 100%;
    }
    .col2DD H4{
        margin: 2vw 0;
    }
    
    
    .qnaPage .BasicForm,
    .qnaPage .BasicForm TR,
    .qnaPage .BasicForm TD{
        display: block;
        padding: 0;
        width: 80vw;
        border: none;
    }
    .qnaPage .BasicForm TH{
        display: inline-block;
        padding: 0;
        margin-top: 2vw;
        background-color: inherit;
        border: none;
    }
    .qnaPage TEXTAREA,
    .qnaPage .BasicForm SELECT,
    .qnaPage .BasicForm INPUT{
        width: 100%;
        border-radius: 1vw;
    }
    
    .certtable{
        background-color: #fff !important;
        text-align: left !important;
        margin-top: 5vw !important;
        width: 90vw !important;
        display: block;
    }
    .certtable DD{
        display: inline-block;
        width: 40vw;
        margin: 0 2vw 5vw 0;
        padding: 0 !important;
        text-align: center;
    }
    .certtable IMG{
        width: 40vw;
    }
    .certtable H4{
        font-size: 3vw;
        margin-top: 2vw;
    }
    
    .promotionPage .cdiv A{ display: none; }
    
    .certtable A{ display: none; }
    
}







.historyDetail {
    width: 100%;    text-align: center;
}
.historyDetail TH {
    color: #0097E0; vertical-align: top;
}
.historyDetail TD {
    vertical-align: top;
    color: #717171;
    word-break: keep-all;
}
.historyDetail TR TD:first-child {
    color: #0056AE;
}
@media (min-width: 768px) {
    .historyDetail TABLE {
        margin-bottom: 80px;
        margin-left: 170px;
    }
    .historyDetail TH {
        font-size: 24px;
        font-weight: 300;
        padding: 0 10px;
    }
    .historyDetail TH B { margin-right: 20px; }
    .historyDetail TD {
        font-size: 20px;
        padding-left: 20px;
        padding-bottom: 20px;
    }
    .historyDetail TR TD:first-child {
        font-size: 37px;
        font-weight: 600;
        padding-right: 100px;
        padding-left: 50px;
    }
    .historyDetail TR:first-child TD:first-child {
        background-image: url(img/historyTableLine.png);
        background-repeat: no-repeat;
        background-position: right 15px;
    }
}
@media (min-width: 320px) and (max-width: 767px) {
    
    .historyDetail TABLE {
        width: 100%;
        margin-bottom: 10vw;
        background-image: url(img/historyTableLineM.png);
        background-repeat: no-repeat;
        background-position: right 3vw;
        background-size: 59.2vw auto;
    }
    .historyDetail TH B{ font-weight: 100; }
    .historyDetail TH {
        color: #0056AE;
        font-weight: 100;
        padding-right: 2vw;
        font-size: 4vw;
    }
    .historyDetail TD{ font-size: 4vw; }
    .historyDetail TR:first-child TD:last-child,
    .historyDetail TR:first-child TH{ padding-top: 8vw; }
    .historyDetail TR TD:first-child {
        font-size: 4vw; width: 18vw !important;
    }
    .historyDetail TR TD:last-child {
        width: 50vw !important;
        word-break: break-all;
    }
}



#NewList{
    margin-bottom: 2em;
}
#Pagenation{
    text-align: center;
}
#Pagenation A{
    display:inline-block;
    min-width: 2em;
    padding: 0.2em 0;
    margin: 0 0.2em;
    color: #717171;
    cursor: pointer;
    border: solid 1px #fff;
    border-radius: 0.3em;
}
#Pagenation A:hover,
#Pagenation .current{
    border: solid 1px #707070;
}


@media (min-width: 320px) and (max-width: 767px) {
    .promotionPage .cdiv{
        margin: 0 !important;
    }
    .promotionPage .cdiv DT{ display: none; }
    .promotionPage .cdiv DD{
        width: 38vw;
        display: inline-block;
        margin: 0 1vw;
        float: left;
        vertical-align: top;
    }
    .promotionPage .cdiv DD PRE IMG{
        width: 38vw;
    }
    .networkPage #Ex .location{
        background-size: contain;
        background-position: bottom;
        height: 80vw;
    }
    .networkPage .basictable TH{
        word-break: keep-all;
    }
}
@media (min-width: 768px) {
    .visionPage .D .desk{
        height: 600px; width: auto;
    }
    .promotionPage .cdiv PRE IMG{
        height: 450px; width: auto;
    }
    .promotionPage .cdiv A IMG{
        height: 31px; width: auto;
    }
    .networkPage .locations .first IMG{
        width: 445px; height: auto;
    }
    .networkPage .location{
        background-size: contain;
    }
    .networkPage .icons{
        height: 141px;
    }
    .gridin IMG{
        max-width: 100%;
    }
}