@charset "utf-8";

/* CSS Document */
@import url('/home/new_css/main-visual.css');


/* 메인타이틀 공통 */
.Main_title {font-size:28px; font-weight:600; line-height:1; color: #000; letter-spacing: -1.2px; margin-right:14px;}
.Main_title_SubText {font-size: 18px; font-weight: 400; color: #666; padding-top: 10px; line-height: 1; letter-spacing: -1px;}
.MainBtnMore {position: absolute; right: 0; padding: 6px 20px; border: 1px solid #DDD; font-size: 14px; border-radius: 20px;}
.MainBtnMore:hover {border: 1px solid #000;}


/* 한줄알림 및 회원접속정보 */
#MainPartA {position: relative; display: flex; justify-content: space-between; flex-wrap: wrap;  width: 100%; max-width: 1240px; height:auto; margin: 0 auto; margin-top: 10px; margin-bottom: 30px;}
#MainPartA .NoticeWrap {display: flex; align-items: center; width:65%; height:50px; background:#f6f7f9; border-radius: 10px; padding: 0 2%;}
#MainPartA .NoticeWrap .title { position: relative; padding-left: 30px; font-size: 16px; background: url('../new_images/icon/alarmA.png') no-repeat left center; padding-right: 15px; margin-right: 15px;}
#MainPartA .NoticeWrap .title::after {content: ''; position: absolute; width: 1px; height: 14px; background: #CCC; right: 0; top: 50%;transform: translateY(-50%);}
#MainPartA .NoticeWrap .subjectBox {position: relative; display: flex; width: 80%;}
#MainPartA .NoticeWrap .subjectBox a.subject {
    display: block;
    max-width: 75%;
    font-size:15px; 
    font-family: 'Nanum Gothic';
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}
#MainPartA .NoticeWrap .subjectBox .fileicon {width: 14px; height: 14px; background: url('../new_images/icon/file.png') no-repeat center; margin-left: 6px;}
#MainPartA .NoticeWrap .subjectBox .date { position: absolute; top: 50%; transform: translateY(-50%); right: 0; color: #666; font-size: 15px; font-weight: 300; font-family: 'Nanum Gothic';}

#MainPartA .MemberWrap {width:32.58%; height:50px; display: flex; align-items: center; background:#f6f7f9; border-radius: 10px; padding: 0 2%;}
#MainPartA .MemberWrap .icub {width: 100%; text-align: center;}
#MainPartA .MemberWrap .compnay {
    position: relative;
    max-width: 66%;
    padding-left: 30px;
    font-size: 16px;
    /* font-family: 'Nanum Gothic'; */
    font-weight: 600;
    background: url('../new_images/icon/company.png') no-repeat left center;
    padding-right: 15px;
    margin-right: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}
#MainPartA .MemberWrap .compnay::after {content: ''; position: absolute; width: 1px; height: 14px; background: #CCC; right: 0; top: 50%;transform: translateY(-50%);}
#MainPartA .MemberWrap .user {font-size:15px; font-weight: normal;}


/* 비주얼 및 플러스샵 배너 */
#MainPartB {position: relative;  display: flex; justify-content: space-between; flex-wrap: wrap;  width: 100%; max-width: 1240px; height:auto; margin: 0 auto; margin-bottom: 80px;}
#MainPartB .VisualWrap {width:65%; height:360px; background:#ffbb00; border-radius: 20px; overflow: hidden;}
#MainPartB .PlusBenWrap {width:32.58%; height:360px; background:#00b2fa; border-radius: 20px; overflow: hidden;}


/* 아이큐브 서비스 */
#MainPartC {position: relative; width: 100%; max-width: 1240px; min-height: 540px; margin: 0 auto; margin-bottom: 80px;}
#MainPartC .TitleBox {position: relative; display: flex; align-items: center; width: 100%;}
#MainPartC .BtnBox {position: absolute; display: flex; top:0; right: 0; width: auto; height: auto;}
#MainPartC .BtnBox > li {position: relative; padding: 2px 20px; font-size: 20px;}
#MainPartC .BtnBox > li.activeA {font-weight: 600; color: #00a4ad;}
#MainPartC .BtnBox > li.activeB {font-weight: 600; color: #ff8800;}
#MainPartC .BtnBox > li::after {display: block; content: ''; position:absolute; width:1px; height:12px; right:0; top:12px; background-color: #ccc;}
#MainPartC .BtnBox > li:last-child::after {display: none;}
#MainPartC .m_service .ser_wra{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    width: 100%;
    max-width: 1240px;
    height: auto;
    margin: 0 auto;
    margin-top:40px;
    margin-bottom:60px;
    word-break: keep-all;
    overflow: hidden;

}
#MainPartC .m_service .ser_wra li {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid #e1e1e1;
    width: 18.0645%;
    margin-right: 2.4193%;
    height: 210px;
    border-radius: 20px;
    padding: 30px 22px;
    background: #FFF;
    transition: all .25s ease;
    overflow: hidden;
}
#MainPartC .m_service .ser_wra li.BG_A:hover {color: #FFF; background-color: #00a4ad; transition: all .25s ease; border: 1px solid #00a4ad;}
#MainPartC .m_service .ser_wra li.BG_B:hover {color: #FFF; background-color: #ff8800; transition: all .25s ease; border: 1px solid #ff8800;}
#MainPartC .m_service .ser_wra li:last-child{margin-right: 0;}
#MainPartC .m_service .ser_wra li .Title {width:100%; font-size: 20px; font-weight: 700; margin-bottom:10px; line-height: 1;}
#MainPartC .m_service .ser_wra li .Stext {display: block; width:100%; margin-bottom:6px; font-size: 16px; font-weight: 400; line-height: 1.3;}
#MainPartC .m_service .ser_wra li .IconBox {position: absolute; width: 54px; height: 50px;  right: 26px; bottom: 26px;}
#MainPartC .m_service .ser_wra li .MsA01{background: url("../new_images/icon/MsA01.png") no-repeat center bottom 0px;}
#MainPartC .m_service .ser_wra li:hover .MsA01{background: url("../new_images/icon/MsA01_on.png") no-repeat center bottom 0px;}
#MainPartC .m_service .ser_wra li .MsA02{background: url("../new_images/icon/MsA02.png") no-repeat center bottom 0px;}
#MainPartC .m_service .ser_wra li:hover .MsA02{background: url("../new_images/icon/MsA02_on.png") no-repeat center bottom 0px;}
#MainPartC .m_service .ser_wra li .MsA03{background: url("../new_images/icon/MsA03.png") no-repeat center bottom 0px;}
#MainPartC .m_service .ser_wra li:hover .MsA03{background: url("../new_images/icon/MsA03_on.png") no-repeat center bottom 0px;}
#MainPartC .m_service .ser_wra li .MsA04{background: url("../new_images/icon/MsA04.png") no-repeat center bottom 0px;}
#MainPartC .m_service .ser_wra li:hover .MsA04{background: url("../new_images/icon/MsA04_on.png") no-repeat center bottom 0px;}
#MainPartC .m_service .ser_wra li .MsA05{background: url("../new_images/icon/MsA05.png") no-repeat center bottom 0px;}
#MainPartC .m_service .ser_wra li:hover .MsA05{background: url("../new_images/icon/MsA05_on.png") no-repeat center bottom 0px;}
#MainPartC .m_service .ser_wra li .MsA06{background: url("../new_images/icon/MsA06.png") no-repeat center bottom 0px;}
#MainPartC .m_service .ser_wra li:hover .MsA06{background: url("../new_images/icon/MsA06_on.png") no-repeat center bottom 0px;}

