@charset "UTF-8";
/*========================================================================
	FileName   : /common/css/common.css
	*** LIST----------------------------------------------------
	*** 00: reset -- !uneditable
	*** 00: colorbox -- !uneditable
	*** 00: slider -- !uneditable
	*** 01: common
	*** 02: header
	*** 03: nav
	*** 04: pankuzu
	*** 05: container
	*** 06: tel_box
	*** 07: footer_portal
	*** 08: frame
========================================================================*/

/* ------------------------------------------------------
 00: reset -- !uneditable
------------------------------------------------------ */
/*	Copyright (c) 2010, Yahoo! Inc. All rights reserved.
	Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html
	version: 2.8.1 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin: 0; padding: 0;}
table { border-collapse: collapse; border-spacing: 0;}
fieldset,img { border: 0;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup { font-style: inherit; font-weight: inherit;}
em,strong { text-decoration: none;}
del,ins { text-decoration: none;}
li{ list-style: none;}
caption { text-align: left;}
th { text-align: center;}
h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal;}
q: before,q: after { content: '';}
abbr,acronym { border: 0; font-variant: normal;}
sup { vertical-align: top;}
sub { vertical-align: baseline;}
input,button,textarea,select,optgroup,option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;}
input,button,textarea,select { *font-size: 100%;}
/* clear fix */
.clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden;}
.clearfix { min-height: 1px;}
* html .clearfix {
	height: 1px;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}

