@charset "utf-8";

@keyframes fadeInOut {
    0% {opacity: 0.8;}
    10% {opacity: 0.9;}
    20% {opacity: 1;}
    50% {opacity: 1;}
    80% {opacity: 1;}
    90% {opacity: 0.9;}
    100% {opacity: 0.8;}
}

@keyframes vline {
    0% {opacity:0}
   33% {opacity:1; width:100%}
   66% {opacity:1; width:100%}
   100% {opacity:0; width:0}
}

/* Common */
.clear_fix {*zoom:1}
.clear_fix:after {content: ""; display: block; clear: both}
button {background:none;}
.gnb .main_menu .sub_menu {display:none;}

/* visual */
.visual_wrp {width:100%; position: relative;}
.visual_wrp .slider_btn {position:absolute;}
.visual_wrp .slider_btn li button {display: block; width: 10px; height: 10px; border-radius: 50px; cursor: pointer; background: rgba(255,255,255,0.5); box-shadow: 0 1px 5px rgba(0,0,0,0.2);}
.visual_wrp .slider_btn li button.active {width:36px; background:#fff;}
.visual_wrp .visual_img p {display:none; animation: fadeInOut 20s infinite;}
.visual_wrp .visual_img p.active {display:block;}

/* 보유역량 */
.quickbtn {position:absolute; right:10px; top:10px; z-index: 1;}
.quickbtn > ul > li > p {width:100px; height:31px; line-height:31px; cursor: pointer; color:#fff; box-sizing: border-box; padding:0 30px 0 10px; border-radius:50px;}
.quickbtn .poss p {background:url(../media/top_arr.png) no-repeat right 10px center #7c8bff9e;}
.quickbtn .joinbox p {background:url(../media/top_arr.png) no-repeat right 10px center #808b9f92;}
.posswrp {border-radius:10px; background:#fff; box-shadow:2px 2px 2px #000; width:442px; height:679px; box-sizing: border-box; padding:65px 20px 15px 20px; display:none; position:absolute; z-index:1;}
.posswrp .tab_txt {display:none;}
.posswrp .tab_txt p {width:403px; height:569px; overflow:hidden; border-radius:10px; border:1px solid #e8e8e8; box-sizing: border-box; margin:0 auto; background:#fff; display:none;}
.posswrp .tab_txt p.show {display:block;}
.posswrp .tab_txt p img {width:100%; height:100%;}
.posswrp .on .tab_txt {display:block;}
.posswrp h4 {position:absolute; top:25px;}
.posswrp .tab01 h4 {left:0; padding-left:50px;}
.posswrp .tab02 h4 {left:25%; padding-left:35px;}
.posswrp .tab03 h4 {right:25%; padding-right:30px;}
.posswrp .tab04 h4 {right:0; padding-right:50px;}
.posswrp h4 a {font-size:16px; font-weight:400; color:#868686; display:block}
.posswrp .on h4 a {color:#2260ff; font-weight:500;}
.posswrp .tab_box .popup_btn {display:none;}
.posswrp .tab_box.on .popup_btn {display:block; margin-top:10px;}

#loginwrp {display:none;}



/* 솔루션 */
.solution .solution_wrp li {margin-bottom:68px;}
.solution .solution_wrp li:last-child {margin-bottom:0;}
.solution .solution_wrp li > div {border-radius:10px; background:#fff; box-shadow:2px 2px 5px #00000029; box-sizing: border-box; padding:10px; height:225px;}
.solution .solution_wrp li > div h6 {height:37px; line-height:37px; font-size:17px; font-weight:500; text-align:center; color:#474747; border-radius:10px; border:1px solid #adadad; box-shadow:3px 3px 0 #e5e5e5;}
.solution .solution_wrp li > div .txt {margin:10px 0; text-align:center; font-size:14px; color:#414141; line-height:120%;}
.solution .solution_wrp li > div > .shap {text-align:center; border-radius:10px; color:#fff; background:#8f8f8f; font-size:14px; font-weight:300; padding:10px 5px;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis}
.solution .solution_wrp li > div > a {border-radius:50px; text-align:center; width:173px; height:35px; background:linear-gradient(to right, #2a51a2, #1d7bdb); display:block; margin:10px auto 0; }
.solution .solution_wrp li > div > a span {display:block; background:url(../media/solution_icon01m.png) no-repeat left 24px center, url(../media/solution_icon02m.png) no-repeat right 15px center; line-height:35px; color:#fff; font-size:14px; font-weight:500;}

/* 제품소개 */
.contents .product .strbox {position: relative;}
.contents .product .strbox .prtab_txt {display:none;}
.contents .product .strbox .on .prtab_txt {display: block;}
.contents .product .strbox .prtab_txt .pro_txt {padding:60px 15px 15px; border-radius:10px; background:#fff; border:1px solid #f4f4f4; box-sizing: border-box; margin-top:13px;}

.contents .product {position: relative; padding:5px 0;}
.contents .product h4 {font-size:20px; font-weight:600;}
.contents .product .more {position:absolute; right:0; top:0;}
.contents .product .tittxt {margin:10px 0 25px; font-size:15px;}
.contents .product .strbox .video {border-radius:10px; background:#414141; text-align: center; overflow:hidden;}
.contents .product .strbox .prtab_txt .pro_txt p {line-height:125%; font-size:15px;}
.strbox .pr_box h5 a {font-size:16px; font-weight:400; color:#9a9a9a; padding:10px 0; text-align:center; position:absolute; width:calc(50% - 10px); top:265px; border-top:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0;}
.strbox .box01 h5 a {left:10px; border-left:1px solid #e0e0e0; border-radius:10px 0 0 10px;}
.strbox .box02 h5 a {right:10px; border-right:1px solid #e0e0e0; border-radius:0 10px 10px 0}
.strbox .pr_box.on h5 a {background:#1e88ff; font-weight:500; color:#fff;}

.contents .insight {position: relative; padding:5px 0;}
.contents .insight .more {position:absolute; right:0; top:0;}
.contents .insight .tittxt {margin:10px 0 25px; font-size:15px;}
.contents .insight h4 {font-size:20px; font-weight:600;}

.contents .insight .insight_wrp {border-top:1px solid #b1b1b1;}
.contents .insight .in_box {margin:20px auto; position: relative; width:366px;}
.contents .insight .in_box .date {font-size:15px; font-weight:500; color:#676767; padding-left:5px;}
.contents .insight .in_box .readmore a {display: block; padding:0 0 0 17px; background:url(../media/ball01.png) no-repeat left center; font-size:13px; letter-spacing:-0.5px; font-weight:500; color:#919191;}
.contents .insight .in_box .readmore {position:absolute; right:10px; top:0;}
.contents .insight .in_box .imagebox {width:366px; height:295px; overflow:hidden; border-radius:5px 5px 0 0; margin-top:10px;}
.contents .insight .in_box .in_titbox {padding:10px; height:103px; box-sizing: border-box; background:#f2f2f2;}
.contents .insight .in_box .in_titbox .blog {background:url(../media/insight_subtit01.png) no-repeat; width:62px; height:24px;}
.contents .insight .in_box .in_titbox .board {background:url(../media/insight_subtit02.png) no-repeat; width:62px; height:24px;}
.contents .insight .in_box .in_titbox .title {font-size:18px; font-weight:700; margin-top:5px; line-height:160%; width: 346px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.contents .insight .in_box .in_txtbox span {width: 336px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size:14px; font-weight:400; line-height:160%;}
.contents .insight .in_box .in_txtbox {padding:15px; background:#fff; border-bottom:1px solid #d4d4d4; border-radius:0 0 5px 5px;}

/*배너*/ 
#main_banner {background:#dcdcdc}
.banner_wrap {padding-left:190px; box-sizing: border-box; height:90px; position: relative;} 
.ban_head .tit {position:absolute; left:10px; top:28px;}

.ban_head .btn_ban {position:absolute; left:150px; top:35px;} 
.ban_head .btn_ban li {float:left; margin-left:15px;}
.ban_head .btn_ban li:first-child {margin:0}
 
.ban_item a {display:block; width:100%; width:228px; height:52px; margin:0 auto; border:1px solid #cdcdcd}
.ban_item img {width:100%; height:100%; margin: 0 auto}
.ban_area {padding:18px 10px 18px 0}

#footwrap {background:#303030; position: relative; padding:10px; box-sizing: border-box;}
#footwrap::before {content:''; display:block; width:100%; height:1px; background:#555; position:absolute; top:63px; left:0;}
#footwrap .foot_lst {padding:15px 0;}
#footwrap .foot_lst ul {display: flex; justify-content: space-around}
#footwrap .foot_lst li a {display:block; font-size:15px; font-weight:300; color:#ebebeb}
#footwrap .foot_lst li.privacy a {color:#feff8d; font-weight:400;}
#footwrap .foot_lst li a:hover {color:#ffffff; transition:0.5s ease-out; font-weight:400;}
#footwrap .foot_lst li.privacy a:hover {color:#ffb700; transition:0.5s ease-out}

#footwrap .foot_bot p {text-align:center; color:#e6e6e6; font-size:15px; font-weight:300; line-height:180%;}
#footwrap .foot_bot p span {display:block; color:#ababab;}

.visual_text {display:none;}




/* MOBILE LAYOUT */
@media only screen and (max-width:767px) {
    .visual_img p {height:560px;}
    .visual_img .v01 {background:url(../media/main_visual_m01.jpg) no-repeat center; }
    .visual_img .v02 {background:url(../media/main_visual_m02.jpg) no-repeat center;}
    .visual_wrp .slider_btn {top:320px; width:100%; text-align:center;}
    .visual_wrp .slider_btn ul {text-align: center;}
    .visual_wrp .slider_btn li {display:inline-block; margin:0 2px;}
    .gnb {position:fixed; top:0; right:-100%; width:100%; height:100%; background:#0000009b; transition:right 0.3s ease-in-out; z-index: 2;}
    .gnb .main_menu {width:279px; height:100%; background:#fff; z-index:1;}
    .gnb-open {right:0; display:flex; flex-direction: row-reverse;}
    .mb_menu {position:absolute; right:19px; top:75px; z-index: 1;}
    .topwrp .logo {position: absolute; left:10px; top:68px; z-index: 1;}
    .gnb .main_menu .login_box {display:flex; border-bottom:2px solid #000; justify-content: space-between; background:#ededed;}    
    .gnb .main_menu .login_box .close {margin-bottom:-5px;}

    .gnb .main_menu .login_box li {display:inline-block;}
    .gnb .main_menu .login_box li a {display:block; height:35px; line-height:35px; font-size:14px; font-weight:500; padding:0 20px 0 35px; border-right:1px solid #d3d3d3;}
    .gnb .main_menu .login_box li.login a {background:url(../media/fem_login_a.png) no-repeat 5px center;}
    .gnb .main_menu .login_box li.join a {background:url(../media/fem_sign_a.png) no-repeat 5px center;}
    
    .gnb .main_menu .mlist > ul > li > a {width:279px; height:50px; line-height:50px; background:url(../media/bg_mn.gif) no-repeat 0 center; display:block; border-bottom:1px solid #cacaca; font-size:16px; padding-left:15px; font-weight:500; color:#303030}
    .gnb .main_menu .mlist > ul > li > a.act {background:url(../media/bg_mn_on.gif) no-repeat 0 center; color:#fff}
    .gnb .main_menu .mlist .sub_menu {padding:10px 15px 40px 15px; background:url(../media/mobile_logo.png) no-repeat right 5px bottom 5px; border-bottom:1px solid #cacaca;}
    .gnb .main_menu .mlist .sub_menu a {display:block; font-size:13px; background:url(../media/gnb_lstblt.gif) no-repeat 0 center; padding-left:15px;}
    .gnb .main_menu .mlist .sub_menu li {padding-bottom:20px;}
    .joinbox {display:none;}
    .posswrp {top:53px; width:100%; left:0; box-shadow: none; border-radius:0; background:#ffffffdb;}
    .posswrp .tab_txt p {width:350px; height:495px;} 

    .solution {position:relative; margin-top:-185px; box-sizing: border-box; padding:10px 5px;}
    .solution .solution_btn {position:absolute; right:15px; top:15px;}
    .solution .solution_btn button {margin-left:3px;}
    .solution .solution_wrp {height:230px; overflow:hidden;}
    .solution .solution_wrp ul {padding:0 5px;}
    .solution h5 {padding-left:5px;}

    /* 컨텐츠 */
    .posswrp .tab_box.on .popup_btn {display:flex; justify-content:flex-end; width:350px; margin:10px auto 0;}
    .posswrp .tab_box.on .popup_btn button {margin-left:15px;}
    .contents_wrap {background:url(../media/main_m_bg01.gif) no-repeat left top, url(../media/main_m_bg02.gif) no-repeat left bottom;}

    .contents_wrap .contents {padding:0 10px;}
    .contents .product .strbox .video iframe {width:100%; height:240px;}
    .contents_wrap .contents > div {margin-bottom:15px;}
    .contents_wrap .contents > div:last-child {margin-bottom:0;}

    .banner {padding-left:220px;}
    #footwrap .foot_bot {padding:27px 10px 70px; background:url(../media/foot_logo.png) no-repeat bottom 20px center; background-size: auto 35px;}



}

/* TABLET LAYOUT 
@media only screen and (min-width:767px) and (max-width:1400px) {
  
}*/


/* PC LAYOUT */
@media only screen and (min-width:768px) {
    #wrap {width:1903px;}
    #mainheader {position: relative;}
    .topwrp {position:absolute; width:100%; z-index: 30; box-sizing: border-box; padding:30px 20px 20px 56px;}
    .topwrp::before {content:''; display:block; width:100%; height: 1px; background:#ffffff3e; position:absolute; top:98px; left:0;}
    .topwrp .logo a img {display:none;}
    .topwrp .logo a {display:block; background:url(../media/main_logo.png) no-repeat; width:243px; height:44px;}
    .topwrp .gnb .login_box {display:none;}

    #menuButton {display:none;}
    .mlist {width:465px; position: absolute; right:160px; top:40px;}
    .mlist > ul {display: flex; justify-content: space-between}
    .mlist > ul > li {position: relative; height:60px;}
    .mlist > ul > li:hover .sub_menu {display:block;}

    .gnb .main_menu .sub_menu {position:absolute; width:190px; background-color:#fff; padding:10px; box-sizing: border-box; box-shadow:2px 2px 2px #00000029; transform: translate(-50%); left:50%; border-radius:10px; top:40px; z-index:20;}
    .gnb .main_menu .sub_menu li {text-align:center; padding:5px 0; border-bottom:1px solid #ccc;}
    .gnb .main_menu .sub_menu li:last-child {border-bottom:0;}
    .gnb .main_menu .sub_menu li a {display:block; padding:12px 0; font-weight:400; border-radius:50px;}
    .gnb .main_menu .sub_menu li a:hover {background:linear-gradient(to right, #3752a2, #427acc); font-weight:500; color:#fff; transition: 0.3s ease-out;}
    .posswrp {right:0; top:98px; box-shadow:none;}
    .posswrp h4 a {font-size:18px;}
    .posswrp .tab01 h4 {padding-left:30px;}
    .posswrp .tab04 h4 {padding-right:30px;}
    .posswrp .tab_box.on .popup_btn {text-align:right;}
    .posswrp .tab_box.on .popup_btn button {margin-left:23px;}
    .mlist .menulist {display:block; color:#fff; font-weight:500; font-size:20px;}
    .quickbtn > ul {display:flex; justify-content: space-between;}
    /*.quickbtn {right:20px; top:35px; width:218px;} 로그인 영역 필요 시 */
    .quickbtn {right:20px; top:35px; width:100px;}
    .visual_img p {height:930px;}
    .visual_img .v01 {background:url(../media/main_visual01.jpg) no-repeat center; }
    .visual_img .v02 {background:url(../media/main_visual02.jpg) no-repeat center;}
    .visual_text {display:block; position: absolute; left:50%; transform: translate(-50%); top:205px; z-index:10;}
    .visual_text::after {content:''; display:block; position:absolute; top:87px; left:0; width:0; height:113px; background:#2d2d2d39; animation: vline 7s infinite; z-index:-1;}
    
    .solution {position:absolute; top:183px; left:55px;}
    .solution h5 img {display:none;}
    .solution h5 {background:url(../media/solution_tit.png) no-repeat; width:251px; height:82px; margin-bottom:27px;}

    .solution .solution_btn {margin-bottom:10px;}
    .solution .solution_btn button {margin-left:3px;}
    .solution .solution_wrp {height:555px; overflow:hidden;}
    .solution .solution_wrp ul {padding:0 5px; transition: 0.5s;}
    .solution .solution_wrp li {margin-bottom:30px;}
    .solution .solution_wrp li > div {width:361px; height:263px;}
    .solution .solution_wrp li > div h6 {font-size:20px; height:45px;}
    .solution .solution_wrp li > div .txt {font-size:16px; line-height:130%; font-weight:400;}
    .solution .solution_wrp li > div > .shap {font-size:17px;}
    .solution .solution_wrp li > div > a {width:207px; height:42px;}
    .solution .solution_wrp li > div > a span {background: url(../media/solution_icon01.png) no-repeat left 24px center, url(../media/solution_icon02.png) no-repeat right 15px center; font-size:16px; line-height:42px;}
    .contents_wrap {background:url(../media/main_bg.gif) no-repeat; height:755px;}
    .contents {width:1400px; margin:0 auto; display:flex; justify-content: space-between; padding-top:75px;}

    .visual_wrp .slider_btn {top:485px; left:50%; transform: translate(-50%);}
    .visual_wrp .slider_btn ul {display:flex;}
    .visual_wrp .slider_btn li {margin:0 5px;}
    .visual_wrp .slider_btn li button.active {width:60px;}

    .contents .product h4, .contents .insight h4 {font-size:36px; padding:0 5px;}
    .contents .product .tittxt {font-size:16px; margin:10px 0 30px; padding:0 5px; font-weight:400;}
    .contents .product {width:583px; padding:0;}
    .contents .product .strbox .video {height:346px;}
    .contents .product .strbox .video iframe {width:583px; height:346px;}
    .strbox .pr_box h5 a {top:370px; font-size:18px;}
    .contents .product .strbox .prtab_txt .pro_txt {height:157px;}
    .contents .product .strbox .prtab_txt .pro_txt p {font-size:16px; color:#303030; font-weight:400; line-height:150%; margin-top:5px;}
    .contents .product .more {right:15px; top:5px;}
    .contents .insight .insight_wrp {display:flex; width:748px; justify-content: space-between}
    .contents .insight .in_box {margin:0; margin-top:26px;}
    .contents .insight .tittxt {font-size:16px; margin:10px 0 25px; padding:0 5px; font-weight:400;}
    .contents .insight .in_box .date {font-size:18px;}
    .contents .insight .in_box .in_txtbox {padding:10px;}
    .banner_wrap {width:1400px; margin:0 auto; padding-left:220px;}
    #footwrap .foot_lst li a {font-size:18px;}
    .foot_box {width:1400px; margin:0 auto;}
    #footwrap .foot_lst ul {justify-content: flex-start}
    #footwrap .foot_lst ul li {margin-right:65px;}
    #footwrap .foot_bot {margin-top:10px; padding:15px 0 50px 260px; background:url(../media/foot_logo.png) no-repeat left 10px;}
    #footwrap .foot_bot p {text-align:left; font-size:16px;}
    .joinbox {position: relative;}
    #loginwrp {position:absolute; width:190px; background-color:#fff; padding:10px; box-sizing: border-box; box-shadow:2px 2px 2px #00000029; transform: translate(-50%); left:50%; border-radius:10px; top:40px; z-index:20;}
    #loginwrp li {text-align:center; padding:5px 0; border-bottom:1px solid #ccc;}
    #loginwrp li:last-child {border-bottom:0;}
    #loginwrp li a {display:block; padding:12px 0; font-weight:400; border-radius:50px;}
    #loginwrp li a:hover {background:linear-gradient(to right, #3752a2, #427acc); font-weight:500; color:#fff; transition: 0.3s ease-out;}

}

@media only screen and (max-width:450px) {
    .banner_wrap {padding-left:140px;}
    .ban_head .btn_ban {display:none;}

}

@media only screen and (max-width:400px) {
    .banner_wrap {padding-left:60px;}
    .ban_head .tit img {height:15px;}
    .ban_head .tit {top:10px}
    .contents .insight .in_box, .contents .insight .in_box .imagebox {width:auto;}
    .contents .insight .in_box .in_titbox .title {width:310px; font-size:16px;}
    .contents .insight .in_box .in_txtbox span {width:310px;}
}