@charset "utf-8";

/* ******************************** 전체 영역 설정 ******************************** */
html{ font-size: 10px;}
html, body{ width: 100vw; height: 100%; }
body {
    font-family: Roboto;  font-size: 1.4rem; word-break: keep-all;
    -ms-overflow-style: none; /* IE and Edge */
}
body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

body{color: #4f4849; /*overflow: hidden;*/ overflow-y: scroll;}
main{display:block;overflow-y: scroll;height: 100%;}
main::-webkit-scrollbar {display: none;}
section { width: 100%; height:100%; overflow: hidden;position: relative;}
.container{ max-width: 1500px; padding: 0 60px; margin: 0 auto; width: 100%; height: 100%; display: flex; flex-direction: column;justify-content: center;}


/* 모바일 가로모드 제한 */
body.landscape_mobile{
    height: 100%;
    overflow: hidden;
    position: fixed;
}

/* 모바일 br pc에서 숨김처리 */
br.drop420{display: none;}
br.drop720{display: none;}
br.drop1024{display: none;}
br.dropMobile{display: block;}


/* ******************************** header ******************************** */
header{position:fixed; width: 100%; top: 0; left: 0; z-index: 22;}
header .logo{ width: 10.6rem; height: 2.7rem;  margin-top:7rem;  margin-left: 7rem;}
header .logo a{ display: block; width: 100%; height: 100%; text-indent: -99999px; overflow: hidden;}

.menu-button, .menu-button span { display : inline-block;  transition : transform .4s;  box-sizing : border-box;}
.menu-button { position: absolute; right: 7rem; top: 7rem; width: 40px; height: 29px; z-index: 10;}
.menu-button span { position : absolute; left : 0; width : 100%; height : 3px; background-color : #fff; border-radius : 4px;}
.menu-button span:nth-of-type(1) { top : 0;}
.menu-button span:nth-of-type(2) { top : 13px;}
.menu-button span:nth-of-type(3) { bottom : 0;}


/* ******************************** nav ******************************** */
nav{    width: 100vw; height: 100vh; background: #fff; position: fixed; left:100vw; top: 0; text-align: center; z-index: 21;opacity: 0;transition-duration: 1s;}
nav ul{margin-top: 10vh;}
nav ul li a{ font-size: 6rem; font-weight: 700;  color: #305289; line-height: 11.11111111111111vh; }
nav p.company_information{ letter-spacing: -0.05em; position: absolute; left: 50%; transform: translateX(-50%);  bottom: 10vh;
    font-size: 2rem; line-height: 3rem; width: 100%;}

/* 네비 오픈 버튼 애니메이션 */
body.nav_active nav{opacity: 1;transition-duration: 1s;left:0;}
body.nav_active{overflow: hidden;}

body.nav_active .menu-button span:nth-of-type(1) { -webkit-transform : translateY(20px) rotate(-45deg); transform : translateY(13px) rotate(-45deg);}
body.nav_active .menu-button span:nth-of-type(2) { opacity : 0; transition-duration: 0.5s;}
body.nav_active .menu-button span:nth-of-type(3) { -webkit-transform : translateY(-20px) rotate(45deg); transform : translateY(-13px) rotate(45deg);}

/* 배경 색에 따른 네비 글자 색 변화 */
/*
body nav ul{
    background-image: linear-gradient(-45deg,  rgba(154,199,70,1) 1%, rgba(154,199,70,1) 29%, rgba(70,199,188,1) 69%, rgba(70,199,188,1) 100%);
    -webkit-background-clip: text; color: transparent;
}

녹색으로 고정 요청 2020-07-20
body.bg_purple nav ul{
    background-image: linear-gradient(-45deg,  rgba(2,123,216,1) 1%, rgba(2,123,216,1) 29%, rgba(234,1,141,1) 69%, rgba(234,1,141,1) 100%);
    -webkit-background-clip: text; color: transparent;
}
body.bg_green nav ul{
    background-image: linear-gradient(-45deg,  rgba(154,199,70,1) 1%, rgba(154,199,70,1) 29%, rgba(70,199,188,1) 69%, rgba(70,199,188,1) 100%);
    -webkit-background-clip: text; color: transparent;
}
body.bg_blue nav ul{
    background-image: linear-gradient(-45deg,  rgba(70,199,188,1) 1%, rgba(70,199,188,1) 29%, rgba(0,124,217,1) 69%, rgba(0,124,217,1) 100%);
    -webkit-background-clip: text; color: transparent;
}
*/
/* ******************************** indicatior ******************************** */
.indicator{ position: fixed; right: 7rem; top: 50%; transform: translateY(-50%); width: 10px;
    height: 180px; word-break: break-all; font-size: 15px;  display: flex;  flex-direction: column;  justify-content: space-between;z-index: 9;}
.indicator .icon{ width: 10px; height: 5px; display: inline-block;}

/* ******************************** footer ******************************** */
footer{position:fixed; width: 100%; bottom: 0; left: 0; z-index: 19;}
footer .copyright{ font-size: 1.6rem;  margin-left: 7rem;  margin-bottom: 7rem;}
/*footer .floating_btn{position: absolute;  left: 0; top: 0;  width: 100vw;  height: 100vh;}*/
footer .scroll_down{ font-size: 13px; display: flex; align-items: center; position: absolute; bottom:7rem; left: 50%; transform: translateX(-50%);
animation: scrollDown 1s alternate infinite ease;}
footer .scroll_down .icon{ display: inline-block; width: 14px; height: 30px; margin-right: 20px;}
footer .move_top{ font-size: 13px;  position: absolute; bottom:7rem; right: 7rem;display: inline-block; vertical-align: middle; height: auto;width: 25px; word-break: break-all;text-align: center;display: none;}
footer .move_top .icon{ display: inline-block; width: 10px; height: 5px;background-size: cover;}
body.end footer .scroll_down {opacity: 0;transition-duration: 0.7s;}


/* 아래로 스크롤 하라는 표시 애니메이션 */
@keyframes scrollDown { 0% {bottom:4.7vh;} 100% {bottom:3.645833333333333vh;}}

/* ******************************** 페이지 기본 프레임 색상 ******************************** */

/* ******************************** white */
body.white_frame header .logo a{ background: url(../images/logo_white.svg)no-repeat; background-size: contain;}
body.white_frame header .menu-button span{background-color : #fff;}
body.white_frame footer .copyright{color: #fff;}
body.white_frame footer .scroll_down{color: #fff;}
body.white_frame footer .scroll_down .icon{  background: url(../images/scroll_down_white.png)no-repeat;  background-size: contain;}
body.white_frame footer .move_top a{color: #fff;transition-duration: 0.6s;display: flex;flex-direction: column;align-items: center;}
body.white_frame footer .move_top .icon{background-image: url(../images/pagenation_up.png);background-repeat:no-repeat;margin-bottom: 3px;background-size: contain;transition-duration: 0.6s;}

body.white_frame .indicator span { color: #ffffff; }
body.white_frame .indicator .icon.up { background-image: url(../images/pagenation_up.png);background-repeat:no-repeat;background-size: cover;transition-duration: 0.6s}
body.white_frame .indicator .icon.down { background-image: url(../images/pagenation_down.png);background-repeat: no-repeat;background-size: cover;transition-duration: 0.6s}

/* ******************************** black */
body.black_frame header .logo a{ background: url(../images/logo_color.svg)no-repeat;  background-size: contain;}
body.black_frame header .menu-button span{background-color : #305289;transition-duration: 0.6s}
body.black_frame footer .copyright{color: #305289;transition-duration: 0.6s}
body.black_frame footer .scroll_down{color: #305289;transition-duration: 0.6s}
body.black_frame footer .scroll_down .icon{  background: url(../images/scroll_down_black.png)no-repeat;transition-duration: 0.6s}
body.black_frame footer .move_top a{color: #305289;}
body.black_frame footer .move_top .icon{ background-image: url(../images/pagenation_up_black.png);}

body.black_frame .indicator span { color: #305289;transition-duration: 0.6s}
body.black_frame .indicator .icon.up { background-image: url(../images/pagenation_up_black.png);}
body.black_frame .indicator .icon.down { background-image: url(../images/pagenation_down_black.png);}

body.main_frame .indicator span { color: #305289;transition-duration: 0.6s}
body.main_frame .indicator .icon.up { background-image: url(../images/pagenation_up_black.png);}
body.main_frame .indicator .icon.down { background-image: url(../images/pagenation_down_black.png);}


/* 네비 오픈 버튼 애니메이션 */
body.nav_active header .menu-button span{background-color : #305289;}


/* ******************************** 개별 영역 설정 ******************************** */
section .page_title{ font-size: 2.5rem; color:#ffffff; }
section .sub_title{ font-size: 6rem; line-height: 7rem; font-weight: 300;background-color: #305289;display: inline-block;    padding: 0 1rem;}
section .sub_title strong{ font-weight: 600;}
section p.page_contents{font-family: Noto Sans KR; font-size: 2.5rem; letter-spacing: -0.05em; line-height: 4rem;}
section p.caption{ font-size: 2rem; line-height: 3rem; color: #305289;  font-weight: 400;}

/* ******************************** 메인 페이지 ******************************** */

section.main .text-box{width: 74%;position: relative;margin: 18vh auto 0;background-color: #ffffff;    display: flex;justify-content: flex-end;}
section.main::before{content:'';display:block;width:100%;height:25vh;background-color:#305289;position: absolute;top: 0; }
section.main::after{content:'';display:block;width:100%;height:16vh;background-color:#221d34;position: absolute;bottom: 0; }
section.main h1{    min-height: 50vh; max-height: 50vh;width: 51vw;height: 25vw;display: flex;justify-content: center;align-items: center;background-color: #9eb4d8;font-size: 11.66666666666667vw;letter-spacing: -0.01em;line-height: 1em; font-weight: 900; color: #fff;}
section.main p{font-size: 3.28125vw;letter-spacing: 0.025em;line-height: 1.3em;font-weight: 700;color: #221d34;position: absolute;bottom: 0;left: 3.9vw;transform: translateY(50%);    text-align: left;z-index: 1;}
section.main p em{font-style: normal;background-color: #cad7ee;display: block;height: 1em}


/* ******************************** 어바웃 페이지 ******************************** */
section.about{ background: #f3f3f3;}
section.about .container{ flex-direction: row; align-items: center;}
section.about .text_box{ margin-left: 10rem;}
section.about .sub_title{display:inline-block;font-family: 'Roboto';font-weight:700;font-size: 6rem;margin: 3.5rem 0;color:#221d34;background-color: #ffffff;}
section.about .sub_title i{ font-family: 'Noto Sans KR';font-weight:700;font-size: 5.5rem;font-style: normal;}
section.about p.page_contents{ margin-bottom: 35px;color:#999999;}
section.about p.caption{color:#305289;}
section.about .img_box{display: block;width: 74rem;height: 66rem;position: relative;}
section.about .img_box .left-box{width:62.6rem;height:60.3rem;background-color:#cad7ee;position: absolute;left: 0;top:0;padding:2.5rem;}
section.about .img_box .left-box h1{width:39.5rem;display:inline-block;font-weight: 700;font-size: 15.4rem;color:#221d34;background-color: #ffffff;padding-left: 5rem;}
section.about .img_box .right-box{display:flex;align-items:flex-end;width:47.7rem;height:47.7rem;background-color:#221d34;position: absolute;right: 0;bottom: 0;padding:3.6rem;}
section.about .img_box .right-box li{height:5rem;font-family:Noto Sans KR;font-weight:100;color:#ffffff;font-size: 2.3rem;line-height: 1.43em; letter-spacing: -0.025em;}

/* ******************************** 비지니스 페이지 ******************************** */
section.business .hidden_box .m_btn_close{display: none;}

section.business{text-align: center; color: #fff;background-color: #9eb4d8;}
section.business .page_title, section.business p.caption{color: #fff;}
section.business .page_title{ margin-bottom: 40px;}
section.business  .sub_title br{display: none;}
section.business p.page_contents{ margin: 5px 0;}


section.business .box_wrap{display: flex; justify-content: space-between; max-width: 1410px; max-height: 46rem;margin: 3vh auto 0; width: 100%;height: 41.296296vh;align-items: flex-end;}
section.business .box{ height: 100%;  width: calc((100% - 90px) / 4); position: relative;perspective: 1000px;}

section.business .show_box{border: 2px solid rgba(255,255,255,0.7); width: 100%; height: 100%; padding: 40px 30px;  position: relative;border-radius: 6.6rem 0 0 0;transition-duration: 0.7s;}
section.business .show_box h3{font-size: 4rem; line-height: 5rem; text-align: left; font-weight: 500; color: rgba(255,255,255,0.7)}
section.business .show_box .arrow_icon{position: absolute; bottom: 30px; left: 30px; width: 33px; height: 9px;background: url(../images/arrow_right.png)no-repeat; opacity: 0.7;}
section.business .hidden_box{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #ffffff; text-align: left;font-family: Noto Sans KR; opacity: 0; transform: rotateY(180deg);  overflow: hidden;border-radius: 0 6.6rem 0 0  ;transition-duration: 0.7s;backface-visibility: hidden;}
section.business .hidden_box .box_title{width:100%;font-size: 2.5rem; line-height: 3.5rem; position: relative; height: 9.5rem; max-height: 100px; display: flex; align-items: center;padding-left: 3.5rem;}
section.business .box:nth-of-type(1) .hidden_box .box_title{background-color: #bccce7;}
section.business .box:nth-of-type(2) .hidden_box .box_title{background-color: #4a68a6;}
section.business .box:nth-of-type(3) .hidden_box .box_title{background-color: #254882;}
section.business .box:nth-of-type(4) .hidden_box .box_title{background-color: #221d34;}
section.business .hidden_box .ability{font-family:"Noto Sans KR";font-size: 2rem; line-height: 1.5em;  letter-spacing: -0.05em; font-weight: 700; margin-bottom: 1rem;  margin-top: 2rem;color:#696969;padding-left:3.5rem; }
section.business .hidden_box .work{padding-left: 3.5rem; }
section.business .hidden_box .work li{height: 2.4rem;line-height: 1.6875rem;font-size: 1.6rem;font-weight: 300;color: #696969;position: relative;padding-left: 1rem;display: flex;align-items: center;}
section.business .hidden_box .work li::before{content:'';display: block;width: 0.4rem;height: 1px;background-color: #2b2b2b;position: absolute;left: 0;top:50%;transform: translateY(-50%);}

/* 카드 뒤집히는 효과 */
section.business .box:hover .show_box{
    transform: rotateY(-180deg);
    opacity: 0;
}
section.business .box:hover .hidden_box{
    opacity: 1;
    transform: rotateY(0deg);
}

/* ******************************** 포트폴리오 페이지 ******************************** */
section.portfolio{background: url(../images/portfolio_back_img.png)no-repeat center; background-size: cover; position: relative;}
section.portfolio .container{ flex-direction: row; align-items: center;}
section.portfolio .text_box{ color: #fff;  margin-right: 200px;z-index: 1;}
section.portfolio .sub_title{ margin: 3.5rem 0;}
section.portfolio p.page_contents{ margin-bottom: 35px;}
section.portfolio p.caption{color:#9eb4d8;}
section.portfolio .company_box{text-align: center;}
section.portfolio .company_box button{ width: 60px; height: 60px; border-radius: 50%; background-position: center; background-size: contain; background-repeat: no-repeat; background-color: rgba(225,225,225,0.1); outline: none; border: 4px solid #fff;}
section.portfolio .company_box button:hover{border: 4px solid #9eb4d8; background-color: rgba(158,180,216,0.1);}
section.portfolio .company_box button.up{background-image: url(../images/portfolio_arrow_up.png); background-size: auto; }
section.portfolio .company_box button.down{background-image: url(../images/portfolio_arrow_down.png); background-size: auto; }
section.portfolio .company_box button.up:hover{background-image: url(../images/portfolio_arrow_up_hover.png); background-size: auto; }
section.portfolio .company_box button.down:hover{background-image: url(../images/portfolio_arrow_down_hover.png); background-size: auto; }

section.portfolio .ci_box{     height: 60.18518518518519vh; width: 700px; max-width: 45vw;overflow: hidden;}
section.portfolio .ci_box ul{ width: 100%; height: 100%; display: flex; flex-wrap: wrap;}
section.portfolio .ci_box ul li{    width: calc((100% - 16rem)/3); height: calc(100% / 3); background-position: center; background-size: contain; background-repeat: no-repeat;transition-duration: 0.3s;}
section.portfolio .ci_box ul li:nth-child(3n-1) { margin: 0 8rem; }
section.portfolio .ci_box ul li a{display: block; width: 100%; height: 100%; }
address

    /* 회사 상세 설명 페이지 */

/* 상세설명 애니메이션 */
body.company_slide section.portfolio .company_detail{left:50%; }
body.company_slide section.portfolio .back_img{opacity: 1; display: block;}
body.company_slide section.portfolio .company_detail {left: 50%;}
section.portfolio .back_img{display:none;position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-image: url(../images/ci_01_bg.png); background-position: left; background-repeat: no-repeat; background-size: cover; opacity: 0; transition-duration: 1s;}
section.portfolio .back_img::before{content:'';display: block;position: absolute;width: 100%;height: 100%;left: 0;top:0;background-color: rgba(0,0,0,0.5); }
section.portfolio .company_detail{position: absolute;left: 100%; top: 0; width: 50%; height: 100%; background: #0d3692; color:#fff; padding:7rem 13rem; transition-duration: 1s;display: flex; flex-direction: column; justify-content: center;}
section.portfolio .company_detail .m_btn_close{display: block;  width: 5rem; height: 5rem; position: absolute; left: 4rem; top: 3.645833333333333vh; background: url(../images/btn_close.png?2)no-repeat; -webkit-background-size: contain; background-size: contain;z-index: 999;}
section.portfolio .company_detail .img_box{ height: auto; width: 100%;}
section.portfolio .company_detail .text_wrap{display: flex; width: 100%; height: auto; font-family: Noto sans Kr;}
section.portfolio .company_detail .text_wrap .company_text{width: 100%;}
section.portfolio .company_detail .company_logo{width: 34rem; height: 10rem; background-image: url(../images/ci_01_large.png); background-position: center; background-size: contain; background-repeat: no-repeat;}
section.portfolio .company_detail p { font-size: 1.6rem; line-height: 2.6rem; }
section.portfolio .company_detail p.detail_title { margin-top: 9.5rem; margin-bottom: 4.5rem; font-size: 2rem; /* font-family: Noto sans Kr; */ line-height: 1em;}
/*section.portfolio .company_detail .date { font-size: 1.8rem; line-height: 3rem;}*/

section.portfolio .company_detail .work_list ul{font-size: 1.6rem; line-height: 3rem;width: fit-content; float: left; width: 50%;}
/*section.portfolio .company_detail .work_list ul:first-of-type{  margin-right: 5rem;}*/
section.portfolio .company_detail .work_list li{list-style:inside;}

/* ******************************** 피플 페이지 ******************************** */
section.people {height: 100%;background-color: #f3f3f3;}
section.people .container{ flex-direction: row; align-items: center;}
section.people .text_box{ margin-left: 120px;}
section.people .sub_title{ margin: 3.5rem 0;}
section.people p.page_contents{ margin-bottom: 35px;}
section.people .graphic_box{background: url(../images/img-people.png);background-size:cover;width: 54.6rem;height: 48rem;display: flex;justify-content: center;align-items: center;}
section.people .graphic_box .ceo-box{display: flex;justify-content:center;align-items:center;flex-direction:column;width: 19rem;height: 19rem;background-color: #ffffff;border-radius: 100%;}
section.people .graphic_box .ceo-box .icon-ceo{background: url(../images/icon_ceo.png);width: 6rem;height: 6rem;animation: rotate 7s linear forwards infinite;    background-size: cover;}
section.people .graphic_box .ceo-box .ceo-text{font-size:5.6rem;color:#221d34;font-weight: 700; }


@keyframes rotate {
    0%{ transform: rotate(0deg); }
    100%{ transform: rotate(360deg); }
}

/* ******************************** 컨텍트 페이지 ******************************** */
section.contact{ background-image:url("../images/bg-contact.png");background-color:#fafafa;background-repeat: no-repeat;background-size: cover;background-position: center; position: relative;}
section.contact .container{ flex-direction: row; align-items: center;}
section.contact .text_box{ width: 100%;}
section.contact .text_box .text_container{display: flex;flex-direction: column;}
section.contact .text_box .list-box{}
section.contact .text_box .list-box .list-item {font-size: 2rem;color:#999999;font-weight: 400;display: flex;align-items: center;margin:2rem 0;}
section.contact .text_box .list-box .list-item a{font-size: 2rem;color:#999999;font-weight: 400;}
section.contact .text_box .list-box .list-item address{font-style: normal;}
section.contact .text_box .list-box .list-item address .kor-address{font-family: 'Noto Sans KR'}
section.contact .text_box .list-box .list-item::before{content:'';display: inline-block;background-size: cover;width: 4.5rem;height: 4.5rem;background-repeat: no-repeat;margin-right: 1rem;}
section.contact .text_box .list-box .list-item.icon-phone::before{background-image: url("../images/icon-phone@2x.png");}
section.contact .text_box .list-box .list-item.icon-fax::before{background-image: url("../images/icon-fax@2x.png");}
section.contact .text_box .list-box .list-item.icon-email::before{background-image: url("../images/icon-email@2x.png");}
section.contact .text_box .list-box .list-item.icon-map::before{background-image: url("../images/icon-map@2x.png");}
section.contact .text_box .list-box .list-item.icon-homepage::before{background-image: url("../images/icon-home@2x.png");}

section.contact .text_box .button-box{margin-top: 3rem;}
section.contact .text_box .button-box .button-item{display:inline-flex;align-items:center;font-size: 2rem;line-height:1em;color:#ffffff;font-family: 'Noto Sans KR';font-weight:500;letter-spacing: -0.04em;background-color: #305289;border-radius: 5rem;padding:1rem 2.7rem;margin-right: 2rem;}
section.contact .text_box .button-box .button-item::after{content:'';display: inline-block;background-size: cover;width: 2.6rem;height: 2.6rem;background-repeat: no-repeat;margin-left: 1rem;}
section.contact .text_box .button-box .button-item.button-download::after{background-image: url("../images/icon-download@2x.png");}
section.contact .text_box .button-box .button-item.button-contact::after{background-image: url("../images/icon-balloon@2x.png");}


/*모션 스크립트*/
#main h1{opacity: 0;position: relative;margin-left:-10%;transition-duration: 1s;transform: scale(0.5);transition-property: transform,opacity;}
#main p{opacity: 0;transition-duration: 0.7s;transform: translate(-50%,50%);}
#main.active h1{opacity: 1;margin-left:0;transform: scale(1);}
#main.active p{opacity: 1;transition-duration: 1.4s;transform: translate(0,50%);transition-delay: 0.3s;transition-property: transform,opacity;}

#about .page_title {color: #f3f3f3; transition-duration: 1s;}
#about .sub_title{opacity: 0;transform:translateX(-10%);transition-duration: 0.7s;transition-property: opacity,transform;}
#about .page_contents{opacity: 0;transition-duration: 0.7s}
#about .caption{opacity: 0;transition-duration: 0.7s}
#about .img_box .left-box,#about .img_box .right-box{opacity: 0;transition-duration: 0.4s;transition-property: opacity;}
#about .img_box .right-box li{opacity: 0;transform: translateX(-30%);transition-duration: 0.7s;transition-property: opacity,transform;}
#about.active .page_title {color: #305289; transition-duration: 1s;}
#about.active .sub_title{opacity: 1;transform:translateX(0);}
#about.active .page_contents{opacity: 1;transition-duration: 1.4s}
#about.active .caption{opacity: 1;transition-duration: 0.7s;transition-delay: 0.3s;}
#about.active .img_box .left-box,#about.active .img_box .right-box{opacity: 1;}
#about.active .img_box .right-box li{opacity: 1;transform: translateX(0%);transition-delay: 0.3s;}
#about.active .img_box .right-box li:nth-of-type(2){transition-delay: 0.6s;}
#about.active .img_box .right-box li:nth-of-type(3){transition-delay: 0.9s;}


#business .title_wrap{opacity: 0;transition-duration: 0.7s;}
#business.active .title_wrap{opacity: 1;transition-duration: 0.4s;}

#portfolio .page_title {color: #4f4849;  }
#portfolio .sub_title{display: inline-block;opacity: 0;position: relative;transform:translateX(-10%);transition-duration: 0.7s;transition-property: opacity,transform;background-color: #305289;padding: 0 1rem;}
#portfolio .page_contents{opacity: 0;transition-duration: 0.7s}
#portfolio .caption{opacity: 0;transition-duration: 0.7s;transition-property: opacity;}
#portfolio.active .page_title {color: #ffffff; transition-duration: 1s;transition-property: color;}
#portfolio.active .sub_title{opacity: 1;transform:translateX(0);}
#portfolio.active .page_contents{opacity: 1;transition-duration: 1.4s;transition-property: opacity;}
#portfolio.active .caption{opacity: 1;transition-delay: 0.3s;}

#people .page_title{opacity: 0;color: #305289;transition-duration: 1s;transition-property: opacity;}
#people .sub_title{display: inline-block;opacity: 0;font-weight: 400;position: relative;color:#221d34;background-color: #ffffff;padding: 0 1rem;transform:translateX(-10%);transition-duration: 0.7s;transition-property: opacity,transform;}
#people .page_contents{color: #999999;opacity: 0;transition-duration: 0.7s;transition-property: opacity;}
#people .caption{opacity: 0;transition-duration: 0.7s;transition-property: opacity;}
#people .graphic_box{opacity: 0;transition-duration: 0.7s;transition-property: opacity;}
#people.active .page_title {opacity: 1;}
#people.active .sub_title{opacity: 1;transform:translateX(0);}
#people.active .page_contents{opacity: 1;}
#people.active .caption{opacity: 1;transition-delay: 0.3s;}
#people.active .graphic_box{opacity: 1;}

#contact .page_title {color: #4f4849; transition-duration: 1s;}
#contact .sub_title{opacity: 0;position: relative;margin-left:-10%;transition-duration: 0.7s}
#contact .page_contents{opacity: 0;transition-duration: 0.7s}
#contact .caption{opacity: 0;transition-duration: 0.7s}
#contact.active .page_title {color: #9ac746; transition-duration: 1s;}
#contact.active .sub_title{opacity: 1;margin-left:0;transition-duration: 0.7s}
#contact.active .page_contents{opacity: 1;transition-duration: 1.4s}
#contact.active .caption{opacity: 1;transition-duration: 0.7s;transition-delay: 0.3s;}




@media screen and (max-width: 1920px) {
    html{ font-size: 0.5208333333333333vw;}
}


/* ******************************** height 1080px  ******************************** */
@media screen and (max-height: 1080px) {
    section.main .container{    transform: translateY(35vh);}
}
@media screen and (max-height: 1080px) {
    section.business .hidden_box .box_title br{display: none;}
    section.business .hidden_box .box_title{ height: 3em;}
    section.business .hidden_box .ability{ font-size: 1.8rem;margin-top: 1rem; margin-bottom: 1rem;}
    section.business .hidden_box .work li {height: 2rem;line-height: 1.6875rem;font-size: 1.4rem;}
}
@media screen and (min-height: 600px) and (max-height: 800px) {
    .container{    padding-top: 7.2vh; padding-bottom: 7.2vh}
    section .sub_title, section.about .sub_title, section.portfolio .sub_title, section.people .sub_title, section.contact .sub_title{margin: 2rem 0;}
    section p.caption, section.about p.page_contents, section.about p.caption, section.portfolio p.page_contents,
    section.people p.page_contents, section.contact p.page_contents{ margin-bottom: 2rem;}

    section.business .box_wrap{    margin: 3rem auto 0;}
    /*section.business .box{    height: 27.77777777777778vh;}*/
    section.business .hidden_box .box_title{line-height: 5.5rem;height: auto;}
    section.business .hidden_box .box_title br{display: none;}
    /*section.business .hidden_box .work li{    line-height: 2.5rem; }*/

    section.portfolio .ci_box{max-height: 85vh; /* margin-bottom: 40px; */ height: 46.185185vh; }
    /*section.portfolio .ci_box ul li{    height: calc(50vh / 3); }*/
    section.portfolio .company_box button{    margin: 2rem 0; width: 50px; height: 50px;}

}

/* ******************************** height 600px  ******************************** */
@media screen and (max-height: 600px) {

    section.portfolio .ci_box ul li { background-size: contain; }

    section.business .hidden_box{  padding: 0 2rem;;}
    section.business .hidden_box .box_title{ height: auto; line-height: 5rem;}
    section.business .hidden_box .box_title br{display: none;}
    section.business .hidden_box .ability{ margin: 1.5rem 0;}
}
/* ******************************** height 900px  ******************************** */
@media all and (max-height:850px) and (min-width:720px) and (max-width:1185px) {
    /*.container{ justify-content:  flex-start;}*/
    section.contact .text_box{align-items: flex-start;}
    /*section.main .container{    justify-content: center;}*/
}


/* ************************************************************ 태블릿 영역 ************************************************************ */
@media screen and (max-width: 1552px) {

 /*html{font-size: 9px;}*/

    /*section .page_title{ font-size: 2.5rem; color:#9ac746; }*/
    /*section .sub_title br{display: none;}*/
    /*section p br{display: none;}*/
    section.contact .text_box .text_container{ margin-right: 50px; float: none; padding-left: 25rem;}
    section.contact .text_box button{ font-size: 3rem;}
    /* ******************************** 비지니스 페이지 ******************************** */
    section.business .show_box h3{    font-size: 3.5rem;  line-height: 4.5rem;}
    /* ******************************** 포트폴리오 페이지 ******************************** */
    section.portfolio .text_box> p br{display: none;}
    section.portfolio .company_detail p.detail_title{ font-size: 2.5rem;}
    section.portfolio .company_detail p{ font-size: 2rem;  line-height: 3rem;}
    section.portfolio .company_detail .work_list ul{font-size: 2rem;}
}
@media screen and (min-width: 1023px) {
    /*section.portfolio .back_img {background-image: none !important;}*/
    section.portfolio .company_detail .img_box{ background-image: none !important;}
}
@media screen and (max-width: 1023px) {
    br.drop1024{display: block;}
    html{ font-size: 0.9765625vw;}
    .container{ padding: 3rem 8rem;}
    header .logo{margin-top: 5rem; margin-left: 5rem;width: 13.9rem;height: 3.5rem;}
    .menu-button { right: 5rem; top: 5rem;}
    footer .copyright { margin-left: 5rem; margin-bottom: 5rem; }
    .indicator { display: none;}
    footer .move_top { bottom: 5rem; right: 5rem;}

    section .page_title{ font-size: 3rem;}
    section .sub_title{font-size: 5.4rem; line-height:1.4em;background-color: transparent;}

    /*section .sub_title br{display: none;}*/
    section p.page_contents{    font-size: 2.5rem; line-height: 3.5rem;}
    /*section p br{display: none;}*/
    section .container>.text_box{ text-align: left;padding: 0;margin-left: 0;width: 100%;}
    section p.caption{ margin-bottom: 3rem; font-size: 2rem; line-height: 3.5rem;letter-spacing: -0.02em;}

    /* ******************************** 메인 페이지 ******************************** */
    section.main .container{    padding: 0 3rem;}

    section.main .text-box {width: 100%;background-color: transparent;}
    section.main h1 {min-height: 0;width: 77vw;height: 77vw;font-size: 17rem;}
    section.main p {font-size: 6.3rem;left: 5rem;}
    #main p {transform: translate(-50%,80%);}
    #main.active p {transform: translate(0,80%);}

    /* ******************************** 어바웃 페이지 ******************************** */
    section.about .container{flex-direction: column-reverse;}
    section.about .img_box{width: 100%;}


    /* ******************************** 비지니스 페이지 ******************************** */
    section.business .sub_title br{display: block;}
    section.business .sub_title span {background-color: #305289;padding: 0 1rem;}
    section.business .sub_title strong {font-weight: 600;display: block;background-color: #305289;letter-spacing: -0.04em;padding: 0 1rem;}
    section.business p.caption{color: #305289;margin-top: 3rem;}
    section.business .show_box h3{    font-size: 3.6rem;  line-height: 4rem;}
    section.business .box_wrap{flex-wrap: wrap;  margin-top: 0;  position: relative;  height: initial;max-height: initial;}
    section.business .box{ width: calc((100% - 3rem) / 2);  height: 20rem; position: initial;perspective: none;}
    section.business .box:nth-of-type(n+3){ margin-top: 3rem;}


    section.business .box.active .hidden_box{display: block;}
    section.business .hidden_box{ opacity: 1;  transform: none;  z-index: 1; display: none;}
    section.business .hidden_box .m_btn_close{display: block;  width: 4rem; height: 4rem; position: absolute; right: 2.5rem;  top: 2.5rem;
        background: url(../images/btn_close.png)no-repeat; -webkit-background-size: contain; background-size: contain; z-index: 5}

    section.business .hidden_box .box_title{   height: auto; line-height: 9rem; font-size: 4rem;}
    section.business .hidden_box .box_title br{display: none;}
    section.business .hidden_box .ability{font-size: 2.4rem; line-height: 1.3em;margin-top: 1.5rem;}
    section.business .hidden_box .ability br{display: none;}
    section.business .hidden_box .work li{ line-height: 1.2em;font-size: 2.2rem;  height: auto;}

    /* 카드 뒤집히는 효과 제거 */
    section.business .box:hover .show_box{ transform: none;  opacity: 1; }
    section.business .box:hover .hidden_box{ opacity: 1; transform: none;border-radius: 6.6rem 0 0 0; }

    /* ******************************** 포트폴리오 페이지 ******************************** */
    section.portfolio .container{flex-direction: column;align-items: flex-start;}
    section.portfolio .container>.text_box {width: 38rem;}
    section.portfolio .company_box{ width: 100%;}
    section.portfolio .ci_box{ height: 65vw; width: 100%; max-width: unset;}
    section.portfolio .ci_box ul li{ width: calc((100% - 30rem)/3);}
    section.portfolio .ci_box ul li:nth-child(3n-1){margin:0 15rem}
    section.portfolio .company_detail .m_btn_close{right: 3rem; left: auto; width: 35px;  height: 35px;  top: 2.5rem;}

    section.portfolio .company_box button{ width: 6rem; height: 6rem; }
    section.portfolio .company_box button.up, section.portfolio .company_box button.down, section.portfolio .company_box button.up:hover, section.portfolio .company_box button.down:hover{background-size: 70%;}


    /* 회사 상세 설명 페이지 */
    section.portfolio .back_img{z-index: 23;}
    section.portfolio .company_detail{padding:0;width: 100%;   z-index: 20;}
    section.portfolio .company_detail .img_box{ width: 100%;  height: 47.91666666666667vw; background: url(../images/logo01_bg.png);  background-size: cover;}
    section.portfolio .company_detail .company_logo{ width: 100%; height: 100%; background-size: auto 100px; background-position: 5rem 80%;}
    /*section.portfolio .company_detail p{font-size: 2rem; line-height: 3rem;}*/
    section.portfolio .company_detail .text_wrap{    padding: 0 5rem;     height: 80vh;}
    section.portfolio .company_detail p.detail_title { margin-top: 10rem; margin-bottom: 2rem; font-size: 2.5rem;}
    section.portfolio .company_detail .work_list{display: flex; width: 100%; justify-content: space-between;}
    /*section.portfolio .company_detail .work_list ul{ font-size: 2rem; line-height: 3rem; width: 50%;}*/
    /*section.portfolio .company_detail .work_list ul:first-of-type{  margin-right: 0;}*/

    body.company_slide section.portfolio .company_detail{left: 0; }

    /* ******************************** 피플 페이지 ******************************** */
    section.people .container{flex-direction: column-reverse;}
    section.people .graphic_box{margin-top: 4rem;}
    /* ******************************** 컨텍트 페이지 ******************************** */

    section.contact {background-image: url(../images/bg-contact-m.png);}
    section.contact .container{flex-direction: column; position: relative; justify-content: normal;}
    section.contact .text_box{  margin-right: 0; width: 100%; height: 50%; display: flex;  align-items: center; justify-content: center;}
    /*section.contact .iframe{ width: 100%; height: 50%;}*/
    section.contact .text_box .text_container{float: none; margin-right: 0; padding-left: 0;}
    section.contact .text_box button{ height: 7rem; width: 30rem;}
    section.contact p.caption br{display: block;}
    section.contact .map_box{    width: 100%;  height: 50vh; position: absolute;  bottom: 0; left: 0;}

}




    /* ************************************************************ 모바일 영역 ************************************************************ */
@media screen and (max-width: 720px) {
    html{ font-size: 1.388888888888889vw;}
    br.drop720{display: block;}
    br.dropMobile{display: none;}
    /*html{font-size: 1.388888888888889vw;}*/
    body{position: relative; }
    /* ******************************** 전체 영역 설정 ******************************** */
    .container{ padding: 0 5rem; }
    section .container>.text_box{ text-align: left;  padding: 0; }
    section .page_title{ }
    section .sub_title{ margin: 4.861111111111111vw 0;}
    section .sub_title br{display: block;}
    section p.page_contents{ margin-bottom: 4.166666666666667vw;}


    /* ******************************** header ******************************** */
    .menu-button{/*  right: 6.25vw; top:6.25vw; */ width: 32px;   height: 25px;right: 5rem;top: 5rem;}
    body.nav_active .menu-button span:nth-of-type(1){  transform: translateY(11px) rotate(-45deg);}
    body.nav_active .menu-button span:nth-of-type(3){  transform:  translateY(-11px) rotate(45deg); }
    .menu-button span:nth-of-type(2){ top: 11px;}
    nav ul{    margin-top: 8vh;}
    nav p.company_information{bottom: 15vh;}
    nav p.company_information .mo_remove{display: block; width: 0; height: 0; color: transparent;}

    .indicator {display: none;}
    footer .scroll_down{display: none;}
    footer .copyright{ font-size: 2rem;    margin-left: 5rem;margin-bottom: 5rem;}
    footer .move_top{ font-size: 13px; height: auto;bottom: 5rem;right: 5rem;}
    footer .move_top .icon{ width: 10px;  height: 5px;}

    section .sub_title br{display: block;}

    /* ******************************** 어바웃 페이지 ******************************** */
    section.about .img_box {width:62rem;height: 46.7rem;}
    section.about .img_box .left-box {width: 52.5rem;height: 34rem;}
    section.about .img_box .right-box {width: 44rem;height: 29rem;}
    section.about .text_box{ margin-right: 0;  margin-bottom: 3rem;}
    section.about .sub_title{    margin: 4.861111111111111vw 0;}
    section.about p.page_contents{ margin-bottom: 4.166666666666667vw;}
    section.about p.caption{margin-bottom: 6.25vw;}



    /* ******************************** 비지니스 페이지 ******************************** */
    section.business{ text-align: left;}
    section.business .page_title{ margin-bottom: 0;}
    section.business .sub_title{ padding:0;}
    section.business .title_wrap{ margin-bottom: 3rem;}
    section.business .box_wrap{flex-wrap: wrap;  margin-top: 0; position: relative;}
    section.business .box{ width: calc((100% - 2.777777777777778vw) / 2); position: initial;}
    section.business .box:nth-of-type(n+3){ margin-top: 2.777777777777778vw;}
    section.business .show_box{padding: 3.472222222222222vw;}
    section.business .show_box .arrow_icon{ left: 3.472222222222222vw;}

    section.business .hidden_box .box_title{ line-height: 9rem;font-size: 2.5rem;height: 7.7rem;}



    /* ******************************** 포트폴리오 페이지 ******************************** */
    section.portfolio .container{flex-direction: column;}
    section.portfolio .text_box{  margin-right: 0;}
    section.portfolio .sub_title{margin: 4.861111111111111vw 0;}
    section.portfolio p.page_contents{margin-bottom: 4.166666666666667vw;}
    section.portfolio p.caption{margin-bottom: 0;}
    section.portfolio .company_box{    width: 100%; position: relative;}
    section.portfolio .ci_box{  width: 100%; /*height: auto;*/ margin-bottom: 30px;}
    section.portfolio .ci_box ul li{background-size: contain; height: calc(100% / 3); width: calc((100% - 10rem)/3);}
    section.portfolio .ci_box ul li:nth-child(3n-1){    margin: 0 5rem;}

    section.portfolio .company_box button{border:0; background-color: transparent; margin: 2rem 0 0;}
    section.portfolio .company_box button:hover{border: 0; background-color: transparent;}
    section.portfolio .company_box button.up:hover{background-image: url(../images/portfolio_arrow_up.png);background-size: auto;}
    section.portfolio .company_box button.down:hover{background-image: url(../images/portfolio_arrow_down.png); background-size: auto;}
    section.portfolio .company_box button.up, section.portfolio .company_box button.down{position: absolute; bottom: 0; left: 50%;  width: 125px; background-size: auto; top: 90%;}
    section.portfolio .company_box button.up{ margin-left: -125px;}
    section.portfolio .company_box button.down::before{top:0; left:0; position:absolute; content:""; width:1px; height:100%;
        background: #fff;}


    section.portfolio .company_detail{    width: 100%; display: block;}
    section.portfolio .company_detail .m_btn_close{ left:auto; top: 3rem; right: 3rem; width: 30px; height: 30px;}
    /*section.portfolio .company_detail .date{    font-size: 4rem;    line-height: 10rem;}*/
    section.portfolio .company_detail .img_box{ height: 47.91666666666667vw;}
    section.portfolio .company_detail .text_wrap{ height: 70vh;}
    section.portfolio .company_detail .text_wrap .company_text{ height: auto; }
    section.portfolio .company_detail .company_logo{ background-size: auto 12rem;}
    section.portfolio .company_detail p.detail_title { margin-top: 9rem; margin-bottom: 3rem; font-size: 3rem; line-height: 5rem;}
    section.portfolio .company_detail p{ font-size: 2.5rem; line-height: 4rem;}
    section.portfolio .company_detail .work_list{display: flex; width: 100%; justify-content: space-between;}
    section.portfolio .company_detail .work_list ul{    font-size: 2.5rem; line-height: 4rem; width: 50%;}
    section.portfolio .company_detail .work_list ul:first-of-type{  margin-right: 2rem;}
    section.portfolio .back_img {/*opacity: 1;*/z-index: 23;transition-duration: 0.5s;}


    /* ******************************** 피플 페이지 ******************************** */
    section.people .text_box{  margin-right: 0;margin-bottom: 3rem;}
    section.people .page_title{ margin-bottom: 0;}
    section.people .sub_title{margin: 4.861111111111111vw 0;}
    section.people p.page_contents{margin-bottom: 4.166666666666667vw;}

    /* ******************************** 컨텍트 페이지 ******************************** */
    section.contact .container{flex-direction: column; position: relative; justify-content: normal;}
    section.contact .text_box{ height: 55%;}
    section.contact .text_box .text_container{width: 100%;}
    section.contact .page_title{ margin-bottom: 0;}
    section.contact .sub_title{margin: 4.861111111111111vw 0;}
    section.contact p.page_contents{margin-bottom: 4.166666666666667vw;}
    section.contact p.caption br{display: block;}
    section.contact p.caption span{    height: 3rem; width: auto;}
    section.contact p.caption span img{ height: 100%;}
    section.contact .map_box{    width: 100%;     height: 45%; position: absolute;  bottom: 0; left: 0;}
    section.contact .btn_submit{width: 30rem;    height: 7rem;}

    .contact_popup{ width: 90%; padding: 5rem;}
    .contact_popup .btn_close{width: 25px; height: 25px; right: 2rem; top: 3rem;}
    .contact_popup .contact_Information li{ width: 100%;}
    .contact_popup .contact_Information li:nth-child(1), .contact_popup .contact_Information li:nth-child(2){ margin-top: 3rem;}
    .contact_popup .contact_Information li label, .contact_popup .text_area_box label{ width: 8rem;}
    .contact_popup .radio_box{ padding-left: 8.5rem;}
    .contact_popup .radio_box label{ padding-left: 5rem;}
    .contact_popup .radio_box li{ margin-right: 1rem;}
    .contact_popup .error {padding-left: 8.5rem;}
}
@media screen and (max-width: 370px) {
html{font-size: 1vw;}
    /* 공통영역 */

    /* 모바일 br pc에서 활성화 처리 */
    br.drop420{display: block;}

    section.business .show_box .arrow_icon {bottom: 2rem;}

    section.portfolio .company_detail .text_wrap{padding: 0 2.5rem;}
    section.portfolio .company_detail p.detail_title{margin-top: 5rem; margin-bottom: 2rem;}
    section.portfolio .company_detail p br.br420{display: none;}
    section.portfolio .ci_box ul li{    height: calc(100% / 3);}

}
@media screen and (max-height: 700px) {
    section.business .title_wrap, section.about .text_box, section.people .text_box{ margin-bottom: 1rem;}
    section .sub_title, section.about .sub_title, section.portfolio .sub_title, section.people .sub_title, section.contact .sub_title{ margin: 1rem 0;}
    section p.page_contents, section.about p.page_contents, section.portfolio p.page_contents, section.business p.page_contents, section.people p.page_contents, section.contact p.page_contents{ margin-bottom: 1rem; }
    section p.caption, section.about p.caption, section.portfolio p.caption{ margin-bottom: 1.5rem;}
}