@charset "UTF-8";

@media only screen and (max-width : 960px) and (min-width: 0) {
html, body {overflow:hidden;width:100%;height:100%;min-width:320px;min-height:100%}
.content {min-width:320px}

#header {display:none;position:absolute;width:100%;min-width:320px;height:auto;background:none;z-index:110}
#header h1 {position:relative;left:0;top:0;background:rgba(0,0,0,0.3);padding:0 50px;text-align:center;text-align:center;z-index:105}
#header h1 a {display:inline-block;width:100%;height:140px;background:url(../images/logoM.png) no-repeat center;background-size:auto 73.5%}

#header {-ms-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}

#gnb {position:relative;right:0;z-index:105}
#gnb li {display:none}
#gnb li, #gnb li.on {float:none;width:100%;height:auto;padding:0;margin:0}
#gnb li a, #gnb li.on a {display:block;width:100% !important;height:140px}
#gnb li:first-child {background:rgba(19,184,205,0.2)}
#gnb li:nth-child(2) {background:rgba(19,184,205,0.4)}
#gnb li:nth-child(3) {background:rgba(19,184,205,0.6)}
#gnb li:nth-child(4) {background:rgba(19,184,205,0.8)}

#gnb li:first-child a {background:url(../images/txt/gnb_companyM.png) no-repeat center;background-size:auto 43.2%}
#gnb li:nth-child(2) a {background:url(../images/txt/gnb_serviceM.png) no-repeat center;background-size:auto 36.5%}
#gnb li:nth-child(3) a {background:url(../images/txt/gnb_portfolioM.png) no-repeat center;background-size:auto 35.7%}
#gnb li:nth-child(4) a {background:url(../images/txt/gnb_contactM.png) no-repeat center;background-size:auto 36.5%}

/*.btn_gnb {position:absolute;left:30px;top:54px;display:none;width:47px;height:32px;background:url(../images/btn/btn_gnb.png) no-repeat;background-size:100% 100%;text-indent:-9999em;cursor:pointer;z-index:110;-webkit-outline:none;outline:none}*/
.btn_gnb {position:absolute;left:15px;top:38px;display:none;width:94px;height:64px;background:url(../images/btn/btn_gnb.png) no-repeat center;background-size:50% 50%;text-indent:-9999em;cursor:pointer;z-index:110;-webkit-outline:none;outline:none}
.menuBg {display:none;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:100}

#pageNav {display:none}

#intro .top {width:100%;top:55%;padding:0 35px;margin-top:0;box-sizing:border-box}
#intro .title {height:152px;margin-bottom:150px;background-size:contain}
#intro .intro {position:relative;height:182px;margin-bottom:0;background:url(../images/txt/txt_introM.png) no-repeat center;background-size:contain}
#intro .download {display:none}
#intro .bottom {height:60px;bottom:20px;padding:0;background:url(../images/bg/bg_touch.png) no-repeat center bottom;background-size:auto 100%}

#intro .title, #intro .intro, #intro .download {opacity:0;-ms-transition-timing-function:"linear";-webkit-transition-timing-function:"linear";transition-timing-function:"linear"}
#intro .title {
-ms-transition:all 1s 0s;-webkit-transition:all 1s 0s;transition:all 1s 0s;
}
#intro .intro {
-ms-transition:all 0.8s 0.2s;-webkit-transition:all 0.8s 0.2s;transition:all 0.8s 0.2s;
}


#company h2 {height:77px;margin-bottom:70px;background-size:auto 100%}
#company .top {position:relative;padding-top:220px;padding-bottom:30px}
/*#company .tab_content {position:relative}*/
#company .tab li {width:100%;height:68px;padding:0;margin:0;background:none}
#company .tab li:first-child a {background:url(../images/txt/tab_overviewM.png) no-repeat center}
/*#company .tab li:nth-child(2) a {background:url(../images/txt/tab_historyM.png) no-repeat center}*/
#company .tab li:nth-child(2) a {background:url(../images/txt/tab_businessM.png) no-repeat center}
#company .tab li:nth-child(3) a {background:url(../images/txt/tab_clientM.png) no-repeat center}
#company .tab li a {width:100% !important;height:100%;padding:0;background-size:auto 100% !important;cursor:default}

.ready #company .tab li {display:none}
.ready #company .tab li.on {display:block}
#company .tab li.on a {padding:0;border:0}

