html{overflow:auto;}
body{background:#fff;}

#skipnavigation a {position:absolute; left:-3000%;}
#skipnavigation a:focus {display:block; left:0; top:0; z-index:10000000000; width:100%; height:30px; line-height:30px; background:#039; color:#fff; text-align:center;}

#wrap {width:100%;}

#header {background:url('/images/mocat/bg_main.jpg') no-repeat center top; background-size:cover; text-align:center; position:relative; overflow:hidden;}
#header .headerWrap {width:80%; padding:0 10%;}
#header h1 {width:15%; margin:0 auto; padding:4% 0 2% 0;}
#header h1 img {max-width:100%;}
#header h2 {color:#fff; font-size:36px; font-weight:500; line-height:42px; border-bottom:1px solid #81716a; width:822px; margin:0 auto 3%; padding:0 0 3% 0;}
#header h2 .orange {color:#ff7811;}
#header h3 {font-size:48px; font-weight:200; color:#fff;}
#header .step {width:820px; margin:2% auto 0; text-align:center; overflow:hidden;}
#header dl {width:30%; float:left; padding:2% 0 3% 0;}
#header dl.dl_design {background:url('/images/mocat/bg_design.png') no-repeat 0 0;}
#header dl.dl_brand {background:url('/images/mocat/bg_brand.png') no-repeat 0 0;}
#header dl.dl_trend {background:url('/images/mocat/bg_trend.png') no-repeat 0 0;}
#header dl dt {color:#ff7811; font-size:24px; margin-bottom:10px;}
#header dl dd {font-size:17px; color:#222; font-weight:300; line-height:22px;}
#header .plus {text-indent:-9999px; overflow:hidden; display:block; background:url('/images/mocat/bg_plus.png') no-repeat center center; width:32px; height:32px; padding:6% 0; float:left;}
#header .scrollDown {width:100%; position:absolute; bottom:5%; text-align:center;}
#header .scrollDown a {text-indent:-9999px; overflow:hidden; display:block; width:45px; height:40px; background:url('/images/main/btn_scroll.png') no-repeat center center; margin:0 auto;}

#contents .titleArea {padding:80px 0 60px 0;}
#contents .titleArea h2 {font-size:48px; line-height:48px; font-weight:500; color:#000; text-align:center; margin-bottom:1%;}
#contents .titleArea h3 {font-size:30px; font-weight:200; color:#000; text-align:center; line-height:36px; margin-bottom:2%;}
#contents .titleArea h3 .orange {color:#ff7811;}
#contents .titleArea p {font-size:17px; font-weight:300; text-align:center; line-height:22px; margin-bottom:2%;}
#contents .btn_boxBlack {display:block; width:288px; height:40px; line-height:40px; text-align:left; border:2px solid #000; font-size:16px; background:url('/images/mocat/arr_black.png') no-repeat right 20px center; margin:0 auto; padding:0 0 0 20px; font-weight:300;}
#contents .btn_boxWhite {display:block; width:162px; height:40px; line-height:40px; text-align:left; border:2px solid #fff; font-size:16px; background:url('/images/mocat/arr_white.png') no-repeat right 20px center; margin:0 auto; padding:0 0 0 20px; color:#fff; font-weight:300;}
#contents .product .titleArea {display:none;}
#contents .pdtWrap {overflow:hidden; height:1100px;}
#contents .pdtWrap .pdtBox {width:100%; display:block; float:left; background:none; overflow:hidden; position:relative;}
#contents .pdtWrap .pdtBox:hover img {transform:scale(1.5); transition:7.0s;}
#contents .pdtWrap .pdtBox img {float:left; width:100%; max-width:100%; height:100%; transform:scale(1.0); transition: 3.0s;}
#contents .pdtWrap .pdtBox.download {width:94%; padding:10% 3%; text-align:center; background:url('/images/mocat/bg_pdtitle.png') no-repeat 0 0; background-size:100% 100%;}
#contents .pdtWrap .pdtBox.download h2 {font-size:48px; line-height:48px; font-weight:500; color:#000; text-align:center; margin-bottom:1%;}
#contents .pdtWrap .pdtBox.download h3 {font-size:30px; font-weight:200; color:#000; text-align:center; line-height:36px; margin-bottom:2%;}
#contents .pdtWrap .pdtBox.download p {font-size:17px; font-weight:300; text-align:center; line-height:22px; margin-bottom:8%;}

#contents .pdtWrap .pdtBox span {display:none !important;}
#contents .pdtWrap .pdt {float:left;}
#contents .pdtWrap .left1 {width:22%;}
#contents .pdtWrap .left2 {width:34%; overflow:hidden;}
#contents .pdtWrap .right1 {width:22%; overflow:hidden;}
#contents .pdtWrap .right2 {width:22%;}
#contents .pdtWrap .floatL {width:50%;}
#contents .pdtWrap .floatR {width:50%;}
#contents .pdtWrap .w50 {width:50%; float:left;}
#contents .business .titleArea {padding:100px 0;}
#contents .contact {background:url('/images/mocat/bg_bottom.jpg') no-repeat center top; background-size:cover; padding:5% 0;}
#contents .contact .contactWrap {width:760px; padding:1% 0; margin:0 auto; background:url('/images/mocat/mocat_contact.png') no-repeat left center; padding-left:130px; position:relative;}
#contents .contact .contactWrap h2 {font-size:36px; line-height:36px; margin-bottom:10px; font-weight:600; color:#fff;}
#contents .contact .contactWrap dl {overflow:hidden;}
#contents .contact .contactWrap dl dt {background:url('/images/mocat/bullet_gray.png') no-repeat left 13px; padding-left:10px; font-size:17px; font-weight:300; color:#fff; line-height:30px; float:left; clear:both;}
#contents .contact .contactWrap dl dd {font-size:17px; font-weight:300; color:#fff; line-height:30px; float:left;}
#contents .contact .contactWrap dl dd.mail {padding-left:20px;}
#contents .contact .contactWrap dl span {display:inline-block; width:60px;}
#contents .contact .contactWrap .btn_boxWhite {position:absolute; right:0; bottom:14%;}

/* footer */
#foot{width:100%; background:#111;}
.footWrap {min-height:85px; position:relative; font-size:12px; font-weight:300; background:#111;}
.footWrap .footCnt{padding:28px 0 0 25px; color:#d4d4d4;}
.footWrap .footCnt address{padding-bottom:3px;}
.footWrap .footCnt address span{padding-right:10px; margin-right:10px;}
.footWrap .footCnt p {padding-right:5px; font-size:11px;}

@media only screen and (max-width:1600px){
#header h1 {padding:3% 0 2% 0;}
#contents .pdtWrap .pdtBox.download h2 {font-size:42px;}
#contents .pdtWrap .pdtBox img {height:auto;}
}

@media only screen and (max-width:1280px){
#header h1 {padding:3% 0 2% 0;}
#contents .pdtWrap {}
#contents .pdtWrap .pdtBox span {font-size:20px;}
#contents .pdtWrap .pdtBox img {width:100%;}
#contents .pdtWrap .floatL .pdtBox img {height:100%;}
#contents .pdtWrap .floatR .pdtBox img {height:100%;}
#contents .titleArea h2 {font-size:40px;}
#contents .titleArea h3 {font-size:25px; line-height:30px;}
#contents .titleArea p {font-size:15px;}
#contents .pdtWrap .pdtBox.download {padding:8% 3%;}
#contents .pdtWrap .pdtBox.download h2 {font-size:35px; line-height:35px;}
#contents .pdtWrap .pdtBox.download p {font-size:14px; margin-bottom:4%; letter-spacing:-0.5px;}
#contents .btn_boxBlack {width:238px; font-size:14px;}
#contents .btn_boxWhite {font-size:15px;}
#contents .contact {width:90%; padding:5%;}
#contents .contact .contactWrap {width:75%; margin:0 auto;}
#contents .contact .contactWrap h2 {font-size:30px;}
#contents .contact .contactWrap ul li {font-size:15px; background-position:left 15px;}
#foot {height:95px; text-align:center;}
}

@media only screen and (max-width:960px){
#header h2 {width:100%; font-size:30px;}
#header h3 {font-size:36px;}
#header .step {width:100%; margin:10% auto 0;}
#header dl {width:29%; margin:0 1%;}
#header dl dd {font-size:14px;}
#header .plus {width:18px; height:18px; background-size:18px; padding:8% 0;}

#contents .business .titleArea {padding:7% 0;}
#contents .contact .contactWrap dl dd {float:none;}
#contents .contact .contactWrap dl dd.mail {padding-left:70px;}
#contents .pdtWrap .pdtBox span {font-size:19px;}
#contents .pdtWrap .left1 {width:50%;}
#contents .pdtWrap .left2 {width:50%;}
#contents .pdtWrap .right1 {width:50%;}
#contents .pdtWrap .right2 {width:50%;}
#contents .pdtWrap .floatL {width:100%;}
#contents .pdtWrap .floatR {width:100%;}
#contents .product .titleArea {padding:7% 0; display:block;}
#contents .product .titleArea h2 {line-height:40px; margin-bottom:2%;}
#contents .product .btn_boxBlack {display:block;}
#contents .pdtWrap .pdtBox.download {display:none;}
}

@media only screen and (max-width:768px){
#header h1 {padding:12% 0 2% 0; width:25%;}
#header h2 {font-size:24px; line-height:30px;}
#header h3 {font-size:30px;}
#header .step {width:60%; margin:2% auto 0;}
#header dl {width:100%; float:none; margin:0 1%;}
#header dl.dl_design {background:#fff;}
#header dl.dl_brand {background:#fff;}
#header dl.dl_trend {background:#fff;}
#header dl dt {font-size:18px; margin-bottom:0;}
#header dl dd br {display:none;}
#header .plus {width:100%; float:none; padding:1% 0;}
#header .headerWrap {width:94%; padding:0 3%;}
#contents .titleArea {width:96%; margin:0 auto; padding:5% 0 7% 0;}
#contents .titleArea h2 {font-size:32px; margin-bottom:2%;}
#contents .titleArea h3 {font-size:22px;}
#contents .titleArea p {margin-bottom:6%;}
#contents .titleArea p br {display:none;}
#contents .product .titleArea p br {display:block;}
#contents .btn_boxBlack {background-size:20px;}
#contents .contact .contactWrap .btn_boxWhite {width:118px; background-size:20px;}
}

@media only screen and (max-width:500px){
#header h1 {padding:5% 0 2% 0; width:20%;}
#header h2 {font-size:17px; line-height:22px; border-bottom:none; padding-bottom:0;}
#header h3 {font-size:20px;}
#header .step {width:80%; margin:5% auto 0;}
#header dl {width:96%; padding:3% 2%;}
#header dl dd {font-size:13px;}
#header .plus {padding:3% 0;}
#header .scrollDown {bottom:2%;}
#header .scrollDown a {width:25px; height:25px; background-size:25px;}
#contents .titleArea {padding:5% 0;}
#contents .titleArea h2 {margin-bottom:0; font-size:27px; letter-spacing:-1px; line-height:27px !important; margin-bottom:6%; font-weight:600;}
#contents .titleArea h3 {font-size:18px; line-height:23px; margin-bottom:5%; font-weight:400;}
#contents .titleArea p {font-size:15px; letter-spacing:-0.5px;}
#contents .btn_boxBlack {width:205px; height:30px; line-height:30px; background-size:20px; font-size:13px;}
#contents .product .titleArea {padding:10% 0;}
#contents .product .titleArea p br {display:block;}
#contents .pdtWrap .left1 {width:100%; float:none;}
#contents .pdtWrap .left2 {width:100%; float:none;}
#contents .pdtWrap .floatL {width:100%; float:none !important;}
#contents .pdtWrap .floatR {width:100%; float:none !important;}
#contents .pdtWrap .right1 {width:100%; float:none;}
#contents .pdtWrap .right2 {width:100%; float:none;}
#contents .business .titleArea {padding:10% 0;}
#contents .business .titleArea p {padding:0 3%;}
#contents .contact {padding:10% 5%;}
#contents .contact .contactWrap {background:none; padding-left:0; width:63%;}
#contents .contact .contactWrap h2 {text-align:center;}
#contents .contact .contactWrap ul li {line-height:24px; background-position:left 10px; font-size:14px; line-height:20px;}
#contents .contact .contactWrap ul li:first-child {margin-bottom:3%;}
#contents .contact .contactWrap ul li span {display:block;}
#contents .contact .contactWrap .btn_boxWhite {position:relative; right:0; bottom:0; margin:3% auto 0; width:205px; height:30px; line-height:30px; background-size:20px; font-size:13px; margin:8% auto 0;}
#contents .contact .contactWrap dl dd.mail {padding-left:66px;}
#contents .contact .contactWrap .imgC {display:none;}
#contents .contact .contactWrap dl dt {font-size:15px; line-height:24px;}
#contents .contact .contactWrap dl dd {font-size:15px; line-height:24px;}
#foot {height:110px;}
.footWrap .footCnt {width:98%; padding-left:1%; padding-right:1%;}
.footWrap .footCnt address span {padding-right:5px; margin-right:5px;}
.footWrap .footCnt address span:last-child {display:block;}
}

/************************** Mobile 420px ~ **************************/
@media only screen and (max-width:420px){
.footWrap .footCnt {width:90%; padding:10% 5%;}
#contents .titleArea h3 br {display:none;}
#contents .contact .contactWrap {width:71%;}
}

/************************** Mobile 360px ~ (iPhone3Gs, 4, 5, SE) **************************/
@media only screen and (max-width:360px){
#header h1 {padding:4% 0 0 0;}
#header h2 {font-size:15px; margin:0 auto 1%;}
#header h3 {font-size:17px;}
#header dl dt {font-size:16px;}
#header dl dd {font-size:12px; letter-spacing:-0.5px;}
#contents .contact .contactWrap {width:84%;}
}

/************************** Mobile height 380px ~ (Horizontal Mode) **************************/
@media only screen and (max-height:380px){
#header {height:auto !important; padding:0 3% 18%;}
#header h1 {padding:3% 0 2% 0;}
}