@charset "utf-8";

/* 메인css */
#container {padding-bottom:100px; background: url("../../img/main/bg_main.png") 50% 0 no-repeat;}
/* #container {padding-bottom:100px; background: url("../../img/main/bg_main02.jpg") 50% 0 no-repeat;} */
#container div.main_title{padding-top:50px; text-align:center; color:#fff;}
#container div.main_title h3{font-size:50px; line-height:150%; font-weight:300;}
#container div.main_title h3 span{font-weight:500;}
#container div.main_title p{margin:10px 0 40px; font-size:18px; line-height:160%; font-weight:300;}

#container_wrap:after { display:block; clear:both; content:""; }
#container_wrap div.left, #container_wrap div.right{float:left; width:590px; box-sizing: border-box;}
#container_wrap div.left{margin-right:20px;}

#fade-box{position:relative; width:100%; /* height: 200px; */ overflow:hidden;}
#fade-box > div.fade-visual { position:relative; height:345px;}
#fade-box div.fade-visual ul{height:345px; /* padding-top:50%; */}
#fade-box div.fade-visual li:first-child { display:block; }
#fade-box div.fade-visual li { display:none; height:345px; text-align:center; }
#fade-box div.fade-visual li span {display:block;}
#fade-box div.fade-visual li.bg1 {background:#f8f8f8 url("../../img/main/mainvisual1.png") center top no-repeat;  background-size:100%;}
#fade-box div.fade-visual li.bg2 {background:url("../../img/main/mainvisual2.png") center top no-repeat;  background-size:100%;}
#fade-box div.fade-visual li.bg3 {background:url("../../img/main/mainvisual3.png") center top no-repeat;  background-size:100%;}
#fade-box div.fade-visual li.bg4 {background:url("../../img/main/mainvisual4.png") center top no-repeat;  background-size:100%;}
#fade-box div.fade-visual li.bg5 {background:url("../../img/main/mainvisual5.png") center top no-repeat;  background-size:100%;}
#fade-box div.fade-visual li.bg6 {background:url("../../img/main/mainvisual6.png") center top no-repeat;  background-size:100%;}
#fade-box div.fade-visual li.bg7 {background:url("/img/content/img_pcleeroot01.jpg") center top no-repeat;  background-size:100%;}
#fade-box div.fade-visual li.bg8 {background:url("/img/content/img_pcleeroot02.jpg") center top no-repeat;  background-size:100%;}
#fade-box div.fade-visual li.bg9 {background:url("/img/content/img_pcleeroot03.jpg") center top no-repeat;  background-size:100%;}
#fade-box div.fade-visual li.bg10 {background:url("/img/content/img_pcleeroot04.jpg") center top no-repeat;  background-size:100%;}
#fade-box div.fade-visual li.bg11 {background:url("/img/content/img_pcleeroot05.jpg") center top no-repeat;  background-size:100%;}
#fade-box div.fade-visual li.bg12 {background:url("/img/content/img_pcleeroot06.jpg") center top no-repeat;  background-size:100%;}
#fade-box div.fade-visual li.bg13 {background:url("/img/content/img_pcleeroot07.jpg") center top no-repeat;  background-size:100%;}
#fade-box div.fade-visual li.bg14 {background:url("/img/content/img_pcleeroot08.jpg") center top no-repeat;  background-size:100%;}
#fade-box div.fade-button{display:none;}

div.fade-visual div.fade-prev{position:absolute; width:50px; left:0; top:50%; z-index:20; height:50px; transform:translateY(-50%);}
div.fade-visual div.fade-next {position:absolute; width:50px; right:0; top:50%; z-index:20; height:50px; transform:translateY(-50%);}