#company .btnWrap {display:block}
#company .btnWrap button {display:block;position:absolute;bottom:24px;width:60px;height:114px;cursor:pointer;-webkit-outline:none;outline:none}
#company .btnPrev {left:4.5%;background:url(../images/btn/btn_company_prev.png) no-repeat center;background-size:50% 50%}
#company .btnNext {right:4.5%;background:url(../images/btn/btn_company_next.png) no-repeat center;background-size:50% 50%}

#overview {}
#overview .inner {left:0;height:auto;padding:0 35px;margin-top:-280px;box-sizing:border-box}
#overview p {display:none}
#overview ul {width:100%;}
#overview li {float:none;margin:0;height:auto;margin-bottom:30px}
#overview li:last-child {margin-bottom:0 !important}
#overview li dl {width:100%;height:142px}
#overview li dl.over {display:none;height:209px}
#overview li.on dl.over {display:block}

#overview li:first-child dl {background:rgba(256,256,256,0.1) url(../images/company/overview_fervorM_off.png) no-repeat center;background-size:auto 63.4%}
#overview li:nth-child(2) dl {background:rgba(256,256,256,0.1) url(../images/company/overview_ideaM_off.png) no-repeat center;background-size:auto 63.4%}
#overview li:nth-child(3) dl {background:rgba(256,256,256,0.1) url(../images/company/overview_insightM_off.png) no-repeat center;background-size:auto 63.4%}
#overview li:nth-child(4) dl {background:rgba(256,256,256,0.1) url(../images/company/overview_experienceM_off.png) no-repeat center;background-size:auto 63.4%}
#overview li:nth-child(5) dl {background:rgba(256,256,256,0.1) url(../images/company/overview_confidenceM_off.png) no-repeat center;background-size:auto 38.7%}
#overview li.on:first-child dl {background:rgba(0,0,0,0.2) url(../images/company/overview_fervorM_off.png) no-repeat center;background-size:auto 63.4%}
#overview li.on:nth-child(2) dl {background:rgba(0,0,0,0.2) url(../images/company/overview_ideaM_off.png) no-repeat center;background-size:auto 63.4%}
#overview li.on:nth-child(3) dl {background:rgba(0,0,0,0.2) url(../images/company/overview_insightM_off.png) no-repeat center;background-size:auto 63.4%}
#overview li.on:nth-child(4) dl {background:rgba(0,0,0,0.2) url(../images/company/overview_experienceM_off.png) no-repeat center;background-size:auto 63.4%}
#overview li.on:nth-child(5) dl {background:rgba(0,0,0,0.2) url(../images/company/overview_confidenceM_off.png) no-repeat center;background-size:auto 38.7%}

#overview li:first-child dl.over {background:rgba(0,0,0,0.1) url(../images/company/overview_fervorM_on.png) no-repeat center;background-size:auto 71.3%}
#overview li:nth-child(2) dl.over {background:rgba(0,0,0,0.1) url(../images/company/overview_ideaM_on.png) no-repeat center;background-size:auto 71.3%}
#overview li:nth-child(3) dl.over {background:rgba(0,0,0,0.1) url(../images/company/overview_insightM_on.png) no-repeat center;background-size:auto 71.3%}
#overview li:nth-child(4) dl.over {background:rgba(0,0,0,0.1) url(../images/company/overview_experienceM_on.png) no-repeat center;background-size:auto 71.3%}
#overview li:nth-child(5) dl.over {background:rgba(0,0,0,0.1) url(../images/company/overview_confidenceM_on.png) no-repeat center;background-size:auto 71.3%}


/*#overview li:hover dl, #overview li:focus dl {display:block}
#overview li:hover .over, #overview li:focus .over {display:block}*/

#history {position:relative;left:0;top:0;width:100%;margin:0 30px;padding-top:23px;border-left:1px dashed rgba(256,256,256,0.7);border-top:0 none}
#history .history {position:relative;left:0;top:0;width:100%;margin:0 0 70px 0}
#history .history dt {position:relative;padding:0 0 0 40px;margin:0 0 30px -6px;background-position:left 0.4em;background-size:auto 28%;text-align:left;font-size:4.3em;color:rgba(256,256,256,0.5)}
#history .history.on dt {color:#fff}
#history .history dd {display:none;position:relative;top:0;left:0;bottom:0;padding-left:30px;font-size:2.5em}
#history li.history:first-child dd {display:block}
#history .history dd li {padding:0 5% 0 0;background:none}
#history .history dd li:last-child {margin-bottom:0}

