@charset "utf-8";
@import url('/css/reset.css'); /* 폰트와 기초값 */


/* 섹션 공통 */
:root {--main-color: #ff6c31;}
:root {--sub-color: #30B2FF;}
:root {--over-color: #D45928;}

/*#fullpage{width: 100%; height: 100%;}*/
html, body{overflow-x: hidden!important;}
.inner{width: 1720px; margin: auto;}
@media screen and (max-width: 1760px){
    .inner{width: calc(100% - 40px);}
}

/* 상단 */
.head{position: fixed; top: 0; left: 0; width: 100%; height: 140px; z-index: 999; transition: all 0.5s;}
.head .inner{position: relative; height: 100%;}
.head .logo{position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 96;}
.head .logo img{max-width: 100%;}
.head .logo img.on{display: none;}

.head .menu .gnb{position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; font-size: 0; text-align: center;}
.head .menu .gnb>li{display: inline-block; padding: 0 50px;}
.head .menu .gnb>li>a{display: block; font-size: 20px; color: #fff; font-weight: 500; position: relative; 100px; line-height: 100px;}
.head .menu .gnb>li>a::before{content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background: #fff; transition: all 0.3s;}
.head .menu .sub{display: none;}

.head .menu .lag_btn{position: absolute; top: 50%; right: 0; transform: translateY(-50%); cursor: pointer; z-index: 9; color: #fff; font-size: 16px; font-weight: 600; transition: all 0.3s;}
.head .menu .lag_btn .now{display: flex; align-items: center; justify-content: center; padding: 12px 14px;}
.head .menu .lag_btn .now .icon{width: 20px; margin-right: 10px;}
.head .menu .lag_btn .now .arrow{margin-left: 15px; width: 15px; transition: all 0.5s;}
.head .menu .lag_btn .list{color: #fff; text-align: center; font-size: 16px; font-weight: 600; padding: 12px 14px; position: absolute; left: 0; background: var(--main-color); width: 100%; opacity: 0; visibility: hidden; border-top: 1px solid rgba(255,255,255,0.2); transition: all 0.3s;}

/* 상단 햄버거버튼 */
.bt_menu{position: absolute; text-indent: -9999px; top: 50%; transform: translateY(-50%); right: 0; width: 20px; height: 16px; z-index: 99; display: none;}
.bt_menu span{position: absolute; left: 50%; transform: translateX(-50%); width: 100%; height: 2px; background: #fff; display: block; transition: all 0.3s;}
.bt_menu span:nth-child(1){top: 0px;}
.bt_menu span:nth-child(2){top: 50%; transform: translate(-50%, -50%);}
.bt_menu span:nth-child(3){bottom: 0px;}

.bt_menu.on span{background: #151515;}
.bt_menu.on span:nth-child(1){transform : translateX(-50%) translateY(7px) rotate(-315deg)}
.bt_menu.on span:nth-child(2){opacity : 0;}
.bt_menu.on span:nth-child(3){transform : translateX(-50%) translateY(-7px) rotate(315deg);}

/* 상단 모바일 */
.head .menu.on{left: 0; right: 0; z-index: 98;}
.head .menu.on li.on>a{color: var(--main-color);}
.head .menu.on li.on>a>img{transform: translateY(-50%) rotate(180deg);}

/* 상단 스크롤 */
.head.scr{background: #fff; border-bottom: 1px solid #eee; height: 100px;}
.head.scr .inner{transition: all 0.4s;}
.head.scr .logo{width: 90px;}
.head.scr .logo img.basic{display: none;}
.head.scr .logo img.on{display: block;}
.head.scr .menu .gnb>li>a{color: #121212;}
.head.scr .menu .gnb>li>a::before{background: var(--main-color);}
.head.scr .menu .lag_btn{background: var(--main-color);}
.head.scr .bt_menu span{background: #151515;}

/* hover */
@media screen and (min-width: 1030px) and (max-width: 3000px){
    .head.scr .menu .gnb>li:hover>a::before{width: 100%;}
    .head .menu .gnb>li>a:hover{color: var(--main-color);}
    
    .head .menu .lag_btn:hover{background: var(--main-color);}
    .head .menu .lag_btn:hover .now .arrow{transform: rotate(180deg);}
    .head .menu .lag_btn:hover .list{opacity: 1; visibility: visible;}
    .head .menu .lag_btn .list:hover{background: var(--over-color);}
}

/* 반응형 */
@media screen and (max-width: 1280px){
    .head{height: 120px;}
    .head .logo{width: 90px;}
    .head.scr{height: 80px;}
    .head.scr .logo{width: 70px;}
    .head .menu .gnb>li{padding: 0 35px;}
    .head .menu .gnb>li>a{font-size: 18px;}
}
@media screen and (max-width: 1030px){
    .head{height: 60px;}
    .head .logo{width: 60px;}
    .head.scr{height: 60px;}
    .head.scr .logo{width: 60px;}
    .bt_menu{display: block;}
    .head .menu{position: fixed; top: 0; bottom: 0; left: 100%; right: -100%; background: #fff; transition: all 0.3s; z-index: 10; padding: 150px 20px 0; overflow: hidden; overflow-y: auto;}
    .head .menu .lag_btn{top: 20px; left: 20px; transform: inherit; display: flex; right: auto;}
    .head .menu .lag_btn .now{display: block; background: var(--main-color); width: 50%; text-align: center; line-height: 35px; padding: 0 20px; font-size: 14px;}
    .head .menu .lag_btn .now img{display: none;}
    .head .menu .lag_btn .list{position: relative; left: auto; background: #f9f9f9; color: var(--main-color); width: 50%; text-align: center; opacity: 1; visibility: visible; line-height: 35px; padding: 0 20px; font-size: 14px; border-top: none;}
    .head .menu .gnb{position: relative; top: auto; left: auto; right: auto; padding: 0; text-align: left; transform: inherit;}
    .head .menu .gnb>li{position: relative; display: block; padding: 0;}
    .head .menu .gnb>li+li{margin-top: 40px;}
    .head .menu .gnb>li:nth-child(4)>a{pointer-events: none;}
    .head .menu .gnb>li>a{line-height: inherit; font-weight: 600; color: #151515; font-size: 22px; display: inline-block;}
    .head .menu .sub{display: block; margin-top: 20px; margin-left: 15px;}
    .head .menu .sub>li+li{margin-top: 15px;}
    .head .menu .sub>li>a{font-size: 18px; color: #777;}
}

/* 환율 */
.quick{position: fixed; right: 0; bottom: 0; z-index: 95;}
.quick .q_btn{background: var(--main-color); padding: 0 15px; text-align: center; color: #fff; font-size: 14px; font-weight: 500; transform-origin: top right; position: absolute; width: 298px; top: 100%; transform: rotate(90deg); z-index: 1; cursor: pointer; line-height: 50px; right: 0; transition: all 0.5s 0.3s;}
.quick .q_btn img{width: 20px; margin-left: 10px;}
.quick .q_box{background: #fff; right: -300px; width: 300px; padding: 30px 20px 20px; position: absolute; bottom: 0; z-index: 2; transition: all 0.5s; box-shadow: 0 0 20px rgba(0,0,0,0.1);}
.quick .q_box .top{display: flex; align-items: center; justify-content: space-between;}
.quick .q_box .top .close{width: 12px; cursor: pointer;}
.quick .q_box .top h1{font-size: 20px; font-weight: 500;}
.quick .q_box ul{margin-top: 25px;}
.quick .q_box ul li{display: flex; align-items: center; justify-content: space-between; padding: 10px 15px;}
.quick .q_box ul li:nth-child(odd){background: #f5f5f5;}
.quick .q_box ul li img{width: 30px; margin-right: 5px;}
.quick .q_box ul li span{font-size: 14px; font-weight: 500; color: #666;}
.quick .q_box ul li p{color: var(--sub-color); font-size: 16px; font-weight: 500;}

.quick .q_btn.on{right: -50px;}
.quick .q_box.move{right: 0;}

/* 반응형 */
@media screen and (max-width: 1280px){
    .quick .q_btn{font-size: 13px; line-height: 40px; width: 250px;}
    .quick .q_btn img{width: 15px; margin-left: 5px;}
    .quick .q_box{width: 250px; padding: 20px 15px 15px;}
    .quick .q_box .top h1{font-size: 18px;}
    .quick .q_box ul{margin-top: 15px;}
    .quick .q_box ul li img{width: 25px;}
    .quick .q_box ul li p{font-size: 14px;}
}
@media screen and (max-width: 480px){
    .quick .q_btn{line-height: 35px; width: 186px;}
    .quick .q_btn img{width: 12px;}
    .quick .q_box{width: 50vw;}
    .quick .q_box.move{right: -50vw;}
    .quick .q_box .top h1{font-size: 14px; font-size: 600;}
    .quick .q_box ul li{padding: 5px 10px;}
    .quick .q_box ul li img{width: 20px;}
    .quick .q_box ul li span{font-size: 12px;}
    .quick .q_box ul li p{font-size: 12px;}
}

/* 메인 슬라이드 이미지 */
.main_slide{width: 100%; height: 100%;}
.main_slide .img1{width: 100%; height: 100%; background: url(/img/main/main1.jpg) center no-repeat; background-size: cover;}
.main_slide .img2{width: 100%; height: 100%; background: url(/img/main/main2.jpg) center no-repeat; background-size: cover;}
.main_slide .img3{width: 100%; height: 100%; background: url(/img/main/main3.jpg) center no-repeat; background-size: cover;}

.main_slide .txt{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9; color: #fff;}
.main_slide .txt h1{font-size: 70px; line-height: 1.15; font-weight: 600; opacity: 0; transform: translateY(50%);}
.main_slide .txt p{font-size: 20px; font-weight: 300; line-height: 1.5; margin-top: 50px; opacity: 0; transform: translateY(60%);}

.main_slide .swiper-slide-active h1{opacity: 1; transform: translateY(0); transition: 1s 0.3s;}
.main_slide .swiper-slide-active p{opacity: 1; transform: translateY(0); transition: 1s 0.6s;}

.sec1 .scr_down{position: absolute; bottom: 0; left: 0; right: 0; margin: auto; z-index: 9;}
.sec1 .scr_down p{text-align: center; color: #fff; font-size: 14px; font-weight: 400; margin-bottom: 10px;}
.sec1 .scr_down .line{width: 1px; height: 60px; background: rgba(255,255,255,0.2); margin: auto; position: relative;}
.sec1 .scr_down .line span{position: absolute; top: 0; left: 0; width: 1px; background: #fff; animation: scr_move alternate infinite 0.9s;}

@keyframes scr_move{
    0%{height: 0%;}
    100%{height: 100%;}
}

/* 반응형 */
@media screen and (max-width: 1380px){
    .main_slide .txt h1{font-size: 60px;}
    .main_slide .txt p{font-size: 18px;}
}
@media screen and (max-width: 1280px){
    .main_slide .txt h1{font-size: 50px;}
    .main_slide .txt p{margin-top: 30px;}
}
@media screen and (max-width: 780px){
    .main_slide .txt h1{font-size: 40px;}
    .main_slide .txt p{font-size: 16px ;margin-top: 20px;}
}
@media screen and (max-width: 480px){
    .main_slide .txt h1{font-size: 32px;}
}


/* 비지니스 */
.sec2{overflow: hidden;}
.sec2 .pro_slide{width: 100%; height: 100%;}
.main_pro{display: flex; width: 100%; height: 100%;}
.main_pro .img{width: 50%; height: 100%;}
.main_pro.pro1 .img{background: url(/img/main/pro1.jpg) center no-repeat; background-size: cover;}
.main_pro.pro2 .img{background: url(/img/main/pro2.jpg) center no-repeat; background-size: cover;}
.main_pro.pro3 .img{background: url(/img/main/pro3.jpg) center no-repeat; background-size: cover;}
.main_pro .txt{width: 50%; height: 100%; background: #1a1a1a; position: relative; overflow: hidden;}
.main_pro .txt .symbol{position: absolute; bottom: 0; right: 0; width: 470px; opacity: 0.1;}
.main_pro .txt .txt_box{position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 800px; z-index: 2; color: #fff; padding-left: 150px;}
.main_pro .txt .txt_box h2{font-size: 20px; font-weight: 500; opacity: 0.6;}
.main_pro .txt .txt_box h1{font-size: 60px; font-weight: 800; margin-top: 10px;}
.main_pro .txt .txt_box p{font-size: 20px; font-weight: 300; margin-top: 30px; line-height: 1.5;}
.main_pro .txt .txt_box a{font-size: 18px; font-weight: 500; margin-top: 120px; color: #fff; display: inline-block;}
.main_pro .txt .txt_box a span{position: relative;}
.main_pro .txt .txt_box a span::before{content: ''; width: 0; height: 1px; background: #fff; position: absolute; bottom: -5px; left: 0; transition: all 0.5s;}
.main_pro .txt .txt_box a img{width: 20px; margin-left: 10px; transition: all 0.3s;}

.pro_slide .pro_pag{display: none;}
.pro_slide .pro_arrow{display: none;}

/* hover */
@media screen and (min-width: 1030px) and (max-width: 3000px){
    .main_pro .txt .txt_box a:hover img{transform: rotate(-45deg);}
    .main_pro .txt .txt_box a:hover span::before{width: 100%;}
}

/* 반응형 */
@media screen and (max-width: 1640px){
    .main_pro .txt .txt_box{width: calc(100% - 20px); padding-left: 6.10vw;}
    .main_pro .txt .symbol{width: 28.66vw;}
}
@media screen and (max-width: 1280px){
    .main_pro .txt .txt_box h2{font-size: 18px;}
    .main_pro .txt .txt_box h1{font-size: 50px;}
    .main_pro .txt .txt_box p{font-size: 18px; margin-top: 20px;}
    .main_pro .txt .txt_box a{font-size: 16px; margin-top: 70px;}
}
@media screen and (max-width: 1030px){
    .sec2{background: #1a1a1a; padding: 70px 0; height: auto!important;}
    .sec2 .fp-tableCell{height: auto!important;}
    .sec2 .pro_slide{width: 100%; height: auto!important;}
    .main_pro{flex-direction: column-reverse; width: calc(100% - 40px); margin: auto;}
    .main_pro .img{width: 100%; margin: auto; height: auto; padding-top: 60%;}
    .main_pro .txt{width: 100%; height: auto; overflow: inherit;}
    .main_pro .txt .symbol{display: none;}
    .main_pro .txt .txt_box{position: relative; top: auto; left: auto; transform: inherit; width: 100%; padding-left: 0; margin-bottom: 40px;}
    .main_pro .txt .txt_box a{margin-top: 20px;}
    .main_pro .txt .txt_box a img{transform: rotate(-45deg); width: 16px; margin-left: 5px;}
    .main_pro .txt .txt_box h2{font-size: 16px; color: var(--main-color); opacity: 1;}
    .main_pro .txt .txt_box h1{font-size: 40px;}
    .main_pro .txt .txt_box p{font-size: 16px;}
    .main_pro .txt .txt_box a{font-size: 16px;}
    
    .pro_slide .pro_pag{display: block; position: relative; top: auto!important; left: auto!important; bottom: auto!important; margin-top: 20px;}
    .pro_slide .swiper-pagination-bullet{width: 10px;height: 10px; background: rgba(255,255,255,0.4); opacity: 1; border-radius: 50px;}
    .pro_slide .swiper-pagination-bullet-active{width: 30px; background: #fff;}
    
    .pro_slide .pro_arrow{display: block; position: absolute; top: 63.5%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 60px); z-index: 9;}
    .pro_slide .pro_arrow *{width: 35px;height: 35px; border-radius: 50%; background: rgba(0,0,0,0.1); border: 1px solid #fff;}
    .pro_slide .pro_arrow *::after{font-size: 12px; color: #fff;}
    .pro_slide .pro_arrow .pro_prev{left: 0;}
    .pro_slide .pro_arrow .pro_next{right: 0;}
}

@media screen and (max-width: 780px){
    .main_pro .txt .txt_box h1{font-size: 30px;}
}
@media screen and (max-width: 480px){
    .sec2{padding: 40px 0;}
    .main_pro .txt .txt_box{margin-bottom: 30px;}
    .main_pro .txt .txt_box h1{font-size: 25px;}
    .main_pro .txt .txt_box p{margin-top: 10px;}
    .main_pro .txt .txt_box p br{display: none;}
    .main_pro .txt .txt_box a{font-size: 14px; opacity: 0.4;}
}

/* 하단 */
.foot{padding: 80px 0 60px; background: #fff; border-top: 1px solid #eee;}
.foot .inner{position: relative;}
.foot .ft_logo{position: absolute; top: 0; left: 0;}
.foot ul, .foot .sns_link, .foot p{padding-left: 212px;}
.foot ul li{font-size: 16px; display: flex;}
.foot ul li+li{margin-top: 15px;}
.foot ul li strong{font-weight: 600; width: 60px;}
.foot ul li span{color: #666; width: calc(100% - 60px);}
.foot .sns_link{margin-top: 30px;}
.foot .sns_link a{display: inline-block; vertical-align: top; margin-right: 20px; width: 30px;}
.foot .sns_link a img{max-width: 100%;}
.foot .sns_link .basic{opacity: 0.4;}
.foot .sns_link .on{display: none;}
.foot p{font-size: 16px; font-weight: 500; margin-top: 30px;}

/* hover */
@media screen and (min-width: 1030px) and (max-width: 3000px){
    .foot .sns_link a:hover .basic{display: none;}
    .foot .sns_link a:hover .on{display: inline-block;}
}

/* 반응형 */
@media screen and (max-width: 1280px){
    .foot{padding: 60px 0;}
    .foot .ft_logo{width: 100px;}
    .foot ul, .foot .sns_link, .foot p{padding-left: 160px;}
}
@media screen and (max-width: 1030px){
    .foot{padding: 40px 0;}
    .foot .ft_logo{width: 80px;}
    .foot ul, .foot .sns_link, .foot p{padding-left: 130px;}
    .foot ul li, .foot p{font-size: 14px;}
    .foot ul li+li{margin-top: 10px;}
    .foot p{margin-top: 20px;}
    .foot .sns_link a{width: 26px;}
}
@media screen and (max-width: 780px){
    .foot .ft_logo{position: relative; top: auto; left: auto;}
    .foot ul, .foot .sns_link, .foot p{padding-left: 0;}
    .foot ul{margin-top: 20px;}
}