@charset "utf-8";
@import url('animations.css');

@font-face {font-family: 'SCoreDream'; font-weight: 300; font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream3.woff2) format('woff2'), url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream3.woff) format('woff');
}
@font-face {font-family: 'SCoreDream'; font-weight: 400; font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream4.woff2) format('woff2'),
    url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream4.woff) format('woff');
}
@font-face {font-family: 'SCoreDream'; font-weight: 500; font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream5.woff2) format('woff2'),
    url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream5.woff) format('woff');
}

html{font-size: 10px;}
body{font-size: 1.6rem; font-family: 'SCoreDream'; font-weight: 500; letter-spacing: -0.8px;}
.inner{max-width: 1200px; margin: 0 auto; padding: 0 10px;}
.ms_title{text-transform: uppercase; font-size: 5rem; text-align: center; position: relative; padding-bottom: 20px; margin-bottom: 50px;}
.ms_title::after{content: ""; width: 30px; height: 2px; background-color: #000; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;}
.section .inner{margin-top: 50px;}

/*    네비    */
.header {width: 100%; height: 100px; position: fixed; top: 0; left: 0; z-index: 100; background-color: rgba(255, 255, 255, 0.7); padding-left: 5%; padding-right: 100px; box-sizing: border-box;}
.header .logo{position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;}
.header .nav {display: flex; position: relative; line-height: 100px; justify-content: flex-end;}
.header .nav > li {width: 160px; text-align: center; position: relative;}
.header .nav > li > a{display: block; font-size: 21px; }
.header .nav .nav2depth{position: absolute; left: 50%; transform: translateX(-50%); width: 100%; background-color: #fff; line-height: 50px; height: 0; overflow: hidden; transition: 0.5s;}
.header .nav .nav2depth ul{}
.header .nav .nav2depth ul li{}
.header .nav .nav2depth ul li a{display: block;}
.header .nav > li:nth-child(1):hover .nav2depth{height: 300px;}
.header .nav > li:nth-child(2):hover .nav2depth{height: 210px;}
.header .nav > li:nth-child(3):hover .nav2depth{height: 50px;}
.header .nav > li:nth-child(4):hover .nav2depth{height: 150px;}
.header .nav > li:hover > a,
.header .nav .nav2depth ul li:hover a{color: #0092ff;}
/* 네비- 메뉴버튼 */
.header .menu_btn {position: absolute; width: 100px; height: 100%; cursor: pointer; background-color: #007dda; right: 0; top: 0; z-index: 15;}
.header .menu_btn .bar_wrap{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.header .menu_btn .bar {height: 2px; background: #fff; transition: 0.5s ease;  position: relative; width: 28px; display: block;}
.header .menu_btn .bar:nth-of-type(2) {width: 21px; margin: 10px 0;}
.header .menu_btn.bar_on {background-color: rgba(255, 255, 255, 0); border: 1px solid #fff; box-sizing: border-box;}
.header .menu_btn.bar_on .bar:nth-child(1) {transform: rotate(45deg); top: 3px;}
.header .menu_btn.bar_on .bar:nth-child(2) {display: none;}
.header .menu_btn.bar_on .bar:nth-child(3) {transform: rotate(-45deg);}
/* 사이드메뉴 */
.header .sidemenu {padding: 100px 50px 50px; background-color: rgba(0, 0, 0, 0.9); position: fixed; z-index: 5; max-width: 500px; width: 100%; height: 100%; top: 0; overflow-y: auto; box-sizing: border-box; right: -150%; transition: 0.5s; font-size: 1.8rem; font-weight: 300;}
.header .sidemenu.menu_on{right: 0;}
.header .sidemenu ul.side_nav{}
.header .sidemenu ul.side_nav li{line-height: 35px;}
.header .sidemenu ul.side_nav > li{margin-bottom: 20px; line-height: 45px;}
.header .sidemenu ul.side_nav > li > a{display: block; color: #0092ff; font-size: 2.5rem; font-weight: 500;}
.header .sidemenu ul.side_nav li .nav2depth{}
.header .sidemenu ul.side_nav li .nav2depth li{}
.header .sidemenu ul.side_nav li .nav2depth li a{color: #fff;}
.header .sidemenu ul.side_nav li .nav2depth li:hover a{color: #0092ff;}

/*    main_visual    */
.main_visual .swiper-container{height: 100%;}
.main_visual .swiper-wrapper {height: 100%; position: relative; position: absolute;top: 0;}
.main_visual .swiper-wrapper .swiper-slide {height: 100%;}
.main_visual .swiper-wrapper .swiper-slide.slide01{background: url(../img/main_visual.png) no-repeat center; background-size: cover;}
.main_visual .swiper-wrapper .swiper-slide.slide02{background: url(../img/main_visual02.png) no-repeat center; background-size: cover;}
.main_visual .swiper-wrapper .swiper-slide.slide03{ background: url(../img/main_visual04.png) no-repeat center; background-size: cover;}
.main_visual .swiper_cont {position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; color: #fff; text-align: center; width: 100%; padding: 0 10px; box-sizing: border-box; padding-top: 100px;}
.main_visual .swiper_cont h1{font-size: 4rem; font-weight: 300; margin-bottom: 35px;}
.main_visual .swiper_cont h2{font-size: 8rem; margin-bottom: 60px;}
.main_visual .swiper_cont .more{width: 180px; height: 50px;border-radius: 25px; border: 1px solid #fff; display: inline-block; line-height: 50px; background-color: rgba(110, 121, 130, 0.7); transition: 0.3s; box-sizing: border-box;}
.main_visual .swiper_cont .more a{color: #fff; font-size: 15px; font-weight: 300; display: block;  display: flex; align-items: center; justify-content: center;}
.main_visual .swiper_cont .more a img{margin-left: 10px; transition: 0.3s}
.main_visual .swiper_cont .more:hover{border-color: #0092ff;}
.main_visual .swiper_cont .more:hover img{transform: rotate(180deg);}
/*슬라이드 인디케이터*/
.swiper-container-horizontal > .swiper-pagination-bullets,
.swiper-pagination-custom, .swiper-pagination-fraction{bottom: 80px;}
.swiper-pagination-bullet {width: 50px; height: 4px; border-radius: 0; background-color: rgba(255, 255, 255, 0.3); opacity: 1;}
.swiper-pagination-bullet-active {background: #fff;}
#fp-nav.left{left: 5%;}
#fp-nav ul li:not(:last-child){margin-bottom: 40px;}
#fp-nav ul li:not(:last-child)::after{content: ""; position: absolute; width: 1px; height: 40px; background-color: #e5e5e5; left: 50%; opacity: 0.5;}
#fp-nav ul li{width: 10px; height: 10px;}
#fp-nav ul li a span{background: #e5e5e5; width: 10px; height: 10px; margin: 0; left: 0; top: 0;}
/*풀페이지 인디케이터*/
#fp-nav ul li a.active span{background-color: #0092ff; margin: -4px 0 0 -4px; width: 10px; height: 10px;}
#fp-nav ul li a.active span::after{content: ""; width: 20px; height: 20px; border: 1px solid #e5e5e5; border-radius: 50px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#fp-nav ul li,
#fp-nav ul li a.active span, 
#fp-nav ul li:hover a span,
#fp-nav ul li:hover a.active span{margin: 0;}

/*    main2_company    */
.company{background: url(../img/company_bg.png) no-repeat center; background-size: cover; }
.company .ms_title{color: #fff;}
.company .ms_title::after{background-color: #fff;}
.company ul{display: flex; justify-content: space-between;}
.company ul li{position: relative; width: 16%; height: 360px; transition: 0.3s;}
.company ul li a{display: block; width: 100%; height: 100%;}
.company ul li img{width: 100%; height: 100%;}
.company ul li p{position: absolute; left: 20px; bottom: 20px; font-size: 3rem;}
.company ul li:nth-child(1) a,
.company ul li:nth-child(2) a,
.company ul li:nth-child(6) a{color: #fff;}

/*    main3_products    */
.products{background: url(../img/products_bg.png) no-repeat center; background-size: cover;}
.products .wrap{display: flex; flex-wrap: wrap;}
.products .box{width: 49%; border-radius: 20px 0 20px 0; padding: 8vw 3.5vw; box-sizing: border-box; color: #fff; /*margin-right: 2%;*/ margin: 0 auto; text-align: center;}
.products .lbox{background: url(../img/products_left_bg.png) no-repeat center; background-size: cover;}
.products .rbox {background: url(/html/img/products_right_bg.jpg) no-repeat center/cover;}
.products .box span{font-weight: 300; font-size: 2.6rem;}
.products .box p{margin: 30px 0 50px; font-size: 4rem;}
.products .box .more{width: 160px; border-radius: 23px; border: 1px solid #fff; line-height: 46px; background-color: rgba(110, 121, 130, 0.1); transition: 0.3s; box-sizing: border-box; margin: 0 auto;}
.products .box .more a{color: #fff; font-size: 15px; font-weight: 300; display: block;  display: flex; align-items: center; justify-content: center;}
.products .box .more a img{margin-left: 8px;}
.products ul{display: flex; flex-wrap: wrap; font-size: 2.4rem; justify-content: space-between;}
.products ul li{position: relative; width: 49%; border-radius: 20px 0 20px 0; overflow: hidden;}
.products ul li:nth-child(1),
.products ul li:nth-child(2){margin-bottom: 15px;}
.products ul li a{display: block; width: 100%; height: 100%;}
.products ul li a > img{width: 100%; height: 100%; object-fit: cover;}
.products ul li p{position: absolute; top: 50px; left: 30px; color: #fff;}
.products ul li .plus_btn{position: absolute; width: 35px; height: 35px; background: url(../img/products_plus.png) no-repeat center; background-size: cover; bottom: 35px; right: 20px;}

/*    main4_board    */
.board{background: url(../img/board_bg.png) no-repeat center; background-size: cover; padding: 145px 0 45px; height: calc(100% - 240px); box-sizing: border-box;}
.board .inner{display: flex; justify-content: space-between; margin-top: 0; flex-wrap: wrap; }
.board .ctbox{width: 49%; background-color: #fff; padding: 50px 50px 70px; box-sizing: border-box; border-radius: 20px 0 20px 0;}
.board .ctbox .title{font-size: 3rem; position: relative; padding-bottom: 17px; width: 100%; margin-bottom: 40px; display: flex; justify-content: space-between;}
.board .ctbox .title h1{font-size: 3rem; position: relative; padding-bottom: 17px; width: 100%;}
.board .ctbox .title h1::before{content: ""; position: absolute; width: 30px; height: 2px; background-color: #000; left: 0; bottom: 0; }
.board .ctbox .title a{}
.board .ctbox ul.notice{}
.board .ctbox ul.notice li{border-bottom: 1px solid #e1e1e1; padding: 20px 0;}
.board .ctbox ul.notice li:first-child{padding-top: 0;}
.board .ctbox ul.notice li a{display: flex; justify-content: space-between;}
.board .ctbox ul.notice li a p{overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight: 400; font-size: 1.7rem; flex: 1; margin-right: 5px;}
.board .ctbox ul.notice li a span{font-size: 1.5rem; font-weight: 300; color: #909090;}
.board .ctbox ul.notice li:hover a p{font-weight: 500;}
.board .ctbox ul.cs{display: flex; justify-content: space-between; }
.board .ctbox ul.cs li{position: relative; width: 48%; }
.board .ctbox ul.cs li a{color: #fff;}
.board .ctbox ul.cs li a img{width: 100%; height: 100%;}
.board .ctbox ul.cs li a p{position: absolute; top: 40px; left: 40px; font-size: 2.6rem;}

/* 약관 */
.ctt_privacy_box {padding-top: 5rem; line-height: 1.7;}

/*    footer    */
.footer{background-color: #161c1f; color: #fff;}
.footer .ft_top{font-weight: 300; border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
.footer .ft_top .inner{margin-top: 0; display: flex; align-items: center; justify-content: space-between;}
.footer .ft_top ul{display: flex; height: 60px; align-items: center;}
.footer .ft_top ul li{position: relative;}
.footer .ft_top ul li:first-child{padding-right: 20px; margin-right: 20px;}
.footer .ft_top ul li:first-child::after{content: ""; position: absolute; width: 2px; height: 2px; right: 0; top: 50%; transform: translateY(-50%); background-color: #fff;}
.footer .ft_top ul li a{color: #fff;}
.footer .ft_top .scrolltop{float: right; margin-left: 15px; cursor: pointer;}
.footer .ft_btm{color: rgba(255, 255, 255, 0.3); font-weight: 300; font-size: 1.4rem;} 
.footer .ft_btm .inner{padding: 39px 0 50px; display: flex; flex-wrap: wrap; margin-top: 0;}  
.footer .ft_btm .logo{margin-right: 4.5%;} 
.footer .ft_btm .txtwrap .txt{display: flex; margin-bottom: 18px; flex-wrap: wrap; line-height: 15px;}
.footer .ft_btm .txtwrap .txt p {white-space: nowrap}
.footer .ft_btm .txtwrap .txt p:nth-of-type(1) {width: 160px;}
.footer .ft_btm .txtwrap .txt p:nth-of-type(2) {width: 185px;}
.footer .ft_btm .txtwrap .txt .bar{padding: 0 16px; position: relative;}
.footer .ft_btm .txtwrap .txt .bar::after{content: ""; display: inline-block; width: 1px; height: 13px; background-color: #fff; /*position: absolute; top: 50%; transform: translateY(-50%);*/}
.footer .ft_btm .txtwrap p.copy{margin-top: 30px;}
.footer .ft_btm .txtwrap .txt a {color: inherit;}


@media screen and (min-width:1025px){
    .company ul li:nth-child(2n){margin-top: 125px;}
    .company ul li:nth-child(2n):hover{margin-top: 100px;}
    .company ul li:nth-child(1),
    .company ul li:nth-child(5){margin-top: 68px;}
    .company ul li:nth-child(1):hover,
    .company ul li:nth-child(5):hover{margin-top: 50px;}
    .company ul li:nth-child(3):hover{margin-top: -15px;}
}

@media screen and (max-width:1200px){
    html{font-size: 9px;}
}

@media screen and (max-width: 1024px){
    html{font-size: 8px;}
	.header {height:80px;}
    .header .logo{left: 3%;}
	.header .logo img{width:80%;}
    .header .nav{display: none;}
	.header .menu_btn {width:80px;}
    .inner{padding: 0; margin: 0 3%;}
    .section .inner{margin-top: 0;}
    .footer .ft_btm .inner{justify-content: center; text-align: center;}
    .footer .ft_btm .logo{margin-right: 0; margin-bottom: 20px;}
    .footer .ft_btm .txtwrap .txt{justify-content: center;}
    .footer .ft_btm .txtwrap{width: 100%;}
    
    .main_visual .swiper_cont h1{font-size: 3.5rem; line-height: 30px;}
    .main_visual .swiper_cont h2{font-size: 6rem; line-height: 40px;}
    
    .company ul li{height: auto;}
    .company ul li p{font-size: 2.5rem;}
    
    .board .ctbox{padding: 30px;}
    .board .ctbox ul.cs li a p{top: 20px;left: 20px;}
    
    .footer .ft_top .inner{justify-content: center;}
	.footer .ft_btm .txtwrap .txt p:nth-of-type(1),
	.footer .ft_btm .txtwrap .txt p:nth-of-type(2),
	.footer .ft_btm .txtwrap .txt p:nth-of-type(3) {width: 150px;}
	.footer .ft_btm .txtwrap .txt .bar{padding: 0 10px; text-align: center;}
}
@media screen and (max-width:797px){
    .pc{display:none;}
    .mobile{display:block;}
    
	.header {height:60px;}
	.header .logo img{width:60%;}
	.header .menu_btn {width:60px;}
	.header .menu_btn .bar {width:24px;}
	.header .menu_btn .bar:nth-of-type(2) {width:18px;}
    .main_visual .swiper_cont h1{font-size: 3rem; margin-bottom: 20px;}
    .main_visual .swiper_cont h2{font-size: 4rem; margin-bottom: 30px;}
	.main_visual .swiper-wrapper .swiper-slide.slide03{ background: url(../img/main_visual04.png) no-repeat -530px 0px; background-size: cover;}
    
    .company ul{flex-wrap: wrap; justify-content: center;}
    .company ul li{width: 33%; padding: 2% 1.5%; max-height: 300px; box-sizing: border-box;}
    .company ul li p{font-size: 2.2rem;}
    
    .products{padding: 50px 0; box-sizing: border-box;}
    .products .box{width: 100%; margin-right: 0; margin-bottom: 20px; padding: 30px;}
    .products .box p{margin: 15px 0 25px;}
    .products ul li{max-height: 250px;}
    
    
    .board{padding: 50px 0;}
    .board .ctbox{width: 100%;}
    .board .ctbox{margin-top: 30px;}
    .board .ctbox ul.cs li{max-width: 300px;}

	.footer .ft_btm .txtwrap .txt .bar {padding: 0 10px;}
}
@media screen and (max-width: 340px){
	.footer .ft_btm .txtwrap .txt:first-child {margin-bottom: 0;}
	.footer .ft_btm .txtwrap .txt p:nth-of-type(1), 
	.footer .ft_btm .txtwrap .txt p:nth-of-type(2), 
	.footer .ft_btm .txtwrap .txt p:nth-of-type(3) {width: 100%; line-height: 1.7;}
	.footer .ft_btm .txtwrap .txt .bar {display: none;}
}


/* 애니메이션 */
.active .fadeInDownShort.go { 
    -webkit-animation-name: fadeInDownShort; 
    animation-name: fadeInDownShort; 
}


.active .fadeInUpShort.go { 
    -webkit-animation-name: fadeInUpShort; 
    animation-name: fadeInUpShort; 
}