#business {}
#business p {display:none}
#business .list {width:auto;margin:0 auto;padding:0 35px}
#business .list > li {float:none;width:100%}
/*#business dt {height:3.36em;padding:0;margin-top:0.6em;font-size:3.3em;line-height:3.38em}*/
#business dt {height:3.36em;padding:0;margin-top:0.6em;font-size:3em;line-height:3.38em}
/*#business .list > li dt {background-size:cover !important}*/
#business .list > li:first-child dt {margin-top:0;background:url(../images/bg/bg_business01M.png) no-repeat}
#business .list > li:nth-child(2) dt {background:url(../images/bg/bg_business02M.png) no-repeat}
#business .list > li:nth-child(3) dt {background:url(../images/bg/bg_business03M.png) no-repeat}
#business .list > li:nth-child(4) dt {background:url(../images/bg/bg_business04M.png) no-repeat}
#business .list > li dt {background-size:100% 100% !important}
#business dd {display:none;padding:0.8em 0;background:rgba(0,0,0,0.1);border:0 none !important;font-size:2em}
#business .list > li:first-child dd {display:block}
#business dd li {height:1.6em;margin-bottom:0;font-size:1em;line-height:1.6em}

#client li {padding:10px}
/*#client .pageBtn button {position:absolute;top:50%;display:block;width:23px;height:45px;margin-top:-23px;text-indent:-9999em;cursor:pointer;outline:none}
#client .pageBtn .btn_prev {left:40px;background:url(../images/btn/btn_serveic_prev.png) no-repeat}
#client .pageBtn .btn_next {right:40px;background:url(../images/btn/btn_serveic_next.png) no-repeat}*/

#client .pageBtn button {width:60px;height:114px;margin-top:-57px;background-size:50% 50% !important;}
#client .pageBtn .btn_prev {left:4.5%;background:url(../images/btn/btn_serveic_prevM.png) no-repeat center}
#client .pageBtn .btn_next {right:4.5%;background:url(../images/btn/btn_serveic_nextM.png) no-repeat center}


#service h2 {height:77px;margin:220px 0 40px 0;background-size:auto 100%}
#service .tab {width:auto}
#service .tab li {width:33.3%;border:1px solid #fff;margin-left:-1px;box-sizing:border-box}
#service .tab li:nth-child(3) ~ li {margin-top:-1px}
#service .tab li a{height:2.4em;font-size:2.3em;line-height:2.5em}

#service .bg {height:47%}
#service .bottom {width:100%;height:53%;padding:0 35px;box-sizing:border-box}
#service .inner {width:auto;padding:40px 0 0 0}
#service .btn_link {overflow:hidden;position:relative;left:0;top:0;width:100%;margin-top:60px;height:auto}
#service .btn_link li {margin:0;height:116px;text-align:center}
#service .btn_link li:first-child, #service .btn_link li:nth-child(2) {width:48.3%;background:#363b3e}
#service .btn_link li:nth-child(2) {float:right}
#service .btn_link li:nth-child(3) {clear:both;width:100%;margin-top:30px;background:#25aae1}
#facespec .btn_link li:nth-child(3) {background:#c51d5c}
#service .btn_link li a {display:inline-block;width:100%;height:100%;background-position:center;background-size:auto 100%}
#service .btn_link li:nth-child(3) a {width:38.8%;padding:0 30.6%}
#service .pageBtn {display:none}
#service .largeIco {background-size:auto 100%}

#cardeal .inner dt {height:93px;margin:0 0 50px 38.8%;background:url(../images/txt/txt_cardealM.png) no-repeat;background-size:auto 100%}
/*#service .txt {margin-left:38.8%;font-size:2.3em;line-height:1.4}*/
#cardeal .txt {margin-left:38.8%;height:79px;margin-bottom:60px;background:url(../images/txt/txt_cardealM02.png) no-repeat;background-size:auto 100%;text-indent:-9999em}
#cardeal .inner dl ul {height:122px;background:url(../images/txt/txt_cardealM03.png) no-repeat;background-size:auto 100%;text-indent:-9999em}
/*#service .inner dl li {font-size:2.1em;color:#9f9f9f}*/
#cardeal .largeIco {width:41%;height:416px;margin:-150px 0 0 -2.5%}

#facespec .inner dt {height:48px;margin:0 0 20px 41%;background-size:auto 100%}
#facespec .txt {height:31px;margin:0 0 90px 41%;background:url(../images/txt/txt_facespecM02.png) no-repeat;background-size:auto 100%;text-indent:-9999em}
#facespec .largeIco {width:43.3%;height:245px;margin:-60px 0 0 -2%}
#facespec .inner dl ul {height:123px;background:url(../images/txt/txt_facespecM03.png) no-repeat;background-size:auto 100%;text-indent:-9999em}
#facespec .btn_link {margin-top:145px}

