@charset "utf-8";
 
 
/*  common */

a {color: #2AB4B6}
a:hover {color: #1bB4B6}

.divider  {height: 1px !important; }
.divider.gear {position: relative; margin: 50px 0 !important} 
.divider.gear:before  {content: ""; display: block; background: url(../images/dividerGear.png) no-repeat center center #fff; margin: 0 auto; width: 27px; height: 27px; background-size: 60% auto; position: absolute; left: 50%; margin-left: -18px; top: 50%; margin-top: -13px; padding:0 9px;  } 
 
.bdGreen {border-color: #00b2c4 !important} 
a.bdGreen:hover {color: #fff !important; background: #2AB4B6; }  
 
.txtGreen {color: #2AB4B6 !important} 
.txtRed.t2 {color: #e61874 !important} 
.txtRed {color: #ff6f20 !important} 
.txtYellow {color: #ffc018 !important} 
.txtGreenT2 {color:#85b610 !important}
 
p.titleSub {font-size: 1.2em; color: #222222}
 
h2.title:before, h3.title:before {display: none;} 

h2.title, h3.title  {color: #2AB4B6} 

.subScript {font-size: 11px; color: #555555}

.top20 {margin-top: 20px !important;}
.top40 {margin-top: 40px !important;}
.top60 {margin-top: 60px !important;}

.whiteSpace {white-space: nowrap;}

.tabletView {display: none;}

.bt.Green.langeBt {width: 200px; height: 60px; text-align: center; padding-top: 20px; font-size: 1.3em; color: #fff; font-weight: bold; background: #2AB4B6; text-decoration: none; display: block; margin: 0 auto; margin-top: 60px; box-sizing: border-box;}

.topSmallLine {padding-top:20px; margin-top: 20px; position: relative; }
.topSmallLine:before {content: ""; width: 18px; height: 2px; background: #ccc; display: block;  position: absolute; top: 0; left: 50%; margin-left: -9px;}

.setWidth840 {max-width: 840px !important; margin: 0 auto}
.setWidth740 {max-width: 740px !important; margin: 0 auto}
.setWidth640 {max-width: 640px !important; margin: 0 auto}
.setWidthAuto {max-width: auto !important; width: auto !important;}

.txt08 {font-size: 0.8em}

.hidden {display: none !important;}



/* check box */

input[type="checkbox"].custom, input[type="radio"].custom {
    display:none;
}

input[type="checkbox"].custom + label, input[type="radio"].custom + label {
    color:#000; width: auto;
}

input[type="checkbox"].custom + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(../images/check_back.png) left top no-repeat;
    background-size: auto 100%;
    cursor:pointer;
}

input[type="radio"].custom + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(../images/radio_back.png) left top no-repeat;
    cursor:pointer;
}

input[type="checkbox"].custom:checked + label span {
    background:url(../images/check_back.png) right top no-repeat;
    background-size: auto 100%;
}




/* bt */

a.bt.roundBt {border: 2px solid #555; /* font-size: 0.8em; */ padding: 9px 25px 8px; box-sizing: border-box; border-radius: 1000px; text-decoration: none; color:#2AB4B6; margin-right: 10px; display: inline-block; margin-bottom: 15px; }
a.bt.roundBt.big {border: 1px solid #555; font-size: 1.1em; padding: 14px 25px 8px;  margin-right: 0; margin-bottom: 15px; width: 160px; height: 50px; text-align: center; margin-top: 20px }


a.bt.underLine {color: #555555; position: relative; padding-bottom: 5px; text-decoration: none; display: inline-block; margin: 30px 0 }
a.bt.underLine:before {content: ""; height: 1px; background: #555; width: 100%; position: absolute; bottom: 0; }
a.bt.underLine:hover {color: #2ab4b6;  }
a.bt.underLine:hover:before { background: #2ab4b6;  }




/*  활용가이드 1 */

.steprowT2 {margin-top: 60px !important}
.steprowT2 h4.title.txtGreen {font-size: 1.5em; margin: 30px 0px 0px}



.sectionList .divider {margin: 30px 0 !important;}
span.txtGreen.topSubTitle {font-size: 1.4em; display: block; margin-top: 40px }
.sectionList .rowT2 {margin-top: 20px; margin-bottom: 10px}
h4.title {font-size: 1.5em; margin-top: 0px; color: #333; font-weight: normal}
.sectionList p {font-size: 1em; color: #555;}




.sectionList ul.top20 {padding-left: 20px}
.sectionList ul.top20 li { list-style: none;}
.sectionList ul.top20 li span {display: inline-block; vertical-align: middle; position: relative; margin-right: 15px;/*  width: 90px; */ margin-bottom: 15px;}
.sectionList ul.top20 li span:before {content: ""; width: 3px; height: 3px; display: inline-block; background: #555; position: absolute; top: 7px; left: -10px; }
.sectionList ul.top20 li a {display: inline-block; vertical-align: middle;}


/* 활용가이드 2 */

/* 활용가이드 소프트웨어 선택 */

.softWareFancyWrap .alignCenter { margin-bottom: 30px;}
.softWareFancyWrap .alignCenter p {display: inline-block; font-size: 0.9em}
.softWareFancyWrap .alignCenter p span:before {content: ""; display: inline-block; width: 13px; height: 13px; background-size: 100% auto; background-repeat: no-repeat; background-position: center center; margin-right: 5px; top: 2px; position: relative;}
.softWareFancyWrap .alignCenter p span.txtRed:before {background-image: url(../images/icon_redCircle.png)}
.softWareFancyWrap .alignCenter p span.txtGreen:before {background-image: url(../images/icon_greenTrianlge.png)}
.softWareFancyWrap .alignCenter p:first-child {margin-right: 10px}
.softWareFancyWrap .innerBox {overflow: hidden; padding: 40px; background: #f1f3f3; border-radius: 15px;}
.softWareFancyWrap .innerBox .left {width: 64%; padding-right: 30px; border-right: 1px solid #d8dada; box-sizing: border-box ;}
.softWareFancyWrap .innerBox h4 {text-align: center; color: #222; font-size: 1.3em; font-weight: 400; margin-bottom: 20px}
.softWareFancyWrap .innerBox .right {width: 33.7%; padding-left: 30px;  box-sizing: border-box;}
.softWareFancyWrap .innerBox .rowT2 .col .imgWrap {margin-bottom: 20px}


.softWareFancyWrap.t2 .innerBox {max-width: 960px; margin: 0 auto; box-sizing: border-box}
.softWareFancyWrap.t2 .innerBox .left {width: 100%; border: 0; padding: 0}
.softWareFancyWrap.t2 .innerBox .right {width: 100%; padding: 0;}
.softWareFancyWrap.t2 .innerBox .right .rowT2 .col05:nth-child(5n+1) {clear: both}


.softWareFancyWrap.t3 .innerBox {max-width: 1080px; margin: 0 auto; box-sizing: border-box}
.softWareFancyWrap.t3 .innerBox .left {width: 49%}
.softWareFancyWrap.t3 .innerBox .right {width: 50%;}

.softWareFancyWrap.t3 .innerBox .unitT1 .label {width: 50px; display: inline-block; float: left; clear: both; font-size: 16px; line-height: 1.1;}
.softWareFancyWrap.t3 .innerBox .unitT1 > div {margin-bottom: 20px;}
.softWareFancyWrap.t3 .innerBox .unitT1 > div:nth-child(1) .label {margin-top: 30px;}
.softWareFancyWrap.t3 .innerBox .unitT1 > div:nth-child(2) .label {margin-top: 20px;}
.softWareFancyWrap.t3 .innerBox .unitT1 > div:nth-child(3) .label {margin-top: 80px;}
.softWareFancyWrap.t3 .innerBox .unitT1 .label .bdRed.box, .softWareFancyWrap.t3 .innerBox .unitT1 .label .bdGreen.box {display: inline-block; padding: 2px; min-width: 30px; text-align: center; font-size: 0.7em; margin-top: 5px;}
.softWareFancyWrap.t3 .innerBox .unitT1 .label .bdRed.box {color: #ff7200; border: 1px solid #ff7200; border-radius: 3px;}
.softWareFancyWrap.t3 .innerBox .unitT1 .label .bdGreen.box {color: #34c19a; border: 1px solid #ff7200; border-radius: 3px;}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 {background: #fff; border-radius: 10px}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2.t6 .col {padding-top: 5px !important; padding-bottom: 5px !important;}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a {display: inline-block; min-height: 95px; width: 100%; text-align: center; padding-top: 70px; box-sizing: border-box; text-decoration: none; color: #666; border-radius: 8px; position: relative; font-size: 12px; line-height: 1.2}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a.t2 {padding-top: 65px;}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a:hover {color: #fff; background: #00b2c4; }
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col .tabs a:hover {color: #fff; background: #ccc; }

.softWareFancyWrap.t3 .innerBox .setWidth840 {clear: both; padding-top: 30px}

.softWareFancyWrap.t3 .innerBox .unitT1.setWidth840 .rowT2.middleLine {padding-top: 0;}
.softWareFancyWrap.t3 .innerBox .unitT1.setWidth840 .rowT2 .col:nth-child(2) {margin-top: 10px !important; min-height: 200px; padding-right: 20px !important}
.softWareFancyWrap.t3 .innerBox .unitT1.setWidth840 .rowT2 .col:nth-child(2) h5 {font-size: 18px; margin: 10px;}
.softWareFancyWrap.t3 .innerBox .unitT1.setWidth840 .rowT2 .col:nth-child(2) ul {padding-left: 30px}
.softWareFancyWrap.t3 .innerBox .unitT1.setWidth840 .rowT2 .col:nth-child(2) ul li {margin-bottom: 5px; color: #555;}





/* 구성품 선택 */

.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a:before {content: ""; width: 54px; height: 54px; display: inline-block; background-size: 54px auto !important; position: absolute; top:5px; left: 50%; margin-left: -27px}

.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a.i1:before {background: url(../images/icon_unit01_g.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a.i2:before {background: url(../images/icon_unit02_g.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a.i3:before {background: url(../images/icon_unit03_g.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a.i4:before {background: url(../images/icon_unit04_g.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a.i5:before {background: url(../images/icon_unit05_g.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a.i6:before {background: url(../images/icon_unit06_g.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a.i7:before {background: url(../images/icon_unit07_g.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a.i8:before {background: url(../images/icon_unit08_g.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a.i9:before {background: url(../images/icon_unit09_g.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a.i10:before {background: url(../images/icon_unit10_g.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a.i11:before {background: url(../images/icon_unit11_g.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a.i12:before {background: url(../images/icon_unit12_g.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a.i13:before {background: url(../images/icon_unit13_g.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a.i14:before {background: url(../images/icon_unit14_g.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a.i15:before {background: url(../images/icon_unit15_g.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a.i16:before {background: url(../images/icon_unit16_g.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a.i17:before {background: url(../images/icon_unit17_g.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a.i18:before {background: url(../images/icon_unit18_g.png)}

.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a:hover.i1:before, .softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col li.on a.i1:before {background: url(../images/icon_unit01_w.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a:hover.i2:before, .softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col li.on a.i2:before  {background: url(../images/icon_unit02_w.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a:hover.i3:before, .softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col li.on a.i3:before  {background: url(../images/icon_unit03_w.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a:hover.i4:before, .softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col li.on a.i4:before  {background: url(../images/icon_unit04_w.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a:hover.i5:before, .softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col li.on a.i5:before  {background: url(../images/icon_unit05_w.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a:hover.i6:before, .softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col li.on a.i6:before  {background: url(../images/icon_unit06_w.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a:hover.i7:before, .softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col li.on a.i7:before  {background: url(../images/icon_unit07_w.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a:hover.i8:before, .softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col li.on a.i8:before  {background: url(../images/icon_unit08_w.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a:hover.i9:before, .softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col li.on a.i9:before  {background: url(../images/icon_unit09_w.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a:hover.i10:before, .softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col li.on a.i10:before  {background: url(../images/icon_unit10_w.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a:hover.i11:before, .softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col li.on a.i11:before  {background: url(../images/icon_unit11_w.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a:hover.i12:before, .softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col li.on a.i12:before  {background: url(../images/icon_unit12_w.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a:hover.i13:before, .softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col li.on a.i13:before  {background: url(../images/icon_unit13_w.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a:hover.i14:before, .softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col li.on a.i14:before  {background: url(../images/icon_unit14_w.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a:hover.i15:before, .softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col li.on a.i15:before  {background: url(../images/icon_unit15_w.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a:hover.i16:before, .softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col li.on a.i16:before  {background: url(../images/icon_unit16_w.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a:hover.i17:before, .softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col li.on a.i17:before  {background: url(../images/icon_unit17_w.png)}
.softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col a:hover.i18:before, .softWareFancyWrap.t3 .innerBox .unitT1 .rowT2 .col li.on a.i18:before  {background: url(../images/icon_unit18_w.png)}


.fancyModal h5 {text-align: center; padding-left: 55px; position: relative; display: inline-block; font-size: 32px; color: #00b2c4; font-weight: bold; margin: 0}
.fancyModal h5:before {content: ""; width: 55px; height: 45px; display: inline-block; background-size: auto 45px !important;  background-repeat: no-repeat !important; position: absolute; top: 0; left: 0}

.fancyModal h5.i1:before {background: url(../images/icon_unit01_g2.png)}
.fancyModal h5.i2:before {background: url(../images/icon_unit02_g2.png)}
.fancyModal h5.i3:before {background: url(../images/icon_unit03_g2.png)}
.fancyModal h5.i4:before {background: url(../images/icon_unit04_g2.png)}
.fancyModal h5.i5:before {background: url(../images/icon_unit05_g2.png)}
.fancyModal h5.i6:before {background: url(../images/icon_unit06_g2.png)}
.fancyModal h5.i7:before {background: url(../images/icon_unit07_g2.png)}
.fancyModal h5.i8:before {background: url(../images/icon_unit08_g2.png)}
.fancyModal h5.i9:before {background: url(../images/icon_unit09_g2.png)}
.fancyModal h5.i10:before {background: url(../images/icon_unit10_g2.png)}
.fancyModal h5.i11:before {background: url(../images/icon_unit11_g2.png)}
.fancyModal h5.i12:before {background: url(../images/icon_unit12_g2.png)}
.fancyModal h5.i13:before {background: url(../images/icon_unit13_g2.png)}
.fancyModal h5.i14:before {background: url(../images/icon_unit14_g2.png)}
.fancyModal h5.i15:before {background: url(../images/icon_unit15_g2.png)}
.fancyModal h5.i16:before {background: url(../images/icon_unit16_g2.png)}
.fancyModal h5.i17:before {background: url(../images/icon_unit17_g2.png)}




.softWareFancyWrap .bottom {text-align: center; padding: 15px 0; margin-top: 10px; background: #f1f3f3; border-radius: 15px;}
.softWareFancyWrap .bottom p {font-size: 1.4em; display: inline-block;}
.softWareFancyWrap .bottom .imgText img {width: 170px; height: auto; margin-left: 10px; position: relative; top: -4px}


.softWareFancyWrap.t2 .bottom {max-width: 830px; margin: 10px auto}


.softWareFancyWrap.t2 .bottom span {margin: 5px;}
.softWareFancyWrap.t2 .bottom span.textGreen {margin-top: 15px}

.fancyModal {max-width: 750px; padding: 40px; margin: 30px; box-sizing: border-box; border-radius: 10px; overflow: visible}
.fancyModal .left {width: 45%;}
.fancyModal .left img {width: 100%; }
.fancyModal .left.t2 {width: 55%; padding-left: 20px; box-sizing: border-box}

.fancyModal h2 {font-size: 2.3em; color: #00b2c4; line-height: 1.1; margin-top: 0;}
h2 span.subScript, .title span.subScript { color: #989898;  white-space: nowrap; vertical-align: middle}

span.subScript span.tA,
span.subScript span.tM,
span.subScript span.tC,
span.subScript span.tL,
span.subScript span.tI,
span.subScript span.tAn,
span.subScript span.tAm,
span.subScript span.tR {display: inline-block; font-size: 0 ; vertical-align: middle;}

/*
span.subScript.tA span.tA {display: inline-block}
span.subScript.tM span.tM {display: inline-block}
span.subScript.tC span.tC {display: inline-block;}
*/




span.subScript span:before {content: ""; display: inline-block; width: 20px; height: 20px; background-position: center center !important }

span.subScript span.tA:before {background: url(../images/icon_brauser_tA.png) no-repeat; background-size: 100% auto}
span.subScript span.tM:before {background: url(../images/icon_brauser_tM.png) no-repeat; background-size: 100% auto}
span.subScript span.tC:before {background: url(../images/icon_brauser_tC.png) no-repeat; background-size: 100% auto}
span.subScript span.tL:before {background: url(../images/icon_brauser_tL.png) no-repeat; background-size: auto 100%}
span.subScript span.tI:before {background: url(../images/icon_brauser_tI.png) no-repeat; background-size:auto 100%;}
span.subScript span.tAn:before {background: url(../images/icon_brauser_tAn.png) no-repeat; background-size:auto 100% }
span.subScript span.tAm:before {background: url(../images/icon_brauser_tAm.png) no-repeat; background-size: 100% auto}
span.subScript span.tR:before {background: url(../images/icon_brauser_tR.png) no-repeat; background-size: auto 100%}



span.subScript span.tAT2:before {background: url(../images/icon_brauser_tC.png) no-repeat; background-size: 100% auto}
span.subScript span.tH:before {background: url(../images/icon_brauser_tC.png) no-repeat; background-size: 100% auto}
span.subScript span.tAT3:before {background: url(../images/icon_brauser_tC.png) no-repeat; background-size: 100% auto}

.fancybox-close-small {position: absolute; width: 35px; height: 35px; background: url(../images/icon_cancel_black.png) no-repeat; top: -18px; right: -18px; background-size: 100% auto;}

.timeTableImgWrap {margin-top: 60px}

 .txtGreen.title.alert {font-size:18px;  position: relative ; padding-left: 40px;  }
 .txtGreen.title.alert:before {content: ""; width: 33px; height: 33px; display: block; position: absolute; background: url(../images/icon_infoBullet.png) no-repeat; left: 0; top: -5px;}
.roundBgWrap ol {padding-left: 50px;}
.roundBgWrap ol li {list-style: none; margin-bottom: 5px; position: relative; color: #555555}
.roundBgWrap ol li:before {font-weight: bold; color: #333; position: absolute; left: -15px}

.roundBgWrap ol li:nth-child(1):before {content: "1."}
.roundBgWrap ol li:nth-child(2):before {content: "2."}
.roundBgWrap ol li:nth-child(3):before {content: "3."}
.roundBgWrap ol li:nth-child(4):before {content: "4."}
.roundBgWrap ol li:nth-child(5):before {content: "5."}
.roundBgWrap ol li:nth-child(6):before {content: "6."}
.roundBgWrap ol li:nth-child(7):before {content: "7."}
.roundBgWrap ol li:nth-child(8):before {content: "8."}



/* 소프트웨어 선택하기 */

.roundListWrap h4.title {margin-top: 60px; margin-bottom: 30px}
.roundListWrap .thumb.roundList {padding: 15px; position: relative; box-sizing: border-box; background: #f3f5f5; border-radius: 10px; overflow: hidden ; position: relative; margin-bottom: 30px;}
.roundListWrap .thumb.roundList .left {display: inline-block; vertical-align: middle; float: none;}
.roundListWrap .thumb.roundList .left:first-child .imgWrap {width: 135px; height: 135px; display: inline-block; vertical-align: middle;}
.roundListWrap .thumb.roundList .left:nth-child(2) {/* position: absolute; padding-left: 145px; top: 10px; padding-right: 15px; */ width: 80%; box-sizing: border-box; padding-left: 20px; display: inline-block; vertical-align: middle;}
.roundListWrap .thumb.roundList .left h5 { font-size: 1em; margin:15px 10px 10px 0; }
.roundListWrap .thumb.roundList .left h5 span.subScript {margin-left: 15px;}

.roundListWrap .thumb.roundList .left p { font-size: 1em; color: #555; }

.roundListWrap .thumb.roundList .left p a.iconPlus {padding:5px 10px ; margin-top: 10px; display: inline-block; text-decoration: none; border-radius: 10000px; border: 1px solid #2AB4B6 }
.roundListWrap .thumb.roundList .left p a.iconPlus:hover {color: #fff; background: #2AB4B6}
.roundListWrap .thumb.roundList .left p a.iconPlus:before {content: ""; font-family: 'xeicon'; margin-right: 5px;}

a.icon25T2.roundRight {position: absolute; color: #00b2c4; text-decoration: none; bottom: 15px; right: 15px;}
a.icon25T2.roundRight:after {content: ""; display: inline-block; width: 25px; height: 25px; background: url(../images/roundArrow_r.png) no-repeat; background-size: 100% auto; vertical-align: middle; margin-left: 10px; }


.roundBgWrap {background: #f1f3f3; padding: 20px 50px 70px; border-radius: 10px; margin-top: 80px}
.roundBgWrap.t2 {padding: 20px 50px 20px}

.roundBgWrap .rowT2 .col .thumb {background: #fff; border-radius: 10px; min-height: 249px; box-sizing: border-box; padding: 10px; margin-top: 90px}
.roundBgWrap .rowT2 .col .thumb p span {display: block; margin-bottom: 10px; margin-top: 20px; }
.roundBgWrap .rowT2 .col .thumb:before {content:""; display: inline-block; width: 130px; height: 90px; background-repeat: no-repeat; background-size: 100% auto; background-position: center center; position: relative; left: 50%; margin-left: -65px; margin-top: -85px;}
.roundBgWrap .rowT2 .col:nth-child(1) .thumb:before {background-image:url(../images/icon_class01.png)}
.roundBgWrap .rowT2 .col:nth-child(2) .thumb:before {background-image:url(../images/icon_class02.png)}
.roundBgWrap .rowT2 .col:nth-child(3) .thumb:before {background-image:url(../images/icon_class03.png)}


.bdGreen.label {padding: 2px 8px 1px; box-sizing: border-box; border-radius: 100px; display: block;  border:1px solid #2AB4B6; color: #2AB4B6; width: 50px; text-align: center; margin: 20px auto 10px}





.subScript.alignCenter {display: block}


.qnaWriteForm {max-width: 830px; margin: 0 auto; overflow: hidden; margin-top: 40px}
.qnaWriteForm .left {position: relative; width: 46%; height: 60px;}
.qnaWriteForm .left:nth-child(2n+1) {margin-right: 50px; clear: both; margin-bottom: 10px; }
.qnaWriteForm .left.t2 {margin-right: 0; min-height: 200px; width: 100%;}
.qnaWriteForm .left.t3 {width: 100%; text-align: center;  margin-top: 10px}
.qnaWriteForm .left.t3 label {padding-top: 0; width: auto; }
.qnaWriteForm .left.t3 a.subScript {padding-left: 10px; margin-top: 2px; display: inline-block; }
.qnaWriteForm .left label {width: 90px; display: inline-block; vertical-align: top; font-size: 1.2em; padding-top: 20px; position: relative; z-index: 5;}
.qnaWriteForm .left input[type=text] {height: 60px; box-sizing: border-box; padding: 20px; border: 2px solid #d5d5d5; width: 100%; }
.qnaWriteForm .left textarea {width: 735px; display: inline-block; border: 2px solid #d5d5d5; box-sizing: border-box; margin-left: 2px;}
.qnaWriteForm .left .inputTxtWrap {position: absolute; top: 0; padding-left: 90px; width: 80%;}



/* 소프트웨어 디테일 */

.firstSection h4 {margin-top: 15%}
.firstSection ul {padding-left: 10px;}
.firstSection li, .firstSection p {list-style: none; color: #666666; position: relative}
.firstSection li:before {content: ""; position: absolute; display: inline-block; width: 2px; height: 2px; background: #999; left: -10px; top: 7px;}

.downLoadWrap {border: 2px solid #ccc; padding: 0px 90px 20px; margin-top: 40px; clear: both}
.downLoadWrap.t2 {padding: 20px 90px 0px; }
.downLoadWrap h4.title {display: block; padding: 10px 0; margin: 0 auto; width: 340px;  text-align: center; position: relative; top: -25px ; background: #fff;  }
.downLoadWrap .col {margin-bottom: 20px !important;}
.downLoadWrap a, .grayBox a {padding-left: 12px; color: #666; text-decoration: none; display: inline-block; position: relative; font-size: 1.1em; }
.downLoadWrap p {color: #666;font-weight: 300;}
.downLoadWrap a:before, .grayBox a:before {content: ""; font-family: "xeicon"; top: 0px; left: 0; margin-right: 5px; color: #2AB4B6 !important; text-decoration: none !important; position: absolute}
.downLoadWrap a:hover, .grayBox a:hover { color:#2AB4B6 }

.downLoadWrap a.t2 {text-indent: 80px}

.labelWrapSection {margin: 40px 0;}
.labelWrapSection a {text-decoration: none; color: #000;}
.labelWrapSection a:hover {color: #2AB4B6}
.labelWrapSection .rowT2 .col03 h5 {font-size: 14px; margin: 10px;}
.labelWrapSection .rowT2 .col03:nth-child(1) .imgWrap {position: relative; background: #000;  margin: 0 auto; margin-bottom: 20px; width: 100%; max-width: 220px}
.labelWrapSection .rowT2 .col03:nth-child(1) .imgWrap img {opacity: 0.3;}
.movieIcon a:before {display: block; content: ""; font-family: "xeicon"; font-size: 42px; padding: 20px; color: #fff; text-align: center;  position: absolute; z-index: 10; width: 100%; text-align: center; box-sizing: border-box; top: 50%; margin-top: -48px;}
.labelWrapSection .rowT2 .col03:nth-child(1) .movieIcon a:hover:before  {color: #2AB4B6}


.labelWrapSection .rowT2 .col03:nth-child(2) a:before, .labelWrapSection .rowT2 .col03:nth-child(3) a:before {content: ""; font-family: "xeicon"; font-size: 18px; color: #2AB4B6; margin-right: 5px } 


.green.label {padding: 6px 10px 7px; box-sizing: border-box; border-radius: 100px; display: inline-block;  background:  #2AB4B6; color: #fff;  text-align: center; margin: 20px auto 10px; font-size: 1.2em; min-width: 200px; box-sizing: border-box; white-space: nowrap;}

.labelWrapSection .rowT2 .col ul {padding-left: 60px}
.labelWrapSection .rowT2 .col li {list-style:none; margin-bottom: 10px;}
.labelWrapSection .rowT2 .col li  {white-space: nowrap !important}
.labelWrapSection .rowT2 .col li .txtGreen {margin-right: 10px;} 

.thumbBox {border: 1px solid #d7d7d7; padding: 10px; display: block; margin-top: 40px;}

.thumbBox h4.title {display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.3em; margin-top: 20px;}
.thumbBox p {display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;     -webkit-box-orient: vertical; word-wrap: break-word; position: relative; font-size: 0.9em; color: #555555}

.thumbBox .countWrap {text-align: right; margin-top: 20px; font-size: 0.9em; }
.thumbBox .countWrap span {margin-right: 10px;}
.thumbBox .countWrap .loveNum:before {content: ""; font-family: "xeicon"; margin-right: 5px; color: #2AB4B6}
.thumbBox .countWrap .viewNum:before {content: ""; font-family: "xeicon"; margin-right: 5px; color: #2AB4B6}

.tabContentWrap.t2 {overflow: hidden; background: #8a8a8a; position: relative; padding-right: 300px; box-sizing: border-box; margin-top: 40px;}
.tabContentWrap.t2 .linkWrap { width: 300px; height: 100%; position: absolute; right: 0; overflow-y: scroll; overflow-x: hidden; top:0}
.tabContentWrap.t2 .movieWrap {width: 840px;  position: relative;  }
.tabContentWrap.t2 .movieWrap div  {width: 100%; padding: 56.6% 0 6px;}
.tabContentWrap.t2 .tabdetail iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.tabContentWrap.t2 .linkWrap .tabs {padding: 0; margin: 0; border: 0; display: block; }
.tabContentWrap.t2 .linkWrap .tabs li {width: 100%; font-size: 1.2em; display: block; border: 0 ; border-bottom: 1px solid #989898}

.tabContentWrap.t2 .linkWrap .tabs a {padding: 20px; background: none; line-height: 1; font-size: 1em; text-align: left; text-decoration: none; color: #e1e1e1; font-weight: 300; display: block; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; max-width: 300px;}
.tabContentWrap.t2 .linkWrap .tabs li a:hover {background: #444; color: #fff;}
.tabContentWrap.t2 .linkWrap .tabs li.on a  {color: #fff; background: #2AB4B6;}



.tabContentWrap.t1 {overflow: hidden; background: #8a8a8a; position: relative;  box-sizing: border-box; max-width: 840px; width: 100%; margin: 0 auto;  margin-top: 40px;}
.tabContentWrap.t1 .linkWrap { overflow: hidden;  width: 100%;}
.tabContentWrap.t1 .movieWrap { }
.tabContentWrap.t1 .movieWrap div  {width: 100%; padding: 56.6% 0 6px; position: relative}
.tabContentWrap.t1 .tabdetail iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.tabContentWrap.t1 .linkWrap .tabs {padding: 0; margin: 0; border: 0; display: block; }
.tabContentWrap.t1 .linkWrap .tabs li {width: 50%; font-size: 1.2em; display: block; border: 0 ; border-bottom: 1px solid #989898; float: left;}

.tabContentWrap.t1 .linkWrap .tabs a {padding: 20px; background: none; line-height: 1; font-size: 1em; text-align: left; text-decoration: none; color: #e1e1e1; font-weight: 300; display: block; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; }
.tabContentWrap.t1 .linkWrap .tabs li a:hover {background: #444; color: #fff;}

.tabContentWrap.t1 .linkWrap .tabs li.on a  {color: #fff; background: #2AB4B6;}



.grayBox {background: #e1e1e1; padding: 40px; margin-top: 40px}
.grayBox .txtGreen {padding-top: 10px; display:block}









.rowT2.middleLine {padding-top: 30px}
.rowT2.middleLine .col {border-left: 1px solid #ccc;}
.rowT2.middleLine .col:first-child {border: 0; }



/*문서페이지 CSS*/
.section_wrap {margin: 0; padding: 0;}
.section_wrap li {list-style: none}
.section_wrap li.section {position: relative;}
.section_wrap li.section .sectionLink {font-size: 0 !important;  position: relative; top: -124px;}
.section_wrap li.section img {width: 100%;}
.section_wrap li.section .pc img {display: block; margin-top: -20px;}
.section_wrap li.section .mobile img {display: none; margin-top: -20px;}
.section_wrap li.section a.section_link { display: block; position: absolute; bottom: 10%; left: 43%; right:43%;   height: 80px; text-align: center; }

/* product_01_section*/
.product_01_section li.section a {font-size: 0 !important;}
.product_01_section li.section a.sl_01 {bottom: 7%; margin-left: -21%; width: 12%;}
.product_01_section li.section a.sl_02 {bottom: 7%; margin-left: -8%; width: 12%;}
.product_01_section li.section a.sl_03 {bottom: 7%; margin-left: 5%; width: 12%;}
.product_01_section li.section a.sl_04 {bottom: 7%; margin-left: 19%; width: 16%;}
.product_01_section li.section a.sl_05 { bottom:7%;}
.product_01_section li.section a.sl_06 { bottom:10%;}


/* product_02_section*/
.product_02_section li.section a {font-size: 0 !important; }
.product_02_section li.section a.sl_01 {bottom: 5%; margin-left: -7%; width: 12%;}
.product_02_section li.section a.sl_02 {bottom: 5%; margin-left: 7%; width: 12%;}
.product_02_section li.section a.sl_03 {bottom:7%;}
.product_02_section li.section a.sl_04 {bottom:7%;}
.product_02_section li.section a.sl_05 { bottom:7%;}








/* tabs */
.tabs {padding-left: 0;}
.tabs li a  {text-decoration: none}
.tabs li.on a {background: #2AB4B6; font-weight: bold; color: #fff;}

.tabs.t3 li {width: 25%}

.tabs.btWrap {border: 0; margin:5px -5px;}
.tabs.btWrap li {border: 0; display: block; width: 25%; padding: 5px; float: left; box-sizing: border-box}
.tabs.btWrap li a { line-height: 1.2}
.tabs.btWrap li.on a {color: #fff !important;} 


.ruleContentWrap h5.title {display: block; padding: 20px; border-top: 2px solid #555; border-bottom: 1px solid #ccc; font-size: 1.4em; font-weight: normal;}
.ruleContentWrap h5.title .txtGreen {margin-right: 5px; font-weight: bold}
.ruleContentWrap .bdGray {padding: 15px; border: 1px solid #ccc;  margin: 10px 0; margin-left: -15px;}

.ruleContentWrap ol  {padding-right: 30px}
.ruleContentWrap ol li {margin: 3px 0; color: #666}
.ruleContentWrap ol li ol  {padding-left: 0px}

.ruleContentWrap .bdGray .title.txtGreen {margin-bottom: 15px; display: inline-block;}
.ruleContentWrap .bdGray ol {padding-left: 14px}
.ruleContentWrap .bdGray ol li {color: #444;}

.ruleContentWrap ol li ol li {list-style: none;}


.ruleContentWrap ol li ol li:nth-child(1):before {content: "1) "; font-weight: bold; color: #000}
.ruleContentWrap ol li ol li:nth-child(2):before {content: "2) "; font-weight: bold; color: #000}
.ruleContentWrap ol li ol li:nth-child(3):before {content: "3) "; font-weight: bold; color: #000}
.ruleContentWrap ol li ol li:nth-child(4):before {content: "4) "; font-weight: bold; color: #000}
.ruleContentWrap ol li ol li:nth-child(5):before {content: "5) "; font-weight: bold; color: #000}
.ruleContentWrap ol li ol li:nth-child(6):before {content: "6) "; font-weight: bold; color: #000}
.ruleContentWrap ol li ol li:nth-child(7):before {content: "7) "; font-weight: bold; color: #000}
.ruleContentWrap ol li ol li:nth-child(8):before {content: "8) "; font-weight: bold; color: #000}
.ruleContentWrap ol li ol li:nth-child(9):before {content: "9) "; font-weight: bold; color: #000}
.ruleContentWrap ol li ol li:nth-child(10):before {content: "10) "; font-weight: bold; color: #000}

span.alert {color: #e61874; margin: 15px 0; display: block;}
span.alert:before {content: "※"; margin-left: -10px}

.imgWrap.bdGray {padding: 10px; box-sizing: border-box; margin-top: 20px; background: #f3f5f5}
.imgWrap.bdGray img {border: 1px solid #ccc}
.imgWrap.bdGray p {display: block; padding-top: 10px; font-size: 14px;}
.imgWrap.bdGray p:before {content: ""; font-family: 'xeicon'; margin-right: 5px; font-size: 16px} 

.addressInfo {max-width: 840px; margin: 0 auto; padding: 20px;  border-radius: 10px}
.addressInfo h5 {  font-size: 16px; margin-bottom: 0;  }
.addressInfo h5 i { vertical-align:-1px !important; }
.addressInfo p {padding-top: 10px;}
.addressInfo .divider {margin: 20px 0}

.kitMovieWrap h5 {font-size: 16px; margin-bottom: 0px}
.kitMovieWrap p {font-size: 12px;}
.kitMovieWrap a {margin-top: 20px}

.downArrowSection {margin-top: 40px}
.downArrowSection .rowT2 .col:nth-child(1) img, .downArrowSection .rowT2 .col:nth-child(3) img {display: none}



.lineStep .rowT2 {}
.lineStep img {max-width: 220px; width: 100% !important}
.lineStep .col h5 {font-size: 20px; color: #2AB4B6; margin: 20px 0}
.lineStep .col .smallText {font-size: 13px; vertical-align: middle}





/* book select */
.patternAnimal {background: url(../images/elecLinePattern.png) center center; padding: 40px 0 40px;; }
.patternAnimal .content .imgWrap { margin-top: 60px; width: 400px;}
.patternAnimal .content p, .patternAnimal .content h4 {margin-left: 15px; color: #fff;}
.patternAnimal .content h4 {font-size: 22px; margin-top: 100px;}
.patternAnimal .content p {font-size: 14px;}
.patternAnimal .col03.x2 img {width: 90%}


.bookSelect {padding: 50px 0;}
.bookSelect .brownLabel {font-size: 0; width: 400px; height: 68px;  background:url(../images/brwonLabelTitel.png); margin: 0 auto; background-size: cover; margin-bottom: 30px !important; }
.bookSelect .smallTitle {margin-bottom: 30px !important; color: #444}
.bookSelect .rowT2 {margin-bottom: 20px;}
.bookSelect .col a {text-decoration: none; color: #000; padding-top: 10px; padding-bottom: 10px; display: block; top: 0;  background: #fff; border-radius: 10px;}
.bookSelect .col a  img {position: relative; top: 0}
.bookSelect .col a:hover {background: #eee; transition: ease all .3s}
.bookSelect .col a:hover img {top: -5px; transition: ease all .3s}
.bookSelect .col a h4 {margin: 0; padding: 0 10px; }
.bookSelect .col a p {margin-top: 10px;  padding: 0 10px; color: #444 !important; line-height: 1.4}




@media all and (max-width: 1280px) {
	.section_wrap li.section .pc img {display: block;}
	.section_wrap li.section .mobile img {display: none;}

	.tabContentWrap.t2 .movieWrap {width: 840px;}
	.tabContentWrap.t2 .linkWrap {width: 240px}
	.tabContentWrap.t2 .linkWrap .tabs li {max-width: 240px;}	
	
	
	.patternAnimal .content h4  {margin-top: 70px;}
	
	
}

@media all and (max-width: 1080px) {
	.tabContentWrap.t2 .movieWrap {width: 740px;}
	.tabContentWrap.t2 .linkWrap {width: 220px}
	.tabContentWrap.t2 .linkWrap .tabs li {max-width: 220px;}
	
	span.txtGreen.topSubTitle {margin-top: 0px }

	.patternAnimal .content h4  {margin-top: 20px;}
	
		
}


@media all and (max-width: 980px) {

.steprowT2 .col p {padding-bottom: 25px}
/*  활용가이드 1 */
.softWareFancyWrap .innerBox .right, .softWareFancyWrap .innerBox .left, .softWareFancyWrap.t2 .innerBox .right, .softWareFancyWrap.t2 .innerBox .left, .softWareFancyWrap.t3 .innerBox .right, .softWareFancyWrap.t3 .innerBox .left {width: 100%; padding: 0; border: 0}
.softWareFancyWrap .innerBox .right .rowT2 .col {width: 25%;}	
.softWareFancyWrap .innerBox .left .rowT2 .col {width: 25%;}
.softWareFancyWrap .innerBox .right .rowT2.t6 .col {width: 20%;}	
.softWareFancyWrap .innerBox .unitT1 {margin-top: 20px;}
	
.roundListWrap .thumb.roundList .left:nth-child(2) { width: 65%;}	
.roundListWrap .thumb.roundList .left:first-child .imgWrap {width: 165px; height: 165px;}
a.icon25T2.roundRight {position: relative; float: right; margin-top: 10px}
	
	
.qnaWriteForm .left {width: 100%; margin-right: 0 !important}	
	
.green.label  {min-width: auto; width: 100%}	
.labelWrapSection .rowT2 .col ul {padding: 0}	
	
.downLoadWrap {padding: 0 10px 20px}	
.downLoadWrap.t2 {padding: 20px 10px 0px; }

.downLoadWrap a.t2 {text-indent: 40px;}	


.tabContentWrap.t2 {padding-right: 0 !important}
.tabContentWrap.t2 .movieWrap {width: 100%;;}
.tabContentWrap.t2 .linkWrap {width: 100%; position: relative; }
.tabContentWrap.t2 .linkWrap .tabs li {max-width: 10000px; width: 50%; float: left}	
.tabContentWrap.t2 .linkWrap .tabs li:nth-child(2n) {border-left: 1px solid #989898; box-sizing: border-box}
.tabContentWrap.t2 .linkWrap .tabs a {max-width: 10000px;}	

.firstSection h4 {margin-top: 0}

span.txtGreen.topSubTitle { margin-top: 0px }
.roundBgWrap.t2 {padding: 20px 0;}
.roundBgWrap.t2 .rowT2 .col:nth-child(2) {padding-top: 80px !important}
		
.kitMovieWrap .rowT2 .col04 {width: 50% !important; margin-top: 20px !important}		
.kitMovieWrap .rowT2 .col04:nth-child(2n+1) {border-left: 0 !important; clear: both;  }



.softWareFancyWrap.t2 .innerBox .left .rowT2 .col05:nth-child(1),
.softWareFancyWrap.t2 .innerBox .left .rowT2 .col05:nth-child(5) {display: none}
.softWareFancyWrap.t2 .innerBox .right .rowT2 .col05:nth-child(5n+1) {clear:none}
.softWareFancyWrap.t2 .innerBox .right .rowT2 .col05:nth-child(4n+1) {clear:both}



.customCenter h5:after { left: 65%;}



	.section_wrap li.section .sectionLink {font-size: 0 !important;  position: relative; top: -95px;}

		
	.patternAnimal .content .imgWrap {margin-top: 0px;}	
	.patternAnimal .content h4 {font-size: 18px;}		
	.patternAnimal .content p {font-size: 14px;}		
	.patternAnimal .col03.x2 img {margin-top: 100px;}	
}



@media all and (max-width: 740px) {
/* common	 */
.divider.gear {position: relative; margin: 50px 0 !important} 	
.tabletView {display: block;}
	
	
/*  활용가이드 1 */

.steprowT2 {padding: 30px 30px 0; margin-top: 0 !important}
.steprowT2 .col p {padding-bottom: 25px}
.steprowT2 h4.title.txtGreen {margin-top: 15px}

.fancyModal .left, .fancyModal .left.t2 {width: 100%; padding: 0;}

.fancyModal h2 {font-size: 1.6; margin-top: 20px;}
h2 span.subScript {display: block; margin-top: 10px;}




.roundBgWrap {background: #f1f3f3; padding: 20px 10px 70px; border-radius: 10px; margin-top: 80px}
.downLoadWrap.t2 {padding: 20px 10px 20px; }
.downLoadWrap a.t2 {text-indent: 0px;}	

.grayBox {background: #e1e1e1; padding: 20px; margin-top: 40px}
.grayBox .txtGreen {padding-top: 0px; display:block}

a.bt.roundBt.big {border: 2px solid #555; font-size: 0.8em; padding: 9px 25px 8px; box-sizing: border-box; border-radius: 1000px;
    text-decoration: none; color: #2AB4B6; margin-right: 10px; display: inline-block; margin-bottom: 15px; width: auto;
    height: auto;}

	.section_wrap li.section .pc img {display: none;}
	.section_wrap li.section .mobile img {display: block;}
	.section_wrap li.section a.section_link {left: 30%; right:30%;}
	
	.downLoadWrap p {padding-left: 10px; padding-bottom: 20px }
	
/*	product_01_section*/
	.product_01_section li.section a.sl_01 {bottom: 14%; margin-left: -22%; width: 40%; height: 5%}
	.product_01_section li.section a.sl_02 {bottom: 14%; margin-left: 22%; width: 40%; height: 5%}
	.product_01_section li.section a.sl_03 {bottom: 8%; margin-left: -22%; width: 40%; height: 5%}
	.product_01_section li.section a.sl_04 {bottom: 8%; margin-left: 22%; width: 40%; height: 5%}
	.product_01_section li.section a.sl_05 {bottom: 12%;}
	
	
/* product_02_section*/
	.product_02_section li.section a.sl_01 {bottom: 5%; margin-left: -7%; width: 25%; height: 5%}
	.product_02_section li.section a.sl_02 {bottom: 5%; margin-left: 21%; width: 25%; height: 5%}
	.product_02_section li.section a.sl_03 {bottom:7%;}
	.product_02_section li.section a.sl_04 {bottom:7%;}
	.product_02_section li.section a.sl_05 { bottom:7%;}
	
	
	
	
	


.downArrowSection .rowT2 .col:nth-child(1) img, .downArrowSection .rowT2 .col:nth-child(3) img {display: block; margin-bottom: 20px}
.downArrowSection .rowT2 .col:nth-child(2) img {padding-top: 80%; }

.customCenter h5:after { width: 80%; left: 20%}



	.patternAnimal .rowT2 .col03 {width: 100% !important; }
	.patternAnimal .content {text-align: center}	
	.patternAnimal .content .imgWrap {width: auto;}
	.patternAnimal .content .imgWrap img {max-width: 400px;}
	.patternAnimal .content h4 {font-size: 32px;}
	.patternAnimal .content h4, .patternAnimal .content p {margin-left: 0; max-width: 540px; margin: 10px auto;}
	.patternAnimal .col03.x2 img {margin-top: 30px;}



	.bookSelect .brownLabel {width: 300px; height: 51px;}


}
@media all and (max-width: 640px) {
.roundListWrap .thumb.roundList .left:nth-child(2) { width: 55%;}	
.firstSection .rowT2 .col02.col {width: 100% !important}
.firstSection h4 {margin-top: 20px;}

.softWareFancyWrap .innerBox .right .rowT2.t6 .col {width: 33%;}
.roundBgWrap.t2 .rowT2 .col {width: 100% !important}
.roundBgWrap.t2 .rowT2 .col:nth-child(2) {padding-top: 20px !important}



}




@media all and (max-width: 479px) {

.roundListWrap .thumb.roundList .left:nth-child(2) { width: 100%; padding-left: 0}	
.roundListWrap .thumb.roundList .left h5 span.subScript {display: block; margin-left: 0}
	
/* 	활용가이드  */
	
.timeTableImgWrap {margin-top: 40px}
.softWareFancyWrap .innerBox .right .rowT2 .col {width: 50%;}	
a.icon25T2.roundRight {float: left; padding-left: 15px; margin-top: 30px; }
	
.labelWrapSection .rowT2 .col li {white-space: normal; text-align: center}	
.downLoadWrap .rowT2 .col {margin-bottom: 10px !important;}	
.downLoadWrap .rowT2 .col01Tablet {margin-bottom: 0 !important}


.rowT2.middleLine .col {border-left: 0px solid #ccc;}


a.bt.roundBt.big {border: 1px solid #555; font-size: 1.1em; padding: 14px 25px 8px;  margin-right: 0; margin-bottom: 15px; width: 160px; height: 50px; text-align: center; margin-top: 20px }

.ruleContentWrap ol {padding: 0 20px}

	span.txtGreen.topSubTitle {margin-top: 20px }

.softWareFancyWrap .innerBox .right .rowT2.t6 .col {width: 50%;}
.kitMovieWrap .rowT2 .col04 {width: 100% !important; margin-top: 20px !important}		

.downArrowSection .rowT2 {position: relative; padding-bottom:  150px;}
.downArrowSection .rowT2 .col {width: 40% !important; padding: 30px;}
.downArrowSection .rowT2 .col:nth-child(3) {float: right} 
.downArrowSection .rowT2 .col:nth-child(2) {position: absolute; left: 50%; width: 200px !important; margin-left: -100px !important; bottom: 10px;}


.softWareFancyWrap.t2 .innerBox .right .rowT2 .col05:nth-child(2n+1) {clear:both}


.customCenter {text-align: center}
.customCenter h5 { padding-top: 0; font-size: 16px }
.customCenter h5:after {display: none}
.customCenter h5,
.customCenter h3,
.customCenter p,
.customCenter a {float: none; text-align: center}
.customCenter p {font-size: 16px;}
.customCenter a {width: 100%; margin-top: 10px; box-sizing: border-box}

}