@charset "utf-8"; /*오프라인교육 페이지 css*/

#main h3{width:100%; height:149px; padding-top:66px; color:#ffffff; font-size:30px; font-weight:300; text-align:center;}
#main strong{font-weight:bold;}

.tablet, .pc{display:none;}
#main #intro{background:url(../img/offline/intro_bg_m.jpg) no-repeat center; background-size:100% 371px;}
#intro .intro-box{padding:30px 20px 16px;}
#intro .intro-box p{margin-bottom:20px; color:#1f2558; font-size:30px; font-weight:bold; line-height:40px; text-align:center;}
#intro .intro-box .intro-txt{padding-bottom:20px; font-size:15px; line-height:24px; letter-spacing:-1px; text-align:center;}

.cont-in{padding:0 20px; margin-bottom:52px;}
.cont-01{width:100%; padding:35px 0 63px;}
.cont-01 h4{margin-bottom:32px; font-size:20px; font-weight:300; text-align:center; letter-spacing:-1px;}
.cont-01 .hrd-bpo-process{width:320px; height:815px; margin:0 auto; letter-spacing:-1px;}
.cont-01 .hrd-bpo-process>div{float:left; width:136px; padding:0 10px; margin-bottom:50px;}
.cont-01 .hrd-bpo-process>div.hrd-bpo-process-03, .cont-01 .hrd-bpo-process>div.hrd-bpo-process-05{clear:both;}
.cont-01 img{width:125px; height:auto; margin-bottom:-4px;}
.cont-01 .hrd-bpo-process>div.arrow{width:10px; padding-top:95px;}
.cont-01 .arrow img{width:10px; height:auto;}
.cont-01 h5{width:125px; height:51px; margin-bottom:12px; border-radius:12px; color:#ffffff; font-size:14px; line-height:51px; text-align:center;}
.cont-01 li{list-style:url(../img/offline/li_circle_m.png) no-repeat; list-style-position:inside; width:140px; font-size:12px; line-height:25px;}
.cont-01 .sub li{list-style:none; list-style-position:inside; padding-left:12px; color:#535353; font-size:10px; line-height:16px;}
.cont-01 .hrd-bpo-process-01 h5{background:#afb2cc;}
.cont-01 .hrd-bpo-process-02 h5{background:#7b7fa2;}
.cont-01 .hrd-bpo-process-03 h5{padding-top:8px; background:#585d8b; line-height:17px;}
.cont-01 .hrd-bpo-process-04 h5{background:#3e4475;}
.cont-01 .hrd-bpo-process-05 h5{background:#1f2558;}

.cont-02{clear:both; position:relative; width:100%; margin-bottom:50px;}
.cont-02 h4{margin-bottom:16px; font-size:20px; font-weight:300; text-align:center;}
.cont-02 .program-table{position:relative;}
.cont-02 .program-table .program-table-bg{position:absolute; top:0; left:0; z-index:250; width:100%; height:100%; background:rgba(0,0,0,0.2);}
.cont-02 .program-table .btn-img-view{position:absolute; bottom:6px; right:8px; z-index:300; width:45px; height:45px;}
.cont-02 .program-table .program-table-img{width:100%; text-align:center;}
.cont-02 .btn-cont{width:280px; height:50px; text-align:center; margin:20px auto 0;}
.cont-02 .btn-cont a{display:inline-block; width:100%; height:100%; border-radius:50px; background:#1f2558; color:#ffffff; font-size:20px; font-weight:bold; line-height:50px;}
.cont-02 .btn-cont a span{color:#00f37f;}

.cont-03{overflow:hidden; position:relative; width:100%; height:160px; background:#9898bb;}
.cont-03 h4{width:320px; padding:27px 14px; color:#ffffff; font-size:20px; font-weight:300; line-height:27px; letter-spacing:-1px;}
.cont-03 p{position:absolute; bottom:23px; right:14px; z-index:100; width:190px; height:42px; text-align:center;}
.cont-03 p a{display:inline-block; width:190px; height:42px; padding-top:8px; border:2px solid #ffffff; border-radius:25px; color:#ffffff; font-size:14px;}
.cont-03 p img{display:inline-block; width:10px; height:auto; padding-top:4px;}
.cont-03 .cont-03-bg{position:absolute; bottom:-10px; left:-15px; width:150px; height:auto;}

@media screen and (max-width:340px){
    #main h3{padding-top:66px; font-size:25px;}
    .cont-in{padding:0;}
}

@media screen and (max-width:350px){
    #main h3{padding-top:76px;}
	.cont-03 h4{width:100%; font-size:16px; line-height:22px;}
}

@media screen and (min-width:510px){
	.cont-03 h4{width:450px; padding:27px 0 0 150px;}
	.cont-03 p{position:inherit; bottom:0; right:0; padding:10px 0 0 150px;}
	.cont-03 .cont-03-bg{bottom:-15px; left:-25px; width:250px;}
}

@media screen and (min-width:550px){
	.cont-03 h4{width:480px; padding:27px 0 0 180px;}
	.cont-03 p{padding:10px 0 0 180px;}
}

@media screen and (min-width:600px){
	.cont-03 h4{width:530px; padding:27px 0 0 240px;}
	.cont-03 p{padding:10px 0 0 240px;}
}

@media screen and (min-width:642px){
    #main h3{padding-top:56px;}
}

@media screen and (min-width:768px){
    .mobile{display:none;}
    .tablet{display:block;}
	#main #intro{background:url(../img/offline/intro_bg.jpg) no-repeat center; background-size:cover;}
    #main h3{padding-top:79px;}
    #intro .intro-box{padding-top:50px;}
    #intro .intro-box p{margin-bottom:10px;}
    #intro .intro-box .intro-txt{padding-bottom:10px;}
    
	.cont-in{padding-top:28px; margin-bottom:58px;}
    .cont-01{padding:0; margin-bottom:74px;}
    .cont-01 .hrd-bpo-process{width:728px; height:265px;}
    .cont-01 .hrd-bpo-process>div{padding:0 6px;}
    .cont-01 .hrd-bpo-process>div.hrd-bpo-process-03, .cont-01 .hrd-bpo-process>div.hrd-bpo-process-05{clear:none;}
    .cont-01 .arrow img{margin-left:-4px;}
    
	.cont-02 h4{margin-bottom:25px;}
    .cont-02 img{width:728px; padding:0 20px; margin:0 auto;}
	.cont-02 .program-table .program-table-bg, .cont-02 .program-table .btn-img-view{display:none;}
	
	.cont-03{padding-left:45%;}
	.cont-03 h4{width:300px; padding:24px 0 16px;}
	.cont-03 p{padding:0;}
	.cont-03 .cont-03-bg{left:36px; width:250px;}
}

@media screen and (min-width:900px){
	.cont-03{padding-left:35%;}
	.cont-03 h4{float:left; width:300px; padding:52px 0 16px;}
	.cont-03 p{float:left; width:250px; padding-top:58px;}
}

@media screen and (min-width:1280px){
    #main h3{height:266px; padding-top:87px; font-size:55px;}
    #main #intro{width:100%; padding:55px 0 30px 0; margin:0 auto;}
    #intro .intro-box p{padding-bottom:30px; font-size:50px; line-height:50px;}
    #intro .intro-box .intro-txt{font-size:24px; line-height:38px;}
	
	#main .cont-in{width:1280px; padding:0; margin:0 auto;}
    .cont-01{margin-bottom:148px;}
    .cont-01 .hrd-bpo-process{width:1280px;}
	.cont-01 h4{margin:80px 0 57px; margin-bottom:57px; font-size:36px; line-height:45px;}
    .cont-01 .hrd-bpo-process>div{width:220px; padding:0 45px 0 0; margin-bottom:90px;}
    .cont-01 h5{width:220px; height:90px; margin-bottom:27px; font-size:24px; line-height:90px;}
    .cont-01 .hrd-bpo-process-03 h5{padding-top:15px; line-height:30px;}
    .cont-01 img{width:220px; height:143px; margin-bottom:-9px; vertical-align:bottom;}
    .cont-01 li{list-style:url(../img/offline/li_circle.png) no-repeat; list-style-position:inside; width:230px; font-size:20px; line-height:48px;}
    .cont-01 .sub li{font-size:16px; line-height:30px;}
    .cont-01 .hrd-bpo-process>div.arrow{width:18px; padding-top:164px;}
    .cont-01 .hrd-bpo-process>div.arrow img{width:18px; margin-left:13px;}
    
	.cont-02{margin-bottom:114px;}
	.cont-02 .tablet{display:none;}
	.cont-02 .pc{display:block;}
	.cont-02 h4{font-size:36px; line-height:45px;}
	.cont-02 img{width:1022px; padding:0;}
	.cont-02 .btn-cont{width:440px; height:76px; margin:40px auto 0;}
	.cont-02 .btn-cont a{border-radius:50px; font-size:30px; line-height:76px;}
	
	.cont-03{height:180px; padding-left:417px; margin-bottom:109px;}
	.cont-03 h4{width:450px; padding-top:48px; font-size:30px; line-height:45px;}
	.cont-03 p{width:300px; height:66px; padding:63px 0 0 49px;}
	.cont-03 p a{width:300px; height:66px; padding-top:19px; border-radius:40px; font-size:22px;}
	.cont-03 p img{width:15px; padding-top:0;}
	.cont-03 .cont-03-bg{bottom:-20px; left:70px; width:334px;}
}