#cardeal .largeIco {-ms-transform:translate3d(0,65px,0);-webkit-transform:translate3d(0,65px,0);transform:translate3d(0,65px,0)}
#facespec .largeIco {-ms-transform:translate3d(0,45px,0);-webkit-transform:translate3d(0,45px,0);transform:translate3d(0,45px,0)}

#portfolio h2 {height:77px;margin:220px 0 58px 0;background-size:auto 100%}
#portfolio .pageCnt {margin-bottom:60px;font-size:2em}
#portfolio .current {font-size:1.3em}
#portfolio li {margin-bottom:0;box-sizing:border-box}
#portfolio li, #portfolio dl, #portfolio dt, #portfolio img {width:100%}
/*#portfolio li dt {margin-bottom:5px}*/
#portfolio dd {height:3em;font-size:2.5em}

#portfolio .pageBtn .btn_prev {left:4.5%}
#portfolio .pageBtn .btn_next {right:4.5%}
#portfolio .pageBtn button {width:60px;height:114px;margin-top:-57px;background-size:50% 50% !important}
#portfolio .pageBtn .btn_prev {background:url(../images/btn/btn_serveic_prevM.png) no-repeat center}
#portfolio .pageBtn .btn_next {background:url(../images/btn/btn_serveic_nextM.png) no-repeat center}

.mapWrap {height:60%}
#mobile .mapInner {left:0;top:0;width:100%;height:100%;margin:0}
.contactWrap {height:40%}
.contactWrap .inner {margin-top:-240px}
#contact h2 {height:85px;margin-bottom:100px;background-size:auto 100%}
.contact {height:295px;background:url(../images/txt/txt_contactWrapM.png) no-repeat center;background-size:auto 100%}

/*.content {top:0}*/
}

@media only screen and (max-width : 960px) and (min-width: 640px) {
html, body {min-height:960px}
#header h1 a, #gnb li a, #gnb li.on a {height:93px}
.btn_gnb {left:10px;top:25px;width:63px;height:43px}

#intro .top, #overview .inner, #business .list, #service .tab, #service .bottom {padding:0 23px}
#intro .title {height:101px;margin-bottom:100px}
#intro .intro {height:121px}
#intro .bottom {height:40px}

#company h2 {height:51px;margin-bottom:47px}
#company .top {padding-top:147px;padding-bottom:20px}
#company .tab li {height:45px}
#company .btnWrap button {bottom:16px;width:40px;height:76px}

#overview .inner {margin-top:-187px}
#business {margin-top:-200px}
#overview li {margin-bottom:20px}
#overview li dl {height:95px}
#overview li dl.over {height:139px}

#history {margin:0 20px;padding-top:23px;}
#history .history {margin-bottom:47px}
#history .history dt {padding-left:27px;margin:0 0 20px -6px}
#history .history dd {padding-left:20px}

#client .pageBtn button {width:40px;height:76px;margin-top:-38px}

#service h2 {height:51px;margin:147px 0 27px 0}
#service .inner {padding-top:27px}
#service .btn_link {margin-top:40px}
#service .btn_link li {height:77px}
#service .btn_link li:nth-child(3) {margin-top:20px}

#cardeal .inner dt {height:62px;margin-bottom:33px}
#cardeal .txt {height:53px;margin-bottom:40px}
#cardeal .largeIco {height:277px;margin-top:-100px}
#cardeal .inner dl ul {height:81px}
#facespec .inner dt {height:32px;margin-bottom:13px}
#facespec .txt {height:21px;margin-bottom:60px}
#facespec .largeIco {height:163px;margin-top:-40px}
#facespec .inner dl ul {height:82px}
#facespec .btn_link {margin-top:97px}

#portfolio h2 {height:51px;margin:147px 0 39px 0}
#portfolio .pageCnt {margin-bottom:40px}
#portfolio .pageBtn button {width:40px;height:76px;margin-top:-38px}

.contactWrap .inner {margin-top:-160px}
#contact h2 {height:57px;margin-bottom:67px}
.contact {height:197px}
}