#MainPartC .ms_banner {display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%;}
#MainPartC .ms_banner .leftbox {width: 48.790%; border-radius: 20px; overflow: hidden;}
#MainPartC .ms_banner .rightbox {width: 48.790%; border-radius: 20px; overflow: hidden;}


/* 플러스샵 제품출력 */
#MainPlus {position: relative; width: 100%; max-width: 1240px; height:auto; margin: 0 auto; margin-bottom: 80px;}
#MainPlus .TitleBox {position: relative; display: flex; align-items: center; width: 100%; height: auto;}
#MainPlus .TitleBox .MainiconA {padding-left: 34px; background: url('../new_images/icon/title_iconA.png')no-repeat left center;}
/* 유튜브 비디오 출력 */
#MainPlus .ProductVideo {
    position: relative; 
    width: 100%; 
    height: 0; 
    padding-bottom: 56.25%; 
    margin-top: 40px;
    margin-bottom:30px;
    border-radius: 20px;
    overflow: hidden;
    pointer-events: none;
}
#MainPlus .ProductVideo .TextBox {position: absolute; width: 50%; height: auto; left:6%; bottom:16%; z-index:101; color: #FFF;}
#MainPlus .ProductVideo .TextBox span {display: block;}
#MainPlus .ProductVideo .TextBox .Title { font-size: 16px; padding-left: 34px;  background: url('../new_images/icon/title_iconA.png')no-repeat left center;}
#MainPlus .ProductVideo .TextBox .ProductName {font-size: 64px; font-family: 'Samsung Sharp Sans'; font-weight: 900;}
#MainPlus .ProductVideo .TextBox .ProductName em { font-size: 24px; font-weight: 400;}
#MainPlus .ProductVideo .TextBox .ProductCopy {font-size: 16px;}
#MainPlus .ProductVideo .TextBox .Btn {
    position: relative; 
    font-family: 'Nanum Gothic';
    font-size:14px;
	color:#FFF;
	border-radius:30px;
	margin-top:14px;
	padding:8px 24px;
    line-height: 1;
    border: 1px solid #FFF;
	transition: all .2s ease;
    pointer-events: all;
}
#MainPlus .ProductVideo .TextBox .Btn:hover {background: #0176e8; color: #FFF; border: 1px solid #0176e8; transition: all .2s ease;}
#MainPlus .ProductVideo .Overlay {position: absolute; left: 0; top: 0; z-index: 100; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); display: block;}
#MainPlus .ProductVideo iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; pointer-events: none; object-fit: cover;}
/* 프로모션 이벤트 광고 배너 출력 */
#MainPlus .ProductBanner {width: 100%; min-height: 100px; margin-top: 40px; border-radius: 20px; background: #F9F9F9; overflow: hidden;}


