body,html { height: 100%;}
body{ margin: 0px; font-family: 'Noto Sans KR',sans-serif;}
.div-main-top-wrap { width: 100%; height: 80px; border-bottom: 1px solid transparent; position: fixed; z-index: 10;}
.div-main-menu-wrap { right: 20px; position: absolute; top:10px}
.div-main-menu-text { float: left; padding-left: 10px;  padding-right: 10px; color: #ffffff; font-size: 16px; font-weight: 500;  height: 30px; line-height: 30px; margin-right: 20px; margin-top: 15px; cursor: pointer;}
.div-main-menu-text:hover { color: rgba(255,204,0,0.9);}
.div-main-visual { width: 100%;  position: relative;}
.div-main-visual img { width: 100%; display: block;}
.div-modal-back { width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); position: fixed; top:0px; left: 0px;z-index: 50; display: none; overflow: hidden;}
.div-mobile-menu { width: 60%; height: 100%; position: fixed;right: -60%; background-color: #ececec; }
.div-main-mobile-wrap { width: 100%; margin-top: 100px;}
.btn-menu-close { width: 25px; height: 25px; position: absolute; top:20px; right: 20px;}
.btn-menu-close img { width: 100%;}
.div-main-logo { height: 50px; position: absolute; left: 30px; top:15px; cursor: pointer;}
.div-main-logo img { height: 100%; }


.div-main-mobile-text { width: 90%; margin-left: 10%; border-bottom: 1px solid #cccccc; height: 50px; color: #444444; line-height: 50px; font-weight: 700; letter-spacing: -1px; cursor: pointer;}
.div-visual-text-wrap { position: absolute;left: 10%; top:50%; transform: translateY(-50%);}
.div-visual-title { font-weight: 700;font-size: 40px; color: #ffffff; }
.div-visual-sub-text { font-weight: 700;font-size: 16px; color: #ffffff; line-height: 180%; margin-top: 20px;  text-align: justify;}

.div-section-wrap { width: 100%; min-height: 100%; }
.div-section-title { width: 90%; font-size: 50px; color: #222222; font-weight: 700; margin-top: 100px; text-align: center; margin-left: 5%; line-height: 100%; letter-spacing: -1px;}
.div-section-title2 { width: 90%; font-size: 50px; color: #ffffff; font-weight: 700; margin-top: 150px; text-align: left; margin-left: 5%; line-height: 100%; letter-spacing: -1px;}

.div-section-text { width: 70%; font-size:18px; margin-left: 15%; margin-top: 30px; line-height: 190%; text-align: justify; color: #444444; font-weight: 500;}
.div-section-text2 { width: 70%; font-size:18px; margin-left: 15%; margin-top: 30px; line-height: 190%; text-align: justify; color: #ffffff; font-weight: 500; }

.div-clear-fix { width: 100%; height: 1px ; clear: both;}

.div-section-card { width: calc(25% - 20px); float: left; margin-right: 20px;}
.div-section-card-title { width: 100%; border-bottom: 2px solid #ffffff; font-size: 20px; font-weight: 700;}

.div-section-img { width: 80%; position: relative; margin-left: 10%;}
.div-section-img img { width: 100%;}
.div-footer-wrap { width: 100%;  background-color: #222222; position: relative; padding-top: 30px;padding-bottom: 30px;}
.div-footer { width: 1200px; position: relative; margin: auto;}
.div-footer img { width: 50%;}
.btn-menu { position: absolute; width: 30px; height: 30px; top:15px; right: 20px; display: none;}
.btn-menu img { width: 100%;}

.div-section-pic { width: 95%;  margin: auto;margin-top: 50px; border:1px solid #cccccc}
.div-section-pic img { width: 100%; display: block;}
::-webkit-scrollbar { width: 5px; } 
::-webkit-scrollbar-track { background-color:#444444; } 
::-webkit-scrollbar-thumb { background: #222222; } 
::-webkit-scrollbar-thumb:hover { background: #ececec; cursor: grab; } 
::-webkit-scrollbar-thumb:active { background: #ececec; } 
::-webkit-scrollbar-button { display: none; } 

.div-contact-wrap { width: 1000px; min-height: 200px; margin: auto; margin-top: 30px;margin-bottom: 30px;}
.div-contact-info { width: calc(50% - 20px ); float: left; margin-left: 20px; margin-top: 20px;}
.div-contact-info-title { width: 100%; font-size: 30px; font-weight: 700; height: 30px; line-height: 30px;  }
.div-contact-info-num { font-size: 25px; font-weight: 700;}
.div-contact-info-text { width: 100%; font-size: 14px; font-weight: 700; height: 30px; line-height: 30px;  }
.div-contact-info-email a { text-decoration: none; color: #222222;}
.div-contact-info-num a { text-decoration: none; color: #222222;}
.div-contact-info-cap { font-size: 18px; font-weight: 700; margin-top: 20px;}
.div-section-sub { width: 100%; text-align: center; font-size: 16px; color: #444444; margin-top: 30px;}
.div-section-card { width: 200px; border-radius: 10px; overflow: hidden; float: left; margin-top: 50px;}
.div-section-card img { width: 100%; display: block;}

.div-section-text2 a { text-decoration: none; color: #ffffff;}
@media screen and (max-width: 1200px) { 

    .div-main-menu-wrap{ display: none;}
    .div-section-title { font-size: 35px; text-align: left; white-space: normal;}
    .div-section-text { width: 90%; margin-left: 5%; font-size: 16px;}
    .div-section-card-text { font-size: 14px;}
    .div-section-title2 { font-size: 35px; margin-top: 80px;}
    .div-section-text2 { font-size: 14px;}
    .div-footer { width: 100%;}
    .div-footer img { width: 100%;}
    .div-main-logo { height: 40px; position: absolute; left: 10px; top:10px}
    .div-main-top-wrap { width: 100%; height: 60px; border-bottom: 1px solid transparent; position: fixed; z-index: 10;}
    .btn-menu { position: absolute; width: 30px; height: 30px; top:15px; right: 20px; display: block; cursor: pointer;}

}
@media screen and (max-width: 780px) { 
   
    .div-contact-info { width: calc(100% - 20px ); float: left; margin-left: 20px;}

    .div-visual-text-wrap { position: absolute;left: 10%; top:50%; transform: translateY(-50%);}
    .div-visual-title { font-size: 18px;}
    .div-visual-sub-text { font-size: 14px; width: 80%; text-align: left;}
    .div-section-card { width: calc(50% - 20px); float: left; margin-right: 20px; margin-top: 20px;}
    .div-section-text2 { width: 90%; margin-left: 5%;}
    .div-section-img { display: none;}
    .div-contact-wrap  { width: 100%;}
}