@charset "utf-8";

/* wrap */
#wrap{position:relative; width:100%; height:100%; text-align:left; overflow:hidden;}


/* header */
#header{position:absolute; top:0; left:0; right:0; height:60px; background:#018de7; z-index:99; padding-left:220px; overflow:hidden; box-sizing:border-box}
#header:after {content:''; display:block; clear:both;}

.logo{position:absolute; top:0; left:0}
.logo a{display:block; width:220px; height:60px; background:url('../images/common/linkbiz_logo.png') no-repeat 50% 50%; background-size:auto 30px;}

.side_toggle{display:block; position:absolute; top:0; left:220px; width:20px; height:60px; background:#018de7; z-index:1}
.side_toggle:before {display:block; content:''; position:absolute; top:24px; left:50%; margin-left:-10px; width:20px; height:2px; background:#fff; transition:all .20s ease;}
.side_toggle:after {display:block; content:''; position:absolute; top:34px; left:50%; margin-left:-10px; width:20px; height:2px; background:#fff; transition:all .20s ease;}
.side_toggle span {display:block; content:''; position:absolute; top:29px; left:50%; margin-left:-10px; width:20px; height:2px; background:#fff; transition:all .20s ease; text-indent:-9999px;}
.side_toggle.active span {margin-left:-16px}


/* gnb */
.gnb_carousel{position:relative; overflow:hidden; padding-left:20px}
.gnb_carousel .carousel_box{float:left; padding:0 15px}

.gnb_carousel .carousel_box a{display:block; position:relative; height:60px; line-height:60px; font-size:18px; font-weight:normal; letter-spacing:-0.8px; color:rgba(255,255,255,1); transition:all .25s ease;}
.gnb_carousel .carousel_box a:hover, .gnb_carousel .carousel_box a:focus{color:rgba(255,255,255,1);}
.gnb_carousel .carousel_box.active a{color:rgba(255,255,255,1);}
.gnb_carousel .carousel_box.active a:after
{
    content:""; position:absolute; bottom:0; left:0; width:100%; height:4px; background:#fff;
}

.gnb_carousel .carousel_box.inactive a{color:rgba(255,255,255,.4)}

.gnb_carousel .slick-arrow{display:block; position:absolute; width:20px; height:30px; padding:0; box-shadow:3px 0px 6px 0 rgba(0,0,0,.2); background:#018de7;  border:0; outline:none; font-size:0; cursor:pointer; z-index:1; transition:all .20s ease}
.gnb_carousel .slick-prev{left:0; top:0}
.gnb_carousel .slick-next{left:0; bottom:0}
.gnb_carousel .slick-prev:before,
.gnb_carousel .slick-next:before{content:''; position:absolute; top:50%; left:50%; width:7px; height:12px; margin-top:-6px; margin-left:-3.5px; opacity:1; transition:all .10s ease}
.gnb_carousel .slick-prev:before{background:url("../images/common/gnb_back.png") 50% 50% no-repeat; background-size:7px 12px}
.gnb_carousel .slick-next:before{background:url("../images/common/gnb_next.png") 50% 50% no-repeat; background-size:7px 12px}
.gnb_carousel .slick-prev.slick-disabled:before,
.gnb_carousel .slick-next.slick-disabled:before{opacity:.5}

.gnb_carousel .slick-dots{display:block; position:absolute; bottom:5px; width:100%; text-align:left}
.gnb_carousel .slick-dots li{display:inline-block; position:relative; margin:0 3px}
.gnb_carousel .slick-dots li button{display:block; position:relative; width:5px; height:5px; padding:0; padding:0; font-size:0; line-height:0; background:rgba(255,255,255,.2); cursor:pointer; border:0; outline:none; border-radius:50%; transition:all .40s ease; z-index:1}
.gnb_carousel .slick-dots li.slick-active button{background:rgba(255,255,255,1)}












/* adaption */
.adaption{position:absolute; right:0; top:0; height:60px; padding:0 20px; transition:all .25s ease;}
.adaption .expert_info{position:relative; float:left; height:60px; padding-left:35px; padding-right:12px; overflow:hidden; box-sizing:border-box; margin-right:12px;}
.adaption .expert_info:after{content:''; position:absolute; right:0; top:50%; width:1px; height:14px; margin-top:-7px; background:rgba(255,255,255,.2);}
.adaption .expert_info .cover{position:absolute; left:0; top:50%; width:30px; height:30px; margin-top:-15px; border-radius:50%; background:rgba(255,255,255,.2); text-align:center; color:#fff; font-size:18px;}
.adaption .expert_info .cover i{line-height:30px;}
.adaption .expert_info .name{display:inline-block; font-size:13px; letter-spacing:normal; color:#fff; line-height:60px; font-weight:normal;}

.adaption .push{position:relative; float:left; padding-top:7px; overflow:hidden; height:60px; box-sizing:border-box; margin-right:12px;}
.adaption .push:after{content:''; position:absolute; right:0; top:50%; width:1px; height:14px; margin-top:-7px; background:rgba(255,255,255,.4);}
.adaption .push li{float:left; margin-right:12px;}
.adaption .push li a{display:block; padding:8px 0; position:relative;}
.adaption .push li a i{display:inline-block; font-size:16px; vertical-align:middle; color:rgba(255,255,255,.7);}
.adaption .push li a .push_count
{
    display:inline-block; width:30px; height:30px; margin-left:2px; background:rgba(0,149,218,.6); line-height:31px; text-align:center;
    font-size:11px; font-weight:300; color:#fff; vertical-align:middle; border-radius:50%; transition:all .25s ease;
}
.adaption .push li a:hover .push_count{background:rgba(0,149,218,.8);}

.adaption .search_user{position:relative; float:left; padding-top:15px; margin-right:10px}
.adaption .search_user .search_area{display:inline-block; position:relative; height:30px; vertical-align:middle; border-radius:0}
.adaption .search_user .search_area input{position:relative; height:30px; line-height:30px; margin:0; border:0; margin:0; padding:0 10px; padding-right:32px; text-align:left; font-size:13px; color:#404040; box-sizing:border-box; font-weight:normal; background:rgba(255,255,255,.8); border-radius:2px}
.adaption .search_user .search_area .btn_search{display:block; font-size:14px; position:absolute; right:0; top:0; width:32px; height:30px; margin:0; padding:0; text-align:center; color:#606060; border:0; background:none; border-radius:0; cursor:pointer;}
.adaption .search_user .search_area .btn_search i{line-height:30px}
.adaption .search_user .search_area input::-webkit-input-placeholder{color:#606060}
.adaption .search_user .search_area input::-moz-placeholder{color:#606060}
.adaption .search_user .search_area input:-ms-input-placeholder{color:#606060}


.adaption .logout{position:relative; float:left; padding-top:15px;}
.adaption .logout_btn
{
    display:inline-block; height:30px; line-height:30px; border:0; margin:0; padding:0; background:none;
    vertical-align:middle; text-align:center; cursor:pointer; box-sizing:border-box;
    font-size:13px; color:#fff; font-weight:normal;
}
.adaption .logout_btn i{font-size:14px; color:rgba(255,255,255,.7); margin-right:2px;}


/* side_nav */
#side_nav{position:absolute; top:0; bottom:0; background:#f2f3f7; width:220px; padding-top:60px; z-index:88}
#side_nav:after {content:''; display:block; clear:both;}
.side_nav_split{left:0; transition:all .40s ease;}
.side_nav_split.active{left:-220px;}

.lnb_tit{position:relative; height:60px; padding:16px 0 0; overflow:hidden; box-sizing:border-box; background:#678fbe}
.lnb_tit .tit{display:block; text-align:center; color:#fff; font-weight:300; font-size:18px; letter-spacing:-1px; line-height:150%;}


.mail_workset{height:103px; border-bottom:1px solid #ddd;}
.mail_workset .workset_btn{padding:10px 15px 6px; overflow:hidden;}
.mail_workset .workset_btn li{float:left; width:50%;}
.mail_workset .workset_btn li a
{
    display:block; line-height:150%; margin:0; padding:0;
    color:#404040; text-align:center; background:#fff; border:1px solid #ddd;
    letter-spacing:normal; cursor:pointer; font-weight:300; transition:all .25s ease;
}
.mail_workset .workset_btn li:nth-child(1) a{border-radius:2px 0 0 2px;}
.mail_workset .workset_btn li:nth-child(2) a{border-radius:0 2px 2px 0; margin-left:-1px;}
.mail_workset .workset_btn li a:hover{background:#f2f3f7;}
.mail_workset .workset_btn li a span{display:block; padding:13px 0 12px; font-size:13px;}

.mail_workset .mailbox_head{position:relative; padding:0 15px 0; overflow:hidden;}
.mail_workset .mailbox_head .inner{float:left; width:50%; text-align:center;}
.mail_workset .mailbox_head .inner .unread_ch{display:inline-block;}
.mail_workset .mailbox_head .inner .unread_ch .ct_num, .mail_workset .mailbox_head .inner .unread_ch span{display:block; letter-spacing:-0.5px; line-height:150%; font-size:13px;}
.mail_workset .mailbox_head .inner .unread_ch .ct_num{font-weight:300; color:#404040; letter-spacing:normal;}
.mail_workset .mailbox_head .inner .unread_ch span{color:#808080;}

.mail_workset .mailbox_head .inner .important_ch{display:inline-block; position:relative; padding-top:18px;}
.mail_workset .mailbox_head .inner .important_ch:after{content:"\f005"; position:absolute; left:0; top:0; width:100%; font-weight:600; font-family:"Font Awesome 5 Pro"; font-size:13px; color:#0095da; text-align:center;}
.mail_workset .mailbox_head .inner .important_ch span{display:block; letter-spacing:-0.5px; line-height:150%; font-size:13px; color:#808080;}

.mail_box{position:absolute; top:224px; right:0; left:0; bottom:105px; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;}
.mail_box .box_inner{position:relative;}

.mail_cloud{position:absolute; bottom:0; right:0; left:0; height:105px; border-top:1px solid #ddd;}

.cloud_vol{position:relative; padding:15px 15px 0;}
.cloud_vol .state_bar{position:relative; height:10px; background:#e9e9e9;}
.cloud_vol .state_bar:before{content:''; position:absolute; top:0; left:0; width:100%; height:1px; background:#cfcfcf;}
.cloud_vol .state_bar .bar_loading{position:absolute; top:0; left:0; width:0; height:100%; background:#0095da;}

.cloud_vol .state_info{overflow:hidden; padding-top:5px; line-height:150%; font-size:12px; letter-spacing:-0.5px;}
.cloud_vol .state_info .tit{float:left; color:#404040;}
.cloud_vol .state_info .ct_num{float:right; color:#808080; letter-spacing:normal}
.cloud_vol .state_info .ct_num strong{font-weight:normal;}


.lnb_normal{position:absolute; top:120px; right:0; left:0; bottom:41px; overflow-y:auto; border-right:1px solid #b0b0b0; overflow-x:hidden; -webkit-overflow-scrolling:touch;}
.lnb_normal .lnb_list{position:relative;}
.lnb_normal .lnb_list .dep_1 > a{display:block; position:relative; height:45px; line-height:45px; font-size:15px; color:#404040; padding:0 15px; border-bottom:1px solid #dadada; letter-spacing:-0.5px; font-weight:300; cursor:pointer; transition:all .25s ease;}
.lnb_normal .lnb_list .dep_1 > a:hover{background:#fff;}
.lnb_normal .lnb_list .dep_1.active > a{color:#018de7; background:#fff;}
.lnb_normal .lnb_list .dep_1 > a > span{display:block; padding-right:15px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.lnb_normal .lnb_list .dep_1.dep-sub > a > span:after{content:"\f077"; font-weight:300; position:absolute; right:15px; top:0; font-size:14px; color:#808080; font-family:"Font Awesome 5 Pro"; transform:rotate(-180deg); transition:all .25s ease;}
.lnb_normal .lnb_list .dep_1.dep-sub.active > a{color:#018de7; background:#fff;}
.lnb_normal .lnb_list .dep_1.dep-sub.active > a > span:after{transform:rotate(0deg);}

.lnb_normal .lnb_list .dep_2{display:none;}
.lnb_normal .lnb_list .dep_2 > li{position:relative;}
.lnb_normal .lnb_list .dep_2 > li:last-child > a{border-bottom:1px solid #ddd;}
.lnb_normal .lnb_list .dep_2 > li > a{display:block; position:relative; height:32px; line-height:32px; font-size:13px; color:#606060; padding:0 15px; padding-left:31px; letter-spacing:-0.5px; font-weight:normal; transition:all .25s ease;}
.lnb_normal .lnb_list .dep_2 > li > a:hover{background:#fff;}
.lnb_normal .lnb_list .dep_2 > li.active > a{color:#018de7; background:#fff;}
.lnb_normal .lnb_list .dep_2 > li > a > i{position:absolute; left:15px; top:9px; color:#b1b1b1; font-size:18px; transition:all .25s ease;}
.lnb_normal .lnb_list .dep_2 > li > a > span{display:block; padding-right:15px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.lnb_normal .lnb_list .dep_2 > li.dep-sub > a > span:after{content:"\f0d8"; font-weight:900; position:absolute; right:14px; top:0; font-size:15px; color:#808080; font-family:"Font Awesome 5 Pro"; transform:rotate(-180deg); transition:all .25s ease;}
.lnb_normal .lnb_list .dep_2 > li.dep-sub.active > a{color:#018de7; background:#fff;}
.lnb_normal .lnb_list .dep_2 > li.dep-sub.active > a > span:after{transform:rotate(0deg);}
.lnb_normal .lnb_list .dep_2 > li.dep-sub.active > a > i{color:#018de7;}


.lnb_normal .lnb_list .dep_2 > li:first-child.active > a:before{display:none}
.lnb_normal .lnb_list .dep_2 > li:last-child.active > a:after{display:none}

.lnb_normal .lnb_list .dep_3{display:none;}
.lnb_normal .lnb_list .dep_3 > li{position:relative;}
.lnb_normal .lnb_list .dep_3 > li:hover{background:#fff;}
.lnb_normal .lnb_list .dep_3 > li > a{display:block; position:relative; height:30px; line-height:30px; font-size:12px; color:#606060; padding:0 30px; letter-spacing:-0.5px; font-weight:normal; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.lnb_normal .lnb_list .dep_3 > li > a:before{content:""; position:absolute; left:23px; top:50%; width:3px; height:3px; background:#b1b1b1; margin-top:-1.5px; border-radius:50%;}
.lnb_normal .lnb_list .dep_3 > li > a > span{display:block; padding-right:15px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.lnb_normal .lnb_list .dep_3 > li.active > a{color:#018de7;}


/* container */
#container{position:relative; height:100%; overflow:hidden; box-sizing:border-box;}
#container:after{content:''; display:block; clear:both;}
.mcontainer_split{padding:60px 0 41px 220px; transition:all .40s ease;}
.mcontainer_split.active{padding-left:0;}
.scontainer_split{padding:60px 0 41px 220px; transition:all .40s ease;}
.scontainer_split.active{padding-left:0;}
.lcontainer{background:#f2f3f7;}
.econtainer{background:#f2f3f7; position:relative;}


/* mcontents */
.mcontents{position:relative; height:100%; background:#fff}
.mcontents:after{content:''; display:block; clear:both;}
.mcontents .mcontents_flex{position:absolute; top:0; right:0; bottom:0; left:0; padding:15px; overflow-y:auto; overflow-x:auto; box-sizing:border-box; -webkit-overflow-scrolling:touch;}
.mcontents .mcontents_flex .dev_contents{position:relative; min-width:950px; height:100%;}


/* scontents */
.scontents{position:relative; height:100%;}
.scontents:after{content:''; display:block; clear:both;}
.scontents .scontents_fix{position:relative; height:60px; background:#fff; padding:0 25px; box-sizing:border-box; border-bottom:1px solid #dadada}
.scontents .scontents_fix.mail{padding:10px 25px; height:47px;}
.scontents .scontents_fix.mailset{padding:10px 25px; background:#f2f3f7; box-sizing:border-box;}
.scontents .scontents_fix.mailset.row1{height:47px;}
.scontents .scontents_fix.mailset.row3{height:109px;}
.scontents .scontents_fix.mailset.row4{height:137px;}

.scontents .scontents_fix.calendar{padding:10px 25px; height:47px;}
.scontents .scontents_flex{position:absolute; top:60px; right:0; bottom:0; left:0; padding:15px 25px; overflow-y:auto; overflow-x:auto; box-sizing:border-box; -webkit-overflow-scrolling:touch;}
.scontents .scontents_flex.intro{top:0; overflow:hidden;}
.scontents .scontents_flex .dev_contents{position:relative; min-width:950px; height:100%}
.scontents .scontents_flex .dev_contents:after{content:''; display:block; width:100%; height:50px}
.scontents .scontents_flex.mail{top:107px;}
.scontents .scontents_flex.mailset3{top:169px;}
.scontents .scontents_flex.mailset4{top:197px;}
.scontents .scontents_flex.calendar{top:107px;}


/* 공통 footer */
#footer{position:absolute; bottom:0; left:0; right:0; height:40px; background:#fff; border-top:1px solid #ddd; z-index:999;}
#footer:after{content:''; display:block; clear:both;}
.footer_inner{position:relative; padding:0 15px;}
.footer_inner .copyright{color:#808080; letter-spacing:0.2px; font-size:11px; line-height:150%; padding-top:12px;}
.footer_inner .copyright strong{font-weight:normal;}
.footer_inner .footer_link{position:absolute; right:10px; top:10px; overflow:hidden;}
.footer_inner .footer_link li{position:relative; float:left;}
.footer_inner .footer_link li:before{content:''; position:absolute; left:0; top:50%; width:1px; height:12px; margin-top:-6px; background:#ddd;}
.footer_inner .footer_link li:first-child:before{display:none;}
.footer_inner .footer_link li a{display:block; padding:0 8px; font-size:12px; font-weight:normal; letter-spacing:-0.2px; line-height:150%; color:#808080;}
.footer_inner .footer_link li a strong{font-weight:normal; color:#404040;}