@charset "utf-8";

/* 비주얼 영역 */

#main_visual {position: relative; background:url('/images/main/main/visual_bg.jpg'); -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size: cover; padding-bottom:2%;}
#main_visual .visual_text {padding: 3% 3% 1% 3%;font-size: 250%;line-height: 200%;font-weight: 700;}
#main_visual .visual_text strong{position: relative; font-size: 180%; font-weight: 700; }
#main_visual .visual_text strong span{position: relative; color:#001957}
#main_visual .visual_text strong:before{content: ''; position: absolute; background-color: rgba(255,255,255,0.8); right:25px; left: 25px; bottom:0; height: 20px;}
#main_visual .visual_text p{font-family: 'NexonMaplestory';}
#main_visual .visual_text p span{
    color: darkcyan;
}
#main_visual .visual_text p em{
    color: darkblue;
}

.live_onair {position:absolute; bottom:45px; right:-150px}
@media only screen and (max-width:991px){
	.live_onair {position:relative; bottom:auto; right:auto; text-align:center;}

	}

.member_box { border-radius: 20px; box-shadow: 5px 5px 5px rgba(0,0,0,0.1); position: relative; margin-bottom:-100px; overflow: hidden; background-image: url(/images/main/main/conpress_bg.png); background-repeat: no-repeat; background-position:left bottom; background-color: #5151ba; display:flex;flex-wrap:wrap;  padding:10px}
.member_box h3{color:#fff; font-size:120%; font-weight:300; width:270px;padding:50px 30px; text-align:right}
.member_box h3 strong{font-size:180%; font-weight:700; display:block }


/* 의원 목록 */
.member_list{ margin: 0; padding-bottom:5px; display:flex; flex-wrap:wrap; width:calc(100% - 270px);}

.member_list .small{ position: relative;  color:#fff; display: block; opacity: 1; transition: all 0.3s ease-out; margin:5px 7px 15px 7px; cursor: pointer;}
.member_list .small .img{width:100%; height:auto; overflow: hidden; border-radius:10px; background:#bfc0c1}
.member_list .small .img img{width:100%; height:auto;}
.member_list .small span{ position: absolute; bottom:-15px; border-radius: 10px; background: #1a2c63;  transition: all 0.3s ease-out; left:0px; right:0px; font-size:15px; font-weight: 400; text-align: center; color:#fff;}
.member_list a  {width:11%}
.member_list a:hover { opacity: 1; } 
.member_list a:hover .small  {opacity:1; }
.member_list a:hover .small .img { border:3px solid #fff;box-shadow: 5px 5px 5px rgba(0,0,0,0.1); }
.member_list a:hover .small span{opacity: 1; bottom:-10px;  box-shadow: 5px 5px 5px rgba(0,0,0,0.1); }


@media only screen and (max-width:1050px){
.member_box { padding:0px}
.member_box h3{ width:200px;padding:30px 20px; }
.member_list{  width:calc(100% - 200px); }

}

@media only screen and (max-width:991px){
.member_box { padding:0px}
.member_box h3{ width:100%;padding:15px 0 0 0; text-align:center}
.member_box h3 strong{font-size:100%; display:inline-block }
.member_list{  width:100%;padding-top:0px;}
.member_list .small{ margin:5px 5px 15px 5px;}

}
@media only screen and (max-width:750px){
.member_list a  {width:16.66666%}
}

@media only screen and (max-width:540px){
.member_list a  {width:25%}
}

/* 의원 슬라이드 */

.bx-wrapper {float:left; width:630px}
.bx-pager{ margin: 0; padding:15px 0 0 0; float: left; width: calc(100% - 630px);}
.bx-pager a:hover, .bx-pager a.active { opacity: 1; } 
.bx-pager .small{ position: relative;  color:#fff; display: block; opacity: 0.6; transition: all 0.3s ease-out; padding:15px 10px; cursor: pointer;}
.bx-pager .small .img{width:80px; height:80px; overflow: hidden; border-radius:10px; background:#bfc0c1}
.bx-pager .small .img img{width:100%; height:auto;}
.bx-pager .small span{ position: absolute; bottom:-5px; border-radius: 20px; background: #1a2c63;  transition: all 0.3s ease-out; left:10px; right:10px; font-size:15px; font-weight: 400; text-align: center; color:#fff;}
.bx-pager a.active .small  {opacity:1; }
.bx-pager a.active .small .img { border:3px solid #fff;box-shadow: 5px 5px 5px rgba(0,0,0,0.1); }
.bx-pager a.active .small span{opacity: 1; bottom:0px;  box-shadow: 5px 5px 5px rgba(0,0,0,0.1); }

.bx-controls {position: absolute; left:55%; top: 78%; right: 0;z-index:90} 
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto, .bx-controls-direction {bottom:0 !important; position: relative !important; float:left; width: auto !important;}
.bx-wrapper .bx-prev, .bx-wrapper .bx-next, .bx-wrapper .bx-controls-auto .bx-start, .bx-wrapper .bx-controls-auto .bx-stop {  background:#fff !important; border-radius: 50%;; width: 30px !important; height: 30px !important; float:left; position: relative !important; margin:0 3px !important; right:auto !important; top: auto !important; left:auto !important; text-indent: 0 !important; font-size: 0;}
.bx-wrapper .bx-prev:after, .bx-wrapper .bx-next:after, .bx-wrapper .bx-controls-auto .bx-start:after, .bx-wrapper .bx-controls-auto .bx-stop:after {  position: absolute; left:0; right: 0; top: 0;  line-height:30px;  font-size:16px; color:#333; font-family: 'FontAwesomeS';text-align:center;}
.bx-wrapper .bx-prev:after {content:'\f053'}
.bx-wrapper .bx-next:after {content:'\f054'}
.bx-wrapper .bx-controls-auto .bx-start:after {content:'\f0da'; font-size:22px;}
.bx-wrapper .bx-controls-auto .bx-stop:after {content:'\f52c'; transform: rotate(90deg);}



.profile {display:block; overflow:hidden; width: 100%; height: 376px;  color:#fff; }
.profile .img{float:left; }
.profile .content{font-weight: 300; padding-top:50px; position:absolute; right:0; top:0; bottom:0; left:55%; z-index:98}
.profile .content strong, .profile .content ul{display: block; margin:10px 0}
.profile .content span {display:inline-block; line-height: 35px; font-weight: 400; background:#fff; border-radius: 30px; padding:0 30px; color:#333; }
.profile .content strong {font-size: 170%; font-weight: 700;}
.profile .content strong em {font-size: 70%; font-weight: 400;}
.profile .content a { position: relative; border: 1px solid rgba(255,255,255,0.6); display:inline-block;  line-height: 35px;  padding:0 30px 0 50px; border-radius: 30px;  font-size: 15px; background-color: rgba(255,255,255,0.1); margin-top:10px}
.profile .content a:after {content: '\f015'; position: absolute; line-height:30px;  font-size:16px; color:#333; font-family: 'FontAwesomeS'; left:25px;  line-height: 35px;  top: 0; color:#fff;}


.swiper-container {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }




/* 팝업존*/
.popup_Swiper { position: relative; display: block; box-shadow: 3px 3px 5px rgba(0,0,0,0.08); border-radius: 15px;  height: 285px; overflow: hidden;}
.popup_Swiper .swiper-slide a:focus{border: 2px solid #000;}
.popup_Swiper .swiper-slide a{display:block; width:100%;}
.popup_Swiper .swiper-slide img{width:100%;}
.slide_control {position: relative;}
.slide_control .control{ position: absolute; right:25px; top: 5px }
.slide_control .swiper-button-prev, .slide_control .swiper-button-next, .slide_control .swiper-button-start, .slide_control .swiper-button-stop {position:relative; float: left; width:25px; height:25px; background:#333; overflow: hidden; border-radius: 50%; top:auto; right:auto; left:auto; display:block; cursor: pointer; font-size: 0; margin:2px !important; transition:all 0.3s ease-in-out;}
.slide_control .more_btn  { float: left; display:inline-block; height:25px; background:#333; overflow: hidden; border-radius: 7px; color:#fff; line-height:25px; font-size:13px; padding:0 5px;  margin:2px;}
.slide_control .swiper-button-prev:after, .slide_control .swiper-button-next:after, .slide_control .swiper-button-start:after, .slide_control .swiper-button-stop:after { position: absolute; left:0; right: 0; top: 0;  line-height:25px;  font-size:14px; color:#fff; font-family: 'FontAwesomeS';text-align:center;  }
.slide_control .swiper-button-prev:after {content:'\f053';}
.slide_control .swiper-button-next:after {content:'\f054';}
.slide_control .swiper-button-start:after {content:'\f0da'; font-size:16px; }
.slide_control .swiper-button-stop:after {content:'\f52c'; transform: rotate(90deg);}

/* 갤러리 */

.gallery_bg {position: relative;}
.gallery_bg:before {content:''; position:absolute; left:0; right:0; top:50%; bottom:0; background:#c2c4cc}
.title_area {position: relative;}

.m_gallery { position: relative;}
.m_gallery .gallery_title{font-size: 150%; font-weight: 500; padding-bottom:4%}
.m_gallery .gallery_title strong{font-weight: 700;}
.m_gallery .gallery_title p{display: inline-block; font-weight: 300; font-size: 70%; color:#777; padding-left: 30px;}
.m_gallery .more {top:5px}
.m_gallery .control{ position: absolute; top:46%; left:-50px; right:-50px; z-index: 999;}
.m_gallery .control .swiper-button-prev2, .m_gallery .swiper-button-next2{ position: absolute; width:40px; height:40px;  background:#333; overflow: hidden; border-radius: 50%; top:auto; right:auto; left:auto; display:block;  text-indent: -999999; font-size: 0; cursor: pointer; }
.m_gallery .control .swiper-button-prev2 {left:0;}
.m_gallery .control .swiper-button-next2 {right:0;}
.m_gallery .control .swiper-button-prev2:after, .m_gallery .swiper-button-next2:after { position: absolute; left:0; right: 0; top: 0;  line-height:40px; color:#fff; font-family: 'FontAwesomeS'; text-align:center;  display:block;   font-size:16px;}
.m_gallery .swiper-button-prev2:after {content:'\f053';}
.m_gallery .swiper-button-next2:after {content:'\f054';}
.gallery_Swiper {overflow: hidden;}
.gallery_Swiper .swiper-wrapper .swiper-slide {background:none; }
.gallery_Swiper .swiper-wrapper a.cell {display: block; border:3px solid #fff; transition: border 0.3s ease-in-out; background: #fff; box-shadow: 0px 0px 8px rgba(0,0,0,0.2); border-radius: 20px 0; padding:30px 22px; text-align: left; overflow: hidden; margin:5px 4px; width:98%; }
.gallery_Swiper .swiper-wrapper a.cell > span {display:block; color:#777; font-family: 'Roboto'; font-size: 90%; font-weight:400; padding-bottom:20px}
.gallery_Swiper .swiper-wrapper a.cell > img {width:100%}
.gallery_Swiper .swiper-wrapper a.cell > span strong {display:block; font-weight: 600; font-size: 190%;}
.gallery_Swiper .swiper-wrapper a.cell p {  display: block; width:100%;  overflow: hidden; font-size:90%; line-height: 40px;}
.gallery_Swiper .swiper-wrapper a.cell p span { display: block; width:100%;   white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}

.m_pad {padding-top:3%; padding-bottom: 3%;}
.m_pad_top {padding-top:100px}
.m_bg {position: relative; background:url('/images/main/main/main_con_bg.png'); -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size: cover; }

h3.m_title {font-size: 110%; color:#333; font-weight: 500; display: block; line-height: 40px; padding-left:5px; margin-bottom: 10px;}

/* 최근게시물 탭박스 영역 */
#bbs_tab { position: relative; height:350px }
#bbs_tab:before {content: ''; position: absolute; background-color:rgba(0,0,0,0.07); height:1px; top:50px; left:0; right:0;}
#bbs_tab li { float: left; }
#bbs_tab li .tab{background:rgba(0,0,0,0.07); line-height:50px; padding:0 25px; border-radius:10px 10px 0 0; color:#333; display:inline-block; font-size:110%; margin-right:3px; font-weight:400}
#bbs_tab li.active .tab{ color:#fff; font-weight:500}
#bbs_tab li .tab i{font-size:130%; margin-right:5px}
#bbs_tab li.active .tab i{color:#1877f2;}
#bbs_tab li:last-child.active .tab i{color:#f32b89;}
#bbs_tab li img{width:100%;}
#bbs_tab li .view { position: absolute; top: 80px; left:0; right:0; display:none; }
#bbs_tab li.active .view { display:block}
#bbs_tab li .view ul { display:block;}
#bbs_tab li .view .big {margin-bottom:10px; display:flex; flex-wrap: nowrap; }
#bbs_tab li .view .big a{display:block; overflow:hidden;}
#bbs_tab li .view .big .file {display:none}
#bbs_tab li .view .big span{background:#eee; float: left; width:120px; padding: 20px; text-align: center; font-family: 'Roboto'; font-weight: 500; color:#777; border-radius: 10px; margin-right: 20px;}
#bbs_tab li .view .big span i{display: block;  font-weight: 900; font-size: 200%; color:#000; }
#bbs_tab li .view .big div {overflow: hidden;}
#bbs_tab li .view .big div strong{display:block; font-weight: 600; line-height:45px;font-size: 130%;white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
#bbs_tab li .view .big div p{font-size: 90%; color:rgba(0,0,0,0.8); line-height: 20px; text-overflow: ellipsis; overflow: hidden; display:block; height: 43px; margin-top:10px}
#bbs_tab li .view li {position: relative; width: 100%;}
#bbs_tab li .view li.title::before{content:''; position:absolute; left:0; top:16px; border-radius: 50%; width:3px; height:3px; background-color: #999;}
#bbs_tab li .view li.title > a{display:block; padding-left:15px; width:calc(100%-120px);width:-webkit-calc(100% - 120px); line-height: 35px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
#bbs_tab li .view li.title > .date{ position: absolute; right:0; z-index: 3; top:7px; font-family: 'Roboto'; color:#777}

.more { position: absolute; right:5px; top:-75px; font-size: 0;width:35px; height:35px; border:1px solid #ddd; border-radius: 50%; line-height:35px;}
.more:after {content:'\f067'; position: absolute; left:0; right: 0; top: 0;  font-size:14px; color:#777; font-family: 'FontAwesomeS';text-align:center; }

/* 의회 의장 */
.speaker {position: relative; margin-left:50px;}
.speaker:before {position:absolute; content: ''; background-color: #efefef; left:0; right:0; top:70px; bottom:0; border-radius: 20px;}
.speaker > div {position: relative; text-align: right;}
.speaker > div img{height:300px; width:auto; padding-right:17px}
.speaker > div h3{position: absolute; left:30px; top:120px; font-weight: 500; text-align: left; font-size: 130%; color:#2e2e75}
.speaker > div h3 strong {font-weight: 700; display: block; font-size: 130%; color:#000}
.speaker > div a {display:block; background-color: #2e2e75;  border-radius: 20px; line-height:60px; color:#fff; font-weight: 500; text-align: center; font-size: 120%;}
.speaker > div a i{margin-left:20px}

.shadow {display: block; box-shadow: 3px 3px 5px rgba(0,0,0,0.08); border-radius: 15px; background-color: #fff; overflow: hidden; height: 285px;}

/* 의사일정 */
.schedule .day{display:flex; flex-wrap: wrap;  color: #fff; text-align: center; padding:20px 20px}
.schedule .day > div, .schedule .day > a{width:20%; font-size: 120%;}
.schedule .day > div:nth-child(2){width:60%; font-size: 140%; font-family: 'Roboto'; font-weight: 400;}
.schedule .week_area{padding:20px 30px; display: block;}
.schedule .week_area .week{display:flex; flex-wrap: wrap; margin-bottom: 20px;}
.schedule .week_area .week li{flex: 0 0 14.2857142857%;    max-width:14.2857142857%; color:#444}
.schedule .week_area .week li span, .schedule .week_area .week li a{display:block; position: relative; text-align: center; padding:5px 0; font-weight: 400; }
.schedule .week_area .week li a i{ position: relative;}
.schedule .week_area .week li:first-child{color:#cf0000}
.schedule .week_area .week li:last-child{color:#1933cf}
.schedule .week_area .week li .today:before{content:''; position:absolute; left:50%; margin-left:-17px; top:0; width:37px; height:37px; border-radius: 50%; background-color: #e466a4; }
.schedule .week_area .week li .today i{color:#fff}
.schedule .week_area .content{background: #f0f0f0; border-radius:10px; font-size: 90%;  display:block; overflow:hidden}
.schedule .week_area .content #calendar{display:block; overflow-y: auto; overflow-x:hidden; height:65px;margin:8px 5px 8px 15px }
.schedule .week_area .content a{display:block; overflow:hidden;}
.schedule .week_area .content a span{font-weight: 500; font-size: 95%; float:left; width:100px;}
.schedule .week_area .content a p{color:#555; font-size:95%; line-height: 20px; float:left; width:calc(100% - 100px); overflow:hidden;}

/* 회의록 */
.council_search {padding:20px 30px; display: block; background:#fff; border-radius: 0 0 20px 20px;}
.council_search .searchform{border:1px solid #ddd; border-radius: 30px; overflow: hidden; padding:0 20px}
.council_search label {display:block; text-align: center; font-weight: 400; padding-bottom:20px; font-size: 110%;  cursor:pointer;}
.council_search .searchform input, .council_search .searchform button{height:50px; line-height: 50px; padding:0 10px; float: left;}
.council_search .searchform input {width: calc(100% - 80px);}
.council_search .searchform button{ width: 40px; text-align: center; float:right}

.council {background:#4e4e89;}
.council ul {display: block; padding:20px; color:#fff;}
.council ul li {float:left; width:50%; padding: 5px; }
.council ul li a{display: block; white-space: nowrap; line-height: 38px; font-size: 95%;}
.council ul li a img{background:#fff; border-radius: 50%; margin-right:10px}

/* 메인 통합검색 */
.main_search_box{padding: 20px;width:60%;display:block;margin:0 auto;position: relative;  }
.main_search_box legend{top:0; width:100%; height:auto; text-align:center !important; font-size:120%; font-weight:700; display:block;margin-bottom:20px}
.main_search_box .input_box {display:flex;}
.main_search_box .input_box select, .main_search_box .input_box .input{border:none;box-shadow: 0px 0px 5px rgba(0,0,0,0.3) !important;border-radius:10px;overflow:hidden;line-height: 45px;height: 45px;}
.main_search_box .input_box .input {width:calc(100% - 210px); display:flex; }
.main_search_box .input_box select{width:200px; margin-right:10px;}
.main_search_box .input_box input{width:calc(100% - 60px); padding:0 10px; border:none}
.main_search_box .input_box button{width:60px; color:#fff}


@media only screen and (max-width:1330px){
  .bx-pager .small{padding:15px 5px;}
  .bx-pager .small .img{width:70px; height:70px;}
  .bx-wrapper { width:550px}
  .bx-pager {width: calc(100% - 550px);} 
  .m_gallery .control{  left:5px; right:5px}
  html, body {font-size:15px}

  }
  
    @media only screen and (max-width:1050px){
  .bx-pager .small{padding:12px 5px;}
  .bx-pager .small .img{width:60px; height:60px;}
  .bx-wrapper { width:500px}
  .bx-pager {width: calc(100% - 500px);} 
   #main_visual .visual_text {padding:8% 3% 4% 3%;font-size: 180%;line-height: 150%;}
  
    }
  @media only screen and (max-width:991px){

#bbs_tab { height:350px}
	
  .m_pad {padding-top:8%; padding-bottom:8%;}
  /*.m_pad_top {padding-top:130px}*/

  .grid_container .row > div {margin-top:20px}
  .grid_container .col_7, .grid_container .col_5, .grid_container .col_4 {max-width:100% !important; flex: 0 0 100%;}  

  .popup_Swiper {height:auto}
  .speaker {position: relative; margin-left:0px;}
  .m_gallery .gallery_title p { display:block;  padding-left:0px;}
  html, body {font-size:17px}
  
  .main_search_box{width:100%;}
  .main_search_box .input_box .input {width:calc(100% - 160px); }
  .main_search_box .input_box select{width:150px; }
}
  
  @media only screen and (max-width:880px){
  .bx-wrapper { width:100%}
  .bx-pager {display:none} 
  .profile .content{left:60%; padding-top:30px; font-size:90%}
  .bx-controls {left:60%; }
  html, body {font-size:16px}

	#bbs_tab { position: relative; height:310px }

}
  
  @media only screen and (max-width:650px){
/*  .member_box {height: 300px; }
*/
  .profile .img{margin-left:0px;}
  .profile .img img{ height:270px; width:100%; margin-top:30px }
  .profile .content{left:55%}
  .bx-controls {left:55%; top:65%}

  .m_gallery .gallery_title p { font-size: 60%; padding-right: 50px;}

  #bbs_tab li {width:42%}
  #bbs_tab li .tab{padding:0px; margin:1px; border-radius:0; font-size:90%; line-height:45px; display:block; text-align: center;}
  #bbs_tab:before {top:92px; display:none}
  #bbs_tab li .view {top: 110px; }
  #bbs_tab li .view .big span{width:90px; padding:10px 20px;}
  #bbs_tab li .view .big div p{ margin-top:0px}
  #bbs_tab li .view li.title {font-size: 15px;}
#bbs_tab li .view li.title::before{top:14px;}
#bbs_tab li .view li.title > a{padding-left:12px; line-height: 30px;}
#bbs_tab li .view li.title > .date{ top:6px;}
#bbs_tab li .view .big div strong { font-size: 110%;}

  #bbs_tab .more { top:-80px;}
  
  .main_search_box .input_box {flex-wrap:wrap}
  .main_search_box .input_box select, .main_search_box .input_box input, .main_search_box .input_box button {line-height:40px; height:40px;}
  .main_search_box .input_box select, .main_search_box .input_box .input {width:100%; margin:5px 0}
  .main_search_box legend{margin-bottom:10px; margin-top:10px}
.main_search_box .input_box select, .main_search_box .input_box .input{line-height: 40px;height: 40px;}



}
  
  @media only screen and (max-width:500px){
  .profile .img{margin-left:-20px;}
  .profile .img img{ height:270px; width:auto; margin-top:30px }
  .profile .content{left:50%;  font-size:80%}
  .profile .content span {font-size: 120%;}
  .bx-controls {left:50%; top:65%}

  .speaker > div h3{top:85px; letter-spacing: -0.1em; font-size: 100%; left:20px}
  .speaker > div img{padding-left:20%; height:auto }

  #main_visual .visual_text {font-size: 150%;}

  }

  
  
  
  
  

/* sns배너 추가 작업 2024-12-18 */

.snsbanner_wrap {display:block; margin-top:100px}
.snsbanner {position: relative; display:flex; justify-content: space-between; align-items: center; padding:40px 100px; background-color:#1c1c48; border-radius:20px;  box-shadow: 5px 5px 5px rgba(0,0,0,0.1); background-image:url(/images/main/snsbanner_bg.png); color:#fff; overflow:hidden;}
.snsbanner::before {content:''; position:absolute; background-image:url(/images/main/snsbanner_img01.png); background-repeat:no-repeat; background-size:100% auto; width:167px; height:184px; left:-10px; bottom:-10px;}
.snsbanner::after {content:''; position:absolute;  background-image:url(/images/main/snsbanner_img02.png); background-repeat:no-repeat; background-size:100% auto;  width:109px; height:152px; right:-30px; top:0;}
.snsbanner .sns_txt{flex:0 0 40%; font-size:160%; text-align:right; position: relative; }
.snsbanner .sns_txt span{display:block; color:#ffdb86; font-size:120%;  font-family: "Nanum Brush Script";  font-style: italic; font-weight: 400;}
.snsbanner .sns_txt strong{display:block; font-weight: 600;}
.snsbanner .sns_txt strong em{color:#ffd1e9; font-size:130%;   font-family: "Roboto"; font-weight: 900; font-style: italic;}
.snsbanner .sns_list{flex:0 0 50%;; display:flex; justify-content: space-between; align-items: center; position: relative; }
.snsbanner .sns_list a{display:inline-flex; transition: all 0.3s ease-out; text-align:center;  justify-content: center; line-height:60px; padding:0 30px; border-radius:50px; border:1px dashed rgba(255,255,255,0.5); align-items: center;  flex:0 0 30%;  font-weight: 500; }
.snsbanner .sns_list a img{margin-right:5px;}
.snsbanner .sns_list a:hover{ box-shadow: 0px 0px 15px rgba(98,124,255,0.4); border:1px dashed rgba(255,255,255,1);}
 

@media only screen and (max-width:1300px){
.snsbanner { padding:40px 80px; }
.snsbanner .sns_list{flex:0 0 55%; }
}

@media only screen and (max-width:991px){
.snsbanner {flex-wrap:wrap; justify-content:right; padding:30px 80px 30px 80px}
.snsbanner .sns_txt{flex:0 0 100%; margin-bottom:20px;}
.snsbanner .sns_list{flex:0 0 80%; }
.snsbanner .sns_list a{ line-height:40px;}

}

@media only screen and (max-width:700px){
.snsbanner {flex-wrap:wrap; justify-content:right; padding:30px 50px 30px 30px}
.snsbanner::before { width:100px; height:120px; left:-30px; bottom:-10px;}
.snsbanner .sns_list{flex:0 0 calc(100% - 30px); }
.snsbanner .sns_txt{font-size:140%;}
.snsbanner .sns_list a{ font-size:80%;  padding:0 20px;  flex:0 0 33%; }
.snsbanner .sns_list a img{ width:20px}
}


@media only screen and (max-width:500px){
.snsbanner {flex-wrap:wrap; justify-content:right; padding:20px 20px 20px 35px}
.snsbanner .sns_list{flex:0 0 calc(100% - 20px); }
.snsbanner .sns_txt{font-size:120%;}
.snsbanner .sns_txt span{ font-size:140%;}
.snsbanner .sns_list a{   padding:0 5px; font-size:70%; line-height:30px; }
.snsbanner::before { left:-40px;}
.snsbanner .sns_list a img{margin-right:3px; width:15px}
}