@charset 'utf-8';

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

#header {height: 60px;}
#header .headWrap {width: 100%;}
#header .headWrap .logo {margin: 16px 0 0 18px;}
#header .headWrap .logo a {width: 194px; height: 24px; background-size: 100% 100%;}
#header .headWrap .btn_gnb {right: 12px; top: 9px; width: 20px; background-size: 100% 100%;}
#header.hover .headWrap .logo a {background-size: 100% 100%;}
#header.hover .headWrap .btn_gnb {background-size: 100% 100%;}

#header .gnbCont .menuWrap {width: calc(100% - 40px);}
#header .gnbCont .menuWrap ul {margin-top: 50px;}
#header .gnbCont .menuWrap li {height: 45px; line-height: 45px;}
#header .gnbCont .menuWrap li a {font-size: 22px;}
#header .gnbCont .menuWrap li a:hover {border-bottom: 2px solid #e13237;}
#header .gnbCont .menuWrap a.btn_menu {right: 0px; top: 25px; width: 15px; height: 15px; background-size: 15px;}

#footer {min-width: 100%; height: 200px; text-align: center;}
#footer .logo_f {float: none; margin: 60px 0 75px; padding: 0;}
#footer p.corp {float: none; padding: 0; font-size: 12px;}

/* str : Layer pop */
.layerPop {width: calc(100% - 40px);}
.layerContain .inBox {padding: 20px;}
.layerContain .inBox .layer_x {right: 20px; top: 20px; width: 15px; height:15px; background-size: 15px;}
/* fin : Layer pop */

.bx_proc {width: calc(100% - 40px);}
.bx_proc dl {margin-bottom: 25px; padding-bottom: 15px;}
.bx_proc dl:after {width: 25px; height: 2px;}
.bx_proc dt {margin-bottom: 10px; font-size: 26px;}
.bx_proc dd {font-size: 16px;}
.bx_proc li {margin-bottom: 20px;}
.bx_proc li div {margin-bottom: 5px; font-size: 14px;}
.bx_proc li p {padding-left: 15px; font-size: 12px; line-height: 20px;}

.bx_new {width: calc(100% - 40px);}
.bx_new dl {margin-bottom: 20px;}
.bx_new dt {padding-bottom: 15px;}
.bx_new dt p {font-size: 16px;}
.bx_new dt div {padding: 7px 0 10px; font-size: 24px;}
.bx_new dt span {font-size: 12px;}
.bx_new dt:after {width: 25px; height: 2px;}
.bx_new dd {padding: 25px 0 15px; font-size: 14px; line-height: 20px;}
.bx_new .btn_link {margin: 0 5px 0 0px; padding-left: 20px; background: url(/images/ico_file.png) 0 50% no-repeat; font-size: 14px; line-height: 25px;}
.bx_new .btn_down {display: block; height: 25px; padding: 0 10px; font-size: 14px;}
.bx_new .inBox {padding: 20px;}
.bx_new .inBox .layer_x {right: 20px; top: 20px; width: 15px; height:15px; background-size: 15px;}

.concept .desc {height: 500px; padding-top: 220px; font-size: 22px; line-height: 18px;}
.concept .desc br {display: none;}
.concept .desc span {display: block;}
.concept a.btn_scroll {left: 50%; top: 350px; }
.concept .inBox {width: 100%; margin: 0 auto;}
.concept .inBox dl {float: none; width: 100%; height: 365px;}
.concept .inBox dl.sum01 {margin-top: 0px; padding: 55px 0 0 40px;}
.concept .inBox dl.sum01 dd {margin-top: 30px;}
.concept .inBox dl.sum02 {padding: 55px 0 0 40px;  background-size: cover;}
.concept .inBox dl.sum02 dd {margin-top: 25px;}

.team {padding-top: 60px;}
.team .inner {display: none;}
.team dl {width: 320px;}
.team dd {height: 170px;}
.team dd p {height: 40px; margin-top: 25px;}
.team dd p span {display: inline-block; margin-left: 10px; line-height: 16px;}
.team dd {padding: 0 10px;}

