@import url(https://use.fontawesome.com/releases/v5.15.2/css/all.css);
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap');
@charset "utf-8";

/* Reset CSS  */
html { height: 100%; overflow-y:scroll; scroll-behavior: smooth;}
body { font-size: 13px; color:#333; overflow-x: hidden;  scroll-behavior: smooth;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, th, td, p { margin: 0px; padding:0px;  list-style:none;  font-family:"pretendard", sans-serif; font-weight: 300;}
fieldset{ border: 0px; }
a{font-style:normal; text-decoration:none; color:#000;}
hr, legend {height: 0; left: -5000px; line-height: 0; overflow-x: hidden; overflow-y: hidden; position: absolute; visibility: hidden;width: 0;}
caption {font-size: 0; height: 0; line-height: 0; visibility: hidden; width: 0;}
* {-webkit-text-size-adjust:none;}
* { margin:0; padding:0; border:0; outline:0;  }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
img, video { max-width:100%; border:0; height:auto; vertical-align:top; }
table { border-collapse:collapse; border-spacing:0; border: 0px solid #E5E5E5; }
input, select { vertical-align:middle; }
label { cursor:pointer; }
.blind,legend,hr,caption { display:block; overflow:hidden; position:absolute; top:0; left:-1000em; }
i,em,address { font-style:normal; font-weight:normal; }
td,th {vertical-align: middle;line-height: 1.6;}
td strong {font-weight: 100;	font-size: 5px;vertical-align: bottom;}
a:hover{text-decoration:none;}
ul:after{content:""; display:block; clear:both;}

/*bbs*/
#container_title{display:none;}
#bo_list_total{display:none;}
#bo_v_table{display:none;}
#bo_vc_w{border-bottom:0;}
#bo_vc{background:none;}

/************* css ******************/
body::-webkit-scrollbar {width: 10px;}
body::-webkit-scrollbar-thumb {background:#666; ;border-radius: 10px;}
body::-webkit-scrollbar-track {background: #f5f5f5;}


.container { max-width: 1400px; width:100%; margin: 0 auto; position: relative; box-sizing: border-box; padding:0 30px;}
.container:after {content: ""; display: block; clear: both;}
.wide{position: relative;}
.wide::before , .wide::after{content: ""; width: 200%; height: 100%; position: absolute; top:0; left:-50%; z-index: -1;}
p{word-break: keep-all;}


/*header*/
#header{position: absolute; top:0; left:0; width: 100%; background: rgba(0,0,0,0.3); display: flex; justify-content: flex-end; align-items: center; z-index: 99;}
#h_logo{position: absolute; top:20px; left:40px;}
#h_gnb{margin-right:35px; margin-top:15px;}
#h_gnb > li{float: left; position: relative;}
#h_gnb > li::before{content: ""; width: 0; height: 2px; background:#dc0008; display: block; position: absolute; left:50%; bottom:10px; transform: translateX(-50%); transition: .5s;}
#h_gnb > li:hover::before{width:70px;}
#h_gnb > li > a{font-size: 20px; font-weight: 500; color:#fff; display: block; padding: 0 23px 20px;}
#h_gnb > li:hover .lnb{display: block;}
#h_gnb .lnb{display: none; position: absolute; top:100%; left:50%; text-align: left; width:150%; transition: .5s; transform: translateX(-50%);background: rgba(0,0,0,0.6); padding:15px 0;}
#h_gnb .lnb li{}
#h_gnb .lnb li a{color:#fff; font-size:18px; display: block; text-align: center; padding-right:20px; padding:8px 10px;}
#h_gnb .lnb li a:hover{color:#ff373e;}

#header .bar{background: #dc0008; padding:50px 40px 50px; display: flex; max-width: 260px;}
#h_lang li{color:#fff; font-size:20px; float: left;}
#h_lang li:nth-child(2){margin-left:10px;}
#h_lang li:nth-child(2):after{content:"/"; padding: 5px;}
#h_lang li a{color:#fff; font-weight: 500;}
#h_lang li a:hover{color:#000;}
#nav_btn{margin-left:20px; margin-top:3px; cursor: pointer;}
#nav_btn span{display: block; width:26px; height: 2px; background: #fff; margin-bottom:6px;}

#sitemap{position: fixed; top:0; right:-100%; width: 100%; max-width: 600px; height: 100vh; background: rgba(0,0,0,0.8); z-index: 999; padding:50px;}
#sitemap .close{font-size:40px; color:#fff; cursor: pointer; position: absolute; right:50px; top:50px;}
#sitemap .lang{margin-bottom:20px; border:1px solid #fff; padding: 10px 20px; border-radius: 30px; display: inline-block;}
#sitemap .lang li{display: inline-block;}
#sitemap .lang li:nth-child(1):after{content: " / "; color: #ddd; font-size:18px;}
#sitemap .lang li a{color:#fff; font-size: 18px;}
#sitemap .gnb{height: 80vh; overflow-y: auto;}
#sitemap .gnb > li{margin-bottom:20px;}
#sitemap .gnb > li > a{color:#fff; font-size: 25px; font-weight: 400; padding-bottom: 5px; margin-bottom:10px; display: block; border-bottom:1px solid #444;}
#sitemap .gnb > li:hover > a{color:#dc0008;}
#sitemap .lnb li a{color:#999; font-size: 18px; display: block; padding:5px 10px;}
#sitemap .lnb li:hover a{color:#fff;}
#sitemap .lnb li a::before{content:"- "; }

/*main*/
#m_slider{position: relative;}
#m_slider .w_bg{position: absolute; bottom:0; right:0; width: 93vw; min-width: 1400px; height: 90px; background: #fff; z-index: 98;}
#m_slider .scroll{text-align: right;position: absolute;bottom: 170px;right: -30px;color: #fff;font-size: 14px;border-bottom: 1px solid #8f9295;z-index: 98;width: 185px;padding-bottom: 6px;letter-spacing: 3px;transform: rotate(-90deg);}
#m_slider .wrap{position: absolute; width: 100%; height: 100%;}
#m_slider .wrap .container{height: 100%;}
#m_slider .swiper-button-next,#m_slider .swiper-button-prev{width: 70px; height: 70px; top:auto; bottom:280px;}
#m_slider .swiper-button-next{background: url(../img/swiper-button-next.png); left: 110px;}
#m_slider .swiper-button-prev{background: url(../img/swiper-button-prev.png); left:30px;}
#m_slider .swiper-pagination{right: 30px;  bottom: 135px; width: 110px; text-align: right; font-size: 25px; color: #fff;}
#m_slider .swiper-pagination-bullet{background: none !important; display: none; width: 100%; font-weight: 400;}
#m_slider .swiper-pagination-bullet:after{content:"/ 03"; font-size:16px; margin-left:5px; font-weight: 200;}
#m_slider .swiper-pagination-bullet-active{position: relative;display: block;}
#m_slider .swiper-wrapper{width:100%;}
#m_slider .swiper-wrapper .swiper-slide{height:915px; float:left; display: flex; align-items: center; color:#fff;}
#m_slider .swiper-wrapper .swiper-slide h3{font-size:35px; letter-spacing: -1px; font-weight: 500; margin-bottom:20px;}
#m_slider .swiper-wrapper .swiper-slide h2{font-family: "Nanum Myeongjo";font-size:80px; letter-spacing: -1px; font-weight: 600;}
#m_slider .swiper-wrapper .slide01{background: url(../img/m_slider01.png) no-repeat center center;}
#m_slider .swiper-wrapper .slide02{background: url(../img/m_slider02.png) no-repeat center center;}
#m_slider .swiper-wrapper .slide03{background: url(../img/m_slider03.png) no-repeat center center;}
#m_slider .swiper-wrapper .text{opacity: 0;}
#m_slider .swiper-slide-active .text{opacity: 1; transition: all 3.0s;}

#m_about{padding:30px 30px 110px; z-index: 99;}
#m_about .s_tit{font-family: "Nanum Myeongjo"; font-size:40px; font-weight: 600; position: relative;}
#m_about .s_tit:before{content:url(../img/m_about_img.png); position: absolute; top:-50px; left:-58px; z-index: 600;}
#m_about .tit{font-size:55px; font-weight: 600; letter-spacing: -2px; margin:10px 0 40px;}
#m_about .tit span{font-weight: 400;}
#m_about .txt{font-size:20px; line-height: 33px;}

#m_pro{background: url(../img/m_pro_bg.png) no-repeat center top; padding:140px 0 195px;}
#m_pro > .tit{text-align: center; color:#fff; margin-bottom:85px;}
#m_pro .tit h2{font-size:55px; font-weight: 600; margin-bottom: 20px;}
#m_pro .tit p{font-size:22px; font-weight: 400;}
#m_pro .container{background: #fff; padding-top:40px; border-radius: 10px;}
#m_pro .list li{float:left; width: calc(100% / 3); padding: 0 10px;}
#m_pro .list li:hover .box{margin-top:-80px;}
#m_pro .list li .box{background: #fff; margin-top:-62px; width: 95%; position: relative; padding:42px 20px 0; transition: .5s;}
#m_pro .list li .box .more{position: absolute; top:20px; right:20px; font-size: 30px; font-weight: 600; color:#dc0008;}
#m_pro .list li .box .tit{font-size: 30px; font-weight: 600; margin-bottom:20px;}
#m_pro .list li .box p{font-size: 18px; line-height: 24px;}

#m_location{background: linear-gradient(#fff 50%, #f0f0f2 50%); padding-bottom: 120px;}
#m_location .container{display: flex; align-items: flex-end; flex-wrap: wrap;}
#m_location .img{width: 50%;}
#m_location .content{background: #fff; padding:90px 50px 70px; font-size: 20px;box-shadow: 5px 1px 10px #ebebeb; width: 50%; height: 80%;}
#m_location .content .tit{font-size:40px; font-weight: 700; margin-bottom:30px; letter-spacing: -1px;}
#m_location .content .tit .view{background: #e33339; width: 57px; height: 57px; border-radius: 50%; display: inline-block; color:#fff; font-weight: 200; font-size:25px; text-align: center; line-height: 57px; float: right; transition: .3s;}
#m_location .content .tit .view:hover{opacity:0.8;}
#m_location .content .phone{line-height: 30px; color:#747474; margin-top:15px;}


/*sub*/
#s_top{color:#fff; padding:355px 0 105px;}
#s_top.bg01{background: url(../img/s_top_bg01.png) no-repeat center center / cover;}
#s_top.bg02,
#s_top.bg03,
#s_top.bg04{background: url(../img/s_top_bg02.png) no-repeat center center / cover;}
#s_top.bg05{background: url(../img/s_top_bg01.png) no-repeat center center / cover;}
#s_top .text{font-size:18px; font-weight: 500;}
#s_top .tit{font-size:80px; font-family: "Nanum Myeongjo"; font-weight: 800; margin-bottom:45px;}
#snb li{float: left; margin-right:17px;}
#snb li a{font-size: 18px; display: block; padding: 15px 60px; border-radius: 50px; border:1px solid #fff; color:#fff; font-weight: 500; }
#snb li a.active, #snb li a:hover{background: #fff; color:#000;}
#sub{padding: 130px 30px 200px;}
.p_tit{font-size:50px; letter-spacing: -1px; text-align: center; position: relative; font-weight: 500; margin-bottom:110px;}
.p_tit::before{content:""; display: block; width: 70px; height: 3px; background: #dc0008; position: absolute; bottom:-20px; left:50%; transform: translateX(-50%); z-index: 9;}

/*인사말*/
#ceo{padding-top: 175px;}
#ceo::before{background: url(../img/ceo_bg.png) no-repeat top right;}
#ceo .content{background: #fff; padding: 70px 40px 0; max-width: 80%;}
#ceo .content h2{font-size:30px; line-height: 40px; font-weight: 500; margin-bottom:42px; word-break: keep-all;}
#ceo .content h2 .red{color:#dc0008;}
#ceo .content p{font-size:18px; line-height: 30px;}

/*조직도*/
#sub.sub01_02{padding-bottom: 0;}
.sub01_02 .p_tit{display: none;}
#team.wide{padding-bottom:150px;}
#team.wide::before{background: linear-gradient(#fff 60%, #f9f9f9 40%);}
#team .top .line{ width: 70px; height: 3px; background: #dc0008; display: block;}
#team .top h2{font-size:60px; letter-spacing: -1px; font-weight: 500; margin:10px 0 20px;}
#team .top p{font-size:20px; }
#team .img{text-align: center; margin-top:80px;}



/*오시는길*/
#map .iframe{width: 200%; margin-left:-50%; text-align: center;}
#map .iframe iframe{width: 100vw !important; height: 500px;}
#map .content{display: flex; background: #fff; margin-top:-100px; position: relative; z-index: 9; padding:0  30px;}
#map .content li{width: 25%; text-align: center; padding: 50px 10px;}
#map .content li i{font-size: 40px;}
#map .content li h2{font-size: 22px; margin:25px 0 10px;}
#map .content li p{font-size: 18px; line-height: 24px;}


/*제품소개*/
#pro .top{font-size:20px; line-height: 30px; padding: 35px 20px; text-align: center; border:1px dashed #c7c7c7; margin-bottom:45px;}
#pro .tit{font-size: 20px; font-weight: 600; letter-spacing: -1px; padding-bottom: 10px; border-bottom:2px solid #000;}
#pro .wrap{display: flex;}
#pro .wrap .table_wrap{width: 100%;}
#pro .wrap .img{width: 45%;}
#pro .wrap .content{width: 55%; padding-left:50px;}
#pro .wrap .content .txt{font-size: 20px; line-height:30px; margin-top:15px;}
#pro .wrap .content .grade{margin-bottom:50px;}
#pro .img_box{text-align: center; margin-bottom:50px;}
#pro table{width: 100%;}
#pro table tr{border-bottom:1px solid #ddd;}
#pro table tr th{background: #f5f5f5; }
#pro table tr th,#pro table tr td{font-size:18px; padding:10px 25px; text-align: center;}

#pro.pro01 table tr th{width: 30%; }
#pro.pro01 table tr th, #pro.pro01 table tr td{text-align: left;}

#pro.pro01_02 .p_tit{margin:100px auto 50px;}
#pro.pro01_02 table{border-top:2px solid #000;}

#pro.pro01_03 .txt{font-size: 16px; line-height:30px; margin-top:15px;}

#pro.pro02 table{border-top:2px solid #000;}
#pro.pro02 table tr th span{font-size:15px;}

#pro.pro02_02 .table01{margin-bottom:80px;}

#pro.pro03 table{border-top:2px solid #000;}
#pro.pro03_02 .table02{border-top:2px solid #000;}
#pro.pro03_02 table{margin-bottom: 50px;}
#pro.pro03_03 table{border-top:2px solid #000;}

/*footer*/
#footer{background: #202020; padding: 50px 0; color:#747474; font-size: 15px;}
#footer .f_logo{position: absolute; top:0; right:30px;}
#footer address{line-height: 24px;}
#footer .copy{text-align: right; margin-top:-20px;}

/* 문의하기 폼메일 */
.purchase h4 {text-align: center;}
.purchase form {margin: 50px 50px 150px; transition: all .3s;}
.purchase .fields .lbl {font-size: 19px; padding: 15px 30px; width: 25%; transition: all .3s;}
.purchase .fields .lbl span{color: #dc0008;}
.purchase .fields .desc {width: 75%;padding: 15px; transition: all .3s;}
.purchase .fields .dxee-input.full {width: 100%;}
.purchase .fields .dxee-input {border: 1px solid #ddd;padding: 15px 10px;box-sizing: border-box; transition: all .3s;}
.purchase .fields ul {border-top: 2px solid #dc0008; }
.purchase .fields ul li {display: flex; border-bottom: 1px solid #ddd; align-items: center;}
.purchase  .btn-group {text-align: center;padding: 50px 0; transition: all .3s;}
.purchase .fields .btn-group .more_btn {background-color: #dc0008; color: #fff; padding: 12px 50px; font-size: 17px; transition: 0.3s; transition: all .3s;}
.purchase .fields .btn-group .more_btn:hover {background: #940005;}

/* 푸터약관 */
#modal.modal-overlay {width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: none; flex-direction: column; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.25);  backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); border: 1px solid rgba(255, 255, 255, 0.18); z-index: 999!important;}
#modal .modal-window {box-shadow: 12px 12px 10px 0 rgba(122, 122, 122, 0.37); width: 500px; height: 600px; position: relative; top: -100px; z-index: 999!important;}
#modal .title {display: inline;}
#modal .title h2 {display: inline;}
#modal .close-area {display: inline; float: right; padding-right: 10px; cursor: pointer; text-shadow: 1px 1px 2px gray; font-size: 35px; color: #888}
#btn-modal {color: #747474; transition: all .3s;}
#btn-modal:hover {color: #dc0008}
/************* 약관 스크롤바커스텀 ******************/
#modal textarea::-webkit-scrollbar {width: 10px;}
#modal textarea::-webkit-scrollbar-thumb {background:#666; ;border-radius: 10px;}
#modal textarea::-webkit-scrollbar-track {background: inherit;}