@charset "utf-8";

/* 메인css */
#container {padding-top:0;}
.main_section:after { display:block; clear:both; content:""; }
.main_section > div{float:left;}
.main_section > div h3{margin-bottom:16px; font-size:16px; font-weight:500;}
.main_section > div h3 span{float:right;}
.main_section > div.more_borad h3{margin-bottom:16px;}
.main_section > div.more_borad h3 span{margin-top:-1px; margin-right:-6px;} 
.main_section > div.more_borad h3 a{width:40px; text-align:center; height:40px; line-height:40px; color:#2054a7;}
.main_section div.more_borad ul li a:hover, .main_section div.borad ul li a:hover{color: #2054a7;}
#m_sec2 div ul li, #m_sec3 div ul li{padding-left: 10px; background: url("/img/main/ico_list.png") 0 50% no-repeat; font-size:14px; line-height:300%;}
#m_sec2 div ul li a, #m_sec3 div ul li a{display:block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.more_borad, .borad{padding:9% 6% 7%; box-sizing: border-box;}

#fade-box{position:relative; width:100%; /* height: 200px; */ overflow:hidden;}
#fade-box > div.fade-visual { position:relative;/*  height:200px; */}
#fade-box div.fade-visual ul{height:200px; padding-top:50%;}
#fade-box div.fade-visual li:first-child { display:block; }
#fade-box div.fade-visual li { display:none;/*  height:200px; */ text-align:center; }
#fade-box div.fade-visual li span {display:block;}
#fade-box div.fade-visual li.bg1 {background:url("/img/main/mainvisual1.jpg") center top no-repeat;  background-size:100%;}
#fade-box div.fade-visual li.bg2 {background:url("/img/main/mainvisual2.jpg") center top no-repeat;  background-size:100%;}
#fade-box div.fade-visual li.bg3 {background:url("/img/main/mainvisual3.jpg") center top no-repeat;  background-size:100%;}
#fade-box div.fade-visual li.bg4 {background:url("/img/main/mainvisual5.jpg") center top no-repeat;  background-size:100%;}

#fade-box div.fade-button{display:none;}
/*#fade-box div.list_btn { position:absolute; left:50%; bottom:90px; width:190px; margin-left:-95px; }
#fade-box div.list_btn button{ float:left; height:50px; width:50px; margin-left:20px; text-indent:-9999px; z-index: 500; }
#fade-box div.list_btn button.prev { margin-left:0; background-position:0 0}
#fade-box div.list_btn button.prev:hover, 
#fade-box div.list_btn button.prev:focus, 
#fade-box div.list_btn button.prev:active { background-position:0 -50px;}

#fade-box div.list_btn button.next {background-position:-140px 0}

#fade-box div.list_btn button.next:hover, 
#fade-box div.list_btn button.next:focus, 
#fade-box div.next button.prev:active { background-position:-140px -50px;}

#fade-box div.list_btn button.pause {background-position:-70px 0}

#fade-box div.list_btn button.pause:hover, 
#fade-box div.list_btn button.pause:focus, 
#fade-box div.pause button.prev:active { background-position:-70px -50px;}

#fade-box div.list_btn button.play {background-position:-210px 0}
#fade-box div.list_btn button.play:hover, 
#fade-box div.list_btn button.play:focus, 

#fade-box div.play button.prev:active { background-position:-210px -50px;}

#fade-box div.fade-button{ position:absolute; top:220px; right:0; z-index:200; width:120px; height:60px; margin-right:500px; }
#fade-box div.fade-button:after { clear:both; display:block; content:""; }
#fade-box div.fade-button a{display:block; text-indent:-9999px; font-size:0;}
#fade-box div.fade-button button { display:inline-block; position:relative; width:30px; height:5px; border:0;  background:url("/img/main/ico_sp.png") 0 -105px no-repeat; }
#fade-box div.fade-button button.fade-on { background-position:0 -100px; }
 */
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;}

.work_area{width:100%; background:#2054a7; }
.work_area h4{margin:6%; box-sizing: border-box; padding:0 15px; font-size:16px; height:50px; line-height:50px; color:#2054a7; border:1px solid #5a8dd7; background:#fff;} 
.work_area h4 span.icon{float:right;}
.work_area ul{border-top:1px solid #5a8dd7;}
.work_area ul:after{ display:block; clear:both; content:"";}
.work_area ul li{float:left; width:50%; height:60px; line-height:60px; border-bottom:1px solid #5a8dd7; box-sizing: border-box;}
.work_area ul li:nth-child(2n-1){border-right:1px solid #5a8dd7;}
.work_area ul li:last-child{border-bottom:none;}
.work_area ul li:hover{background:#000;}
.work_area ul li a{padding:0 15px; display:block; font-size:15px; text-align:center; color:#fff;}
.work_area div.slogon{padding: 60px 0 40px; background:#fff; text-align:center;}
.work_area div.slogon p{font-size:16px; line-height:160%; }
.work_area div.slogon p span{font-weight:700;}
.work_area div.slogon p span.tit{display:block; margin-bottom:20px; font-size:24px;}
.work_area div.slogon a{margin-top: 15px; padding: 10px 21px; display: inline-block; border: 1px solid #dbdbdb; font-size: 15px; }
.work_area div.slogon a:hover{background:#000; color:#fff;}

.more_borad.business{width:100%; background:#ebf3ff;}
.more_borad.business ul li > a{padding:15px 0 7px ; display:block; background: url("/img/main/episode_bar.png") no-repeat 0 0;}
.more_borad.business ul li:first-child > a{padding:0 0 7px; background:none;}
.more_borad.business div.cont{margin-bottom:10px;}
.more_borad.business div.cont h5.subject{line-height:130% ;margin-bottom:7px; font-size:14px; font-weight:500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.more_borad.business div.cont p.sumup{font-size:13px; color:#555; line-height:120%;}
.more_borad.business a:hover div.cont p.sumup{color:#2054a7; line-height:120%;}

div.main_section div.more_view{display:inline-block; padding:0; height:35px; line-height:35px; border:1px solid #dbdbdb; background:#fff; font-size:13px; box-sizing: border-box;}
div.main_section div.more_view a{display:block; padding:0 20px; box-sizing: border-box;}
div.main_section div.more_view:hover a{background:#000; color:#fff; }
div.main_section div.more_view:hover{background:#000; color:#fff; border:none;}

#m_sec2 > div{width:100%;}
#m_sec2 > div:last-child{border-right:none;}
#m_sec2 .lawdata{border-bottom:1px solid #ddd;}
#m_sec2 .newsletter{background:#86d5ff; color:#fff;}
#m_sec2 .newsletter a{display:block; color:#fff;}
#m_sec2 .newsletter p{position:relative; font-size:14px; line-height: 300%;}
#m_sec2 .newsletter p span{display:inline-block; vertical-align:middle;}
#m_sec2 .newsletter p span.subject{width:71%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#m_sec2 .newsletter p span.date{position:absolute; right:0; margin-left:4px; text-align:right; font-weight:300;}
div.sms_box{display:none; padding:30px; box-sizing: border-box;}
div.sms_box h3{color:#2054a7;}
div.sms_box table tr:first-child, .sms_box table tr:nth-child(2){display:inline-block;}
div.sms_box table tr:nth-child(2){margin-left:5px;}
div.sms_box input.text{padding:5px; width:65px; -webkit-appearance: none; border:1px solid #999; box-sizing: border-box;}
div.sms_box table tr:first-child input.text{width:80px;}

#m_sec3 > div{width:100%;}
#m_sec3 > div.banner{background:#e1e1e1; padding:20px 0;}
#m_sec3 > div.banner div.banner_box{padding:6%; box-sizing: border-box; border-top:1px solid #ddd; border-bottom:1px solid #ddd; background: url("/img/main/bg_banner.png") 95% 100% no-repeat #fff; background-size:150px;}
#m_sec3 > div.banner div.banner_box h3{margin-bottom:0;}
#m_sec3 > div.banner div.banner_box p{margin:10px 0; line-height:115%; font-size:13px;}
#m_sec3 div.contact_box .contact_info h3{margin-bottom:7px;}
#m_sec3 div.contact_box .contact_info p{line-height:120%;}
#m_sec3 div.contact_box .contact_info span{display:block; font-size:18px; font-weight:500px; color:#2054a7;}
#m_sec3 div.contact_box .online_box{padding:6%; background: url("/img/main/icon_online.png") 90% 28% no-repeat; background-size:55px;}
#m_sec3 div.contact_box .online_box p{font-size:13px; width:100%;}
#m_sec3 div.contact_box .online_box div.more_view{padding: 0px; width:100%; margin-top:10px; text-align:center;}

/* 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 (min-width: 740px){
#container {padding-top:0;}
.more_borad, .borad{padding:30px; height: 178px;}
.main_section > div h3 span{margin-top:0px;}
.main_section > div.more_borad h3{margin-bottom:16px;}
.main_section > div.more_borad h3 a{height:auto; line-height:130%;}
#m_sec2 div ul li, #m_sec3 div ul li{line-height:200%;}
.main_section > div.more_borad h3{color:#2054a7;}


div.main_section div.more_view{ height:25px; line-height:25px;}
div.main_section div.more_view a{display:block; padding:0px 10px;}

#m_sec1 > div{height:350px;}
#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;}

#m_sec2 > div{width:366px; height:290px; border-right:1px solid #ddd;}
#m_sec2 > div:last-child{border-right:none;}
#m_sec2 .lawdata{border-bottom:none;}
#m_sec2 .lawdata ul li{line-height:240%;}
#m_sec2 .newsletter{height:114px; background:#86d5ff; color:#fff;}
#m_sec2 .newsletter a{display:block; color:#fff;}
#m_sec2 .newsletter p{line-height: 130%; font-size:14px;}
#m_sec2 .newsletter p span{display:inline-block; vertical-align:middle;}
#m_sec2 .newsletter p span.subject{width:228px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#m_sec2 .newsletter p span.date{margin-left:4px;}


div.sms_box{display:block; margin:0; }
#sms_box{display:block; position: static; left: 0; top:0; transform:none; width:auto; background:#fff;}
#sms_box div.sms_form{width:100%; background:none; padding:0px; border:0px;}
#sms_box div.sms_form ul li{padding-left:0; background:none;}
#sms_box div.sms_form ul li dd{display:inline-block;}
#sms_box div.sms_form ul li dd.name input.text{margin-bottom:0px; padding-left:5px; border:1px solid #dbdbdb; width:80px; height:28px; -webkit-appearance: none; box-sizing: border-box; background:#fff;}
#sms_box div.sms_form ul li dd.phone select{width:70px; height:28px; background-size: 30px;}
#sms_box div.sms_form ul li dd.phone input.text{width:65px; height:28px; box-sizing: border-box; border:1px solid #dbdbdb; -webkit-appearance: none; background:#fff;}
#sms_box div.sms_form ul li textarea{width:305px; height:77px;margin:5px 0;}
#sms_box div.sms_form div.captcha_box input{width:207px; height:28px;}
#sms_box div.sms_form div.sms_btn_box{position:relative; margin-top:5px;}
#sms_box div.sms_form div.sms_btn_box div.more_view{float:none; display:block; width:87px; height:25px; line-height:25px; margin-left:3px;}
#sms_box div.sms_form div.sms_btn_box .sms_application{position:absolute; right:2px; top:3px; margin-top:0; width:145px; padding:0 18px; height:50px; font-size: 13px; border:none;}

#m_sec3{background:#f8f8f8;}
#m_sec3 > div{width:366px; height:178px; border-right:1px solid #ddd; padding:30px; box-sizing: border-box;}
#m_sec3 > div:last-child{border-right:none;}
#m_sec3 > div.banner{padding:30px; width:367px; background:none;}
#m_sec3 > div.banner div.banner_box{height:118px; padding:16px; border:1px solid #ddd; background-size:40%;}
#m_sec3 > div.banner div.banner_box p{margin:8px 0;}
#m_sec3 div.contact_box .contact_img, #m_sec3 div.contact_box .contact_info{display:inline-block; vertical-align:top;}
#m_sec3 div.contact_box .contact_img{width:56px; height:56px; box-sizing: border-box; border:1px solid #ddd; border-radius:50%;}
#m_sec3 div.contact_box .contact_info{position:relative; margin-left:10px; padding-top: 2px; line-height:130%;}
#m_sec3 div.contact_box .online_box{margin-top:5px; padding:0; background:none;}
#m_sec3 div.contact_box .tel_box .contact_img{background: url("/img/main/icon_tel.png") 50% 50% no-repeat #fff;}
#m_sec3 div.contact_box .online_box .contact_img{background: url("/img/main/icon_online.png") 50% 50% no-repeat #fff;}
#m_sec3 div.contact_box .online_box p{font-size:12px;}
#m_sec3 div.contact_box .online_box div.more_view{position:absolute; right:-73px; top:22px; margin-top:0; width:auto;}
#m_sec3 div.contact_box .online_box div.more_view a{padding: 0 6px;} 
}