/* 추천제품 출력 */
#MainPlusPrd {position: relative; width: 100%; max-width: 1240px; min-height:400px; margin: 0 auto; margin-bottom: 80px;}
#MainPlusPrd .TitleBox {position: relative; display: flex; align-items: center; width: 100%; height: auto; margin-bottom: 40px;}


/* 설치사례 출력 */
#MainInstall {position: relative; width: 100%; max-width: 1240px; height:auto; margin: 0 auto; margin-bottom: 80px;}
#MainInstall .TitleBox {position: relative; display: flex; align-items: center; width: 100%; height: auto; margin-bottom: 40px;}
#MainInstall .M_install_wrap {width:100%; height:100%; overflow:hidden;}
#MainInstall .M_install {position:relative; display: flex; flex-wrap: wrap; width:100%;}
#MainInstall .M_install li {width:33.333%; min-width: 230px; padding: 0 15px; transition: all .25s ease;}
#MainInstall .M_install li .insimgBox {position: relative;  width: 100%; height: auto; margin-bottom: 26px; overflow: hidden; border-radius: 10px;}
#MainInstall .M_install li .insimgBox img { width: 100%; height: auto; min-height:160px; max-height: 230px; object-fit: cover;}
#MainInstall .M_install li .insimgBox::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid transparent;
    border-radius: 10px;
    transition: border-color 0.25s ease; 
    box-sizing: border-box; 
}
#MainInstall .M_install li:hover .insimgBox::before {border-color: #000; }
#MainInstall .M_install li .summaryBox {width: 100%; overflow:hidden;}
#MainInstall .M_install li .summaryBox .category {display: block; font-size: 17px; font-weight: 600; font-family: 'Nanum Gothic'; padding-bottom: 6px; color: #666;}
#MainInstall .M_install li .summaryBox .title {width: 84%; font-size: 22px; font-weight: 600; padding-bottom: 6px; color: #000; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; -ms-text-overflow:ellipsis; white-space:nowrap;}
#MainInstall .M_install li .summaryBox .prod_name {width: 84%; display: block; font-size: 18px; font-weight: 600; font-family: 'Nanum Gothic'; padding-bottom: 20px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; -ms-text-overflow:ellipsis; white-space:nowrap;}
#MainInstall .M_install li:hover .summaryBox .title {color: #0563c1;}















/* 애드핑크 제품출력 */
#MainAdpink {position: relative; width: 100%; max-width: 1240px; height:auto; margin: 0 auto; margin-bottom: 80px;}
#MainAdpink .TitleBox {position: relative; display: flex; align-items: center; width: 100%; height: auto;}
#MainAdpink .TitleBox .MainiconB {padding-left: 34px; background: url('../new_images/icon/title_iconB.png')no-repeat left center;}
#MainAdpink .AdWrap {display: flex; flex-wrap: wrap; width: 100%; margin-top: 40px;}
#MainAdpink .AdWrap li { width: 23.387%; margin-right: 2.0967%;}
#MainAdpink .AdWrap li:last-child {margin-right: 0;}
#MainAdpink .AdWrap .Subject {display: block; width: 100%; font-size: 18px; margin-bottom: 14px;}
#MainAdpink .AdWrap .ImageBox {display: block; width: 100%; height: auto; border-radius: 10px; overflow: hidden;}
#MainAdpink .AdWrap .ImageBox img {transition: all .25s ease;}
#MainAdpink .AdWrap .ImageBox img:hover {transform: scale3d(1.05, 1.05, 1.05) rotate(0.001deg); transition: all .15s ease;}
#MainAdpink .AdWrap li:hover .Subject {color: #0176e8;}