/* ------------------------------------------------------
 00: colorbox -- !uneditable
	Colorbox Core Style:
	The following CSS is consistent between example themes and should not be altered.
------------------------------------------------------ */
#colorbox, #cboxOverlay, #cboxWrapper{ position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper { max-width:none;}
#cboxOverlay { position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft { clear:left;}
#cboxContent { position:relative;}
#cboxLoadedContent { overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle { margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic { position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor:pointer;}
.cboxPhoto { float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe { width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent { box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
/*	User Style:
	Change the following styles to modify the appearance of Colorbox.  They are
	ordered & tabbed in a way that represents the nesting of the generated HTML. */
#cboxOverlay{ background:#000;}
#colorbox{ outline:0;}
#cboxContent { margin-top: 20px; background: #000; border: 3px solid #93CDFE;}
.cboxIframe { background:#fff;}
#cboxError { padding:50px; border:1px solid #ccc;}
#cboxLoadedContent { background: #fff;}
#cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
#cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
#cboxLoadingGraphic{background:url("/join/image/loading.gif") no-repeat center center;}
/*	these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
/*	avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
#cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
#cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url("/join/image/common/colorbox/controls.png") no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:bottom left;}
#cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url("/join/image/common/colorbox/controls.png") no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
#cboxNext:hover{background-position:bottom right;}
#cboxClose { position: absolute; top: 25px; right: 25px; display: block; background: url("/join/image/common/colorbox/btn_close_top.png") no-repeat top center; width: 31px; height: 31px; text-indent: -9999px;}
#cboxClose:hover { background-position: bottom center;}
@media screen and (max-width: 640px) {
	#cboxClose { top: 10px; right: 10px;}
}
/*	customize */
body#overray { background: #ffffff;}
.inline_wrapper { display: none;}
.inline_box { position: relative; background-color: #ffffff; padding: 50px; text-align: left;}
.inline_box p.title { margin-bottom: 20px; font-size: 20px; font-weight: bold;}
.btn_close { margin-top: 30px; text-align: center;}
@media screen and (max-width: 640px) {
	.btn_close img { width: inherit!important;}
	.inline_box { padding: 35px;}
	.inline_box.widespace { padding: 50px 10px 35px;}
}

/* ------------------------------------------------------
 00: slider -- !uneditable
------------------------------------------------------ */
.slider { position: relative; width: inherit; overflow: hidden; height:252px;}
.slides { overflow: hidden; *zoom: 1; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; height:217px;}
.slide { float: left; clear: none;}
.slider__arrows { display: none;}
.slider__nav { margin: 10px auto!important; text-align: center;}
.slider__nav-item { display: inline-block; background: #cccccc; width: 15px; height: 15px; margin: 0 5px; clear: none;}
.slider__nav-item--current { background: #FFDC46;}
@media screen and (max-width: 640px) {
	.slider { height:auto;}
	.slides { height:auto;}
	.slider__nav-item { width:10px; height:10px;}
}

/* ------------------------------------------------------
 01: sliderPro
	- v1.2.1
	Homepage: http://bqworks.com/slider-pro/
	Author: bqworks
	Author URL: http://bqworks.com/
------------------------------------------------------ */
/*	Core */
.slider-pro { position: relative; margin: 0 auto; -moz-box-sizing: content-box; box-sizing: content-box;}
.sp-slides-container { position: relative;}
.sp-mask { position: relative; overflow: hidden;}
.sp-slides { position: relative; -webkit-backface-visibility: hidden; -webkit-perspective: 1000;}
.sp-slide { position: absolute;}
.sp-image-container { overflow: hidden;}
.sp-image { position: relative; display: block; border: none;}
.sp-no-js { overflow: hidden; max-width: 100%;}
/*	Thumbnails */
.sp-thumbnails-container { position: relative; overflow: hidden;}
.sp-bottom-thumbnails { left: 0; margin: 0 auto;}
.sp-bottom-thumbnails {/* margin-top: 4px;*/ margin-top: 0;}
.sp-right-thumbnails { position: absolute; top: 0;}
.sp-right-thumbnails { right: 10px; margin:  1px 0 1px 4px;}
.sp-thumbnails { position: relative;}
.sp-thumbnail { border: none;}
.sp-thumbnail-container { position: relative; display: block; overflow: hidden; float: left; -moz-box-sizing: border-box; box-sizing: border-box;}
/*	Right thumbnails with pointer */
.sp-right-thumbnails.sp-has-pointer {}
.sp-right-thumbnails.sp-has-pointer .sp-thumbnail { position: absolute; left: 10px; margin: 4px; border:1px solid #24506F;}
.sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail .sp-thumbnail{ border-radius:5px; margin: 0; border:5px solid #24506F;}
.sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:before { content: ''; position: absolute; width: 0; height: 0; left: 0; top: 50%; margin-top: -8px; border-right: 10px solid #24506F; border-top: 7px solid transparent; border-bottom: 7px solid transparent;}
/*	Bottom thumbnails with pointer */
.sp-bottom-thumbnails.sp-has-pointer {}
.sp-bottom-thumbnails.sp-has-pointer .sp-thumbnail { position: absolute; top: 18px; margin-top: 0 !important;}
.sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:before { content: ''; position: absolute; width: 100%; border-bottom: 5px solid #24506F; top: 0; margin-top: 13px;}
.sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:after { content: ''; position: absolute; width: 0; height: 0; left: 50%; top: 0; margin-left: -8px; border-bottom: 13px solid #24506F; border-left: 8px solid transparent; border-right: 8px solid transparent;}
/*	Layers */
.sp-layer { position: absolute; margin: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-font-smoothing: subpixel-antialiased; -webkit-backface-visibility: hidden;}
.sp-black { color: #FFF; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7);}
.sp-white { color: #000; background: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.7);}
.sp-rounded { border-radius: 10px;}
.sp-padding { padding: 10px;}
/*	Touch Swipe */
.sp-grab { cursor: url("/join/image/common/sliderPro/openhand.cur"), move;}
.sp-grabbing { cursor: url("/join/image/common/sliderPro/closedhand.cur"), move;}
.sp-selectable { cursor: default;}
@media only screen and (max-width: 640px) {
	.sp-slides-container{ height: auto !important;}
	.sp-thumbnail-container{margin-left: 3px;}
	.sp-thumbnail-container:first-child{margin-left: 0;}
	.sp-thumbnail-container .sp-thumbnail{border:1px solid #ffffff;}
	.sp-image-container .sp-image { margin:0 !important; height: auto !important;}
}
/*	Arrows */
.sp-arrows { position: absolute;}
.sp-fade-arrows { opacity: 0; -webkit-transition: opacity 0.5s; transition: opacity 0.5s;}
.sp-slides-container:hover .sp-fade-arrows { opacity: 1;}
.sp-horizontal .sp-arrows { width: 100%; left: 0; top: 50%; margin-top: -15px;}
.sp-vertical .sp-arrows { height: 100%; left: 50%; top: 0; margin-left: -10px;}
.sp-arrow { position: absolute; display: block; width: 40px; height: 28px; height: 40px\9; background:url("/join/image/common/sliderPro/arrow.png") no-repeat center center; background:url("/join/image/common/sliderPro/arrow_ie8.png") no-repeat\9; background-size: 40px 28px; cursor: pointer;}
.sp-vertical .sp-arrow { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);}
.sp-horizontal .sp-previous-arrow { left: 10px; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg);}
.sp-horizontal .sp-next-arrow { right: 10px; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);}
.sp-vertical .sp-previous-arrow { top: 10px; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); background-position:0 0\0/;}
.sp-vertical .sp-next-arrow { bottom: 10px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); background-position:0 -40px\0/;}
/*	CSS design custom */
.rightThumSlider{ width: 740px !important; height:268px; padding-right: 214px !important; border:2px solid #24506f; background-color:#E8E8E8;}
@media only screen and (max-width: 640px) {
	.rightThumSlider{width: auto !important; box-sizing:border-box; padding-right:0 !important; height:auto;}
}


/* ------------------------------------------------------
 01: common
------------------------------------------------------ */
body { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, メイリオ, YuGothic, 游ゴシック, sans-serif; font-size: 13px; line-height: 1.6; color:#222;}
a { color: #04c; text-decoration: none; cursor:pointer;}
a:hover { color: #f60; text-decoration: underline;}
a:focus { outline:none;}
ul li { line-height: 160%;}
dl dd { line-height: 160%;}
/*	Font Size Medium CSS */
.caption01, .caption02, .caption03 { font-size: 11px!important;}
#main_tel dl #main_faq{ font-size:13px;}

/*	layout-contents */
h2{ font-size:20px;}
h3{ font-size:16px;}
h4{ font-size:14px;}
sup{ font-size:11px;}

/*	overlay */
.overray .title { font-size: 14px!important; line-height: 140%!important;}
/*	tel */
#tel_wrapper li { font-size: 12px!important;}



/* ------------------------------------------------------
 00: header
------------------------------------------------------ */
#header { width: 100%; border-top: 2px solid #DCDCDC;}
#header #header_inner { width: 960px; margin: 0 auto; text-align: left;}
#header #logo_area p.logo { margin-top: 25px; float: left;}
#header #logo_area p.logo span.logo img { width: 144px; margin-right: 10px;}
#header #logo_area p.font_size { background-color: #DCDCDC; border-radius: 0 0 5px 5px; float: right;}
#header #logo_area p.font_size img { padding: 3px 7px;}
#header ul.nav_service { text-align: right;}
#header ul.nav_service li { display: inline-block; margin-right: 20px;}
#header ul.nav_service li.end { margin-right: 0;}
#header #header_inner h1 { margin: 10px 0; text-align: right;}
@media screen and (max-width: 640px) {
	#header #header_inner { width: inherit!important; float: none!important;}
	#header #logo_area p.logo { display: table; width:90%!important; margin:10px auto;}
	#header #logo_area p.logo span.logo { display: table-cell; width: 36%!important; padding-right: 5px;}
	#header #logo_area p.logo span.logo img { width: 100%;}
	#header #logo_area p.logo span.logo_sub { display: table-cell; width: 64%!important;}
	#header #logo_area p.logo span.logo_sub img { width: 100%!important;}
	#header ul.nav_service { display: none!important;/*?ꎞ?I?ɍ폜*/ text-align: left;}
	#header ul.nav_service li { background-color: #3597EA; width: 50%; border-right: 5px solid #ffffff;}
	#header ul.nav_service li.end { border-left: 5px solid #ffffff; border-right: none;}
}


/* ------------------------------------------------------
 00: nav
------------------------------------------------------ */
#header #nav_btn { display: none;}
#header dl.nav { position: relative; background-color: #225780; margin-top: 15px; padding-bottom: 2px; border-top: 1px solid #969696;}
#header dl.nav dt { margin-right: 1px; font-size: 15px; color: #ffffff; float: left;}
#header dl.nav dt.stt { margin-left: 1px;}
#header dl.nav dt.end { margin-right: 0;}
/*	on */
#header dl.nav dt.selected a { display: block; background-color: #225780; width: 147px; padding: 6px 10px 6px 45px; color: #ffffff; border-radius: 0 0 2px 2px;}
#header dl.nav dt.selected a.end { width: 91px;}
#header dl.nav dt.selected a.ftth {
	background: url("/join/image/template/nav_ftth_on.png") 10px center no-repeat #225780;
	background: url("/join/image/template/nav_ftth_on_ie8.png") 10px center no-repeat #225780\9;/* IE8 */
	background-size: 30px 32px;
}
#header dl.nav dt.selected a.mobile {
	background: url("/join/image/template/nav_mobile_on.png") 10px center no-repeat #225780;
	background: url("/join/image/template/nav_mobile_on_ie8.png") 10px center no-repeat #225780\9;/* IE8 */
	background-size: 30px 32px;
}
#header dl.nav dt.selected a.other {
	background: url("/join/image/template/nav_other_on.png") 10px center no-repeat #225780;
	background: url("/join/image/template/nav_other_on_ie8.png") 10px center no-repeat #225780\9;/* IE8 */
	background-size: 30px 32px;
}
#header dl.nav dt.selected a.support {
	background: url("/join/image/template/nav_support_on.png") 10px center no-repeat #225780;
	background: url("/join/image/template/nav_support_on_ie8.png") 10px center no-repeat #225780\9;/* IE8 */
	background-size: 30px 32px;
}
#header dl.nav dt.selected a.houzin {
	background: url("/join/image/template/nav_houzin_on.png") 10px center no-repeat #225780;
	background: url("/join/image/template/nav_houzin_on_ie8.png") 10px center no-repeat #225780\9;/* IE8 */
	background-size: 30px 32px;
}
.pc_no{ display:block!important;}
.smp_no{ display:none!important;}
/*	off */
#header dl.nav dt a { display: block; background-color: #E8E8E8; width: 147px; padding: 6px 10px 6px 45px; color: #225780; border-radius: 0 0 2px 2px;}
#header dl.nav dt a:hover { text-decoration: none; opacity: 0.8;}
#header dl.nav dt a.end { width: 91px;}
#header dl.nav dt a.ftth {
	background: url("/join/image/template/nav_ftth.png") 10px center no-repeat #E8E8E8;
	background: url("/join/image/template/nav_ftth_ie8.png") 10px center no-repeat #E8E8E8\9;/* IE8 */
	background-size: 30px 32px;
}
#header dl.nav dt a.mobile {
	background: url("/join/image/template/nav_mobile.png") 10px center no-repeat #E8E8E8;
	background: url("/join/image/template/nav_mobile_ie8.png") 10px center no-repeat #E8E8E8\9;/* IE8 */
	background-size: 30px 32px;
}
#header dl.nav dt a.other {
	background: url("/join/image/template/nav_other.png") 10px center no-repeat #E8E8E8;
	background: url("/join/image/template/nav_other_ie8.png") 10px center no-repeat #E8E8E8\9;/* IE8 */
	background-size: 30px 32px;
}
#header dl.nav dt a.support {
	background: url("/join/image/template/nav_support.png") 10px center no-repeat #E8E8E8;
	background: url("/join/image/template/nav_support_ie8.png") 10px center no-repeat #E8E8E8\9;/* IE8 */
	background-size: 30px 32px;
}
#header dl.nav dt a.houzin {
	background: url("/join/image/template/nav_houzin.png") 10px center no-repeat #E8E8E8;
	background: url("/join/image/template/nav_houzin_ie8.png") 10px center no-repeat #E8E8E8\9;/* IE8 */
	background-size: 30px 32px;
}
/*	popup */
#header dl.nav dd { display: none; position: absolute; top: 37px; left: 0; width: 960px; z-index: 9999;}
#header ul.popup { background:  url("/join/image/template/nav_bg.png"); padding: 20px 20px 0 20px;}
#header ul.popup li { display: block; width: 280px; margin: 0 20px 20px 0; color: #ffffff; float: left;}
#header ul.popup li a { color: #ffffff !important; line-height:130%;}
#header ul.popup li a:hover { text-decoration: none; opacity: 0.5;}
#header ul.popup li img { background-color: #ffffff; width: 72px; margin-right: 10px; border: 2px solid #ffffff;}
#header ul.popup li img.orange { background-color: #DF5412; border: 2px solid #DF5412;}
#header ul.popup li span.logo { display: block; width: 90px; float: left;}
@media screen and (max-width: 640px) {
	#header #nav_btn { display: block; text-align: right;}
	#header #nav_btn img { width: 39px!important;}
	#header #nav_cont { display: none;}
	#header dl.nav { margin-top: 0; padding-bottom: 0; border: 2px solid #225780; }
	#header dl.nav dt { margin-right: 0; border-bottom: 2px solid #225780;}
	#header dl.nav dt.selected { border-bottom: 2px solid #ffffff!important;}
	#header dl.nav dt.end { border-bottom: none;}
	#header dl.nav dt.end_sp { border-bottom: none;}
	#header dl.nav dt a { border-radius: 0;}
	#header dl.nav dt.stt { margin-left: 0;}
	#header dl.nav dd { position: relative; top: 0; width: inherit;}
	#header ul.popup { background: #4A6477; padding: 10px;}
	#header ul.popup li { display: block; margin: 0; padding-top: 10px; padding-bottom: 10px; border-bottom: 2px solid #ffffff;}
	#header ul.popup li.end { border-bottom: none;}
	#header ul.popup li img { margin-right: 0; border-top: 4px solid #ffffff; border-bottom: 4px solid #ffffff;}
	#header ul.popup li span.logo { display: table-cell; width: 20%; padding-right: 10px; vertical-align: middle; float: none;}
	#header ul.popup li.stt { padding-top: 0;}
}

/* ------------------------------------------------------
 00: pankuzu
------------------------------------------------------ */
#pankuzu_area { font-size: 12px;}
#pankuzu_area.liquid { width: 960px; margin: 10px auto 10px;}
#pankuzu_area ul#pankuzu_list { float: left;}
#pankuzu_area ul#pankuzu_list li { margin-left: 5px; float: left;}
#pankuzu_area ul#pankuzu_list li.stt { margin-left: 0;}
#pankuzu_area ul#pankuzu_list li.arrow { font-weight: bold; color: #1e7aae;}
#pankuzu_area h1 { float: right;}

/* ------------------------------------------------------
 00: container
------------------------------------------------------ */
#container { width: 960px; margin: 10px auto 50px; text-align: left; color: #4F4F4F;}
#container a { color: #4F4F4F;}
#container a:hover { color: #3597EA; text-decoration: none;}
#container a:hover * { color:#4F4F4F;}
#container_inner { margin: 10px 0 0; font-size:16px;}
.cont{ margin:0 0 60px; line-height:156%;}
@media screen and (max-width: 640px) {
	#container { width:auto; margin: 0 auto;}
	#container_inner { font-size:14px;}
	.btn_pagetop { margin: 0 10px 10px; text-align: right;}
	.btn_pagetop img { width: 34px!important;}
	.cont{ margin:0 10px 30px;}
}
/* ------------------------------------------------------
 00: tel_box
------------------------------------------------------ */
.tel_box { background-color: #ebebeb; max-width: 665px; margin: 0 auto 50px; padding: 10px; text-align:left;}
.tel_box_header { text-align: center;}
.tel_box_top { background-color: #ffffff; margin-bottom: 20px; padding: 10px;}
.tel_box_top_02 { background-color: #ffffff; padding: 10px;}
.tel_box_top_left { float: left;}
.tel_box_top_right { width: 385px; float: right;}
.holiday { background-color: #428D00; padding: 1px 5px; color: #ffffff;}
.tel_box_bottom { background-color: #ffffff; margin-bottom: 20px; padding: 10px;}
.tel_box_bottom_left { width: 255px; float: left;}
.tel_nexus_box_left { width: 38px; margin-right: 10px; float: left;}
.tel_nexus_box_left img { width: 38px;}
.tel_nexus_box_right { width: 207px; float: right;}
.tel_box_bottom_right { width: 385px; float: right;}

@media screen and (max-width: 640px) {
	.tel_box_top_left { margin-bottom: 10px; float: none;}
	.tel_box_top_right { width: inherit; float: none;}
	.tel_box_top_right img { width: 100%;}
	.tel_box_bottom_left { width: inherit; margin-bottom: 10px; float: none;}
	.tel_nexus_box { display: table; width: 100%;}
	.tel_nexus_box_left { display: table-cell; width: 78px; padding-right: 10px; float: none;}
	.tel_nexus_box_left img { width: 78px;}
	.tel_nexus_box_right { display: table-cell; width: 70%; vertical-align: middle; float: none;}
	.tel_box_bottom_right { width: inherit; float: none;}
	.tel_box_bottom_right img { width: 100%;}
}

/* ------------------------------------------------------
 00: footer_portal
------------------------------------------------------ */
.pagetop{ width:960px; text-align:right; margin:0 auto; font-size:12px; line-height:140%; clear:both; background:url("/join/image/common/arrow_top.gif") right 2px no-repeat;}
.pagetop a{ margin-right:17px;}
#footer_portal { clear:both; width: 100%; margin-bottom:10px; padding-top:30px; border-bottom:3px solid #4B9CD4;}
#footerSearch { text-align:center; width:100%; padding:10px 0; background-color:#dcefff;}
#footerSearch .search_form_txt{ width: 300px; border:1px solid #BEC6CD; padding:4px 5px; border-radius:4px;}
#footerSearch .search_form_btn{ background-color:#EFEFEF; border:1px solid #BEC6CD; border-radius:4px; padding:3px 5px; box-shadow: 0 1px 0 0 rgba(255,255,255,0.8) inset;}
#footerRecommend{ border-bottom:2px solid #4b9cd5; padding:7px 0;}
.footer_link{ width:960px; margin:0 auto 10px; font-size:12px; line-height:140%;}
#footer_portal .footer_link{ margin:0 auto 30px;}
.footer_link_list{ width:690px; margin:0 auto; text-align:center;}
.footer_link_list li{ display:inline-block; margin-right:3px;}
.footer_link_list li::after{ content: "|"; margin-left:3px;}
.footer_link_list li.end{ margin-right:0;}
.footer_link_list li.end::after{ content: ""; margin-left:0;}
.footer_mark{ width:120px; float:right;}
.footer_mark .privacy{ width:66px; float:left;}
.footer_mark .ssisp{ width:48px; float:right;}
#layout-footer .footer_link table{ float:right;}
#footer-copyright{ font-size:12px; padding-top:55px; float:left;}
#nolinks_footer{ border-top:2px solid #4b9cd5; padding-top:10px; margin-top:10px; border-bottom:3px solid #4B9CD4;}
#nolinks_footer #footer-copyright{ padding-top:30px;}
@media screen and (max-width: 640px) {
	.footer_link{ width:auto;}
	.footer_link_list{ width:auto; margin-bottom:10px;}
	.footer_link_list li{ margin-left:5px;}
	.footer_link_list li::after{ content: ""; margin-left:0;}
	#footerSearch form{ display:table; width:90%; margin:0 auto;}
	#footerSearch .search_form_txt{ display:table-cell; width: 60%; height:30px; box-sizing:border-box; border-right:0; border-radius:4px 0 0 4px;}
	#footerSearch .search_form_btn{ display:table-cell; width: 30%; height:30px; box-sizing:border-box; border-radius:0 4px 4px 0;}
	.footer_mark{ width:80px; float:none; margin:0 auto;}
	.footer_mark .privacy{ width:40px;}
	.footer_mark .ssisp{ width:30px;}
	#footer-copyright{ padding-top:10px; float:none; text-align:center;}
}

/* ------------------------------------------------------
 00: frame
------------------------------------------------------ */
.fr_column > *{ float:left; margin-left:2%; box-sizing:border-box;}
.fr_column > *:first-child{ margin-left:0 !important;}
.fr_column.fr_col2 > *{ width:49%;}
.fr_column.fr_col3 > *{ width:32%;}
.fr_column.fr_col4 > *{ width:23.5%;}
.fr_column.fr_col5 > *{ width:18.4%;}
@media screen and (max-width: 640px) {
	.fr_column > *{ width:100% !important; float:none !important; margin:15px 0 0;}
	.fr_column > *:first-child{ margin-top:0;}
}