@media only screen and (max-width : 639px) and (min-width: 600px) {
html, body {min-height:900px}
#header h1 a, #gnb li a, #gnb li.on a {height:88px}
.btn_gnb {left:9px;top:24px;width:59px;height:40px}

#intro .top, #overview .inner, #business .list, #service .tab, #service .bottom {padding:0 22px}
#intro .title {height:95px;margin-bottom:94px}
#intro .intro {height:114px}
#intro .bottom {height:38px}

#company h2 {height:48px;margin-bottom:44px}
#company .top {padding-top:138px;padding-bottom:19px}
#company .tab li {height:43px}
#company .btnWrap button {bottom:15px;width:38px;height:71px}

#overview .inner {margin-top:-175px}
#business {margin-top:-188px}
#overview li {margin-bottom:19px}
#overview li dl {height:89px}
#overview li dl.over {height:131px}

#history {margin:0 19px;padding-top:22px;}
#history .history {margin-bottom:44px}
#history .history dt {padding-left:25px;margin:0 0 19px -6px}
#history .history dd {padding-left:19px}

#client .pageBtn button {width:38px;height:71px;margin-top:-36px}

#service h2 {height:48px;margin:138px 0 25px 0}
#service .inner {padding-top:25px}
#service .btn_link {margin-top:38px}
#service .btn_link li {height:73px}
#service .btn_link li:nth-child(3) {margin-top:19px}

#cardeal .inner dt {height:58px;margin-bottom:31px}
#cardeal .txt {height:49px;margin-bottom:38px}
#cardeal .largeIco {height:260px;margin-top:-94px}
#cardeal .inner dl ul {height:76px}
#facespec .inner dt {height:30px;margin-bottom:13px}
#facespec .txt {height:19px;margin-bottom:56px}
#facespec .largeIco {height:153px;margin-top:-38px}
#facespec .inner dl ul {height:77px}
#facespec .btn_link {margin-top:91px}

#portfolio h2 {height:48px;margin:138px 0 36px 0}
#portfolio .pageCnt {margin-bottom:38px}
#portfolio .pageBtn button {width:38px;height:71px;margin-top:-36px}

.contactWrap .inner {margin-top:-150px}
#contact h2 {height:53px;margin-bottom:63px}
.contact {height:184px}
}

@media only screen and (max-width : 599px) and (min-width: 560px) {
html, body {min-height:840px}
#header h1 a, #gnb li a, #gnb li.on a {height:82px}
.btn_gnb {left:9px;top:22px;width:55px;height:37px}

#intro .top, #overview .inner, #business .list, #service .tab, #service .bottom {padding:0 20px}
#intro .title {height:89px;margin-bottom:88px}
#intro .intro {height:106px}
#intro .bottom {height:35px}

#company h2 {height:45px;margin-bottom:41px}
#company .top {padding-top:128px;padding-bottom:18px}
#company .tab li {height:40px}
#company .btnWrap button {bottom:14px;width:35px;height:67px}

#overview .inner {margin-top:-163px}
#business {margin-top:-175px}
#overview li {margin-bottom:18px}
#overview li dl {height:83px}
#overview li dl.over {height:122px}

#history {margin:0 18px;padding-top:20px;}
#history .history {margin-bottom:41px}
#history .history dt {padding-left:23px;margin:0 0 18px -5px}
#history .history dd {padding-left:18px}

#client .pageBtn button {width:35px;height:67px;margin-top:-33px}

#service h2 {height:45px;margin:128px 0 23px 0}
#service .inner {padding-top:23px}
#service .btn_link {margin-top:35px}
#service .btn_link li {height:68px}
#service .btn_link li:nth-child(3) {margin-top:18px}

#cardeal .inner dt {height:54px;margin-bottom:29px}
#cardeal .txt {height:46px;margin-bottom:35px}
#cardeal .largeIco {height:243px;margin-top:-88px}
#cardeal .inner dl ul {height:71px}
#facespec .inner dt {height:28px;margin-bottom:12px}
#facespec .txt {height:18px;margin-bottom:53px}
#facespec .largeIco {height:143px;margin-top:-35px}
#facespec .inner dl ul {height:72px}
#facespec .btn_link {margin-top:85px}

#portfolio h2 {height:45px;margin:128px 0 34px 0}
#portfolio .pageCnt {margin-bottom:35px}
#portfolio .pageBtn button {bottom:14px;width:35px;height:67px}

.contactWrap .inner {margin-top:-140px}
#contact h2 {height:50px;margin-bottom:58px}
.contact {height:172px}
}