/* 운영자료 및 공지사항 */
#MainCustomer {position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; max-width: 1240px; height: auto; margin: 0 auto; margin-bottom: 80px;}
#MainCustomer .dataWrap {width: 48.790%;}
#MainCustomer .dataWrap .TitleBox {position: relative; display: flex; align-items: center; width: 100%; height: auto;}
#MainCustomer .noticeWrap {width: 48.790%;}
#MainCustomer .noticeWrap .TitleBox {position: relative; display: flex; align-items: center; width: 100%; height: auto;}
#MainCustomer .listBox {width: 100%; min-height: 200px; margin-top: 40px; overflow: hidden; border: 1px solid #e1e1e1; padding: 4% 5%; border-radius: 20px;}
#MainCustomer .listBox .post {width:100%; height:auto;}
#MainCustomer .listBox .post li {position: relative; display: flex; align-items: center; height:auto;}
#MainCustomer .listBox .post li a {
    display: block;
    max-width: 75%;
    line-height:38px;
    padding-left:16px;
    font-size:15px; 
    font-family: 'Nanum Gothic';
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    background: url('../new_images/icon/dot.png') no-repeat left center;
}
#MainCustomer .listBox .post li a:hover {color:#0176e8;}
#MainCustomer .listBox .post li .fileicon {width: 14px; height: 14px; background: url('../new_images/icon/file.png')no-repeat center; margin-left: 4px;}
#MainCustomer .listBox .post li .date {position: absolute; right: 0; color: #666; font-size: 15px; font-weight: 300; font-family: 'Nanum Gothic';}


/* 아이큐브 스토리 */
#MainStory {position: relative; width: 100%; max-width: 1240px; height:auto; margin: 0 auto; margin-bottom: 80px;}
#MainStory .TitleBox {position: relative; display: flex; align-items: center; width: 100%; height: auto;}
#MainStory .StoryBox {width: 100%; min-height: 280px; margin-top: 40px; overflow: hidden; border: 1px solid #e1e1e1; padding:2.4193%; border-radius: 20px;}
#MainStory .StoryBox .Story { display:flex; flex-wrap:wrap; width:100%; height:auto;}
#MainStory .StoryBox .Story li { width:22.94%; height: auto; margin-right: 2.74%;}
#MainStory .StoryBox .Story li .ImageBox {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: 10px;
    overflow: hidden;
}
#MainStory .StoryBox .Story li .ImageBox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .25s ease;
}
#MainStory .StoryBox .Story li .ImageBox img:hover {transform: scale3d(1.05, 1.05, 1.05) rotate(0.001deg); transition: all .15s ease;}
#MainStory .StoryBox .Story li .Subject {
    width: 100%;
    max-height: 4em;
    font-size: 15px;
    font-family: 'Nanum Gothic';
    line-height: 1.4;
    padding: 15px 0 0;
    word-wrap: break-word;
    word-break: keep-all;
    overflow: hidden;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
#MainStory .StoryBox .Story li:hover .Subject { color: #0176e8;}
#MainStory .StoryBox .Story li:last-child{margin-right: 0;}


/* 지앤비시스템 정보 */
#MainGnb {position: relative; width: 100%; max-width: 1240px; height:auto; display: flex; justify-content: space-between; margin: 0 auto; margin-bottom: 80px;}
#MainGnb .CustWrap {width: 48.790%; min-height:504px; padding: 2.5%; border: 1px solid #e1e1e1; border-radius: 20px;}
#MainGnb .CustWrap .titleTextBox {width: 100%; font-size: 28px; color: #000; letter-spacing: -1.3px; margin-bottom: 10px;}
#MainGnb .CustWrap .titleTextBox span {display: block;}
#MainGnb .CustWrap .titleTextBox span em {font-weight: 600;}
#MainGnb .CustWrap .nationBox {display: flex; width: 100%; flex-wrap: wrap;}
#MainGnb .CustWrap .nationBox .support {width: 60%; padding: 40px 20px 0 0;}
#MainGnb .CustWrap .nationBox .support .text {display: block; width:100%; font-size: 18px; font-weight: 600; word-break: keep-all; line-height: 1.5;}
#MainGnb .CustWrap .nationBox .support .custom {width: 100%; margin-top: 24px;}
#MainGnb .CustWrap .nationBox .support .custom .Subject { font-size: 28px; color: #000; font-weight: 600;}
#MainGnb .CustWrap .nationBox .support .custom .tel {display: block; font-family: "S-CoreDream"; font-size: 42px; font-weight:600; color: #ff8800; letter-spacing: -2.5px;}
#MainGnb .CustWrap .nationBox .support .custom .fax {display: block; font-size: 18px; color: #000; letter-spacing: -1.3px; font-weight: 500; margin-bottom: 20px;}
#MainGnb .CustWrap .nationBox .support .custom .btn {
    padding: 8px 40px 8px 20px;
    border: 1px solid #DDD;
    border-radius: 20px;
    color: #333;
    line-height: 1;
    font-size: 15px;
    font-weight: 500;
    background: url('../new_images/icon/search_D.png') no-repeat right 15px center;
}
#MainGnb .CustWrap .nationBox .support .custom .btn:hover {border: 1px solid #000;}
#MainGnb .CustWrap .nationBox .map {width: 40%;}
#MainGnb .NunbWrap {width: 48.790%; min-height:504px;}
#MainGnb .NunbWrap .division {width: 100%;}
#MainGnb .NunbWrap .division li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: end;
    width: 100%;
    min-height: 96px;
    margin-bottom: 6px;
    background: #f6f7f9;
    border:1px solid #e1e1e1;
    border-radius: 20px;
    overflow: hidden;
    transition: all .25s ease;
}
#MainGnb .NunbWrap .division li:last-child {margin-bottom: 0;}
#MainGnb .NunbWrap .division li .TypeBox {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 45%;
    left: 0;
    top: 0;
    height: 100%;
    color: #FFF;
    border-radius: 20px;
    background: #ffbb00;
    padding-left: 3.5%;
}
#MainGnb .NunbWrap .division li .TypeBox .title {font-size: 28px; font-weight: 600; line-height: 1.2;}
#MainGnb .NunbWrap .division li .TypeBox .Stext {font-size: 15px;}
#MainGnb .NunbWrap .division li .NumberBox {width:40%; padding-right: 3.5%; text-align: right; color: #061c4b;}
#MainGnb .NunbWrap .division li .NumberBox .count_animate {font-size: 36px; font-family: 'S-CoreDream'; font-weight: 700;}
#MainGnb .NunbWrap .division li .NumberBox .count_text {font-size: 36px; font-family: 'S-CoreDream';}
#MainGnb .NunbWrap .division li .NumberBox .count_text.textnormal {font-size: 26px; font-weight: 700;}


