/* 공통 */

#contents {width:100%; text-align:center;}
.contents-1 {width:100%; text-align:left;}
.container {width:1200px; margin: 0 auto;}

.clearfix:after {content:""; display:block; clear:both; } 
.bg-white {background:#FFF;}


/* TOP버튼 */
#go-top {position: fixed; right:20px; bottom:20px;}
#go-top a { width:45px; height:45px; display: block; cursor:pointer; text-align: center; font-size:10px; font-weight:600; padding-top:22px; color: #FFF; background-color:rgba(0,0,0,0.6); background-image: url(/img01/top-bg.png); background-repeat:no-repeat; background-position: center 10px; border-radius:3px; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s;}
#go-top a:hover { color: #FFF;}


/* Info 배너 */
#info-wrap {margin-top:-100px; background:#EDEFF2;}
.info {width:33.3333%; height: 280px; float:left; position:relative;}
.info-slide {width:33.3333%; height: 280px; float:left; position:relative;}
.info > img {width: 100%;}
.info .overlay {background: rgba(0,0,0,0.1); border: 1px solid rgba(255,255,255,0.5); position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; opacity: 0;
 -webkit-transition: 0.2s opacity; transition: 0.2s opacity; -webkit-transition-delay: 0.2s; transition-delay: 0.2s;}
.info:hover .overlay {-webkit-transition-delay: 0s; transition-delay: 0s; opacity: 0.8;}
.info .info-content {position: absolute; left: 25px; right: 25px; top: 50%; text-align: center; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: 0.2s all; transition: 0.2s all;}
.info:hover .info-content {top: 45%;}
.info .info-content h3 {font-size:26px; line-height:34px; font-weight:500; opacity: 1; color: #FFF; margin-bottom: 25px; -webkit-transition: 0.2s all; transition: 0.2s all;}
.info .info-content p {font-size:16px; line-height:24px; display: block;  opacity: 1; color: #FFF; margin-bottom: 5px; -webkit-transition: 0.2s all; transition: 0.2s all;}
.info .info-link {text-align: center; margin-top: 25px; opacity: 1; -webkit-transition: 0.2s all; transition: 0.2s all;}
a.btn-style1 {display: inline-block; font-size: 15px; padding: 8px 25px; border: 1px solid rgba(255,255,255,0.7); color: #FFF; text-align: center;}
a.btn-style1:hover {color: #333; background: rgba(255,255,255,0.7);}
a.btn-style2 {display: inline-block; font-size: 14px; padding: 8px 25px; border: 1px solid #BBB; color: #999; text-align: center;}
a.btn-style2:hover {color: #FFF; background: #999; border: 1px solid #999;}
.notice {padding: 30px;}
.notice-header {border-bottom: 1px solid #DDD; text-align: left; font-size:0; padding-bottom: 10px; margin-bottom: 20px;}
.notice-header h3 {display:inline-block; font-size:19px; width:80%; font-weight:500; color:#222222;}
.notice-header .more {display:inline-block; width:20%; font-size:13px; padding-right:5px; text-align:right;}
.notice-header .more a {color:#888; display:inline-block;}
.notice-header .more a:hover {text-decoration: underline;}
/* 공지사항 추출 */
.board_output td { color:#666 !important; font-size:14px; height:34px; font-weight:400; vertical-align:top;}
.board_output a { font-size:15px !important; font-weight:400; color:#666 !important;}


/* 소개 영역 */
#introduce {width:100%;height: 404px;background:url('/img01/intro_back.jpg') center bottom no-repeat; text-align:left;}
/*
#introduce .intro-box {width:100%; background:url('/img/intro_bg.jpg') center bottom no-repeat; padding:100px 40px; text-align:left;}
*/
.intro-box{margin-top: 7%;}
#introduce .intro-box h3 {font-family: 'NotoSerifKR';position: relative; color:#333; font-size:37px; line-height:40px; font-weight:600; padding-bottom:30px; letter-spacing:-0.8px;}
#introduce .intro-box h3::before{     left: -18px;
    top: -16px;z-index: -10;content : '';position: absolute;width:48px ; height: 48px; background-color: #ffcb42; border-radius: 100%;}

#introduce .intro-box p{font-size: 18px;}

#introduce .intro-box .p-big {color:#e3302d; font-size:25px; line-height:30px; font-weight:300; padding-bottom:5px;}
/* 소개 버튼 디자인 */
a.intro-btn {border-radius: 10px; display:inline-block; margin-top:30px; background:#e3e3e3; color:#333; padding:8px 30px; font-size:15px; }
a.intro-btn:hover {background:#ffcb42; transition: all 0.3s;}
a.intro-btn0 {display:inline-block; margin-top:30px; background:#14a5ad; color:#FFF; padding:8px 30px; font-size:15px; }
a.intro-btn0:hover {background:#e3302d;}
a.intro-btn1 {display:inline-block; margin-top:30px; border:1px solid #FFF; color:#FFF; padding:8px 30px; font-size:15px; }
a.intro-btn1:hover {background:rgba(255,255,255,0.3); color:#FFF;}
a.intro-btn2 {display:inline-block; margin-top:30px; border:1px solid #FFF; color:#FFF; padding:8px 30px; font-size:15px; }
a.intro-btn2:hover {background:rgba(255,255,255,0.3); color:#FFF;}

/*비지니스*/
#business{padding:100px 0}
#business .line{width: 40px; height: 5px; background-color:#ffb200 ;margin: 0 auto;}
#business h2{font-size: 28px;color: #333; font-family: 'NotoSerifKR';margin-bottom: 20px; }
#business ul{margin-top: 70px; flex-wrap: wrap;
    display: flex;
    justify-content: center;
    align-items: center;}
#business ul li{margin-right: 10px;}
#business ul li:hover{margin-top: -20px; transition: all 0.7s;}
#business ul li:last-child{margin-right: 0px;}


/*프로그램*/
#program{    padding: 100px 20px;}
#program h2{   color: #333; font-size: 40px;padding: 0 0 70px 0;
    font-family: 'NotoSerifKR';}

#program ul{width: 100%;flex-wrap: wrap;
    display: flex;
    justify-content: center;
    align-items: center;}

#program ul li{margin-right:18px;}
#program ul li:hover{margin-top: -70px; transition: all .7s;}

/* 제품소개 영역 */
#product {padding: 70px 20px 100px;font-size:0;}
#product h2 {position: relative; font-family: 'NotoSerifKR';color:#1E1E1E; font-size:40px; line-height:54px; font-weight:500; text-align:center; padding-bottom:15px;}
#product h2::before{
left: 58.5%;;
    top: -9px;
    z-index: -10;
    content: '';
    position: absolute;
    width: 48px;
    height: 48px;
    background-color: #ffcb42;
    border-radius: 100%;}
#product p {font-size:15px; line-height:22px; padding-bottom:30px; text-align:center;}


/* 홍보영상 영역 */
#movie {background:url('/img01/movie_bg.jpg') center top no-repeat; background-attachment:fixed; background-size:cover; padding:50px 20px; text-align:center; font-size:0;}
#movie .sm-tit {font-size:14px; color:#FFF; font-weight:500; letter-spacing:10px; font-family:'Montserrat', sans-serif; padding-bottom:10px;}
#movie h3 {color:#FFF; font-size:36px; font-weight:300; padding-bottom:25px;}
#movie p {color:#FFF; font-size:16px; line-height:24px;}
#movie .youtube-txt {width:100%; display:inline-block; vertical-align:middle;}
#movie .youtube-wrap {width:50%; display:inline-block; vertical-align:middle; padding-left:100px;}
#movie .youtube-wrap .youtube { position:relative; width:100%; padding-bottom: 56.25%;}
#movie .youtube-wrap .youtube iframe { position: absolute; width:100%; height:100%; }


/* 고객센터 영역 */
#customer {background:#EDEFF2; padding:50px 20px;}
#customer h3 {font-size:16px; font-weight:500;}
#customer .cs-box-bg {height:180px; background:url('/img01/customer_bg.jpg') no-repeat; font-size:0; box-shadow:8px 8px 22px rgba(0,0,0,0.2);}
#customer .cs-center {width:40%; display:inline-block; padding-left:20px; vertical-align:middle; text-align:left;}
#customer .cs-center ul { padding:25px; }
#customer .cs-center li {color:rgba(255,255,255,0.85); font-size:14px;}
#customer .cs-center li.cs_tit {padding-bottom:8px;}
#customer .cs-center li.tel_num {color:#FFF; font-size:36px; font-weight:700; font-family:'Montserrat',sans-serif; padding-bottom:5px;}
#customer .cs-center li.tel_num a {color:#FFF; }
#customer .cs-icon {font-size:0;}
#customer .cs-icon {width:60%; display:inline-block; vertical-align:middle;}
#customer .cs-icon ul {width:100%; display:table; position:relative;}
#customer .cs-icon li {width:25%; height:180px; display:table-cell; text-align:center; font-size:12px; line-height:16px; vertical-align:middle; border-left:1px solid rgba(255,255,255,0.3);}
#customer .cs-icon li i {font-size:40px; display:table-cell; vertical-align:middle;}
#customer .cs-icon li a {padding-top:30px; color:rgba(255, 255, 255, 0.75); display:block; height:100%; vertical-align:middle;}
#customer .cs-icon li a:hover {background:rgba(0, 0, 0, 0.3);;}
.icon-img {color:#FFF; display:inline-table; width:80px; height:60px; border-radius:100px; }
.icon-tit {color:#FFF; font-size:16px; font-weight:500; padding:8px 0; display:block;}


/* 하단 풋터 영역 */
#footer { background:#333; padding:40px 20px; text-align:center; font-size:13px; line-height:22px;}
#footer a {color:#BBB;}
#footer .copyright_logo {width:100%;}
#footer .footer_util {width:100%;}
#footer .footer_util li {display:inline-block; padding-right:2px;}
#footer .footer_util li a {display:block; color:#BBB; font-size:12px; border:1px solid #A0A0A0; padding:3px 15px;}
#footer .footer_util li a:hover {background:#999; border:1px solid #999; color:#FFF;}
#footer .footer_copyright {width:100%; padding-bottom:20px;}
#footer .footer_copyright li {color:#DDD; display:inline-block; padding-right:20px;}
#footer .copy_end {width:100%; padding-right:0px !important;}



@media screen and (max-width: 1200px) {

/* 공통 */
.container {width:100%;}

/* What we do 영역 */
#info-wrap {margin-top:0; padding:0;}
.info {height:220px;}
.info .info-content h3 {font-size:20px; line-height:30px; margin-bottom:10px;}
.info .info-content p {font-size:14px; line-height:20px;}
a.btn-style1 {font-size:13px; padding:6px 20px;}

/* 인트로 영역 */

#introduce .intro-box {background-size:cover; padding:80px 40px;} 
#introduce h3 {font-size:28px; line-height:34px; padding-bottom:10px;}
#introduce p {font-size:13px; line-height:18px; padding-bottom:20px;}

/* 홍보영상 영역 */
#movie {background-size:cover; height:auto; padding:30px;} 
#movie h3 {font-size:28px; line-height:34px;}

/* 제품소개 영역 */
#product {padding:60px 20px;}
#product h2 {font-size:28px; line-height:34px;}
#product p {font-size:13px; line-height:18px; padding-bottom:20px;}

/* 빠른문의 영역 */
#cs-qna {padding:0px; }
#cs-qna .cs-formmail {display:inline-block; width:60%; vertical-align:top; text-align:left; padding:0 20px;}
#cs-qna .cs-formmail h4 {padding-bottom:20px;}
#cs-qna .cs-info {padding-left:20px;}

#customer {padding:0;}

/* 공지사항 추출 */
.board_output td {font-size:12px; height:24px;}
.board_output a { font-size:13px !important;}
.notice {padding:20px;}

/* 고객센터 영역 */
#customer .cs-center ul {padding:0 10px;}
#customer .cs-center li.tel_num {font-size:28px; padding-bottom:10px;}
#customer .cs-box-bg {background-size:cover;}
#customer .cs-box-bg {height:160px;}
#customer .cs-icon li {height:160px;}
#customer .cs-icon li a {padding-top:20px;}

/* 하단 풋터 영역 */
#footer {padding:30px 20px;}
#footer .copyright {font-size:13px; line-height:20px;}
}


@media all and (max-width: 992px) {
/* Info 배너 */
.info {width:50%;}
}


@media all and (max-width: 768px) {

p br {display:none;}

/* Info 배너 */
.info {width:50%;}
.info > img {height:220px;}
.info .info-content p {font-size:14px; line-height:22px;}

/* 홍보영상 영역 */
#movie {padding:50px;}
#movie .sm-tit {font-size:12px; padding-bottom:5px; text-align:center;}
#movie h3 {font-size:20px; padding-bottom:15px;text-align:center;}
#movie .youtube-wrap {padding:30px 0 0;}
#movie .youtube-txt {width:100%; text-align:justify;}
#movie .youtube-wrap {width:100%; padding-left:0px; padding-top:20px;}
#movie p {font-size:13px; line-height:20px;}

/*비지니스*/
#business{padding:40px 20px 20px;}
#business h2{font-size: 21px;}
#business ul{width: 100%;display: block; float: left;margin-top: 40px;}
#business ul li{width: 46.8%; float: left;}

#business ul li img{width: 100%;}
#business ul li:hover{margin-top: 0;}

/* 소개 영역 */
#introduce{background-image: none; height: auto;}
#introduce .intro-box {width: 100%;
    background-size: cover;padding:60px 40px;background:url('/img01/intro_bg_m.png') right bottom no-repeat;}
#introduce .intro-box h3 {z-index: 1; font-size:20px; line-height:28px; padding-bottom:10px;}
#introduce .intro-box .p-big {font-size:14px; line-height:22px;}
#introduce .intro-box p{font-size: 14px;line-height: 22px;}
#introduce .intro-box h3::before{z-index: -1;width: 43px;    left: -15px;
    top: -14px;
    height: 43px;}

/*프로그램*/
#program{padding:40px 20px}
#program h2{font-size: 21px;    padding: 0 0 40px 0;}

#program ul li{width: 48%; margin-right: 10px; margin-bottom: 20px;}
#program ul li:hover{margin-top: 0;}
#program ul li img{width:100%}
#program ul li:nth-child(even){margin-right: 0;}

/* 소개 버튼 디자인 */
a.intro-btn {margin-top:10px; font-size:13px; }
a.intro-btn0 {margin-top:10px; font-size:13px; }
a.intro-btn1 {margin-top:10px; font-size:13px; }
a.intro-btn2 {margin-top:10px; font-size:13px; }

/* 제품소개 영역 */
#product {padding:40px 20px;}
#product h2 {font-size:24px; line-height:30px;}
#product p {padding-bottom:10px; text-align: center;}


#product h2::before{width: 40px;
    height: 40px;left: 63.5%;
    top: -15px;}


/* 고객센터 영역 */
#customer {background-attachment:scroll;}
#customer h3 {font-size:15px;}
#customer .cs-box-bg {height:auto; padding:25px;}
#customer .cs-center {width:100%; padding-left:0;}
#customer .cs-center ul {padding:0; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,0.3);}
#customer .cs-icon {width:100%;}
#customer .cs-icon li {height:auto; border-left:0;}
#customer .cs-icon li a {padding-top:20px;}
#customer .cs-icon ul li img {width:auto;}
#customer .cs-icon li i {font-size:28px;}
.icon-tit {font-size:14px; padding:5px 0;}
.icon-img {height:40px;}

/* 하단 풋터 영역 */
#footer .footer_copyright li {width:100%;}
}





@media all and (max-width: 480px) {

/* Info 배너 */
.info {width:100%;}

/* 소개 영역 */
#introduce .intro-box {padding:40px 20px;}

/* 홍보영상 영역 */
#movie {padding:30px;}

/* 하단 풋터 영역 */
#footer .footer_util li a {padding:2px 10px;}

}

#ol_after{display: none;}