@media only screen and (max-width : 559px) and (min-width: 520px) {
html, body {min-height:780px}
#header h1 a, #gnb li a, #gnb li.on a {height:76px}
.btn_gnb {left:8px;top:21px;width:51px;height:35px}

#intro .top, #overview .inner, #business .list, #service .tab, #service .bottom {padding:0 19px}
#intro .title {height:82px;margin-bottom:81px}
#intro .intro {height:99px}
#intro .bottom {height:33px}

#company h2 {height:42px;margin-bottom:38px}
#company .top {padding-top:119px;padding-bottom:16px}
#company .tab li {height:37px}
#company .btnWrap button {bottom:13px;width:33px;height:62px}

#overview .inner {margin-top:-152px}
#business {margin-top:-163px}
#overview li {margin-bottom:16px}
#overview li dl {height:77px}
#overview li dl.over {height:113px}

#history {margin:0 16px;padding-top:19px;}
#history .history {margin-bottom:38px}
#history .history dt {padding-left:22px;margin:0 0 16px -5px}
#history .history dd {padding-left:16px}

#client .pageBtn button {width:33px;height:62px;margin-top:-31px}

#service h2 {height:42px;margin:119px 0 22px 0}
#service .inner {padding-top:22px}
#service .btn_link {margin-top:33px}
#service .btn_link li {height:63px}
#service .btn_link li:nth-child(3) {margin-top:16px}

#cardeal .inner dt {height:50px;margin-bottom:37px}
#cardeal .txt {height:43px;margin-bottom:33px}
#cardeal .largeIco {height:225px;margin-top:-81px}
#cardeal .inner dl ul {height:66px}
#facespec .inner dt {height:26px;margin-bottom:11px}
#facespec .txt {height:17px;margin-bottom:49px}
#facespec .largeIco {height:133px;margin-top:-33px}
#facespec .inner dl ul {height:67px}
#facespec .btn_link {margin-top:79px}

#portfolio h2 {height:42px;margin:119px 0 31px 0}
#portfolio .pageCnt {margin-bottom:33px}
#portfolio .pageBtn button {width:33px;height:62px;margin-top:-31px}

.contactWrap .inner {margin-top:-130px}
#contact h2 {height:46px;margin-bottom:54px}
.contact {height:160px}
}

@media only screen and (max-width : 519px) and (min-width: 480px) {
html, body {min-height:720px}
#header h1 a, #gnb li a, #gnb li.on a {height:70px}
.btn_gnb {left:8px;top:19px;width:47px;height:32px}

#intro .top, #overview .inner, #business .list, #service .tab, #service .bottom {padding:0 18px}
#intro .title {height:76px;margin-bottom:75px}
#intro .intro {height:91px}
#intro .bottom {height:30px}

#company h2 {height:39px;margin-bottom:35px}
#company .top {padding-top:110px;padding-bottom:15px}
#company .tab li {height:34px}
#company .btnWrap button {bottom:12px;width:30px;height:57px}

#overview .inner {margin-top:-140px}
#business {margin-top:-150px}
#overview li {margin-bottom:15px}
#overview li dl {height:71px}
#overview li dl.over {height:105px}

#history {margin:0 15px;padding-top:17px;}
#history .history {margin-bottom:35px}
#history .history dt {padding-left:20px;margin:0 0 15px -4px}
#history .history dd {padding-left:15px}

#client .pageBtn button {width:30px;height:57px;margin-top:-28px}

#service h2 {height:39px;margin:110px 0 20px 0}
#service .inner {padding-top:20px}
#service .btn_link {margin-top:30px}
#service .btn_link li {height:58px}
#service .btn_link li:nth-child(3) {margin-top:15px}

#cardeal .inner dt {height:47px;margin-bottom:25px}
#cardeal .txt {height:40px;margin-bottom:30px}
#cardeal .largeIco {height:208px;margin-top:-75px}
#cardeal .inner dl ul {height:61px}
#facespec .inner dt {height:24px;margin-bottom:10px}
#facespec .txt {height:16px;margin-bottom:45px}
#facespec .largeIco {height:123px;margin-top:-30px}
#facespec .inner dl ul {height:62px}
#facespec .btn_link {margin-top:73px}

#portfolio h2 {height:39px;margin:110px 0 29px 0}
#portfolio .pageCnt {margin-bottom:30px}
#portfolio .pageBtn button {width:30px;height:57px;margin-top:-28px}

.contactWrap .inner {margin-top:-120px}
#contact h2 {height:43px;margin-bottom:50px}
.contact {height:148px}
}