/* 서비스 플랫폼 */
#MainPlatform {position: relative; width: 100%; max-width: 1240px; height:auto; margin: 0 auto;}
#MainPlatform .TitleBox {position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: auto; margin-bottom: 42px;}
#MainPlatform .ListWrap {position: relative; display: flex; flex-wrap: wrap; margin: -13px;}
#MainPlatform .ListWrap > li {width:25%; height: inherit; padding: 13px; text-align: center;}
#MainPlatform .ListWrap > li .item_inner {position: relative; width: 100%; max-width: 100%; height: auto; background: #f6f7f9; border-radius: 10px; overflow: hidden;}
#MainPlatform .ListWrap > li .item_inner img {transition: all .25s ease;}
#MainPlatform .ListWrap>li:hover .item_inner img {transform: scale3d(1.05, 1.05, 1.05) rotate(0.001deg); transition: all .15s ease;}




/* ********** 미디어쿼리 1240 ********** */	
@media screen and (max-width: 1240px){
    
    /* 한줄알림 및 회원접속정보 */
    #MainPartA {display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 10px; margin-bottom: 30px;}
    #MainPartA .NoticeWrap {width:65%; height:50px;  padding: 0 1.5%;}
    #MainPartA .NoticeWrap .title {width:30px; height: 30px; padding-left:0px; padding-right:10px; margin-right:0px;}
    #MainPartA .NoticeWrap .title span {display: none;}
    #MainPartA .NoticeWrap .title::after {display: none;}
    #MainPartA .NoticeWrap .subjectBox {position: relative; display: flex; width: 94%;}
    #MainPartA .NoticeWrap .subjectBox a.subject {max-width: 80%;}
    #MainPartA .NoticeWrap .subjectBox .date {font-size: 14px;}
    #MainPartA .MemberWrap {width:32.58%; height:50px; display: flex; align-items: center; background:#f6f7f9; border-radius: 10px; padding: 0 2%;}
    #MainPartA .MemberWrap .icub {width: 100%; text-align: center;}
    #MainPartA .MemberWrap .compnay { max-width: 60%; padding:2px 8px 2px 24px; font-size: 15px; margin-right: 10px;}

}


/* ********** 미디어쿼리 1024 ********** */	
@media screen and (max-width:1024px) {

    /* 메인타이틀 공통 */
    .Main_title {font-size:24px; margin-right:14px; padding-top:4px; padding-bottom: 4px;}
    .Main_title_SubText {font-size: 16px; padding-top: 10px;}
    .MainBtnMore {position: absolute; right: 0; padding: 4px 14px; font-size: 13px;}

    /* 비주얼 및 플러스샵 배너 */
    #MainPartB {margin-bottom: 60px;}

    /* 아이큐브 서비스 */
    #MainPartC {min-height: 440px; margin-bottom: 60px;}
    #MainPartC .TitleBox {position: relative; display: flex; align-items: center; width: 100%;}
    #MainPartC .BtnBox > li {padding: 2px 16px; font-size: 18px;}
    #MainPartC .BtnBox > li::after {top:10px; }
    
    /* 플러스샵 제품출력 */
    #MainPlus {margin-bottom: 60px;}

    /* 어린이집·유치원 추천제품 출력 */
    #MainPlusPrd {margin-bottom: 60px;}

    /* 애드핑크 제품출력 */
    #MainAdpink {margin-bottom: 60px;}

    /* 운영자료 및 공지사항 */
    #MainCustomer {margin-bottom: 60px;}

    /* 아이큐브 스토리 */
    #MainStory {margin-bottom: 60px;}

    /* 지앤비시스템 정보 */
    #MainGnb {margin-bottom: 60px;}

}


