@charset "utf-8";

/*
 * --------------------------------------------------------------------------
 * descript : 메인 콘텐츠
 * --------------------------------------------------------------------------
 * version	: 2.0.0
 * author	: Yoodaekyung
 * update	: 2018.08.17
 * email	: eorud0818@naver.com
 * --------------------------------------------------------------------------
 */

/* --------------------------------------------------------------------------
   메인 비주얼 슬라이드
   -------------------------------------------------------------------------- */
#main-visual-slider{}
#main-visual-slider .slick-slide{}
#main-visual-slider .item{position:relative; height:500px; background:#000; overflow:hidden;}

#main-visual-slider .item.bg01{background:url(/assets/img/web/main/theme/main_visual01.jpg) no-repeat center center; background-size:cover;}
#main-visual-slider .item.bg02{background:url(/assets/img/web/main/theme/main_visual02.jpg) no-repeat center center; background-size:cover;}
#main-visual-slider .item.bg03{background:url(/assets/img/web/main/theme/main_visual03.jpg) no-repeat center center; background-size:cover;}
#main-visual-slider .item.bg04{background:#000; background-size:cover;}
#main-visual-slider .item.bg04 video{position:absolute; left:50%; top:50%; width:100%; height:100%; transform:translate(-50%, -50%);}

#main-visual-slider .item .object{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; z-index:5; height:12em; display:inline-block;}
#main-visual-slider .item .object .obj{position:absolute; letter-spacing:-0.3px;}
#main-visual-slider .item .object .obj0101{top:0; left:20px; font-size:1em; color:#555555; animation:fadeOutUp 1s both;}
#main-visual-slider .item .object .obj0101::before{ppsition:absolute; display:inline-block; width:280px; height:1px; background:rgba(0,0,0,0.2); left:0; bottom:0;}
#main-visual-slider .item .object .obj0102{top:50px; left:20px; font-size:1.4em; color:#43436f; animation:fadeOutDown 1s both;}
#main-visual-slider .item .object .obj0103{top:85px; left:20px; font-size:2.6em; line-height:1.2em; color:#43436f; font-weight:700; animation:fadeOutDown 1s both;}
#main-visual-slider .item .object .obj0103 p.txt01{color:#ff722d;}

#main-visual-slider .slick-active .object .obj0101{animation:fadeInDown 1s both 0.5s;}
#main-visual-slider .slick-active .object .obj0102{animation:fadeInUp 1s both 1s;}
#main-visual-slider .slick-active .object .obj0103{animation:fadeInUp 1s both 1.5s;}



/* --------------------------------------------------------------------------
   타이틀
   -------------------------------------------------------------------------- */
h2{font-size:28px; font-weight:600; line-height:1em; color:#222; text-align:center; width:100%; margin-bottom:70px;}
h2 span{position:relative; display:inline-block;}
h2 span::before{position:absolute; display:inline-block; width:90px; height:14px; left:-100px; top:50%; transform:translate(0, -50%); background:url(/assets/img/common/theme/h2_bg.png) no-repeat left center;}
h2 span::after{position:absolute; display:inline-block; width:90px; height:14px; right:-100px; top:50%; transform:translate(0, -50%); background:url(/assets/img/common/theme/h2_bg.png) no-repeat left center;}

/* --------------------------------------------------------------------------
   PRODUCT
   -------------------------------------------------------------------------- */
#product{display:inline-block; width:100%; padding:50px 0; background:#fff url(/assets/img/web/main/theme/product_bg.png) no-repeat center top; background-size:cover;}
#product ul{}
#product ul li.item{float:left; width:calc(50% - 10px); margin-right:20px; margin-bottom:20px; height:200px;}
#product ul li.item:nth-child(2n + 2){margin-right:0;}
#product ul li.item a{position:relative; display:block; width:100%; height:100%;; background:#f3f3f3 url(/assets/img/common/theme/logo.png) no-repeat center center; background-size:150px; }
#product ul li.item .thumbnail{height:100%;}
#product ul li.item a .info{opacity:0; position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.3); left:0; top:0; nnnnnnnnn-webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
#product ul li.item a .info::before{position:absolute; display:inline-block; width:0; height:8px; background:#ff722d; left:15px; top:-4px; nnnnnnnnn-webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
#product ul li.item a .info .info-inner{position:absolute; width:90%; left:50%; top:50%; transform:translate(-50%, -50%); text-align:center;}
#product ul li.item a .info b{display:block; width:100%; font-size:1.4em; line-height:1.2em; font-weight:700; color:#fff; margin-bottom:10px;}
#product ul li.item a .info span{display:block; width:100%; font-size:1em; color:#fff;}

#product ul li.item a:hover .info{opacity:1;}
#product ul li.item a:hover .info::before{width:60px;}

/*
@media (max-width:480px){
	#product ul li.item{float:none; width:calc(100%); margin-right:0;}
}
*/

/* --------------------------------------------------------------------------
   PROCESS
   -------------------------------------------------------------------------- */
#process{position:relative; display:inline-block; width:100%; padding:50px 0; background:#000 url(/assets/img/web/main/theme/process_bg.png) no-repeat center center; background-size:cover; background-attachment:fixed;}
#process::before{position:absolute; display:inline-block; opacity:0.05; width:100%; height:156px; background:url(/assets/img/web/main/theme/process_txt.png) no-repeat center 60px; left:0; bottom:0;}
#process h2{color:#fff;}

#process ul{}
#process ul li.item{position:relative; float:left; width:20%; text-align:center;}
#process ul li.item::after{position:absolute; display:inline-block; width:13px; height:22px; background:url(/assets/img/web/main/theme/process_arrow.png); right:0; top:60px;}
#process ul li.item:last-child::after{display:none;}
#process ul li.item .process{display:inline-block; width:140px; height:140px; border-radius:140px; line-height:140px; margin-bottom:20px; box-shadow:5px 5px 10px rgba(0,0,0,0.3);}
#process ul li.item .process01{background:#7bce70;}
#process ul li.item .process02{background:#dde0e5;}
#process ul li.item .process03{background:#4575ca;}
#process ul li.item .process04{background:#43b5bf;}
#process ul li.item .process05{background:#987ce7;}

#process ul li.item .txt{position:relative;}
#process ul li.item .txt::before{position:absolute; display:inline-block; width:25px; height:2px; left:50%; top:23px; background:#7bce70; transform:translate(-50%, 0);}
#process ul li.item .txt span{display:block; color:#fff; font-size:18px; margin-bottom:20px;}
#process ul li.item .txt b{display:block; color:#fff; font-size:18px;}

/* --------------------------------------------------------------------------
   고객센터 및 온라인 고객상담
   -------------------------------------------------------------------------- */
#customer{display:inline-block; width:100%; padding:10px 0;}
#customer img{width:100%;}
#customer .customer,
#customer .counsel{position:relative; width:100%; box-sizing:border-box; border:1px solid #ddd;}
#customer .customer{margin-bottom:10px;}