@media only screen and (max-width : 479px) and (min-width: 440px) {
html, body {min-height:660px}
#header h1 a, #gnb li a, #gnb li.on a {height:64px}
.btn_gnb {left:7px;top:17px;width:43px;height:29px}

#intro .top, #overview .inner, #business .list, #service .tab, #service .bottom {padding:0 16px}
#intro .title {height:70px;margin-bottom:69px}
#intro .intro {height:83px}
#intro .bottom {height:28px}

#company h2 {height:35px;margin-bottom:32px}
#company .top {padding-top:101px;padding-bottom:14px}
#company .tab li {height:31px}
#company .btnWrap button {bottom:11px;width:28px;height:52px}

#overview .inner {margin-top:-128px}
#business {margin-top:-128px}
#overview li {margin-bottom:14px}
#overview li dl {height:65px}
#overview li dl.over {height:96px}

#history {margin:0 14px;padding-top:16px;}
#history .history {margin-bottom:32px}
#history .history dt {padding-left:18px;margin:0 0 14px -4px}
#history .history dd {padding-left:14px}

#client .pageBtn button {width:28px;height:52px;margin-top:-26px}

#service h2 {height:35px;margin:101px 0 18px 0}
#service .inner {padding-top:18px}
#service .btn_link {margin-top:28px}
#service .btn_link li {height:53px}
#service .btn_link li:nth-child(3) {margin-top:14px}

#cardeal .inner dt {height:43px;margin-bottom:23px}
#cardeal .txt {height:36px;margin-bottom:28px}
#cardeal .largeIco {height:191px;margin-top:-69px}
#cardeal .inner dl ul {height:56px}
#facespec .inner dt {height:22px;margin-bottom:9px}
#facespec .txt {height:14px;margin-bottom:41px}
#facespec .largeIco {height:111px;margin-top:-28px}
#facespec .inner dl ul {height:56px}
#facespec .btn_link {margin-top:66px}

#portfolio h2 {height:35px;margin:101px 0 27px 0}
#portfolio .pageCnt {margin-bottom:28px}
#portfolio .pageBtn button {width:28px;height:52px;margin-top:-26px}

.contactWrap .inner {margin-top:-110px}
#contact h2 {height:39px;margin-bottom:46px}
.contact {height:135px}
}

@media only screen and (max-width : 439px) and (min-width: 400px) {
html, body {min-height:600px}
#header h1 a, #gnb li a, #gnb li.on a {height:58px}
.btn_gnb {left:6px;top:16px;width:39px;height:27px}

#intro .top, #overview .inner, #business .list, #service .tab, #service .bottom {padding:0 15px}
#intro .title {height:63px;margin-bottom:63px}
#intro .intro {height:76px}
#intro .bottom {height:25px}

#company h2 {height:29px;margin-bottom:26px}
#company .top {padding-top:83px;padding-bottom:13px}
#company .tab li {height:28px}
#company .btnWrap button {bottom:10px;width:25px;height:48px}

#overview .inner {margin-top:-117px}
#business {margin-top:-117px}
#overview li {margin-bottom:13px}
/*#overview li dl {height:59px}
#overview li dl.over {height:87px}*/
#overview li dl {height:54px}
#overview li dl.over {height:80px}

#history {margin:0 13px;padding-top:14px;}
#history .history {margin-bottom:29px}
#history .history dt {padding-left:17px;margin:0 0 13px -4px}
#history .history dd {padding-left:13px}

#client .pageBtn button {width:25px;height:48px;margin-top:-24px}

#service h2 {height:32px;margin:92px 0 17px 0}
#service .inner {padding-top:17px}
#service .btn_link {margin-top:25px}
#service .btn_link li {height:48px}
#service .btn_link li:nth-child(3) {margin-top:13px}

#cardeal .inner dt {height:39px;margin-bottom:21px}
#cardeal .txt {height:33px;margin-bottom:25px}
#cardeal .largeIco {height:173px;margin-top:-63px}
#cardeal .inner dl ul {height:51px}
#facespec .inner dt {height:20px;margin-bottom:8px}
#facespec .txt {height:13px;margin-bottom:38px}
#facespec .largeIco {height:102px;margin-top:-25px}
#facespec .inner dl ul {height:51px}
#facespec .btn_link {margin-top:60px}

#portfolio h2 {height:32px;margin:92px 0 24px 0}
#portfolio .pageCnt {margin-bottom:25px}
#portfolio .pageBtn button {width:25px;height:48px;margin-top:-24px}

.contactWrap .inner {margin-top:-100px}
#contact h2 {height:35px;margin-bottom:42px}
.contact {height:123px}
}

@media only screen and (width : 412px) {
#service .btn_link {margin-top:15px}
}

