@charset "utf-8";

/* 메인비주얼 */
#visual {overflow:hidden; position:relative;}
#visual:after,
#visual .list_wrap .slick-dots:after {content:''; display:block; clear:both;}
#visual .list_wrap .list {position:relative; height:511px;}
#visual .list_wrap .list img {position:absolute; top:0; left:50%; transform:translateX(-50%);}
#visual .list_wrap .slick-dots {z-index:1; position:absolute; bottom:83px; left:50%; margin-left:-535px;}
#visual .list_wrap .slick-dots li {float:left;}
#visual .list_wrap .slick-dots li + li {margin-left:5px;}
#visual .list_wrap .slick-dots li button {display:block; width:36px; height:7px; background:#bcbcbc; font-size:0; text-indent:-999px;}
#visual .list_wrap .slick-dots li.slick-active button {background:#375999;}
#visual .btn_stop {z-index:1; position:absolute; bottom:83px; left:50%; width:25px; height:25px; margin-left:-551px; background:url(/images/promote/main/ico_stop.png) no-repeat 0px 14px; font-size:0; text-indent:-999px;}
#visual .btn_stop.on {background-position:0 -27px;}

#visual .txt {position:absolute; top:0; left:50%; margin-left:-600px; width:436px; height:100%; box-sizing:border-box; padding:110px 0 0 49px; color:#666; background:rgba(255,255,255,0.83); word-break:keep-all;}
.slogan {font-size:35px; font-family:'gmarket'; font-weight:800; color:#2f999e;}
.slogan em {display:block; padding:6px 0 0; font-size:48px; color:#375999;}
.slogan em:after {content:''; display:block; width:48px; height:1px; margin:21px 0; background:#ffad00;}

#visual .list_wrap .list:not(:first-of-type) {display:none;}
#visual .list_wrap.slick-initialized .list:not(:first-of-type) {display:inline-block;}

/* 탭 공통 */
.tab {position:relative;}
.tab > ul {padding:0 0 11px; border-bottom:1px solid #c6c6c6;}
.tab ul:after {content:''; display:block; clear:both;}
.tab ul li {float:left;}
.tab:not(.tab3) > ul > li > h4 > a {position:relative; display:inline-block; line-height:100%; margin:0 25px; transition:.3s; vertical-align:bottom; text-decoration:none; font-family:'gmarket'; font-size:21px; color:#a5a5a5;}
.tab:not(.tab3) > ul > li:first-child > h4 > a {margin-left:0 !important;}
.tab:not(.tab3) > ul > li + li > h4 > a:before {content:''; position:absolute; top:50%; left:0; margin:-7px 0 0 -29px; width:8px; height:8px; border-radius:50%; background:#b7b7b7;}
.tab:not(.tab3) > ul > li > h4 > a:after {opacity:0; visibility:hidden; content:''; position:absolute; bottom:-12px; left:0; display:block; width:100%; height:3px; background:#ffad00; transition:.3s;}
.tab:not(.tab3) > ul > li.on > h4 > a:after {opacity:1; visibility:visible;}
.tab:not(.tab3) > ul > li.on > h4 > a {color:#333;}

.tab .con {display:none; position:absolute; top:67px; left:0; width:100%;}
.tab .con * {display:block;}
.tab .con li {width:48%;}
.tab .con li + li {margin:0 0 0 4%;}
.tab .con li a {position:relative; width:100%;}
.tab .con li a .img {overflow:hidden; position:relative; height:165px;}
.tab .con li a .img img {position:absolute; top:0; left:0; width:100%; height:100%; transition:.5s;}
.tab .con li a em {overflow:hidden; max-width:98%; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box; padding:16px 0 6px; font-weight:400;}
.tab .con li a .date {font-size:14px; color:#737373;}

.tab .no_list {width:100% !important; padding:5em 0 0; text-align:center;}

.tab li.on .con,
.tab li.on .more {display:block;} 

.more {display:none; position:absolute; top:-4px; right:0; width:30px; height:30px; font-size:0; text-indent:-999px; transition:.3s; background:url(/images/promote/main/ico_more.png) no-repeat center;}

/* 첫번째 섹션 */
.sec {height:398px; box-sizing:border-box; padding:53px 0 0;}
#media {float:left; width:48.2%;}

#media .con li a:hover .img img,
#media .con li a:focus .img img,
#media .con li a:active .img img,
#gallery ul li a:hover .img img,
#gallery ul li a:focus .img img,
#gallery ul li a:active .img img {transform:scale(1.2);}

#member {float:right; width:48.9%;}
#member .con li {width:23%;}
#member .con li + li {margin:0 0 0 2.6%;}
#member .img .name {opacity:0; visibility:hidden; position:absolute; bottom:-32px; left:0; width:100%; height:32px; line-height:32px; text-align:center; color:#fff; background:rgba(47,153,158,0.9); transition:.5s;}
#member .con li a:hover .img .name,
#member .con li a:focus .img .name,
#member .con li a:active .img .name {opacity:1; visibility:visible; bottom:0;}

/* 의정포토 */
#gallery {height:450px; box-sizing:border-box; padding:46px 0 0; background:#f5f5f5;}
#gallery .tit {position:relative; border-bottom:1px solid #c6c6c6; margin:0 0 33px;}
#gallery h4 {position:relative; display:inline-block; padding:0 0 13px; font-family:'gmarket'; font-size:25px;}
#gallery h4:after {content:''; position:absolute; bottom:-1px; left:0; display:block; width:100%; height:3px; background:#ffad00;}
#gallery .more {display:block;}
#gallery ul:after {content:''; display:block; clear:both;}
#gallery ul li {float:left; width:23.4%;}
#gallery ul li + li {margin-left:2.1%;}
#gallery ul li * {display:block;}
#gallery ul li a {width:100%;}
#gallery ul li .img {overflow:hidden; position:relative; height:200px;}
#gallery ul li .img img {position:absolute; top:0; left:0; width:100%; height:100%; transition:.5s;}
#gallery .txt {position:relative; box-sizing:border-box; padding:0 0 0 79px; margin:19px 0 0;}
#gallery .txt > em {overflow:hidden; max-width:98%; text-overflow:ellipsis; white-space:nowrap; line-height:65px; color:#000;}
#gallery .date {position:absolute; top:0; left:0; width:65px; height:65px; box-sizing:border-box; padding:8px 0 0; border:3px solid #2f999e; background:#fff; text-align:center;}
#gallery .date em {line-height:110%; font-size:23px;}
#gallery .date span {line-height:110%; font-size:14px;}

/* 의회간행물 */
.board {padding:60px 0; background:#375999 url(/images/promote/main/bg_board.jpg) no-repeat bottom center;}
.board:after {content:''; display:block; clear:both;}

#magazine {position:relative; float:left; width:711px; height:372px; box-sizing:border-box; padding:33px 45px 0 40px; background:#e5e5e5;}
#magazine:before {content:''; position:absolute; top:94px; left:40px; width:calc(100% - 85px); height:1px; background:#cacaca;}
#magazine > h4 {position:absolute; top:36px; left:40px;}
#magazine > h4 img {padding:0 0 0 8px; vertical-align:bottom;}
#magazine ul {float:right; border-bottom:none; margin:0 60px 0 0;}
#magazine > ul > li + li {margin-left:20px;}
#magazine > ul > li > h4 > a {display:block; width:142px; height:40px; line-height:40px; border-radius:50px; background:#9a9a9a; font-size:17px; font-weight:400; color:#fff; text-align:center; transition:.3s;}
#magazine > ul > li.on > h4 > a {background:#375999;}

#magazine .list_wrap {top:105px; left:40px; max-width:626px; box-sizing: border-box; padding:0 30px;}
#magazine .list_wrap:before {content:''; display:block; clear:both;}
#magazine .list {float:left;}
#magazine .list a {position:relative; width:157px; margin:14px; box-shadow:5px 0 10px rgba(0,0,0,0.3);}
#magazine .list a:before {z-index:1; content:''; position:absolute; top:0; left:0; width:100%; height:0; background:rgba(0,22,62,0.3); transition:.3s;}
#magazine .list a:hover:before,
#magazine .list a:focus:before,
#magazine .list a:active:before {height:100%;}
#magazine .list .img {position:relative; height:206px;}
#magazine .list .img img {position:absolute; top:0; left:0; width:100%; height:100%;}
#magazine .list .tit {opacity:0; visibility:hidden; z-index:2; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; color:#fff; text-align:center; transition:.5s; transition-delay:.3s;}
#magazine .list a:hover .tit,
#magazine .list a:focus .tit,
#magazine .list a:active .tit {opacity:1; visibility:visible;}

#magazine .slick-arrow {z-index:1; position:absolute; top:105px; left:13px; width:28px; height:28px; border-top:2px solid #343434; border-right:2px solid #343434; font-size:0; text-indent:-999px; transform:rotate(-135deg);}
#magazine .slick-arrow.slick-next {left:auto; right:13px; transform:rotate(45deg);}

#magazine .more {top:33px; right:45px; width:40px; height:40px; border-radius:50%; background-color:#9a9a9a; background-image:url(/images/promote/main/ico_more_w.png); transition:.3s;}
#magazine .more:hover,
#magazine .more:focus,
#magazine .more:active {background-color:#375999;}

/* 바로가기 메뉴 */
#quick {float:right; width:calc(100% - 742px);}
#quick a {position:relative; display:block; height:143px; box-sizing:border-box; padding:35px 0 0 29px; background:rgba(0,0,0,0.45) url(/images/promote/main/img_quick.png) no-repeat bottom 26px right 54px; color:#fff; text-decoration:none; transition:.3s;}
#quick a:hover,
#quick a:focus,
#quick a:active {background-color:rgba(0,0,0,0.6);}
#quick a h4 {z-index:1; position:relative; font-family:'gmarket'; font-size:24px;}
#quick a h4 + p {color:rgba(255,255,255,0.8);}
#quick a h4 + p:before {content:''; display:block; width:37px; height:2px; margin:15px 0; background:#ffad00;}

#quick li:last-child a {height:209px; margin:20px 0 0; background-image:none;}
#quick li:last-child a:after {content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:66px; height:66px; background:url(/images/promote/main/ico_play.png) no-repeat center; transition:.5s;}
#quick li:last-child a:hover:after,
#quick li:last-child a:focus:after,
#quick li:last-child a:active:after {background-image:url(/images/promote/main/ico_play_h.png);}
#quick .img {display:block; position:absolute; top:0; left:0; width:100%; height:100%;}
#quick .img img {position:absolute; top:0; left:0; width:100%; height:100%;}

@media all and (max-width:1230px) {
    #visual .txt {left:15px; margin:0;}
    #visual .btn_stop {left:64px; margin:0;}
    #visual .list_wrap .slick-dots {left:84px; margin:0;}
}

@media all and (max-width:1024px) {
    #visual .list_wrap .list {height:350px;}
    #visual .list_wrap .list img {max-width:none; height:100%;}
    #visual .btn_stop {bottom:50px; left:53px;}
    #visual .list_wrap .slick-dots {bottom:50px; left:70px;}
    #visual .txt {width:340px; padding:50px 0 0 35px;}
    .slogan {font-size:25px;}
    .slogan em {font-size:35px;}
    
    .tab:not(.tab3) > ul > li > h4 > a {margin:0 15px; font-size:20px;}
    .tab:not(.tab3) > ul > li + li > h4 > a:before {width:5px; height:5px; margin:-6px 0 0 -16px;}
    .tab .con {top:45px;}
    
    #media {width:calc(100% - 470px);}
    #member {width:440px;}
    
    .board {padding:35px 0;}
    #magazine {width:100%;}
    #magazine .list_wrap {left:50%; transform:translate(-50%);}
    #quick {width:100%; padding:20px 0 0;}
    #quick li {float:left; width:49%;}
    #quick li:last-child {float:right;}
    #quick a {height:209px; background-position:bottom 20px right 25px;}
    #quick li:last-child a {margin:0;}
}

@media all and (max-width:768px) {
    #visual .list_wrap .list {height:300px;}
    #visual .txt {left:10px; width:300px;}
    #visual .txt p br {display:none;}
    .slogan {font-size:20px;}
    .slogan em {font-size:25px;}
    
    .sec {height:636px; padding:25px 0 0;}
    
    .tab:not(.tab3) > ul > li + li > h4 > a:before {margin-top:-5px;}
    
    .sec .inner > div {width:100% !important; height:317px;}
    
    #gallery {height:auto; padding:25px 0;}
    #gallery .tit {margin:0 0 10px;}
    #gallery h4 {font-size:23px;}
    #gallery ul li {width:31.9%;}
    #gallery ul li:last-child {display:none;}
    #gallery ul li .img {height:170px;}
    #gallery .txt {margin:10px 0 0; padding:0 0 0 65px;}
    #gallery .txt > em {line-height:55px;}
    #gallery .date {width:55px; height:55px; padding:5px 0 0; border-width:2px;}
    #gallery .date em {font-size:21px;}
    
    #magazine {height:338px; padding:25px 30px 0;}
    #magazine:before {top:75px; left:50%; transform:translateX(-50%); width:calc(100% - 60px);}
    #magazine > h4 {top:33px; left:30px;}
    #magazine > h4 img {width:108px;}
    #magazine ul {margin:0 50px 0 0;}
    #magazine > ul > li + li {margin-left:5px;}
    #magazine > ul > li > h4 > a {width:110px; font-size:1em;}
    #magazine .list_wrap {top:93px;}
    #magazine .more {top:25px; right:30px;}
}
    
@media all and (max-width:568px) {
    #visual .txt {width:180px; padding:15px 20px 0;}
    #visual .list_wrap .list {height:200px;}
    #visual .btn_stop {bottom:20px; left:30px;}
    #visual .list_wrap .slick-dots {bottom:20px; left:46px;}
    #visual .list_wrap .slick-dots li button {width:28px;}
    
    .slogan {font-size:1em;}
    .slogan em {font-size:1.5em;}
    .slogan em:after {width:20px; margin:10px 0;}
    
    .tab:not(.tab3) > ul > li > h4 > a {margin:0 10px; font-size:18px;}
    .tab:not(.tab3) > ul > li + li > h4 > a:before {margin:-3px 0 0 -12px;}
    .tab .con li a .img {height:140px;}
    .tab .con li a em {padding:5px 0;}
    .more {top:-6px;}
    
    .sec {height:554px;}
    .sec .inner > div {height:268px;}
        
    #gallery h4 {font-size:21px;}
    #gallery ul li {width:48.9%;}
    #gallery ul li:nth-child(3) {display:none;}
    #gallery ul li .img {height:150px;}
    #gallery .txt {padding:0 0 0 57px;}
    #gallery .txt > em {line-height:48px;}
    #gallery .date {width:48px; height:48px;}
    #gallery .date em {font-size:18px;}
    #gallery .date span {font-size:12px;}
    
    .board {padding:20px 0 10px;}
    #magazine {height:320px;}
    #magazine:before {display:none;}
    #magazine > h4 {position:static; text-align:center;}
    #magazine > h4 img {width:100px;}
    #magazine ul {width:275px; float:none; margin:20px auto 0;}
    #magazine .list_wrap {top:121px; width:340px;}
    #magazine .list a {width:120px; margin:10px; box-shadow:5px 0 5px rgba(0,0,0,0.3);}
    #magazine .list .img {height:169px;}
    
    #magazine .slick-arrow {top:80px; left:0;}
    #magazine .slick-arrow.slick-next {right:0;}
    #magazine .more {top:73px; right:auto; left:50%; margin-left:97px;}
    
    #quick li {width:100%; margin:0 0 10px;}
    #quick a {height:130px; padding:30px 0 0 25px; background-size:60px;}
    #quick a h4 {font-size:20px;}
}

@media all and (max-width:380px) {
    #visual .txt {width:160px;}
    
    .sec {height:469px;}
    .sec .inner > div {height:225px;}
    .tab .con li a .img {height:100px;}
    
    #member > ul > li > h4 > a {margin:0 8px; font-size:15px;}
    #member > ul > li + li > h4 > a:before {margin-left:-10px;}
    #member .img .name {height:23px; line-height:23px;}
    #gallery ul li .img {height:130px;}
    
    #magazine {height:300px;}
    #magazine ul {width:225px;}
    #magazine > ul > li > h4 > a {width:85px; border-radius:25px;}
    #magazine .list_wrap {width:200px;}
    #magazine .list a {width:110px;}
    #magazine .list .img {height:149px;}
    #magazine .slick-arrow {top:70px;}
    #magazine .more {top:73px; margin-left:72px;}
}