#touchSlider {display: block; width: 320px; height: 510px; margin-top: 30px; position: relative; overflow: hidden;}
#touchSlider ul {width: 99999px; height: 510px; position: absolute; top: 0; left: 0; overflow: hidden;}
#touchSlider ul li {float: left; width: 320px; height: 510px;}


.strtg {margin-top: 50px;}
.strtg .inner {width: 100%; height: auto; margin: 30px auto 0; background: url(/images/bg_strtg_mob.png) 50% 0 no-repeat;}
.strtg .inner ul {width: 100%;}
.strtg .inner li {float: none; width: 100%; overflow: hidden;}
.strtg .inner li dl {width: 334px; height: 334px; margin: 40px auto; padding: 45px 0 0 32px;}
.strtg .inner li.stCon01 dl {float: none; background: rgba(255,255,255,0.8);}
.strtg .inner li dt {height: 190px; font-size: 26px; color: #fff; font-weight: bold; line-height: 30px;}
.strtg .inner li dd {font-family: 'nanum-bg', sans-serif; font-size: 16px; line-height: 28px; color: #fff; letter-spacing: -1px; word-spacing: -1px;}
.strtg .inner li.stCon01 dt,
.strtg .inner li.stCon04 dt {color: #151c3b;}
.strtg .inner li.stCon01 dd,
.strtg .inner li.stCon04 dd {color: #545763;}
.strtg .inner .pc {display: none;}
.strtg .inner .mob {display: block;}

.portfolio {height: auto; padding: 60px 0 50px; background-size: cover;}
.portfolio .inner {width: calc(100% - 80px); margin: 35px auto 0;}
.portfolio .inner ul {/* margin-right:0; */width: 101.5%;margin-left: -1.5%;}
.portfolio .inner li {float: left;position: relative;width: 48%;max-height:none;margin-bottom: 1.5%;min-height: 170px;}
/*.portfolio .inner li + li{margin-left:0}*/
.portfolio .inner li:nth-child(even){/* margin-left:10px; margin-right:0; */}
.portfolio .inner li a{display:flex;align-items:center;justify-content:center;height:60px;padding:10px 10px 0;}
.portfolio .inner li img{display:block;width:80% !important;max-width:80% !important;height:auto !important;margin:0 auto}
.portfolio p {left: 0px; bottom: 20px; padding:20px 20px 0; text-align:center;}
.portfolio p:before {left:50%; transform:translateX(-50%);}


.process {margin-top: 60px;}
/*.process .inner {width: calc(100% - 80px) !important; min-width: 414px; height: 390px; margin: 45px auto 50px; background: url(/images/img_bg_process_m.png) 50% 0 no-repeat;}*/
.process .inner {width: calc(100% - 80px) !important; min-width: 414px; height: auto; margin: 45px auto 50px; background: url(/images/img_bg_process_m.png) 50% 0 no-repeat; padding:0;}
/*.process:before {top: 124px; height: 2px;}
.process:after {top: 409px; height: 2px;}*/
.process .inner .pc {display: none;}
.process .inner .mob {display: block;}
.process .inner ul {position: relative; width: 339px; margin: 0 auto;}
.process .inner li {float: left; width: 113px; height: 143px; padding-top: 70px; font-size: 14px;}
.process .proc_l {left: 0; top: 0;}
.process .proc_m {}
.process .proc_r {right: 0; top: 0;}
.process .desc {margin: 45px 0 40px; padding: 0 40px; text-align: left; word-spacing: -1px;}
.process .desc br {display: none;}
.process .dual {width: 100%; margin-top: 40px;}
.process .dual dl {float: none; width: 100%; height: 460px;}
.process .dual dl.colm01 {padding: 60px 0 0 40px; background-size: cover;}
.process .dual dl.colm02 {height: 460px; padding: 60px 40px 0 40px; background-size: cover;}
.process .dual dl.colm01 dt a {left: 0; top: 60px;}
.process .dual dl.colm01 dt a.btn02{top:60px;left:140px}
.process .dual dl.colm01 dd table {margin-top: 75px;}
.process .dual dl.colm02 dd table {margin-top: 85px;}
.process .dual dd th {font-size: 14px;}
.process .dual dd td {font-size: 14px;}
.process .dual dd .cmt {margin-top: 40px; font-family: 'nanum-bg', sans-serif; font-size: 16px; line-height: 28px; color: #fff;}
.process .dual dd .cmt br {display: none;}

.subcont {padding-top: 55px;}
.subcont:before {top: 450px; height: 850px;}
.subcont .inBox {width: calc(100% - 80px); margin: 30px auto 0;}
.subcont dl {float: none; width: 100%; height: auto; margin-bottom: 15px; padding-bottom: 35px;}
.subcont dt img {width: 100%;}
.subcont dd {letter-spacing: -1px;}
.subcont dd div {margin-top: 35px; font-size: 23px;}
.subcont dd p{margin: 15px 0 20px; font-family: 'nanum-bg', sans-serif; font-size: 14px; line-height: 24px; color: #545763;}

.history {padding-top: 70px;}
.history .list {width: calc(100% - 80px); margin: 30px auto 0;}
.history .list dl {height: auto; padding: 25px; margin-bottom: 25px; line-height: 1em;}
.history .list dt {float: none; width: 100%; text-align: left;}
.history .list dt:after {content: ""; display: none;}
.history .list dd {float: none; width: 100%; margin-top: 15px; padding-left: 0; line-height: 24px;}
.history .size{max-width:none; padding:0 20px;}
.history .con_wrap .tit{float:none;width:100%; margin-bottom:20px;}
.history .con_wrap .tit p{font-size:11px; letter-spacing: 0.1em;padding: 7px 0;text-align: center;}
.history .con_wrap .tit h5{font-size:60px;text-align: center;}
.history .con_wrap .txt{float:none; width:100%;}
.history .depth4 ul li a{width: 50px;height: 50px;line-height: 50px;font-size: 20px;}


.news {padding: 65px 0 70px;}
.news table {width: calc(100% - 80px); margin: 50px auto 0;}
.news tr th,
.news tr td {height: auto; padding: 12px 0; line-height: 1em;}
.news th {padding-top: 15px; text-indent: 4px;}
.news td.tit {padding-left: 15px;}
.news td a {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap:break-word; line-height: 1.2em; height: 1.2em;}
.news td.tbClr {display: none;}
.news td .nsDate {display: inline-block; margin-top: 7px;}

.paging {min-width: 320px; margin: 30px auto 0;}

.contact {width: 100%; height: auto;}
.contact ul{width:100%}
.contact li {float: none; width: 100%;}
.contact li.con_l {height: 340px; padding: 60px 30px 0;background-size: 100% 340px; overflow: hidden;}
.contact li.con_l dl {margin:0}
.contact li.con_l dd {margin-top: 25px;}
.contact li.con_l dd div {font-family: 'oswald', sans-serif; font-size: 22px; color: #fff;}
.contact li.con_l dd p {margin-top: 35px; font-family: 'nanum-bg', sans-serif; font-size: 15px; color: #fff; line-height: 28px;}
.contact li.con_r iframe {width: 100%; height: 340px;}

#footer .btn-wrap{float: none;}

#layerPop02 .inBox{padding:20px;}
#layerPop02.bx_proc .list li{font-size:12px;padding-left:14px;line-height:20px;}
#layerPop02.bx_proc .list li:before{left:7px;top:10px;}
#layerPop02 .bot dt{font-size:14px}
#layerPop02 .bot dd{font-size:12px;}

.sample .team .inner {display: block; width: 100%; max-width: 400px; padding: 50px 25px 0; box-sizing: border-box;}
.sample .team ul {grid-template-columns: 1fr;}
.sample .team ul > li:first-child {grid-column: auto;}
.sample .team ul > li:nth-child(2) {grid-column: auto;}
.sample .team li.ceo dl {display: block;}
.sample .team li.ceo dt {width: 100%; min-width: auto;}
.sample .team li.ceo dd {margin-left: 0;}
.sample .team li.team-division {grid-column: auto; padding: 30px 0 25px; font-size: 20px;}
.sample .team li.team-division:after {bottom: 10px;}

}


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

#footer {height: 200px;}
#footer .logo_f {margin: 30px 0 35px;}

.concept .desc {height: 400px; padding: 150px 25px 0; font-size: 20px; line-height: 24px;}
.concept .desc span {display: none;}
.concept a.btn_scroll {top: 320px;}
.concept .inBox dl {float: none; width: 100%; height: 318px;}
.concept .inBox dt div {padding-bottom: 15px; font-size: 25px;}
.concept .inBox dl.sum01 {margin-top: 0px; padding: 35px 25px 0 25px;}
.concept .inBox dl.sum01 dd {margin-top: 20px;}
.concept .inBox dl.sum02 {padding: 35px 0 0 25px; height:318px;}
.concept .inBox dl.sum01 dd {font-size: 14px;}
.concept .inBox dl.sum01 dd br {display: none;}
.concept .inBox dl.sum02 li div,
.concept .inBox dl.sum02 li p {font-size: 14px;line-height:25px;}
.concept .inBox dl.sum02 ul li:nth-of-type(6) {font-size:14px;line-height:20px;}
.concept .inBox dl.sum02 ul li:nth-of-type(7) {font-size:14px;line-height:20px;}
.concept .inBox dl.sum02 ul li:last-child {font-size:14px;line-height:20px;}

.team {margin-top: 60px;}
.team .inner {display: none;}
.team dl {width: 320px;}
.team dd {height: 170px;}
.team dd p {height: 40px; margin-top: 25px;}
.team dd p span {display: inline-block; margin-left: 10px; line-height: 16px;}
.team dd {padding: 0 10px;}

#touchSlider {display: block; width: 100%; height: 510px; margin: 30px 40px 0; position: relative; overflow: hidden;}
#touchSlider ul {width: 99999px; height: 510px; position: absolute; top: 0; left: 0; overflow: hidden;}
#touchSlider ul li {float: left; width: 100%; height: 510px;}


.strtg {margin-top: 50px;}
.strtg .inner {width: 100%; height: auto; margin: 30px auto 0; background: url(/images/bg_strtg_mob.png) 50% 0 no-repeat;}
.strtg .inner ul {width: 100%;}
.strtg .inner li {float: none; width: 100%; overflow: hidden;}
.strtg .inner li dl {width: 334px; height: 334px; margin: 40px auto; padding: 45px 0 0 32px;}
.strtg .inner li.stCon01 dl {float: none; background: rgba(255,255,255,0.8);}
.strtg .inner li dt {height: 190px; font-size: 26px; color: #fff; font-weight: bold; line-height: 30px;}
.strtg .inner li dd {font-family: 'nanum-bg', sans-serif; font-size: 16px; line-height: 28px; color: #fff; letter-spacing: -1px; word-spacing: -1px;}
.strtg .inner li.stCon01 dt,
.strtg .inner li.stCon04 dt {color: #151c3b;}
.strtg .inner li.stCon01 dd,
.strtg .inner li.stCon04 dd {color: #545763;}
.strtg .inner .pc {display: none;}
.strtg .inner .mob {display: block;}

.portfolio {height: auto; padding: 60px 0 50px; background-size: cover;}
.portfolio .inner {width: calc(100% - 30px); margin: 35px auto 0;}
.portfolio .inner ul {width: 101.5%;margin-left: -1.5%;}
.portfolio .inner li {/* float: left; */position: relative;/* margin: 0 10px 10px 0; */min-height: 140px;}
.portfolio .inner li:nth-child(even){/* margin-left:0 */}
.portfolio .inner li img {width: 100%;}
.portfolio p {left:0; bottom: 20px; padding: 10px 8px 0;font-size:12px;}

.process {margin-top: 60px;}
.process .inner {width: 100%; min-width: 100%; height: auto; margin: 45px auto 50px; background-size: }
.process:before {top: 124px; height: 2px;}
.process:after {top: 409px; height: 2px;}
.process .inner .pc {display: none;}
.process .inner .mob {display: block;}
.process .inner ul {position: relative; width: 339px; margin: 0 auto;}
.process .inner li {float: left; width: 113px; height: 143px; padding-top: 70px; font-size: 14px;}

.process .proc_l {left: 0; top: 0;}
.process .proc_m {}
.process .proc_r {right: 0; top: 0;}
.process .desc {padding: 45px 0 40px; padding: 0 40px; text-align: left; word-spacing: -1px;}
.process .desc br {display: none;}
.process .dual {width: 100%;}
.process .dual dl {float: none; width: 100%; height: 460px;}
.process .dual dl.colm01 {padding: 60px 0 0 40px; background-size: cover;}
.process .dual dl.colm02 {height: 460px; padding: 60px 40px 0 40px; background-size: cover;}
.process .dual dl.colm01 dt a {left: 0; top: 60px;}
.process .dual dl.colm01 dd table {margin-top: 75px;}
.process .dual dl.colm02 dd table {margin-top: 85px;}
.process .dual dd th {font-size: 14px;}
.process .dual dd td {font-size: 14px;}
.process .dual dd .cmt {margin-top: 40px; font-family: 'nanum-bg', sans-serif; font-size: 16px; line-height: 28px; color: #fff;}
.process .dual dd .cmt br {display: none;}

.subcont {margin-top: 55px;}
.subcont:before {top: 450px; height: 850px;}
.subcont .inBox {width: calc(100% - 80px); margin: 30px auto 0;}
.subcont dl {float: none; width: 100%; height: auto; margin-bottom: 15px; padding-bottom: 35px;}
.subcont dt img {width: 100%;}
.subcont dd {letter-spacing: -1px;}
.subcont dd div {margin-top: 35px; font-size: 23px;}
.subcont dd p{margin: 15px 0 20px; font-family: 'nanum-bg', sans-serif; font-size: 14px; line-height: 24px; color: #545763;}

.history {padding-top: 70px;}
.history .list {width: calc(100% - 80px); margin: 30px auto 0;}
.history .list dl {height: auto; padding: 25px; margin-bottom: 25px; line-height: 1em;}
.history .list dt {float: none; width: 100%; text-align: left;}
.history .list dt:after {content: ""; display: none;}
.history .list dd {float: none; width: 100%; margin-top: 15px; padding-left: 0; line-height: 24px;}

.news {padding: 65px 0 70px;}
.news table {width: calc(100% - 80px); margin: 50px auto 0;}
.news tr th,
.news tr td {height: auto; padding: 12px 0; line-height: 1em;}
.news th {padding-top: 15px; text-indent: 4px;}
.news td.tit {padding-left: 15px;}
.news td a {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap:break-word; line-height: 1.2em; height: 1.2em;}
.news td.tbClr {display: none;}
.news td .nsDate {display: inline-block; margin-top: 7px;}

.paging {min-width: 320px; margin: 30px auto 0;}

.contact {width: 100%; height: auto;}
.contact li {float: none; width: 100%;}
.contact li.con_l {height: auto;padding:40px 20px;background-size: 100% 340px; overflow: hidden;}
.contact li.con_l dl {margin:0;}
.contact li.con_l dd {margin-top: 25px;}
.contact li.con_l dd div {font-family: 'oswald', sans-serif; font-size: 22px; color: #fff;}
.contact li.con_l dd p {margin-top: 15px; font-family: 'nanum-bg', sans-serif; font-size: 12px; color: #fff; line-height: 28px;}
.contact li.con_r iframe {width: 100%; height: 340px;}

}

@media screen and (max-width:420px) {
	.concept .inBox dl.sum02 {height:345px;}
}