@media only screen and (max-width : 399px) and (min-width: 376px) {
html, body {min-height:540px}
#header h1 a, #gnb li a, #gnb li.on a {height:53px}
.btn_gnb {left:6px;top:14px;width:35px;height:24px}

#intro .top, #overview .inner, #business .list, #service .tab, #service .bottom {padding:0 13px}
#intro .title {height:57px;margin-bottom:56px}
#intro .intro {height:68px}
#intro .bottom {height:23px}

#company h2 {height:29px;margin-bottom:26px}
#company .top {padding-top:83px;padding-bottom:11px}
#company .tab li {height:26px}
#company .btnWrap button {bottom:9px;width:23px;height:43px}

#overview .inner {margin-top:-105px}
#business {margin-top:-105px}
#overview li {margin-bottom:11px}
#overview li dl {height:53px}
#overview li dl.over {height:78px}

#history {margin:0 11px;padding-top:13px;}
#history .history {margin-bottom:26px}
#history .history dt {padding-left:15px;margin:0 0 11px -3px}
#history .history dd {padding-left:11px}

#client .pageBtn button {width:23px;height:43px;margin-top:-21px}

#service h2 {height:29px;margin:83px 0 15px 0}
#service .inner {padding-top:15px}
#service .btn_link {margin-top:23px}
#service .btn_link li {height:44px}
#service .btn_link li:nth-child(3) {margin-top:11px}

#cardeal .inner dt {height:35px;margin-bottom:19px}
#cardeal .txt {height:30px;margin-bottom:23px}
#cardeal .largeIco {height:156px;margin-top:-56px}
#cardeal .inner dl ul {height:46px}
#facespec .inner dt {height:18px;margin-bottom:8px}
#facespec .txt {height:12px;margin-bottom:34px}
#facespec .largeIco {height:92px;margin-top:-23px}
#facespec .inner dl ul {height:46px}
#facespec .btn_link {margin-top:54px}

#portfolio h2 {height:29px;margin:83px 0 22px 0}
#portfolio .pageCnt {margin-bottom:23px}
#portfolio .pageBtn button {width:23px;height:43px;margin-top:-21px}

.contactWrap .inner {margin-top:-90px}
#contact h2 {height:32px;margin-bottom:38px}
.contact {height:111px}
}

@media only screen and (max-width : 375px) {
html, body {min-height:480px}
#header h1 a, #gnb li a, #gnb li.on a {height:47px}
.btn_gnb {left:5px;top:13px;width:31px;height:21px}

#intro .top, #overview .inner, #business .list, #service .tab, #service .bottom {padding:0 12px}
#intro .title {height:51px;margin-bottom:50px}
#intro .intro {height:61px}
#intro .bottom {height:20px}

#company h2 {height:26px;margin-bottom:23px}
#company .top {padding-top:73px;padding-bottom:10px}
#company .tab li {height:23px}
#company .btnWrap button {bottom:8px;width:20px;height:38px}

#overview .inner {margin-top:-93px}
#business {margin-top:-93px}
#overview li {margin-bottom:10px}
#overview li dl {height:47px}
#overview li dl.over {height:70px}

#history {margin:0 10px;padding-top:12px;}
#history .history {margin-bottom:23px}
#history .history dt {padding-left:13px;margin:0 0 10px -3px}
#history .history dd {padding-left:10px}

#client .pageBtn button {width:20px;height:38px;margin-top:-19px}

#service h2 {height:26px;margin:73px 0 13px 0}
#service .inner {padding-top:13px}
#service .btn_link {margin-top:20px}
#service .btn_link li {height:39px}
#service .btn_link li:nth-child(3) {margin-top:10px}

#cardeal .inner dt {height:31px;margin-bottom:17px}
#cardeal .txt {height:26px;margin-bottom:20px}
#cardeal .largeIco {height:139px;margin-top:-50px}
#cardeal .inner dl ul {height:41px}
#facespec .inner dt {height:16px;margin-bottom:7px}
#facespec .txt {height:10px;margin-bottom:30px}
#facespec .largeIco {height:82px;margin-top:-20px}
#facespec .inner dl ul {height:41px}
#facespec .btn_link {margin-top:48px}

#portfolio h2 {height:26px;margin:73px 0 19px 0}
#portfolio .pageCnt {margin-bottom:20px}
#portfolio .pageBtn button {width:20px;height:38px;margin-top:-19px}

.contactWrap .inner {margin-top:-80px}
#contact h2 {height:28px;margin-bottom:33px}
.contact {height:98px}
}