@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap');
/* reset style */
*{margin:0; padding:0;}
ol, ul{list-style:none;}
a{text-decoration:none; color:#808080;}
body{font-family: 'Montserrat', sans-serif; font-weight:400;}

/* layout reset style */
.clear:after{display:block; content:''; clear:both;}
.center{max-width:1200px; width:100%; margin:auto; height:auto;}
.contents_center{max-width:1220px; width:calc(100% + 20px); margin:auto; height:auto;}

.wrap{width:100%; height:auto;}

/* top line style */
.top_line{width:100%; height:70px; background:#101010;}
.top_line .login_bar{width:100%; height:auto;}
.top_line .login_bar .line{width:1px; height:15px; margin:10px 0; background:#ededed; float:right;}
.top_line .login_bar a{display:block; float:right; width:9%; text-align:center; color:#ededed; padding:10px 0; font-size:12px;}
/* .top_line .login_bar a:nth-child(1){_background:#c14000;}
.top_line .login_bar a:nth-child(2){_background:#009988; }
.top_line .login_bar a:nth-child(3){_background:#ffa500; } */

/* header style */
header{width:100%; height:70px; background:#333; box-sizing:border-box; border-left:5px solid #d54ab6; position:absolute; max-width:1200px;  z-index:999;}

header.scroll{position:fixed; max-width:1200px; top:0;}

/* logo style */
header .logo{width:120px; height:60px; float:left; margin-top:5px;}
header .logo img{width:100%;}

/* login buttonstyle */
header .login_btn{float:right; width:50px; height:100%; background:#d54ab6; text-align:center; box-sizing: border-box; padding-top:25px; cursor: pointer; display:block;}
header .login_btn .fa{color:#fff; font-size:20px;}


/* navigation style */
header .gnb{float:right; margin-right:20px;}
header .gnb li{float:left; padding:0 20px; height:70px; display:flex; align-items: center; cursor:pointer;}
header .gnb li a{color:#fff; text-transform:uppercase; font-size:14px;}
header .gnb li:hover, header .gnb li.active{background:#555;}

/* navigation icon style */
.nav_icon{width:24px; height:24px; float:right; margin:20px 20px 0 0;}
.nav_icon span{width:100%; height:2px; background:#fff; display:block; transition:all 0.4s;}

/* .nav_icon span:nth-child(1){} */
.nav_icon span:nth-child(2){margin:9px 0;}
/* .nav_icon span:nth-child(3){} */

.nav_icon.on span:nth-child(1){transform:rotate(45deg) translate(10px, 10px);}
.nav_icon.on span:nth-child(2){opacity:0;}
.nav_icon.on span:nth-child(3){transform:rotate(-45deg) translate(5px, -5px);}

/* main image section style */
.main_img{width:100%; background:url(../images/home-bg.jpg) no-repeat center center; background-size:cover;}

/* info section style */
.site_info{width:100%; height:auto; background:#101010; padding:50px 0 0 0;}
.site_info .boxes{width:100%; height:auto; position:relative; bottom:150px;}
.site_info .boxes .box{width:33.33%; height:auto; float:left; box-sizing:border-box; padding:15px;}
.site_info .boxes .box>div{width:100%; height:100%; text-align:center; box-sizing:border-box; padding:45px 20px;}
.site_info .boxes .box .icon{width:100px; height:100px; color:#fff; border:2px solid #fff; margin:auto; border-radius:50%; display:flex; align-items: center; justify-content: center;}
.site_info .boxes .box .icon .fa{font-size:50px;}
.site_info .boxes .box h2{font-size:35px; color:#fff; margin:25px 0;}
.site_info .boxes .box p{color:#fff; line-height:1.6;}

.site_info .boxes .box1>div{background:#c14000;}
.site_info .boxes .box2>div{background:#009988;}
.site_info .boxes .box3>div{background:#ffa500;}



/* start up section style */
.about{width:100%; height:auto; background:#101010;}
.about .company{width:50%; height:40vh; float:left;}
.about .start_up_left{background:url(../images/about-img.jpg) no-repeat center center; background-size:cover;}
.about .start_up_right{background:#222; box-sizing:border-box; padding:0 30px;}
.about .start_up_right .about_txt{width:100%; height:auto; top:50%; position:relative; transform:translateY(-50%);}
.about .start_up_right .about_txt h2{font-size:35px; color:#fff;}
.about .start_up_right .about_txt p{font-size:14px; color:#fff; font-weight:400; margin:25px 0; line-height:1.6;}
.about .start_up_right .about_txt a{font-size:14px; padding:15px 0; width:150px; border:2px solid #fff; display:block; text-align:center; color:#fff; font-weight:400; transition:all .4s ease;}
.about .start_up_right .about_txt a:hover{background:#fff; color:#101010;}

/* portfolio section style */
.portfolio{width:100%; height:auto; background:#101010;}
.portfolio .port_con_box{width:100%; height:auto; padding-bottom:30px;}
.portfolio .port_con_box .port_con{width:33.33%; height:auto; float:left; box-sizing:border-box; padding:10px;}
.portfolio .port_con_box .port_con>div{width:100%; height:auto; box-sizing:border-box; background:rgb(24, 24, 24); padding:10px;}

.portfolio .port_con_box .port_con>div>span{display:block; width:100%; height:150px; overflow:hidden;}
.portfolio .port_con_box .port_con>div>span>img{width:100%;}

/* portfolio title style */
.title_box{width:100%; height:auto; box-sizing: border-box; padding:100px 0 30px 0;}
.txt_contents{width:50%; height:auto; float:left;}
.title_box .title{font-size:35px; color:#fff; margin-bottom:20px;}
.title_box .title_txt{color:#fff; font-size:14px; font-weight:400; line-height:1.6; box-sizing: border-box; padding-left:15px; border-left:3px solid #fff;}
.txt_button{width:50%; height:auto;float:left; }
.txt_button a{font-size:14px; color:#fff; float:right; padding:15px 20px; box-sizing: border-box; border:1px solid #fff; bottom:0; display:block; margin:50px 30px 0 30px;}
.txt_button a:hover{background:#fff; color:#222;}


.portfolio .con_txt_box{width:100%; height:auto; text-align:center; padding:20px 0 0 0; box-sizing:border-box;}
.portfolio .con_txt_box h3{color:#fff;}
.portfolio .con_txt_box p{color:#fff; font-size:14px; line-height:1.6; padding:15px 0;}
.portfolio .con_txt_box a{display:block; text-align:center; color:#fff; font-weight:400; padding:10px 0; border:1px solid #fff; transition:all 0.4s ease;}
.portfolio .con_txt_box a:hover{background:#fff; color:#101010;}

/* footer section style */
footer{width:100%; height:auto; background:#202020; padding:20px 0;}
footer .copy{float:left; color:#fff; font-size:14px; margin-top:5px;}
footer .sns_box{float:right;}
footer .sns_box li{float:left;}
footer .sns_box li a{color:#fff; display:block; background:#444; width:30px; height:30px; font-size:18px; margin-left:2px; text-align:center; box-sizing:border-box; padding-top:5px;}


/* sup page image style  */
.sub_img{width:100%; height:550px; overflow:hidden; position:relative;}
.sub_img img{width:100%; position:absolute; top:-250px;}
.sub_img .img_slogan{width:100%; height:auto; text-align:center; position:absolute; top:50%; transform:translateY(-50%); z-index:10; color:#fff;}
.sub_img .img_slogan h2{font-size:50px; line-height:1.5;}
.sub_img .img_slogan p{font-size:30px; font-weight:bold;}
.sub_img .img_slogan .join-btn{display:inline-block; color:#fff; font-size:18px; font-weight:bold; padding:10px 20px; background:#009988; border:0; outline:0; margin-top:20px;}


/* .login page title style */
.sub_page_title{width:30%; margin:auto; height:auto; text-align:center;}
.sub_page_title h2{font-size:40px; padding:10px 0; color:#fff;  margin-bottom:8px;}
.sub_page_title .title_line{width:15%; margin:auto; height:5px; background:#fff; margin-bottom:20px;}


/* gallery section style  */
.gallery{width:100%; height:auto; background:#101010; padding-bottom:30px;}
.gallery_contents{width:100%; height:auto;}
.gallery_contents .gallery_view{width:25%; height:200px; box-sizing: border-box; padding:5px; float:left; }
.gallery_contents .gallery_view>div{width:100%; height:100%; box-sizing:border-box; border:1px solid #fff; overflow:hidden;}
.gallery_contents .gallery_view>div>img{width:100%;}


/* contact section style  */
.contact{width:100%; height:auto; background:#101010; padding-bottom:30px;}

.map_box{width:100%; height:auto; box-sizing: border-box; border:1px solid #202020; padding:10px;}
.map{width:100%; height:100%; background:#202020;}

.msg_box{width:100%; height:auto; box-sizing:border-box; margin-top:20px; text-align:center; }

.msg_box p{width:100%; height:auto; margin-bottom:10px; }
.msg_box p>input{ border:0; outline:0; width:100%; padding:15px 20px; box-sizing: border-box; font-family: 'Montserrat', sans-serif;  font-weight:400; border-bottom: 1px solid #fff; background:#101010; color:#fff;}
.msg_box p>input:focus{background:#fff; color:#111;}

.msg_box p>textarea{border:0; width:100%; resize: none; height:300px; font-family: 'Montserrat', sans-serif; font-weight:400; padding:15px 20px; box-sizing: border-box; border-bottom: 1px solid #fff; background:#101010; color:#fff; }
.msg_box p>textarea:focus{background:#fff;  color:#111;}

.msg_box button{color:#fff; padding:15px 20px; box-sizing: border-box; border:1px solid #fff; bottom:0;  background:#101010; margin:auto;  display:inline-block;} 
.msg_box button:hover{color:#111; background:#fff;}
.msg_box button>a{color:#fff; }