/* ********** 미디어쿼리 1020 ********** */	
@media screen and (max-width:1020px) {

    /* 메인타이틀 공통 */
    .Main_title {font-size:22px; margin-right:14px;}
    .Main_title_SubText {font-size: 16px; padding-top: 10px;}
    .MainBtnMore {position: absolute; right: 0; padding: 4px 14px; font-size: 13px;}

    /* 한줄알림 및 회원접속정보 */
    #MainPartA .NoticeWrap {width:100%; padding: 0 2%;}
    #MainPartA .MemberWrap {display: none;}

}


/* ********** 미디어쿼리 768 ********** */	
@media screen and (max-width:768px) {

    /* 메인타이틀 공통 */
    .Main_title {font-size:22px; margin-bottom:10px;}
    .Main_title_SubText {font-size: 16px; padding-top: 10px; word-break: keep-all;}
    .MainBtnMore {position: absolute; right: 0; top:-4px; padding: 4px 14px; font-size: 13px;}

    /* 한줄알림 및 회원접속정보 */
    #MainPartA {margin-bottom: 20px;}
    #MainPartA .NoticeWrap {width:100%; height:50px;  padding: 0 1.5%;}
    #MainPartA .MemberWrap {display: none;}

    /* 비주얼 및 플러스샵 배너 */
    #MainPartB {margin-bottom: 60px;}
    #MainPartB .VisualWrap {width:100%; height:360px; border-radius: 20px; margin-bottom: 20px;}
    #MainPartB .PlusBenWrap {width:100%; height:360px; border-radius: 20px;}

    /* 아이큐브 서비스 */
    #MainPartC {min-height: 440px; margin-bottom: 60px;}
    #MainPartC .TitleBox {display: block;}
    #MainPartC .BtnBox > li {padding: 2px 16px; font-size: 18px;}
    #MainPartC .BtnBox > li::after {top:10px; }
    #MainPartC .m_service .ser_wra{ margin-top:40px; margin-bottom:20px;}
    #MainPartC .m_service .ser_wra li {width: 48.5%; margin-right: 3%; height: 180px; padding: 25px 20px; margin-bottom: 3%;}
    #MainPartC .m_service .ser_wra li:nth-child(2) {margin-right: 0;}
    #MainPartC .m_service .ser_wra li:nth-child(4) {margin-right: 0;}
    #MainPartC .m_service .ser_wra li:last-child{margin-right: 0;}
    #MainPartC .m_service .ser_wra li .Title {width:100%; font-size: 20px; font-weight: 700; margin-bottom:10px; line-height: 1;}
    #MainPartC .m_service .ser_wra li .Stext {display: block; width:100%; margin-bottom:6px; font-size: 16px; font-weight: 400; line-height: 1.3;}
    #MainPartC .m_service .ser_wra li .IconBox {position: absolute; width: 54px; height: 50px;  right: 26px; bottom: 26px;}
    #MainPartC .ms_banner .leftbox {width: 100%; border-radius: 20px; overflow: hidden; background: #04c5d4; margin-bottom: 20px;}
    #MainPartC .ms_banner .rightbox {width: 100%; border-radius: 20px; overflow: hidden; background: #facc23;}

    /* 플러스샵 제품출력 */
    #MainPlus { margin-bottom:60px;}
    #MainPlus .TitleBox {display: block;}
    #MainPlus .ProductVideo { margin-top: 30px; margin-bottom:20px; border-radius: 20px;}
    #MainPlus .ProductVideo .TextBox {width: 100%; height: auto; left:6%; bottom:10%;}
    #MainPlus .ProductVideo .TextBox .Title { font-size: 15px; padding-left: 32px; letter-spacing: -1px;}
    #MainPlus .ProductVideo .TextBox .ProductName {font-size: 58px;}
    #MainPlus .ProductVideo .TextBox .ProductName em { font-size: 20px;}
    /* 프로모션 이벤트 광고 배너 출력 */
    #MainPlus .ProductBanner {margin-top: 30px; border-radius: 20px;}

    /* 어린이집·유치원 추천제품 출력 */
    #MainPlusPrd {margin-bottom: 60px;}
    #MainPlusPrd .TitleBox {display: block; margin-bottom: 30px;}

    /* 설치사례 출력 */
    #MainInstall {margin-bottom: 60px;}
    #MainInstall .TitleBox {display: block;}
    #MainInstall .M_install li {width:50%; min-width: 230px; padding: 0 15px; margin-bottom: 40px;}
    #MainInstall .M_install li:last-child {margin-bottom: 0px;}
    #MainInstall .M_install li .insimgBox { margin-bottom: 20px;  border-radius: 10px;}
    #MainInstall .M_install li .summaryBox .category {display: block; font-size: 17px; padding-bottom: 4px;}
    #MainInstall .M_install li .summaryBox .title {width: 84%; font-size: 20px; padding-bottom: 4px;}
    #MainInstall .M_install li .summaryBox .prod_name {width: 84%; display: block; font-size: 17px; padding-bottom: 0px;}

    /* 애드핑크 제품출력 */
    #MainAdpink {margin-bottom: 40px;}
    #MainAdpink .TitleBox {position: relative; display: block;}
    #MainAdpink .AdWrap {margin-top: 30px;}
    #MainAdpink .AdWrap li { width: 48.5%; margin-right: 3%; margin-bottom: 3%;}
    #MainAdpink .AdWrap li img {width: 100%;}
    #MainAdpink .AdWrap li:nth-child(2) {margin-right: 0;}
    #MainAdpink .AdWrap li:last-child {margin-right: 0;}
    #MainAdpink .AdWrap .Subject {font-size: 16px;}

    /* 운영자료 및 공지사항 */
    #MainCustomer {margin-bottom: 60px;}
    #MainCustomer .dataWrap {width: 100%; margin-bottom: 10px;}
    #MainCustomer .dataWrap .TitleBox {display: block; }
    #MainCustomer .noticeWrap {width: 100%;}
    #MainCustomer .noticeWrap .TitleBox {display: block; margin-top: 40px;}
    #MainCustomer .listBox {margin-top: 20px; padding: 3%; border-radius: 20px;}

    /* 아이큐브 스토리 */
    #MainStory {margin-bottom: 60px;}
    #MainStory .TitleBox {position: relative; display: block;}
    #MainStory .StoryBox {margin-top: 20px; border-radius: 20px;}
    #MainStory .StoryBox .Story {width:100%;}
    #MainStory .StoryBox .Story li { width:48.5%; margin-right: 3%; margin-bottom: 3%;}
    #MainStory .StoryBox .Story li:nth-child(2) {margin-right: 0;}
    #MainStory .StoryBox .Story li:nth-child(3) {margin-bottom: 0;}
    #MainStory .StoryBox .Story li:nth-child(4) {margin-bottom: 0;}

    /* 지앤비시스템 정보 */
    #MainGnb {margin-bottom: 60px; flex-wrap: wrap;}
    #MainGnb .CustWrap {width: 100%; min-height:auto; padding: 3%; padding-bottom: 20px;}
    #MainGnb .CustWrap .titleTextBox {font-size: 26px; margin-bottom: 10px;}
    #MainGnb .CustWrap .nationBox .support {width: 70%; padding: 30px 20px 0 0;}
    #MainGnb .CustWrap .nationBox .support .text {width:100%; font-size: 16px;}
    #MainGnb .CustWrap .nationBox .support .custom {width: 100%; margin-top: 22px;}
    #MainGnb .CustWrap .nationBox .support .custom .Subject { font-size: 24px;}
    #MainGnb .CustWrap .nationBox .support .custom .tel {font-size: 38px;}
    #MainGnb .CustWrap .nationBox .support .custom .fax {font-size: 18px; margin-bottom: 20px;}
    #MainGnb .CustWrap .nationBox .map {width: 30%;}

    #MainGnb .NunbWrap {width: 100%; margin-top: 60px;}
    #MainGnb .NunbWrap .division {width: 100%;}
    #MainGnb .NunbWrap .division li { width: 100%; min-height: 96px; border-radius: 20px;}
    #MainGnb .NunbWrap .division li .TypeBox { width: 50%; border-radius: 20px; padding-left: 3%;}
    #MainGnb .NunbWrap .division li .TypeBox .title {font-size: 26px;}
    #MainGnb .NunbWrap .division li .NumberBox {width:40%; padding-right: 3%;}
    #MainGnb .NunbWrap .division li .NumberBox .count_animate {font-size: 34px;}
    #MainGnb .NunbWrap .division li .NumberBox .count_text {font-size: 34px;}
    #MainGnb .NunbWrap .division li .NumberBox .count_text.textnormal {font-size: 24px;}

    /* 서비스 플랫폼 */
    #MainPlatform {width: 100%;}
    #MainPlatform .TitleBox {margin-bottom: 30px;}
    #MainPlatform .ListWrap {position: relative; margin: -10px;}
    #MainPlatform .ListWrap > li {width:33.333%; padding: 10px; }
    #MainPlatform .ListWrap > li:last-child {display: none;}

}


