@charset "utf-8";

/*#container { background:url('/Main/Images/gbpolice/main/main_bg.jpg') repeat-x 0 0; text-align:center;}*/

#container {margin:20rem 0 0; overflow:hidden;}
.main_container {padding-top:130rem;}
h2 { font-size:27rem; vertical-align:top; margin:0 0 25rem 0;}
h2.border { padding:0 0 10rem; border-bottom:2px solid #222;}
a.more_icon { position:absolute; right:0; top:0; display:block; width:51rem; height:48rem; background:url('/Main/Images/gbpolice/main/more.png') no-repeat center/cover; text-indent:-9999rem; vertical-align:top;}

.control a { position:relative; display:block; float:left; width:26rem; height:26rem; text-indent:-99999rem; margin:0 10rem; overflow:hidden;}
.control a::before {content:''; position:absolute; left:0; top:0; width:26rem; height:26rem; background:url('/Main/Images/gbpolice/main/control.png') no-repeat 0 0 / 300% auto; z-index:20;}
.control a.next {transform:rotate(180deg);}
.control a.stop, .control a.play { position:relative; width:40rem;}
.control a.stop::before, .control a.play::before { background-position:100% 0; transition:left 0.5s;}
.control a.stop::before { left:calc(100% - 26rem); background-position:50% 0;}
.control a.stop::after, .control a.play::after {content:''; position:absolute; left:0; top:50%; width:100%; height:20rem; background:#ddd; border-radius:10rem; transform:translate(0, -50%); z-index:10;}
.control a.stop::after {background:#cce6ff;}
.control .count {float:left; font-size:20rem; margin:-4rem 0 0; font-weight:600;}
.control .count span {font-weight:400;}

.visual { position:relative; float:left; width:calc(100% - 500rem); margin:0 0 50rem;}
.visual > a { position:absolute; left:0; bottom:0; background:#dfecf9; text-align:center; padding:20rem 0; width:180rem; height:70rem; font-size:18rem; font-weight:600; border-radius:0 0 5rem 5rem; z-index:20;}
.visual > a:nth-of-type(2) {left:190rem;}
.visual > a.on { background:#2a7fd7; color:#fff;}
.visual > a.on::before { content:''; position:absolute; left:50%; top:-2rem; width:20rem; height:20rem; background:linear-gradient(135deg, #2a7fd7 50%, transparent 50%); transform:rotate(45deg) translate(-50%, 0); z-index:-1;}
.visual > a span { position:relative; display:inline-block; padding:0 0 0 40rem;}
.visual > a span::before {content:''; position:absolute; left:0; top:50%; width:30rem; height:30rem; background:url('/Main/Images/gbpolice/main/visual_icon.png') no-repeat 0 0/200% auto; transform:translate(0, -50%);}
.visual > a.on span::before {background-position:0 100%;}
.visual > a:nth-of-type(2) span::before {background-position:100% 0;}
.visual > a:nth-of-type(2).on span::before {background-position:100% 100%;}
.visual .control { position:absolute; right:0; bottom:10rem;}
.visual > div { position:relative; display:none; padding:0 0 70rem; z-index:10;}
.visual > a.on+div {display:block}
.visual .visual_slide { border-radius:10rem 10rem 10rem 0; overflow:hidden;}
@media all and (max-width:1200px){
  .visual > a {width:120rem;}
  .visual > a:nth-of-type(2) {left:130rem;}
}
@media all and (max-width:1023px){
  .visual {width:100%;}
}
@media all and (max-width:480px){
  .visual > a {width:49%; bottom:50rem;}
  .visual > a:nth-of-type(2) {left:51%;}
  .visual > div {padding:0 0 120rem;}
  .visual .visual_slide {border-radius:10rem 10rem 0 0;}
  .visual .control { bottom:0;}
}

.whatis { float:right; width:440rem; margin:0 0 40rem; background:rgba(16,151,159,0.1); padding:40rem; border-radius:10rem;}
.whatis img { border-bottom:5rem solid #10979f;}
.whatis h2 {font-size:30rem; margin:30rem 0 10rem;}
.whatis h2 span {position:relative; display:inline-block; color:#10979f; font-size:35rem;}
.whatis h2 span::before {content:''; position:absolute; left:48%; top:-10rem; width:7rem; height:7rem; border-radius:50%; background:#10979f;}
.whatis .more { position:relative; display:block; float:right; padding:0 40rem 0 0; font-weight:500; font-size:19rem; margin:20rem 0 0;}
.whatis .more::before {content:''; position:absolute; right:0; top:0; width:30rem; height:30rem; background:url('/Main/Images/gbpolice/main/more2.png') no-repeat center/cover;}
.whatis .more span {display:inline-block; position:relative;}
.whatis .more span::before { content:''; position:absolute; left:0; bottom:5rem; width:0; height:6rem; background:#10979f; opacity:0.3; transition:0.4s;}
.whatis .more:hover span::before {width:100%;}
@media (max-width:1023px) and (min-width:481px){
  .whatis { position:relative; width:100%; padding:50rem 30rem 30rem 48%;}
  .whatis img {position:absolute; left:30rem; top:30rem; width:40%;}
  .whatis h2 {margin:0 0 15rem;}
}
@media all and (max-width:480px){
  .whatis { width:100%;}
}

.board div a {display:block; float:left; margin:0 0 20rem 4%;}
.board div a:first-of-type {margin:0 0 20rem;}
.board dt {font-size:20rem; font-weight:500; display:-webkit-box; text-overflow:ellipsis; -webkit-box-orient:vertical; word-wrap:break-word; overflow:hidden; -webkit-line-clamp:2; line-height:32rem; max-height:64rem;}
.board dd.txt { font-size:16rem; display:-webkit-box; text-overflow:ellipsis; -webkit-box-orient:vertical; word-wrap:break-word; overflow:hidden; -webkit-line-clamp:2; line-height:25rem; max-height:50rem; margin:20rem 0 25rem;}
.board dd.date { font-size:15rem; background:url('/Main/Images/gbpolice/main/date_icon.png') no-repeat left center; padding:0 0 0 30rem;}
@media all and (max-width:480px){
  .board div a {width:100% !important; margin:0 0 20rem !important;}
  .board dd.txt {display:none;}
  .board dd.date { margin:10rem 0 0;}
}

.news {clear:both; float:left; width:calc(100% - 500rem); margin:0 0 50rem;}
.news div a { width:30.66%;}
@media all and (max-width:1023px){
  .news { width:100%; margin:0 0 30rem;}
}

.work {float:right; width:440rem; margin:0 0 50rem;}
.work div a { position:relative; display:block; float:left; width:33.33%; font-size:18rem; text-align:center; padding:150rem 0 0; font-weight:500;}
.work div a::before {content:''; position:absolute; left:50%; top:20rem; width:120rem; height:110rem; background:url('/Main/Images/gbpolice/main/work_icon.png') no-repeat 0 0/300% auto; transform:translate(-50%, 0); transition:0.4s;}
.work div a:nth-of-type(2)::before {background-position:50% 0;}
.work div a:nth-of-type(3)::before {background-position:100% 0;}
.work div a:hover::before {top:0;}
.work div a span { position:relative; display:inline-block;}
.work div a span::before {content:''; position:absolute; left:0; bottom:5rem; width:0; height:6rem; background:#10979f; opacity:0.4; transition:0.3s;}
.work div a:hover span::before {width:100%;}
@media all and (max-width:1023px){
  .work { width:100%;}
}
@media (max-width:1023px) and (min-width:481px){
  .work { width:100%;}
  .work div a { padding:30rem 0 30rem 120rem; text-align:left;}
  .work div a::before { width:100rem; left:0; top:50%; transform:translate(0, -50%);}
  .work div a:hover::before { top:50%; transform:translate(0, -60%);}
}

.quick { clear:both; margin:0 0 50rem; overflow:hidden;}
.quick a { position:relative; display:block; float:left; width:11.5%; margin:0 0.5%; text-align:center; padding:110rem 0 20rem; font-size:17rem; font-weight:500; letter-spacing:-1.5rem; background:#dfecf9; border-radius:20rem;}
.quick a:hover, .quick a:hover span { color:#383888; font-weight:600;}
.quick a::before {content:''; position:absolute; top:15rem; left:50%; width:80rem; height:80rem; background:url('/Main/Images/gbpolice/main/quick_icon.png') no-repeat 0 0/800% auto; transform:translate(-50%, 0); transition:0.3s; z-index:20;}
.quick a.icon2::before { background-position:14.28% 0;}
.quick a.icon3::before { background-position:28.56% 0;}
.quick a.icon4::before { background-position:42.84% 0;}
.quick a.icon5::before { background-position:57.12% 0;}
.quick a.icon6::before { background-position:71.4% 0;}
.quick a.icon7::before { background-position:85.68% 0;}
.quick a.icon8::before { background-position:100% 0;}
.quick a:hover.icon1::before { background-position:0 100%;}
.quick a:hover.icon2::before { background-position:14.28% 100%;}
.quick a:hover.icon3::before { background-position:28.56% 100%;}
.quick a:hover.icon4::before { background-position:42.84% 100%;}
.quick a:hover.icon5::before { background-position:57.12% 100%;}
.quick a:hover.icon6::before { background-position:71.4% 100%;}
.quick a:hover.icon7::before { background-position:85.68% 100%;}
.quick a:hover.icon8::before { background-position:100% 100%;}
.quick a::after {content:''; position:absolute; top:0rem; left:50%; width:160rem; height:125rem; background:url('/Main/Images/gbpolice/main/quick_bg.png') no-repeat 0 0/100% auto; z-index:10; transition:0.5s; opacity:0; transform:translate(-55%, 0) scale(0.5);}
.quick a:hover::after { opacity:1; transform:translate(-55%, 0) scale(0.8);}
@media all and (max-width:1300px){
	.quick a {height:185rem; padding:110rem 20rem 20rem 20rem; font-size:17rem;}
}
@media all and (max-width:1023px){
  .quick a {width:24%; height:auto; margin-top:10rem; padding:80rem 0 10rem;}
  .quick a::before {width:60rem; height:60rem;}
  .quick a::after {width:130rem; height:100rem;}
}
@media all and (max-width:768px){
  .quick a { width:49%; padding-top:90rem;}
  .quick a:nth-of-type(2n+1) { clear:both;}
}


.phone { position:relative; float:left; width:355rem; height:630rem; padding:80rem 50rem 50rem; background:url('/Main/Images/gbpolice/main/phone_bg.png') no-repeat 0 0/100%; margin:0 0 40rem;}
.phone h2 { float:left; font-size:21rem; /*color:#2a7fd7;*/}
.phone .link {float:right; margin:6rem 0  0 10rem;}
.phone .link a {display:block; float:left; width:27rem; height:27rem; background:url('/Main/Images/gbpolice/main/sns_icon.png') no-repeat 0 0/300% auto; text-indent:-99999rem; margin:0 0 0 5rem;}
.phone a.insta, .phone .insta::before {background-position:0 0;}
.phone a.facebook, .phone .facebook::before {background-position:50% 0;}
.phone a.youtube, .phone .youtube::before {background-position:100% 0;}
.phone .iframe {height:430px;}
.phone iframe {border:none; overflow:hidden; width:100%; height:100%;}
/*.phone .more { position:relative; display:block; float:right; font-size:16rem; font-weight:600; padding:0 15rem 0 0; margin:7rem 3rem 0;}
.phone .more::before {content:''; position:absolute; right:0; top:8rem; width:7rem; height:7rem; border-top:3px solid #333; border-right:3px solid #333; transform:rotate(45deg);}*/
.phone .img, .phone p { position:relative; clear:both; display:block; background:#000; overflow:hidden;}
.phone .img img { width:100%; opacity:0.6; transition:0.3s;}
.phone .img::before { content:''; position:absolute; left:50%; top:50%; width:48rem; height:48rem; background:url('/Main/Images/gbpolice/main/phone_play.png') no-repeat center/cover; transform:translate(-50%, -50%); z-index:10;}
.phone .img:hover img {opacity:0.8; transform:scale(1.1);}
.phone dt {font-size:20rem; font-weight:600; margin:20rem 0 15rem; display:-webkit-box; text-overflow:ellipsis; -webkit-box-orient:vertical; word-wrap:break-word; overflow:hidden; -webkit-line-clamp:2; line-height:32rem; max-height:64rem;}
.phone dd.txt { display:-webkit-box; text-overflow:ellipsis; -webkit-box-orient:vertical; word-wrap:break-word; overflow:hidden; -webkit-line-clamp:5; line-height:28rem; max-height:140rem;}
.phone dd.date {text-align:right; font-size:15rem; margin:15rem 0 0;}
@media all and (max-width:1023px){
  .phone { width:100%; height:auto; background:none; padding:30rem; border-radius:33rem; box-shadow:0 0 20rem rgba(0,0,0,0.2); margin:0;}
  /*.phone::before { content:''; position:absolute; left:7rem; top:7rem; width:calc(100% - 14rem); height:calc(100% - 14rem); border-radius:30rem; box-shadow:inset 0 0 10rem rgba(0,0,0,0.15);}*/
}
@media (max-width:1023px) and (min-width:481px){
  .phone .img, .phone p {float:left; width:255rem;}
  .phone dl {float:right; width:calc(100% - 300rem);}
  .phone dt {margin:0 0 5rem;}
}
@media all and (max-width:480px){
	.phone {display:block;}
}

.sns { position:relative; float:right; width:calc(100% - 450rem); margin-top:50rem;}
.sns .link {float:right; margin:55rem 0 0;}
.sns .link a, .sns dt p::before {display:block; float:left; width:45rem; height:45rem; background:url('/Main/Images/gbpolice/main/sns_icon.png') no-repeat 0 0/300% auto; text-indent:-99999rem; margin:0 0 0 10rem;}
.sns a.insta, .sns .insta::before {background-position:0 0;}
.sns a.facebook, .sns .facebook::before {background-position:50% 0;}
.sns a.youtube, .sns .youtube::before {background-position:100% 0;}
.sns dl {float:left; width:29.33%; margin:0 0 20rem 6%;}
.sns dl:first-of-type {clear:both; margin:0 0 20rem;}
.sns dt a { position:relative; display:block; width:100%; height:270rem; border-radius:10rem; overflow:hidden;}
.sns dt a span { position:absolute; left:0; top:0; width:100%; height:100%; background-size:cover; background-position:center; transition:0.4s;}
.sns dt a:hover span { transform:scale(1.1);}
.sns dt p { position:relative; color:#444; padding:0 0 0 40rem; margin:20rem 0;}
.sns dt p::before {content:''; position:absolute; left:0; width:30rem; height:30rem; margin:0;}
.sns dd {font-size:20rem; font-weight:600; display:-webkit-box; text-overflow:ellipsis; -webkit-box-orient:vertical; word-wrap:break-word; overflow:hidden; -webkit-line-clamp:2; line-height:32rem; max-height:64rem;}
@media all and (max-width:1200px){
  .sns {width:calc(100% - 400rem);}
}
@media all and (max-width:1023px){
  .sns {width:100%; margin:30rem 0;}
}
@media all and (max-width:768px){
  .sns dt a {height:220rem;}
}
@media all and (max-width:480px){
  .sns dl {width:100%; position:relative; margin:0 0 20rem;}
  .sns dt {float:left; width:180rem;}
  .sns dt a {height:180rem;}
  .sns dd {float:right; width:calc(100% - 200rem); margin:60rem 0 0;}
  .sns dt p {position:absolute; left:200rem; top:-10rem;}
}
@media all and (max-width:400px){
  .sns h2 {margin:50rem 0 10rem;}
  .sns .link { clear:both; float:none; margin:0 0 30rem; overflow:hidden;}
}

.photo { clear:both; margin:40rem auto 30rem; overflow:hidden;  }
.photo div a { float:left; width:22%;}
.photo div.img {position:relative; height:270rem; border-radius:10rem; margin:0 0 25rem; overflow:hidden;}
.photo div.img span { position:absolute; left:0; top:0; width:100%; height:100%; background-position:center; background-size:cover; transition:0.4s;}
.photo a:hover div.img span {transform:scale(1.1);}
@media all and (max-width:768px){
  .photo div a {width:30.66%;}
  .photo div a:last-of-type { display:none;}
  .photo div.img {height:220rem;}
}
@media all and (max-width:480px){
  .photo div.img {height:280rem;}
}

.banner {overflow:hidden;}
.banner h2 { float:left; font-size:30rem; margin:0;  }
.banner .control { float:left; margin:12rem 0 0;}
.banner .banner_slide {float:right; width:calc(100% - 300rem);}
.banner .banner_slide a { position:relative; display:flex; align-items:center; float:left; font-size:18rem; padding:0 47rem 0 40rem; height:50rem;}
.banner .banner_slide a::before { content:''; position:absolute; top:50%; right:0; width:7rem; height:7rem; background:#ccc; border-radius:50%; transform:translate(0, -50%);}
@media all and (max-width:768px){
  .banner .control {float:right;}
  .banner .banner_slide {clear:both; width:100%;}
}


/* layer popup ½½¶óÀ̵å */
.layor_section_popup {position:absolute; top:30rem; padding:5rem 5rem 0 5rem; background:#fff; box-shadow:0 0 30rem rgba(0,0,0,0.3); z-index:50;}
/*.layor_section_popup:before {content:''; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.6);}*/
.layor_section_popup form {position:relative; padding:5rem 5rem 10rem 5rem; background:#fff;}
.layor_section_popup form input[type=checkbox] {vertical-align:middle;}
.layor_section_popup form label {font-size:15rem; color:#666; margin:0 0 0 5rem; }
.layor_section_popup form a {position:absolute; right:5rem; font-weight:600;}
.layor_section_popup .img {position:relative;}
.layor_section_popup .img_ul img {width:100%;}
.layor_section_popup .btn {overflow:hidden; position:absolute; bottom:20rem; right:5rem; height:40rem !important; padding:0; z-index:999;}
.layor_section_popup .btn > * {float:left; height:40rem !important; background:rgba(255,255,255,0.9); margin:0 2rem; border-radius:4rem;}
.layor_section_popup .btn .pager {line-height:40rem !important; font-size:16rem;}
.layor_section_popup .btn .pager span {display:inline-block; position:relative; padding:0 20rem;}
.layor_section_popup .btn .pager span:before {content:''; position:absolute; top:50%; right:2rem; width:2rem; height:12rem; margin-top:-1rem; background:#666; transform:rotate(45deg) translateY(-50%);}
.layor_section_popup .btn span.current {font-weight:600;}
.layor_section_popup .btn span.total {color:#666;}
.layor_section_popup .btn span.total:before {display:none;}
.layor_section_popup .btn a {display:block; width:40rem !important; background:rgba(255,255,255,0.9) url('/Main/Images/gbpolice/main/popControl_black.gif') no-repeat 0 0; text-indent:-9999rem;}
.layor_section_popup .btn a.pop_next {background-position:-40rem 0;}
.layor_section_popup .btn a.pop_play {display:none; background-position:-120rem 0;}
.layor_section_popup .btn a.pop_stop {background-position:-80rem 0;}
@media all and (min-width:768px){
	#popup01 {top:0; right:0; width:440rem; box-sizing:border-box;}
}
@media all and (max-width:768px){
	.layor_section_popup {top:-50rem; width:90% !important; left:50%; margin-left:-45%;}
}
@media all and (max-width:599px){
	.layor_section_popup .img {background:#efefef;}
	.layor_section_popup .img_ul {clear:both;}
}