div.fade-visual div.fade-prev button,
div.fade-visual div.fade-next button {position:absolute; width:50px; height:50px; border:0;  border-radius:0px; background:rgba(0,0,0,0.7); color: #fff; }

div.fade-visual div.fade-prev button {left:0;}
div.fade-visual div.fade-next button {right:0; }
div.fade-visual div.fade-prev button i,
div.fade-visual div.fade-next button i {font-size:40px; line-height:40px;}

div.fade-visual div.fade-prev button:hover,
div.fade-visual div.fade-next button:hover,
div.fade-visual div.fade-prev button:active,
div.fade-visual div.fade-next button:active{background:rgba(0,0,0,1.0);}

div.fade-visual div.fade-prev button:hover i,
div.fade-visual div.fade-next button:hover i,
div.fade-visual div.fade-prev button:active i,
div.fade-visual div.fade-next button:active i{color:#fff;}

#container_wrap div.left div.quick{}
#container_wrap div.left div.quick ul:after { display:block; clear:both; content:""; }
#container_wrap div.left div.quick ul li{float:left; width:25%; height:148px; box-sizing: border-box;}
#container_wrap div.left div.quick ul li:first-child{background:#043096;}
#container_wrap div.left div.quick ul li:nth-child(2){background:#93723c;}
#container_wrap div.left div.quick ul li:nth-child(3){background:#a50a0a;}
#container_wrap div.left div.quick ul li:last-child{background:#707070;}
#container_wrap div.left div.quick ul li:hover{background:#333;}
#container_wrap div.left div.quick ul li a{display:block; padding-top:10px; text-align:center; font-size:16px; line-height:160%; color:#fff;}
#container_wrap div.left div.quick ul li a span{display:inline-block; width:130px; height:95px; background:url("../../img/main/main_illust.png") no-repeat;}
#container_wrap div.left div.quick ul li:first-child span{background-position:0px 0px;}
#container_wrap div.left div.quick ul li:nth-child(2) span{background-position:-145px 0px;}
#container_wrap div.left div.quick ul li:nth-child(3) span{background-position:-295px 0px;}
#container_wrap div.left div.quick ul li:last-child span{background-position:-442px 0px;}

#container_wrap div.right div.notice{padding:30px; height:280px; background:#a50a0a url("../../img/layout/pattern_red.png") 50% 0 no-repeat; color:#fff; box-sizing: border-box;}
#container_wrap div.right div.notice h4{position:relative; font-size:22px; line-height:130%;}
#container_wrap div.right div.notice h4 span{position:absolute; top:-2px; right:0;}
#container_wrap div.right div.notice ul{margin-top:20px;}
#container_wrap div.right div.notice ul li{position:relative;}
#container_wrap div.right div.notice ul li:before{position:absolute; left:0; top:50%; transform:translateY(-50%); background:#fff; width:2px; height:2px; content:"";}
#container_wrap div.right div.notice ul li a{display:block; color:#fff; font-size:16px; line-height:170%; font-weight:300; height:43px; overflow: hidden; }
#container_wrap div.right div.notice ul li a span.tit{padding-left:10px; display:inline-block; width:65%; height:43px; line-height:43px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#container_wrap div.right div.notice ul li a span.date{position:absolute; top:0; right:0; line-height:40px;}
#container_wrap div.right div.notice ul li.no_data{line-height:170px; text-align:center; font-size:16px; border-top:1px dotted #af4343; border-bottom:1px dotted #af4343;}
#container_wrap div.right div.notice ul li.no_data:before{display:none;}
#container_wrap div.right div.shortcut{margin-top:20px;}
#container_wrap div.right div.shortcut ul:after { display:block; clear:both; content:""; }
#container_wrap div.right div.shortcut ul li{float:left; width:285px; box-sizing: border-box; color:#fff;}
#container_wrap div.right div.shortcut ul li:first-child{margin-right:20px; background:#938e86 url("../../img/main/shortcut_bg01.png") right bottom no-repeat;}
#container_wrap div.right div.shortcut ul li:last-child{background:#93723c url("../../img/main/shortcut_bg02.png") right bottom no-repeat;}
#container_wrap div.right div.shortcut ul li > a{position:relative; display:block; padding:30px; height:193px; color:#fff; box-sizing: border-box;}
#container_wrap div.right div.shortcut ul li > a h4{font-size:22px; line-height:130%;}
#container_wrap div.right div.shortcut ul li > a p{margin-top:10px; font-size:16px;}
#container_wrap div.right div.shortcut ul li > a span{position:absolute; bottom:30px; left:30px; display:inline-block; padding:8px 15px; font-size:14px; border:1px solid #fff;}
#container_wrap div.right div.shortcut ul li > a span:hover{background:#fff; color:#333; font-weight:400;}

#container_wrap div.bttom_teb div.group{width:100%; margin-top:20px; float:left;}
#container_wrap div.bttom_teb > div.group div.left{width:25%; margin:0%;font-size:18px;}
/* #container_wrap div.bttom_teb >  div.group div.left > a{display:block; text-align:center;  padding:2%; box-sizing:border-box;}
#container_wrap div.bttom_teb > div.group div.left > a > p{color:#fff; padding-bottom:15px;}
#container_wrap div.bttom_teb > div.group div.left span{position:relative; margin:0 auto; display:block; width:120px; height:120px; background:url("../../img/main/ico_bottom.png")no-repeat;}
 */

#container_wrap div.bttom_teb >  div.group div.left > a{position:relative; display:block;adding:2%; box-sizing:border-box;}
#container_wrap div.bttom_teb > div.group div.left > a > p{position:absolute; top:53px; left:140px; color:#fff; padding-bottom:15px;}
#container_wrap div.bttom_teb > div.group div.left span{position:relative; display:block; width:120px; height:120px; background:url("../../img/main/ico_bottom.png")no-repeat;}


#container_wrap div.bttom_teb > div.group div.left:nth-child(1) span{background-position:0px -120px;}
#container_wrap div.bttom_teb > div.group div.left:nth-child(2) span{background-position:-120px -120px;}
#container_wrap div.bttom_teb > div.group div.left:nth-child(3) span{background-position:-240px -120px;}
#container_wrap div.bttom_teb > div.group div.left:nth-child(4) span{background-position:-360px -120px;}

#container_wrap div.bttom_teb > div.group div.left:nth-child(1):hover span{background-position:0px 0px;}
#container_wrap div.bttom_teb > div.group div.left:nth-child(2):hover span{background-position:-120px 0px;}
#container_wrap div.bttom_teb > div.group div.left:nth-child(3):hover span{background-position:-240px 0px;}
#container_wrap div.bttom_teb > div.group div.left:nth-child(4):hover span{background-position:-360px 0px;}


/* no_data */
div.more_borad.business ul li.no_data{display:none; height:264px; line-height:264px;}
#m_sec2 .lawdata ul li.no_data{display:none; height:198px; line-height:198px; background:none;}
#m_sec2 .newsletter p.no_data{display:none;}
div.borad ul li.no_data{display:none; height:84px; line-height:84px;}

@media screen and (max-width: 740px){
#container {padding-bottom:50px; background: url("../../img/main/bg_main.png") 50% 0 no-repeat; background-attachment:fixed; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover; background-size: cover;}

#container div.main_title{padding-top:50px;}
#container div.main_title h3{padding:0 10%; font-size:7.5vw; box-sizing: border-box;}
#container div.main_title h3 span{font-weight:500;}
#container div.main_title p{font-size:3.4vw; line-height:160%; font-weight:300;}

#container_wrap div.left, #container_wrap div.right{float:none; width:100%; padding:0 4%; box-sizing: border-box;}
#container_wrap div.left{margin-right:20px;}

#fade-box{position:relative; width:100%; /* height: 200px; */ overflow:hidden;}
#fade-box > div.fade-visual { position:relative; height:auto; }
#fade-box div.fade-visual ul{height:auto; padding-top:57.5%;}
#fade-box div.fade-visual li:first-child { display:block; }
#fade-box div.fade-visual li { display:none; height:auto;  text-align:center; }
#fade-box div.fade-visual li span {display:block;}

#container_wrap div.left div.quick{margin-top:20px;}
#container_wrap div.left div.quick ul li{float:left; width:50%; height:148px; box-sizing: border-box;}
#container_wrap div.left div.quick ul li:first-child{background:#043096;}
#container_wrap div.left div.quick ul li:nth-child(2){background:#93723c;}
#container_wrap div.left div.quick ul li:nth-child(3){background:#a50a0a;}
#container_wrap div.left div.quick ul li:last-child{background:#707070;}
#container_wrap div.left div.quick ul li a{display:block; text-align:center; font-size:16px; line-height:160%; color:#fff;}

#container_wrap div.right {margin-top:20px;}

#container_wrap div.right div.notice{padding:30px; height:auto;}
#container_wrap div.right div.notice h4{font-size:22px;}
#container_wrap div.right div.notice ul li.no_data{padding-left:10px;line-height:170%; text-align:left; font-size:14px; border:none;}
#container_wrap div.right div.notice ul li.no_data:before{display:block;}
#container_wrap div.right div.notice ul li a{font-size:14px;}
#container_wrap div.right div.notice ul li a span.tit{padding-left:10px; }
#container_wrap div.right div.shortcut ul li{float:left; width:50%;}
#container_wrap div.right div.shortcut ul li:first-child{margin-right:0px;}

/* #fade-box{width:570px; height: 350px;}
#fade-box > div.fade-visual {height:350px;}
#fade-box div.fade-visual ul{height:350px;}
#fade-box div.fade-visual li{height:570px;}
#fade-box div.fade-visual li.bg1, #fade-box div.fade-visual li.bg2, #fade-box div.fade-visual li.bg3 {background-size:570px 350px;}  */
.work_area{width:130px;}
.work_area h4{margin:0; height:43px; line-height:43px; color:#8bb8ff; background:none; border:none;}
.work_area ul{border-top:1px solid #2d62b8;}
.work_area ul li{float:none; width:100%; border-bottom:1px solid #2d62b8; height:43.5px; line-height:43px;}
.work_area ul li:nth-child(2n-1){border-right:none;}
.work_area ul li a{text-align:left; font-size:14px;}
.more_borad.business{width:400px;}
.more_borad.business ul li a{height:75px;}

#container_wrap  div.bttom_teb{padding:0 4%;}
#container_wrap div.bttom_teb div.group > div.left { float: left;width: 50%;margin: 0;font-size: 16px;}
#container_wrap div.left div.bttom_teb div.group{ margin-right: 0px;}
#container_wrap div.bttom_teb > div.group div.left span {margin: 0 auto;}
#container_wrap div.bttom_teb > div.group div.left > a > p{position:static; text-align:center;}

}


@media screen and (max-width: 440px){
#container_wrap div.right div.shortcut{margin-top:20px;}
#container_wrap div.right div.shortcut ul li{float:none; width:100%;}
#container_wrap div.right div.shortcut ul li:first-child{margin-right:0px;}
#container_wrap div.right div.shortcut ul li:last-child{margin-top:20px;}
#container_wrap div.right div.shortcut ul li > a{height:165px;}
#container_wrap div.right div.shortcut ul li > a h4{font-size:22px; line-height:130%;}
#container_wrap div.right div.shortcut ul li > a p{margin-top:10px; font-size:16px;}
#container_wrap div.right div.shortcut ul li > a span{position:absolute; bottom:30px; left:30px; display:inline-block; padding:8px 15px; font-size:14px; border:1px solid #fff;}
#container_wrap div.right div.shortcut ul li > a span:hover{background:#fff; color:#333; font-weight:400;}


}