@charset "UTF-8";
/* CSS Document */
@font-face {
    font-family: 'nanum-square-eb';
    src: url('../fonts/NanumSquareEB.eot');
    src: url('../fonts/NanumSquareEB.eot?#iefix') format('embedded-opentype'),
         url('../fonts/NanumSquareEB.woff2') format('woff2'),
         url('../fonts/NanumSquareEB.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* button */
.btn_area .btn_join_superman {display:block;position:relative;max-width:350px;margin-top:5px;padding:10px 0;line-height:120%;font-size:24px;font-weight: bold;color: #fff;text-align: center;background:#0758a9}
.btn_area .btn_join_superman:hover, .btn_area .btn_join_superman:active {background:#e30c12}
#superman_wrap .btn_area .info {display:block;width: 100%;max-width:285px;font-size:15px;color:#222}
#superman_wrap .btn_area .icon_superman {display: block;position: absolute;top: -34px;right:-18px;width:60px;height:50px;background:url(../img/superman/btn_icon_superman.png) no-repeat;}
#superman_wrap .btn_area {font-family: 'nanum-square-b','malgun gothic','Apple SD Gothic Neo', AppleGothic, sans-serif;}

#superman_wrap .sec_top .btn_area .info {color:#fff;background-position:100% 0}
#superman_wrap .sec_top .btn_area .btn_join_superman {border:#fff 2px solid}
#superman_wrap .sec_top .btn_area .btn_join_superman:hover,
#superman_wrap .sec_top .btn_area .btn_join_superman:active {background:#fff;color:#0758a9}
#superman_wrap .sec_03 .btn_area .icon_superman {background-position: 100% -55px}


/** layout **/
.superman {position:relative}
.superman .btn-pageup {position:absolute;bottom:0;left:50%;height:45px;margin-left:-25px;padding-top:17px;border:0;background-color:#fff;background-size: 18px 7px;font-size:14px}
.superman .my-breadcrumbs {background-color:transparent !important;color:#bad6f3 !important}
.superman .my-breadcrumbs a {color:#bad6f3}

#superman_wrap .point {color:#fff;font-weight:700;}
#superman_wrap {position:relative;word-break: keep-all}
#superman_wrap h2, #superman_wrap h3 {font-family: 'nanum-square-eb','malgun gothic','Apple SD Gothic Neo', AppleGothic, sans-serif;font-weight:700;word-break: keep-all;line-height:1.4;letter-spacing:-1px;color:#222}
#superman_wrap .container {margin: 0 auto;}
.sec_top, .sec_01, .sec_02, .sec_03 {-webkit-background-size:cover;background-size:cover;background-repeat:no-repeat}

.txt_blue {color:#0758a9}
.txt_red {color:#e30c12}
.ch {font-family:'malgun gothic','Apple SD Gothic Neo', AppleGothic, sans-serif; }


/* section */
.sec_top .txt_area {display:block;background-color:#0758a9}
.sec_top .txt_area .txt {color:#c2e1ff;font-size:15px}

.sec_01 h2 .info {display: block;font-family: 'nanum-square-b','malgun gothic','Apple SD Gothic Neo', AppleGothic, sans-serif;}
.people_area {display:block;margin:0 auto;line-height: 1.6}
.people_area li {position:relative;float:left;width:100%;padding:40px 1px 1px 0;list-style:none}
.people_area li a {display:block;width:100%;padding:20px;background-color:rgba(255,255,255,0.8);background-repeat: no-repeat}
.people_area li .bf_info,.people_area li .area_title {display:block}
.people_area li .bf_info {margin:5px 0 20px;font-family:'malgun gothic','Apple SD Gothic Neo', AppleGothic, sans-serif;font-size:15px;font-weight:normal}
.people_area h2,
.people_area h3 {line-height: 1.6}
.people_area li h3 .info {font-family: 'nanum-square-b'}
.people_area li .txt {font-size:15px;word-break:break-all}

.people_area li .area_title {font-size:19px}
.people_area li a:hover,.people_area li a:active,.people_area li a:focus {color:#444}

.people_area .icon_people {position: absolute;top:20px;width:40px;height:45px;background:url('../img/superman/icon_superman.png') no-repeat;-webkit-background-size: 40px;background-size: 40px;}
.people_area .sp01 {left:0;background-position: 0 0}
.people_area .sp02 {top:10px;left:50%;margin-left:-19px;background-position: 0 -45px}
.people_area .sp03 {top:10px;left:50%;margin-left:-19px;background-position: 0 -90px}
.people_area .sp04 {left:50%;background-position: 0 -135px}
.people_area .sp05 {right:-12px;background-position: 0 -180px}

#superman_wrap .sec_02 h2 {color:#fff}
.sec_02 .txt_area {width:100%;padding:20px;background-color:#001a32;}
.sec_02 .txt_area .txt {color:#fff}
.sec_02 .txt_area .point {font-size:18px}

.sec_03 {position:relative}
.sec_03 .tit_donation {margin-bottom:15px;font-size:18px}
.sec_03 .txt_area ul {margin-bottom:40px;color:#222}
#superman_wrap .sec_03 h2 {margin-bottom:40px;}
#superman_wrap .sec_03 h2,
.sec_03 .txt_area ul {max-width:960px}
#superman_wrap .sec_03 .txt_area h3 {font-size:16px}
.mov_superman {display:block}

/* aalloo 2107-10-17 */
.sec_04 {position:relative}
.sec_04 .tit_donation {margin-bottom:30px;font-size:18px}
.sec_04 .txt_area ul {margin-bottom:20px;color:#222}
.sec_04 .img_txt {padding-left: 60px;padding-top: 10px;padding-bottom: 10px;}


@media only screen and (min-width:1px) and (max-width:980px) {
	/** layout **/
	#superman_wrap {padding-top:52px}
	#superman_wrap .container {padding-top:40px;padding-bottom:60px}
	#superman_wrap h2 {font-size:24px}
	.sec_top .tit_area {height:380px;background-image:url('../img/superman/top_bg_m.jpg');background-repeat:no-repeat;background-size:cover;background-position:0 100%}
	.sec_01,.sec_02,.sec_03 {background-position:50% 100%;}
	.sec_01 {background-color:#bde5fa;background-image:url('../img/superman/s1_bg_m.jpg');background-size:contain}
	.sec_02 {background-color:#004179;background-image:url('../img/superman/s2_bg_m.jpg')}
	.sec_03 {background-color:#f3ece2;background-image:url('../img/superman/s3_bg_m.jpg')}
	
	#superman_wrap .sec_top .container {padding:0}
	#superman_wrap .sec_top .container .txt_area {padding:30px}
	.sec_top h1 {width:300px;height:82px;margin: 0 auto;background:url('../img/superman/logo_superman_m.png') no-repeat;background-size:contain;}
	.sec_top .tit_area {padding:42px 0 260px}
	.sec_top .txt_area .txt {margin-bottom:20px}
	#superman_wrap .mov_superman {margin:30px auto 0;width:300px;height:169px}
	
	.sec_02 h2 {margin-bottom:30px}
	
	#superman_wrap .sec_03 h2,.sec_03 .txt_area ul {margin-bottom:20px}
	#superman_wrap .sec_03 .tit_donation {font-size:18px}
	#superman_wrap .sec_03 h2 {font-size: 20px;}
	#superman_wrap .sec_03 .btn_area {margin-bottom:40px;}
}
@media only screen and (min-width:768px) {
	.sec_top .tit_area {height:500px}
	.sec_top h1 {width:450px;height:123px}
	#superman_wrap .mov_superman {width:500px;height:281px}
}
@media only screen and (min-width:981px) {	
	/** layout **/
	#superman_wrap {overflow-x:hidden;padding-top:92px;}
	#superman_wrap .container {padding-top:80px;padding-bottom:80px}
	#superman_wrap h2 {font-size:30px}
	#superman_wrap .btn_area .info {font-size:18px;font-weight:700}
	#superman_wrap .sec_top .btn_area .info {width:250px;font-size:17px}
	.sec_top {position:relative;height:860px;background-image:url('../img/superman/top_bg.jpg');background-position:0 100%;}	
	.sec_01 {max-height:1042px;background-image:url('../img/superman/s1_bg.jpg');background-position:50% 100%;}
	.sec_02 {max-height:855px;background-image:url('../img/superman/s2_bg.jpg');background-position:100% 100%;}
	.sec_03 {max-height:846px;background-image:url('../img/superman/s3_bg.jpg')}
	
	/*section*/	
	.sec_top h1 {position:absolute;top:80px;right:420px;width:568px;height:147px;background-image:url('../img/superman/logo_superman_nb.png');background-repeat:no-repeat;}
	.sec_top .txt_area {position:absolute;top:0;right:0;width:24%;min-width:380px;height:100%;padding:70px 50px 30px 30px;}
	.sec_top .txt_area .txt {margin-bottom:40px;font-size:16px}	
	#superman_wrap .mov_superman {position:absolute;top:300px;right:440px;width:560px;height:315px}
	
	.sec_01 h2 {text-align:center;margin-bottom:40px}
	.sec_01 h2 .info {font-size:26px}
	.people_area {display:none}
	#superman_wrap .sec_01 .container  {padding-bottom:220px}
		
	.sec_02 h2 {margin-bottom:40px}
	.sec_02 .txt_area .point {font-size:20px}
	.sec_02 .txt_area {max-width:1000px;padding:40px}
	#superman_wrap .sec_02 .container  {padding-bottom:220px}
		
	#superman_wrap .sec_03 .tit_donation {margin-bottom:30px;font-size:25px}
	#superman_wrap .sec_03 h2 {font-size:24px;line-height:1.5}
	#superman_wrap .sec_03 .txt_area h3 {font-size:20px}
	#superman_wrap .sec_03 .container  {padding-bottom:220px}	
}
@media only screen and (min-width:1440px) {
	#superman_wrap h2 {font-size:36px}
	#superman_wrap .container {width:84%;padding-top:110px;padding-bottom:110px;}	
	#superman_wrap .sec_top .btn_area .info {width:270px}
	
	.sec_top h1 {left:50%;right:auto;margin-left:-400px;width:692px;height:180px;background-image:url('../img/superman/logo_superman.png')}
	#superman_wrap .mov_superman {top:300px;left:50%;width:800px;height:450px;margin-left:-450px}
	.sec_03 .break_1440 {display:block}	
}
@media only screen and (min-width:1680px) {	
	#superman_wrap .sec_03 h2 {font-size:30px}
}

@media only screen and (-webkit-min-device-pixel-ratio:1.5),
	   only screen and (min-resolution:144dpi) {

}