@charset "utf-8";
::-webkit-scrollbar { display: none; }
* { margin: 0; padding: 0; }
body, html { width: 100%; height: 100%; font-family: 'Nanum Gothic', 'Montserrat', sans-serif; }
html { overflow: hidden; font-size: 16px; }
body { overflow: auto; }
ul { list-style: none; }
a { text-decoration: none; }
button { border:0; background-color: transparent; outline: 0; }
h2 { font-weight: normal; }
h4 { font-weight: normal;}

.container { width: 100%; height: 100%; position: relative; }
.home_box { width: 100%; height: 4%; background-color: #fff; position: fixed; top: 0; left: 0; z-index: 999; }
.home { display: block; position: absolute; z-index: 999; color: #333; left: 2%; top: 25%; width: 120px; }
.hd_wrap { position: fixed; top: 0; left: 0; z-index: 30; }
.gnb_btn_box { width: 13vw; height: 100vh; position: absolute; top: 0; left: 0; }
.ckBox { display: none; }
.gnb_btn_fr { position: absolute; top: 50%; left: 6.5%; z-index: 10; }
.gnb_btn_line_box { width: 40px; height: 40px; float: left; position: relative; z-index: 10; cursor: pointer; }
.gnb_btn { display: block; width: 30px; height: 2px; background-color: #333; margin: 0 auto; margin-top: 8px; transition: 0.3s; }
/* .menu { float: left; margin-top: 10px; transform: rotate(-90deg); transition: 0.3s; margin-left: -10px; position: relative; z-index: 10; cursor: pointer; color: #fff; font-weight: bold; } */
.gnb_btn_fr:hover .menu { color: #333; }
.menu_bc { display: block; width: 15vw; height: 100vh; position: absolute; top: -50vh; left: -14.3vw; background-color: rgba(255,255,255); transition: 0.3s; }
.gnb_btn_fr:hover .menu { transform: rotate(0deg); margin-left: 0px; }
.gnb_btn_fr:hover .menu_bc { left: -12vw; }
.gnb_btn_fr:hover .gnb_btn_line_box .line2 { width: 15px; }
.gnb_wrap { width: auto; height: 100vh; position: absolute; top: -50vh; left: 0; }
.gnb_box { position: absolute; top: 50vh; margin-top: -125px; left: -10vw; transition: 0.5s; z-index: 10; }
.gnb { width: 60%; height: 50px; line-height: 50px; font-weight: bold; cursor: pointer; }
.ckBox:checked ~ .gnb_btn_fr .gnb_wrap .gnb_box { left: 7vw; }
.ckBox:checked ~ .gnb_btn_fr .menu_bc { left: -2vw;}
.ckBox:checked ~ .gnb_btn_fr .menu { transform: rotate(0deg); margin-left: 0px; color:#333; }
.ckBox:checked ~ .gnb_btn_fr .gnb_btn_line_box .line2 { width: 0; }
.ckBox:checked ~ .gnb_btn_fr .gnb_btn_line_box .line1 { transform: rotate(-45deg); }
.ckBox:checked ~ .gnb_btn_fr .gnb_btn_line_box .line3 { transform: rotate(45deg); }
.gnb:hover { color: #ff764b; }
.gnb_bc { display: none; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background-color: rgba(0,0,0,0.7); z-index: 1; }
.ckBox:checked ~ .gnb_bc { display: block; }
.sns_wrap { position: fixed; top: 0; right: 0; height: 100vh; width: 39px; z-index: 999; background-color: #fff;}
.sns_box { position: absolute; top: 50%; margin-top:-98px; right: 3px; }
.sns { padding-top: 50px; }
.sns_ico1 { padding-top: 0; }
.sns a { display: block; width: 32px; height: 32px; }
.sns a img { display: block; width: 100%; }

.page_wrap { width: 96%; height: 96%; margin: 0 auto; margin-top: 2%; }
.page { width: 100%; height: auto; position: relative; }
.vs_box { width: 100%; height: 100%; }
.intro_bc { display: block; width: 100%; height: 100%; background-image: url("../img/intro_bc.jpg"); background-size: cover; background-position: center center; overflow: hidden;  position: absolute; top: 0; left: 0; opacity: 0.95;}
#sec { display: block; width: 2px; height: 13vw; position: absolute; background-color: #ff764b; bottom: 48.5%; left: 48.15%; transform-origin: 0% 100%; }
.con_box { position: absolute; top: 30%; left: 15%; }
.con_box span { display: block; padding-top: 20px; color: #fff; }
#time { padding-top: 20px; color: #fff; }

.page_tit { font-size: 1.2rem; text-align: center; padding-top: 20px; color:#fff; font-weight: normal; }
.tit_bar { display: block; width: 35px; height: 3px; background-color: #ff764b; position: absolute; top: 100px; left: 50%; margin-left: -17px; }
.photo_fr { width: 500px; height: auto; overflow: hidden; float: left; margin-left: 19vw; border-radius: 500px; box-shadow: 3px 3px 15px #ccc; margin-top: 150px;}
.photo_fr img { width: 100%; }
.about_frame { width: 80%; height: 40%; margin: 0 auto; padding-top: 150px; position: relative; }
.about_container { width: 30%; height: auto; overflow: hidden; padding-left: 30px; box-shadow: 3px 3px 8px #ccc; position: absolute; right: 13vw; top: 150px; padding-bottom: 14px; opacity: 0.5; }
.about_container2 { top: 360px;}
.about_container3 { top: 520px;}
.about_container.on { opacity: 1; animation: aboutAni 0.6s;  }
@keyframes aboutAni {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.about_con_box { color: #fff; }
.about_tit2 { font-size: 1.4rem; height: 35px; line-height: 35px; padding-top: 14px; color:#fff; padding-bottom: 14px; }
.about_con_box span { display: block; padding-top: 10px; font-size: 0.9rem; }
.about_con1 { padding-top: 0; }

.abilities_wrap { width: 80%; height: 80vh; margin: 0 auto; margin-top: 15vh; }
.abil_box { display: flex; justify-content: space-around; width: 80%; height: auto; margin: 0 auto; }
.abil { width: 32%; background-color: rgba(255,255,255,0.8); padding: 2% 3%; text-align: center; }
.abil_icon { font-size: 2.2rem; padding-bottom: 35px; }
.abil_tit { font-weight: bold; font-size: 1.4rem; }
.abil_txt { text-align: left; }
.abil_txt span { display: block; font-size: 0.9rem; padding-top: 30px; }
.per_fr { text-align: left; padding-top: 50px; }
.per_tit { float: left; }
.per_tit2 { display: block; font-size: 0.85rem; }
.num { display: block; clear: both; float: right;}
.pro_bar { display: block; width: 100%; height: 3px; background-color: #aaa; clear: both; }
.pro_bar2 { display: block; width: 0%; height: 3px; background-color: #ff764b; margin-top: -3px; transition: 2s cubic-bezier(0,.69,.42,1); transition-delay: 0.6s; }
.percentage1 .proBar1.on { width: 92%; }
.percentage1 .proBar2.on { width: 85%; }
.percentage1 .proBar3.on { width: 70%; }
.percentage1 .proBar4.on { width: 50%; }
.percentage2 .proBar1.on { width: 85%; }
.percentage2 .proBar2.on { width: 90%; }
.percentage2 .proBar3.on { width: 75%; }
.percentage3 .proBar1.on { width: 50%; }
.percentage3 .proBar2.on { width: 80%; }

#page4 { height: auto; padding-bottom: 100px; }
.port_wrap { width: 100%; height: auto; }
.port_box { width: 80%; height: auto; display: flex; justify-content: space-around; flex-wrap: wrap; margin: 0 auto; margin-top: 100px; }
.port { width: 32%; overflow: hidden; min-width: 300px; text-align: center; position: relative; margin-top: 2%; }
.img_fr { width: 100%; height: 88%; overflow: hidden; }
.port img { display: block; width: 100%; transition: 0.3s; position: relative; }
.port_img_bc { position: absolute; top: 0; left: 0; width: 100%; height: 88%; background-color: rgba(0,0,0,0.7); opacity: 0; transition: 0.3s; }
.port:hover .port_img_bc { opacity: 1; }
.port_tit { padding-top: 14px; cursor: pointer; height: 50px; } 
.port_tit a { color: #fff; }
.port_tit a:hover { color: #ff764b; }
.port:hover a { color:#ff764b; }
.wrapper { padding: 30px; }
.wrapper p { color:#fff; font-size: 0.9rem; line-height: 30px;}
.works_wrap { width: 100%; height: auto; padding-bottom: 150px; }
.works_box { width: 80%; height: auto; display: flex; justify-content: space-around; flex-wrap: wrap; margin: 0 auto; margin-top: 100px; }
.works { width: 24%; overflow: hidden; min-width: 300px; text-align: center; position: relative; margin-top: 2%; }
.works img { display: block; width: 100%; transition: 0.3s; position: relative; }
.works_tit { padding-top: 14px; color: #fff; }

#page6 { width: 100%; height: 45vh; position: relative; }
.contact_wrap { width: 80%; height: 50%; margin: 0 auto; text-align: center; margin-top: 130px; color:#fff; }
.contact_wrap span { display: block; padding-top: 30px;}
.contact_icon_box { width: 350px; height: 50px; margin: 0 auto; text-align: center; margin-top: 50px; }
.contact_icon_box .sns { padding-top: 0; float: left; width: 50%; }
.contact_icon_box .sns a { width: 190px;  }
.contact_icon_box .sns span { display: block; float: left; padding-top: 0; margin-right: 20px;height: 35px; line-height: 35px; color:#fff; }
.contact_icon_box .sns span:hover {color: #ff764b; }
.contact_icon_box .sns a img { display: block; float: left; width: 35px; height: 35px; }

.nav_cls_btn { cursor: pointer; }

.tabsnav__item:hover .tabsnav__title { color:#ff764b; }