@charset "utf-8";

@import url(/css/co/na/ntt.css);

@import url(common.css);
@import url(page_view.css);


#sub_container {position:relative; padding-top:117px;}
#sub_container:after {content:""; display:block; clear:both;}

/* 비주얼 */
.sub_visual  {position:relative; width:100%; height:310px; overflow:hidden; text-align:center; background:url('/images/web/mcmkcg/sub/bg_S_visual.png') no-repeat center 0;}
.sub_visual .tit{position:absolute; left:0; top:50px; width:100%; height:50px; -webkit-animation:s_visual 0.5s  ease; -moz-animation:s_visual 0.5s  ease; -o-animation:s_visual 0.5s  ease; -ms-animation:s_visual 0.5s  ease; animation:s_visual 0.5s  ease;}
.sub_visual .txt{position:absolute; left:0; top:130px; width:100%; font-family:'NotoB'; font-size:50px; color:#ffcc00; text-shadow:1px 2px 2px rgba(6,7,7,.77); -webkit-animation:s_visual2 1.0s  ease; -moz-animation:s_visual2 1.0s  ease; -o-animation:s_visual2 1.0s  ease; -ms-animation:s_visual2 1.0s  ease; animation:s_visual2 1.0s  ease;}

@-webkit-keyframes s_visual {
	0% {transform:translateY(10px); opacity:0;}
	100% {transform:translateY(0); opacity:1;}
}
@-moz-keyframes s_visual {
	0% {transform:translateY(10px); opacity:0;}
	100% {transform:translateY(0); opacity:1;}
}
@-o-keyframes s_visual {
	0% {transform:translateY(10px); opacity:0;}
	100% {transform:translateY(0); opacity:1;}
}
@-ms-keyframes s_visual {
	0% {transform:translateY(10px); opacity:0;}
	100% {transform:translateY(0); opacity:1;}
}
@keyframes s_visual {
	0% {transform:translateY(10px); opacity:0;}
	100% {transform:translateY(0); opacity:1;}
}

@-webkit-keyframes s_visual2 {
	0% {transform:translateY(10px); opacity:0;}
	50% {transform:translateY(10px); opacity:0;}
	100% {transform:translateY(0); opacity:1;}
}
@-moz-keyframes s_visual2 {
	0% {transform:translateY(10px); opacity:0;}
	50% {transform:translateY(10px); opacity:0;}
	100% {transform:translateY(0); opacity:1;}
}
@-o-keyframes s_visual2 {
	0% {transform:translateY(10px); opacity:0;}
	50% {transform:translateY(10px); opacity:0;}
	100% {transform:translateY(0); opacity:1;}
}
@-ms-keyframes s_visual2 {
	0% {transform:translateY(10px); opacity:0;}
	50% {transform:translateY(10px); opacity:0;}
	100% {transform:translateY(0); opacity:1;}
}
@keyframes s_visual2 {
	0% {transform:translateY(10px); opacity:0;}
	50% {transform:translateY(10px); opacity:0;}
	100% {transform:translateY(0); opacity:1;}
}

/* 서브상단메뉴 */
.box_line_map {position:relative; width:100%; height:60px; margin:-60px 0 0; background:url("/images/web/mcmkcg/sub/bg_top_smn.png") repeat-x left top; z-index:10;}
.box_line_map_1 .sp_home {position:absolute; left:0; top:0; width:60px; height:60px; display:block; font-size:0; text-indent:-10000px; overflow:hidden; background:url("/images/web/mcmkcg/sub/icon_home.png") no-repeat center center #02143f;}
.box_line_map_1 {position:relative; width:1140px; margin:0 auto; padding-left:60px;}
.box_line_map_2 {position:relative; width:25%; float:left; margin:0; background:url("/images/web/mcmkcg/sub/bg_top_smn2.png") repeat-x left top;}
.box_line_map_2 > a {position:relative; display:block; position:relative; padding:0 60px 0 20px; line-height:60px; font-family:"NotoR"; font-size:16px; color:#fff; border-left:1px solid #3b5d92;}
.box_line_map_2 > a .sp_img {display:block; position:absolute; top:50%; right:20px; width:30px; height:30px; margin-top:-15px; background:url("/images/web/mcmkcg/sub/sp_sub.png") no-repeat center;}
.box_line_map_2.on > a {color:#fff799;}
.box_snb_1 {position:absolute; top:60px; left:0; width:100%; display:none; overflow:hidden; z-index:1; max-height:0; }
.box_snb_1 ul {border-left:1px solid #000c28; border-right:1px solid #000c28;}
.box_snb_1 a {display:block; font-size:14px; padding:0 20px; border-bottom:1px solid #000c28; background:#02143f; color:#fff; line-height:39px; white-space:nowrap;}
.box_snb_1 a:hover, .box_snb_1 li.on a {background-color:#0d40a1; color:#fff799; text-decoration:underline;}

/* 글자크기 설정 및 프린트 *//* 180808 */
.text_set {position:absolute; left:50%; top:372px; margin-left:430px; z-index:12; overflow:hidden;}
.text_set a {display:block; width:44px; height:52px; float:left; text-indent:-10000em; font-size:0; }
.text_set a.text_zi {background:url("/images/web/mcmkcg/sub/text_set_ZoomIn.png") no-repeat center;}
.text_set a.text_rs {background:url("/images/web/mcmkcg/sub/text_set_Reset.png") no-repeat center;}
.text_set a.text_zo {background:url("/images/web/mcmkcg/sub/text_set_ZoomOut.png") no-repeat center;}
.text_set a.btnPrint {background:url("/images/web/mcmkcg/sub/btn_print.png") no-repeat center;}

/* 서브콘텐츠 영역 */
.sub_content {position:relative; z-index:7; width:1200px; margin:0 auto; overflow:hidden; min-height:700px;word-break:keep-all;}
/* 서브페이지 */
#subContent{position:relative; margin:0 0 100px 0;}
.subContent_header {position:relative; }
.subContent_body {position:relative; min-height:600px; margin-top:40px; font-family:"NotoR"; font-size:14px; line-height:1.4;}
.subContent_body p {line-height:1.4;}

/* 로케이션 */
#location {position:absolute; right:75px; top:47px; font-size:15px; font-family:"NotoR"; line-height:1.4; vertical-align:middle; overflow:hidden;}
#location a {color:#333;}
#location img {vertical-align:middle; margin-top:-1px}
#location span,
#location strong { display:inline-block; padding-left:13px; margin-left:7px; background:url('/images/web/mcmkcg/sub/bgLocation.gif') no-repeat 0 6px; }
#location span { color:#333; }
#location strong {font-weight:normal; color:#05205f; font-family:"NotoM";}

/* 페이지 타이틀 */
#pageTitle {height:115px; line-height:110px; font-size:36px; letter-spacing:-1px; color:#111; font-family:"NotoM"; background:url("/images/web/mcmkcg/sub/bg_sub_title.png") repeat-x left bottom;}

/* etc : sns*/ 
.snsBox { position:absolute; top:44px; right:0; text-align:right;}
.snsBox button { display:inline-block; width:26px; height:26px; overflow:hidden; margin-left:3px; background:url("/images/web/mcmkcg/sub/btnSns.gif") no-repeat 0 0;}
.snsBox button > span {text-indent:-1000px; font-size:0; line-height:0;}
.snsBox .btnPrint { background-position:0 0; }
.snsBox .btnFbook { background-position:-29px 0; }
.snsBox .btnTwt { background-position:-58px 0; }
.snsBox .btnBlog { background-position:-87px 0; }
.snsBox .btnYtb { background-position:-116px 0; }
.snsBox .btnInstar{ background-position:-145px 0; }
.snsBox .btnShare{ background-position:-174px 0; }
.snsBox .btnGoogle{ background-position:-203px 0; }
.snsBox  .sns_more{display:none; position:absolute; top:30px; right:0; width:165px; *width:145px; border:1px solid #bbb; border-radius:2px; padding:10px 10px 10px 7px; z-index:30; background-color:#fff;}


@media (max-width:1019px) {	
	
	#sub_container {padding-top:70px;}
	
	/* 비주얼 */
	.sub_visual  {height:260px; background-size:cover;}
	.sub_visual .tit {top:40px;}
	.sub_visual .tit img {width:680px;}
	.sub_visual .txt {top:115px;font-size: 40px;}


	.sub_content {width:95%;}

	/* 서브상단메뉴 */
	.box_line_map {height:50px; margin:-50px 0 0;}
	.box_line_map_1 .sp_home {width:50px; height:50px;}
	.box_line_map_1 {width:100%; padding-left:50px; -webkit-box-sizing:border-box; , -moz-box-sizing:border-box; box-sizing:border-box; }
	.box_line_map_2 > a {padding:0 50px 0 10px; line-height:50px; font-size:15px;}
	.box_line_map_2 > a .sp_img {right:10px;}
	.box_snb_1 {top:50px;}
	.box_snb_1 a {font-size:14px; padding:0 10px;}

	/* 글자크기 설정 및 프린트 *//* 180808 */
	.text_set { display:none}

	/* 서브페이지 */
	#subContent {width:100%; margin:0 auto;}
	#location {left:0; right:auto; top:auto; bottom:20px; font-size:13px;}
	
	/* 페이지 타이틀 */
	#pageTitle {width:100%; height:auto; min-height:90px; margin:0 auto; padding:20px 70px 40px 0; line-height:1.2;  font-size:24px; -webkit-box-sizing:border-box; , -moz-box-sizing:border-box; box-sizing:border-box; }
	.subContent_body{min-height:auto; margin:20px 0 40px; }

	/* etc : sns*/ 
	.snsBox {position:absolute; top:18px; right:0;}

}

@media (max-width:800px) {

}

@media (max-width:690px) {

	/* 비주얼 */
	.sub_visual  {height:160px;}
	.sub_visual .tit {top:35px;}
	.sub_visual .tit img {width:450px;}
	.sub_visual .txt {top:90px; font-size:24px;}
	
	/* 서브상단메뉴 */
	.box_line_map {display:none}


	/* 페이지 타이틀 */
	#pageTitle { font-size:24px;}

	
	
}

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

	
}

@media (max-width:480px) {

	/* 비주얼 */
	.sub_visual  {height:130px;}
	.sub_visual .tit {top:35px;}
	.sub_visual .tit img {width:290px;}
	.sub_visual .txt {top:70px; font-size:20px;}

	/* 페이지 타이틀 */
	#pageTitle {font-size:20px}
	
	/* linemap */
	.box_line_map_2 > a {padding-right:0;}
	.box_line_map_2 > a .sp_img,
	.box_line_map_1 .sp_home,
	.box_line_map_1 .sp_home + .span_gt{display:none}
	.box_line_map_1 .span_gt {overflow:hidden; position:relative; width:23px; height:39px; margin-top:0; padding-top:0; background-image:none;/* Old browsers */ background: #f3f3f3;/* FF3.6+ */ background: -moz-linear-gradient(left,  #bababa 0%, #f3f3f3 100%); /* Chrome,Safari4+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#bababa), color-stop(100%,#f3f3f3)); /* Chrome10+,Safari5.1+ */  background: -webkit-linear-gradient(left, #bababa 0%, #f3f3f3 100%); /* Opera 11.10+ */ background: -o-linear-gradient(left,  #bababa 0%,#f3f3f3 100%); /* IE10+ */ background: -ms-linear-gradient(left, #bababa 0%, #f3f3f3 100%); /* W3C */ background: linear-gradient(to right, #bababa 0%, #f3f3f3 100%); /* IE6-9 */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bababa', endColorstr='#f3f3f3', GradientType=1 );}
	.box_line_map_1 .span_gt:before{display:block; position:absolute; top:20px; left:-40px; width:40px; height:40px; border:1px solid #fff; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transform-origin:0 0; -moz-transform-origin:0 0; -ms-transform-origin:0 0; transform-origin:0 0; background-color:#f3f3f3; content:'';}
	.box_line_map_1 > p > span,
	.box_line_map_1 > p {margin:0 3px;}
	.box_line_map_1 > p:first-child {padding-left:10px;}
	
	/* 서브콘텐츠 **************************************************************************************************************************************************************************************************************/
	
	
}

@media (max-width:380px) {
		
	.sub_visual .txt {top:70px; font-size:18px;}
	
}