/* ********** 미디어쿼리 674 ********** */	
@media screen and (max-width:674px) {
	
    /* 메인타이틀 공통 */
    .MainBtnMore {top:4px}

}


/* ********** 미디어쿼리 500 ********** */	
@media screen and (max-width:500px) {

    /* 한줄알림 및 회원접속정보 */
    #MainPartA .NoticeWrap .subjectBox a.subject {max-width: 74%;}

    /* 비주얼 및 플러스샵 배너 */
    #MainPartB {margin-bottom: 40px;}

    /* 아이큐브 서비스 */
    #MainPartC .m_service .ser_wra li:last-child{margin-right: 0; width:100%;}

    /* 플러스샵 제품출력 */
    #MainPlus { margin-bottom:40px;}
    #MainPlus .TitleBox .PlusMore { top:4px; }
    #MainPlus .ProductVideo .TextBox .ProductName {font-size: 46px;}
    #MainPlus .ProductVideo .TextBox .ProductName em {margin-left: 4px; font-size: 18px;}
    #MainPlus .ProductVideo .TextBox .ProductCopy {font-size: 14px;}

    /* 어린이집·유치원 추천제품 출력 */
    #MainPlusPrd {margin-bottom: 40px;}

    /* 설치사례 출력 */
    #MainInstall {margin-bottom: 50px;}
    #MainInstall .TitleBox {display: block;}
    #MainInstall .M_install li {width:100%; padding: 0px;}

    /* 운영자료 및 공지사항 */
    #MainCustomer {margin-bottom: 40px;}
    #MainCustomer .noticeWrap .TitleBox {display: block; margin-top: 30px;}

    /* 아이큐브 스토리 */
    #MainStory {margin-bottom: 40px;}
    #MainStory .StoryBox {margin-top: 20px; border-radius: 10px; border:none; padding: 0;}

    /* 지앤비시스템 정보 */
    #MainGnb {margin-bottom: 40px;}
    #MainGnb .CustWrap .titleTextBox {font-size: 24px; margin-bottom: 10px; word-break: keep-all;}
    #MainGnb .CustWrap .nationBox .support {width: 70%; padding: 10px 20px 0 0;}
    #MainGnb .NunbWrap {width: 100%; margin-top: 40px;}


}

