@charset "utf-8";
/* CSS Document */

/*** MV ***/
#mv {
	background-image:url(../images/cm/mv_bg01.jpg);
	background-repeat:no-repeat;
	width:980px;
	height:428px;
}

#mv #move_img01 {
	position:absolute;
	left:208px;
	top:150px;
}
#mv #move_img02 {
	position:absolute;
	right:36px;
	bottom:-26px;
}

/*** 內容 ***/
#section1 section {
	background:url(../images/cm/section1_bg.jpg) no-repeat;
	height:490px;
	position:relative;
}

#section1 section .videoBox {
	width:622px;
	height:302px;
	position:absolute;
	left:315px;
	top:104px;
}

#section1 h2 {
	background:url(../images/cm/section1_text01.png) no-repeat left top;
	width:492px;
	height:58px;
	text-indent:-9999px;
	position:absolute;
	top:8px;
	right:110px;
}

#section1 p {
	background:url(../images/cm/section1_text02.png) no-repeat left top;
	width:173px;
	height:385px;
	text-indent:-9999px;
	position:absolute;
	top:60px;
	left:60px;
}

#m_section1 {
	display:none;
}

#section2 section {
	background:url(../images/cm/section2_bg.jpg) no-repeat;
	height:262px;
	position:relative;
}

#section2 h2 {
	background:url(../images/cm/section2_title.png) no-repeat;
	width:304px;
	height:43px;
	text-indent:-9999px;
}

#section2 ul {
	margin-left:28px;
}

#section2 ul li {
	float:left;
	width:223px;
	height:190px;
	margin-right:10px;
}

#section2 ul li a {
	display:block;
	width:223px;
	height:133px;
	opacity:0.7;
}

#section2 ul li a:hover {
	opacity:1;
}

#section2 ul li.item01 { background:url(../images/cm/section2_mv01.png) no-repeat center top; }
#section2 ul li.item02 { background:url(../images/cm/section2_mv02.png) no-repeat center top; }
#section2 ul li.item03 { background:url(../images/cm/section2_mv03.png) no-repeat center top; }
#section2 ul li.item04 { background:url(../images/cm/section2_mv04.png) no-repeat center top; }

#section2 ul li .Txt {
	display:none;
}

#section3 {
	padding-top:20px;
}

#section3 h2 {
	background:url(../images/cm/section3_title.png) no-repeat center top;
	width:100%;
	height:36px;
	margin-bottom:20px;
	text-indent:-9999px;
}

#section3 ul {}

#section3 ul li {
	float:left;
	background-repeat:no-repeat;
	background-position:center top;
	width:278px;
	height:287px;
	margin:0 23px;
}

#section3 ul li.cut01 { background-image:url(../images/cm/section3_cut01.png); }
#section3 ul li.cut02 { background-image:url(../images/cm/section3_cut02.png); }
#section3 ul li.cut03 { background-image:url(../images/cm/section3_cut03.png); }
#section3 ul li.cut04 { background-image:url(../images/cm/section3_cut04.png); }
#section3 ul li.cut05 { background-image:url(../images/cm/section3_cut05.png); }
#section3 ul li.cut06 { background-image:url(../images/cm/section3_cut06.png); }

#section3 ul li span {
	display:none;
}

#section4 {
	padding-top:20px;
}

#section4 .dogprofile {
	background:url(../images/cm/section4_boxbg01.png) repeat;
	width:874px;
	border:10px solid #DAD8CF;
	margin:0 auto;
}

#section4 .dogprofile h3 {
	background:url(../images/cm/section4_title01.jpg) no-repeat left top,
	           url(../images/cm/section4_title02.jpg) no-repeat right top;
	height:78px;
	margin:0 -10px;
	position:relative;
}

#section4 .dogprofile h3 span {
	background:url(../images/cm/section4_title03.png) no-repeat;
	width:220px;
	height:22px;
	position:absolute;
	top:45px;
	left:50%;
	margin-left:-110px;
	text-indent:-9999px;
}

#section4 .dogprofile ul {
	padding:26px 0 33px;
}

#section4 .dogprofile ul li {
	float:left;
	width:205px;
	border-left:2px solid #EEEDE9;
	padding-left:39px;
	margin-left:39px;
}

#section4 .dogprofile ul li:first-child {
	border-left:none;
	padding-left:0;
}

/*** 頁尾資訊 ***/
#footer {
	padding:20px 0 80px;
}

/*** Responsive Web Design 響應式網頁 ***/
@media screen and (max-width: 980px) {
/*** MV ***/
#mv {
	width:100%;
	background-position:left top;
}

/*** 內容 ***/
#section1 {
	display:none;
}

#m_section1 {
	display:block;
}

#m_section1 section {
	background:url(../images/cm/m_section1_bg.jpg) no-repeat left top;
	position:relative;
}

#m_section1 section .videoBox {
	padding:20px;
}

#m_section1 h2 {
	width:100%;
	height:auto;
	padding:20px 20px 0;
}

#m_section1 h2 img {
	max-width:100%;
	margin:0 auto;
}

#section2 section {
	background-repeat:repeat;
	height:auto;
}

#section2 ul li {
	margin-bottom:30px;
}

}

@media screen and (max-width: 767px) {
/*** MV ***/
#mv #move_img02 {
	right:10px;
}

#section2 h2 {
	margin-bottom:10px;
}

#section2 ul {
	margin-right:28px;
}

#section2 ul li {
	width:50%;
	margin-right:0;
}

#section2 ul li a {
	margin:0 auto;
}

#section3 ul li {
	width:50%;
	margin:0;
}

#section4 .dogprofile {
	width:100%;
}

#section4 .dogprofile ul li {
	float:left;
	width:50%;
	border-left:2px solid #EEEDE9;
	padding-left:0;
	margin-left:0;
	margin-bottom:33px;
	box-sizing:border-box;
}

#section4 .dogprofile ul li:last-child {
	width:100%;
	border-left:none;
	margin:0 auto;
}

#section4 .dogprofile ul li img {
	max-width:100%;
	margin:0 auto;
}

}

@media screen and (max-width: 480px) {
#section2 ul li {
	width:100%;
}

#section3 ul li {
	width:100%;
}

#section4 .dogprofile h3 span {
	margin-left:-180px;
}

#section4 .dogprofile ul li {
	width:100%;
	border-left:none;
}

}

@media screen and (max-width: 360px) {
/*** MV ***/
#mv #move_img02 {
	right:0;
}

}