@charset "utf-8";


/* ************* 일본어 사이트 공통 ************* */
html { min-width: 320px; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{font-family:"Meiryo UI";}
img { max-width: 100%; }
#container .page_head { text-align: center; }
#container .page_head .page_tit { display: table; width: 100%; height: 205px; background: url(/japan/img/common/bg_page_head.jpg) center top no-repeat; table-layout: fixed; }
#container .page_head .page_tit h2 { display: table-cell; color: #fff; font-size: 33px; font-weight: bold; vertical-align: middle; }
#container .page_head .page_tit h2 span { display: inline-block; border-bottom: 2px solid; }
#container .page_head .sub_menu { background-color: #efefef; }
#container .page_head .sub_menu ul { display: table; width: 100%; border-left: 1px solid #dedede; table-layout: fixed; }
#container .page_head .sub_menu li { display: table-cell; border-right: 1px solid #dedede; vertical-align: middle; }
#container .page_head .sub_menu li a { display: table; width: 100%; table-layout: fixed; color: #8c8c8c; font-size: 19px; font-weight: bold; line-height: 1; }
#container .page_head .sub_menu li.on a { color: #000; background-color: #fff; }
#container .page_head .sub_menu li a span { display: table-cell; height: 56px; padding: 0 4px; border-top: 4px solid transparent; vertical-align: middle; }
#container .page_head .sub_menu li.on a span { border-top-color: #00abeb; }

#container .section { margin-bottom: 30px; padding: 60px 20px; color: #808080; line-height: 1.5; }
#container .section:last-child { margin-bottom: 0; }
#container .cont_wrap { max-width: 1300px; margin: 0 auto; }
#container .cont_wrap .cont_head { padding-bottom: 1em; line-height: 1.2; }
#container .cont_wrap .cont_head h3 { font-size: 22px; color: #255ea2; font-weight: bold; }
#container .cont_wrap .cont_head h4 { position: relative; margin-top: 2em; padding-top: 1em; font-size: 18px; color: #303030; }
#container .cont_wrap .cont_head h4:before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 40px; height: 1px; background-color: #00abeb; }
#container .cont_wrap .cont_head h4 strong { color: #00abeb; font-weight: bold; }
#container .cont_wrap .cont_body { }

#container .m_wrap { display: none !important; }

@media screen and (max-width:768px){
	#container .page_head .page_tit { height: 100px; background-size: cover; }
	#container .page_head .page_tit h2 { font-size: 23px; }
	#container .page_head .sub_menu li a { font-size: 13px; }
	#container .page_head .sub_menu li a span { height: 44px; border-top-width: 3px; }

	#container .section { margin-bottom: 10px; padding: 30px 3%; }
	#container .pc_wrap { display: none !important; }
	#container .m_wrap { display: block !important; }
}


/* 플로우차트 (가로 / 화살표) */
.flow_chart { overflow: hidden; margin-left: -2.5%; margin-bottom: 20px; }
.flow_chart ul { margin-left: -10px; }
.flow_chart li { float: left; width: 22.5%; margin-left: 2.5%; margin-bottom: 1%; padding-left: 10px; text-align: center; }
.flow_chart li > p { display: table; width: 100%; table-layout: fixed; }
.flow_chart li > p > span { position: relative; display: table-cell; height: 90px; padding: 5px; padding-right: 0; background-color: #00abeb; color: #fff; font-weight: bold; vertical-align: middle; z-index: 1; }
.flow_chart li:first-child > p > span { background-color: #f18d52; }
.flow_chart li:first-child > p > span:after { border-left-color: #f18d52; }
.flow_chart li:last-child > p > span { background-color: #004290; padding-right: 5px; }
.flow_chart li:last-child > p > span:before { border-color: #004290; border-left-color: transparent; }

.flow_chart li > p > span:before,
.flow_chart li > p > span:after { content: ""; display: block; position: absolute; top: 0; border-style: solid; border-width: 45px 30px; }
.flow_chart li > p > span:before { left: -30px; z-index: -1; border-color: #00abeb; border-left-color: transparent; }
.flow_chart li > p > span:after { right: -60px; border-color: transparent; border-left-color: #00abeb; }
.flow_chart li:first-child > p > span:before { content: none; }
.flow_chart li:last-child > p > span:after { content: none; }

@media screen and (max-width:1024px){
	.flow_chart { margin-left: 0; margin-bottom: 10px; }
	.flow_chart ul { margin-left: 0; }
	.flow_chart li { float: none; width: auto !important; margin-left: 0; margin-bottom: 18px; padding-left: 0; }
	.flow_chart li > p > span { height: 60px; padding: 5px; }
	.flow_chart li > p > span:before { content : none; }
	.flow_chart li > p > span:after { top: inherit; bottom: -20px; left: 50%; right: inherit; margin-left: -8px; border-width: 10px 8px; border-color: transparent; border-top-color: #00abeb; }
	.flow_chart li:first-child > p > span:after { border-color: transparent; border-top-color: #f18d52; }
}

@media screen and (max-width:768px){
	.flow_chart li { margin-bottom: 12px; }
	.flow_chart li > p > span { height: 48px; }
}

/* iframe 관련 */
#container .iframe_wrap { overflow: hidden; position: relative; padding-bottom: 50%; height: 0; background-color: #f4f4f4; }
#container .iframe_wrap iframe,
#container .iframe_wrap object,
#container .iframe_wrap embed { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

@media screen and (max-width:640px){
	#container .iframe_wrap { padding-bottom: 240px; }
}



/* 윤경씨 작업본 */
#header { border-top: 5px solid #f2f2f2; background-color: #fff; }
#header .header_wrap { overflow: hidden; max-width: 1300px; margin: 0 auto; padding: 15px 10px 10px; }
#header .header_wrap h1 { display: inline-block; }
#header .header_wrap h1 img { width: 130px; }
#header .header_wrap .site_links { display: inline-block; float: right; padding-top: 10px; }
#header .header_wrap .site_links a { padding-left: 8px; color: #8b8b8b; font-size: 14px; }
#header .header_wrap .site_links a.go_home { padding: 8px; background-color: #666; background: #008bd7; color: #fff; border-radius:5px; }
#header .header_wrap .site_links a img { padding-right: 6px; vertical-align: top; }

#footer { background-color: #efeff4; }
#footer .footer_wrap { max-width:1300px; margin:0 auto; padding: 20px; color:#8b8b8b; }
#footer .footer_wrap li { display: inline-block; }
#footer .footer_wrap li:after { content: "|"; display: inline-block; margin-left: 5px; padding: 0 0.5em; color: #c0c0c0; font-size: 11px; vertical-align: middle; }
#footer .footer_wrap li:last-child:after { content: none; }
#footer .footer_wrap li.name { color: #303030; }
#footer .footer_wrap p { margin: 5px 0; }

@media screen and (max-width:1301px){
}

@media screen and (max-width:640px){
	#header .header_wrap h1 a img { width:100px; }
	#header .header_wrap .site_links { padding-top:5px; }
	#header .header_wrap .site_links a img { padding-right: 3px; width: 16px; vertical-align: baseline; }
}

@media screen and (max-width:480px){
	#header .header_wrap .site_links a { font-size:13px; }
	#footer { font-size: 13px; }
}