/* ********** 미디어쿼리 420 ********** */	
@media screen and (max-width:420px) {

    /* 한줄알림 및 회원접속정보 */
    #MainPartA .NoticeWrap .subjectBox a.subject {max-width: 90%;}
    #MainPartA .NoticeWrap .subjectBox .date {display: none;}

    /* 플러스샵 제품출력 */
    #MainPlus .ProductVideo .TextBox .ProductName {font-size: 36px;}
    #MainPlus .ProductVideo .TextBox .ProductName em {margin-left: 4px; font-size: 16px;}

    /* 운영자료 및 공지사항 */
    #MainCustomer .listBox .post li a { max-width: 92%;}
    #MainCustomer .listBox .post li .date {display: none;}

    /* 지앤비시스템 정보 */
    #MainGnb {margin-bottom: 40px;}
    #MainGnb .CustWrap .titleTextBox {font-size: 20px;}
    #MainGnb .CustWrap .nationBox .support {padding: 10px 10px 0 0;}
    #MainGnb .NunbWrap .division li .TypeBox { width: 60%;}
    #MainGnb .NunbWrap .division li .TypeBox .title {font-size: 22px;}
    #MainGnb .NunbWrap .division li .NumberBox {width:40%;}
    #MainGnb .NunbWrap .division li .NumberBox .count_animate {font-size: 28px;}
    #MainGnb .NunbWrap .division li .NumberBox .count_text {font-size: 28px;}
    #MainGnb .NunbWrap .division li .NumberBox .count_text.textnormal {font-size: 18px;}

    /* 서비스 플랫폼 */
    #MainPlatform .TitleBox {margin-bottom: 20px;}
    #MainPlatform .ListWrap {position: relative; margin: -5px;}
    #MainPlatform .ListWrap > li {width:33.333%; padding: 5px; }
    #MainPlatform .ListWrap > li:last-child {display: none;}

}


/* ********** 미디어쿼리 360 ********** */	
@media screen and (max-width:360px) {

    /* 아이큐브 서비스 */
    #MainPartC .m_service .ser_wra li {width:100%; margin-right: 0;}

    /* 플러스샵 제품출력 */
    #MainPlus .TitleBox .PlusMore { top:70px; }
    #MainPlus .ProductVideo .TextBox .Title {display: none;}

}