@charset "utf-8";
/* CSS Document */

.wrap, .wrap2, .wrap3, .wrap4 {width:100%; height:100%; min-height:937px; position:relative;}
.wrap {background:url(../../img/online2022/deco01.png) no-repeat top 138px left 323px,
url(../../img/online2022/deco02.png) no-repeat top 45px left 56px,
url(../../img/online2022/img01.png) no-repeat top 93px right 290px,
url(../../img/online2022/img01_2.png) no-repeat top 30px right 40px,
url(../../img/online2022/img02.png) no-repeat bottom 17px left 50px / 202px,
url(../../img/online2022/obj01.png) no-repeat bottom 0 right 300px,
url(../../img/online2022/obj02.png) no-repeat bottom -7px left 526px,
url(../../img/online2022/obj03.png) no-repeat bottom 13px right 14px, 
url(../../img/online2022/obj04.png) no-repeat bottom 22px left 276px,
url(../../img/online2022/bg01.jpg) no-repeat 100% 100% / 100% 100%;}
.wrap2 {background:url(../../img/online2022/img03.png) no-repeat top 18px right 75px,
url(../../img/online2022/bg02.jpg) no-repeat 100% 100% / 100% 100%;}
.wrap3 {background:url(../../img/online2022/img04.png) no-repeat top 42px left 220px,
url(../../img/online2022/img05.png) no-repeat top 80px right 160px,
url(../../img/online2022/bg03.jpg) no-repeat 100% 100% / 100% 100%;}
.wrap3:after {content:''; clear:both; display:block; position:absolute; background:url(../../img/online2022/img02.png) no-repeat 100% 100% / 100%; bottom:30px; left:30px; width:230px; height:195px; transform:rotate(-5deg);}
.wrap4 {background:url(../../img/online2022/img02.png) no-repeat top 87px left 375px,
url(../../img/online2022/img07.png) no-repeat bottom 35px left 75px,
url(../../img/online2022/img06.png) no-repeat bottom 45px right 55px,
url(../../img/online2022/bg04.jpg) no-repeat 100% 100% / 100% 100%;}

header {margin-bottom:15px;}
header .family {text-align:center; padding:37px 0 30px;}
header .family ul {display:inline-block;}
header .family li {float:left; margin-right:50px;}
header .family li:last-child {margin-right:0;}
header .family li p {font-size:18px; font-weight:600; display:inline-block; padding-right:3px; letter-spacing:0; color:#000;}
header .family li img {vertical-align:middle; margin-top:-8px;}
header .family li span:not(.under_line) {width:31px; display:inline-block; position:relative;}
header .family li span:not(.under_line):after {content:''; clear:both; display:block; position:absolute; top:-14px; left:50%; width:1px; height:20px; background:#6aa8c2;}
header .family li p span.under_line {font-size:1.2rem; font-weight:600; color:#888;}
header .top_txt {font-size:1.733rem; font-weight:600; text-align:center; padding-bottom:20px; color:#252525; padding-left:5%;}
header .top_txt span {padding-left:5px;}
header .top_tit {text-align:center; padding-left:5%;}
header .top_tit img {position:relative;}
.wrap2 header .top_txt, .wrap3 header .top_txt {padding-top:10px;}
.wrap4 header .top_txt {padding-top:30px;}


.container {margin:0 auto; position:relative;}
.container:after{content:''; display:block; clear:both;}
.container input, .container textarea {border-radius:3px; border:1px solid #ccc; padding:10px;}

.contents .left_menu {float:left; width:13%; padding-top:130px;}
.left_menu ul {width:199px; margin:0 auto;}
.left_menu li {font-size:1.333rem; font-weight:600; text-align:center; margin-bottom:10px; background:url(../../img/online2022/menu_off.png) no-repeat; height:54px;}
.left_menu li a {color:#daeffb; display:block; width:96%; height:100%; line-height:54px;}
.left_menu li a span {color:#3f83c2;}
.left_menu li.on {background:url(../../img/online2022/menu_on.png) no-repeat; color:#fff;}
.left_menu .btn_2021 {font-size:1.333rem; font-weight:600; margin-top:35px; background:url(../../img/online2022/menu02.png) no-repeat; height:66px;}
.left_menu .btn_2021 a {color:#000; display:block; height:100%; line-height:65px; padding-left:45px;}

.wrap .contents .left_menu {padding-top:90px;}
.wrap2 .left_menu li, .wrap3 .left_menu li {background:url(../../img/online2022/menu02_off.png) no-repeat;}
.wrap2 .left_menu li a, .wrap3 .left_menu li a {color:#fceff0;}
.wrap2 .left_menu li a span, .wrap3 .left_menu li a span {color:#fc788a;}
.wrap2 .left_menu li.on, .wrap3 .left_menu li.on {background:url(../../img/online2022/menu02_on.png) no-repeat; color:#fff;}
.wrap2 .left_menu li.on a, .wrap2 .left_menu li.on span, .wrap3 .left_menu li.on a, .wrap3 .left_menu li.on span {color:#fff;}

.right_con {float:right; width:81%; padding-right:6%;}


footer {width:100%; position:absolute; bottom:0px; padding:30px 0;}
footer copyright {text-align:center; font-size:13px; color:#9d9d9d; font-weight:300; font-family:'Noto Sans KR'; display:block; line-height:1.25rem;}


/*@media screen and (max-width:1919px) {
	.wrap {background:url(../../img/online2022/deco01.png) no-repeat top 150px left 300px,
		url(../../img/online2022/deco02.png) no-repeat top 70px left 45px,
		url(../../img/online2022/img01.png) no-repeat top 95px right 120px,
		url(../../img/online2022/bg01.jpg) no-repeat 100% 100% / cover;}
	.wrap2 {}
	.wrap3 {}
	.wrap4 {}
}


@media screen and (max-width:1680px) {
	.wrap {background:url(../../img/online2022/bg01.jpg) no-repeat 100% 100% / cover;}
	.wrap2 {background:url(../../img/online2022/bg02.jpg) no-repeat 100% 100% / cover;}
	.wrap3 {background:url(../../img/online2022/bg03.jpg) no-repeat 100% 100% / cover;}
	.wrap4 {background:url(../../img/online2022/bg04.jpg) no-repeat 100% 100% / cover;}
	
	header {height:auto; margin-bottom:20px;}
	header .family li {margin-right:30px;}
	header .family li img {height:28px;}
	
}


@media screen and (max-width:1440px) {
	header {padding-left:0; padding-right:0;}
	header .family li {margin-right:15px;}
	header .family li p {font-size:1.2rem;}
	header .family li img {height:24px;}
	header .top_txt {font-size:1.8rem;}
	
	footer {bottom:0; position:relative; padding:10px 0 30px;}
}


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


@media screen and (max-width:1024px) {
	#wrap, #wrap3 {background: url(../../img/online2022/bg.jpg) no-repeat center / 100% 100%; height:auto;}
	#wrap2, #wrap4 {background: url(../../img/online2022/bg2.jpg) no-repeat center / 100% 100%; height:auto;}
	
	header .family {padding:15px 0;}
	header .family li:last-child {float:none;}
	header .family li p {line-height:2.5;}
	header .family li img {height:30px;}
	
	header .top_txt {font-size:1.65rem;}
	
	footer copyright {color:#888;}
}


@media screen and (max-width:768px) {
	header .family li p {font-size:1.1rem;}
	header .family li img {height:25px;}
	
	header .top_txt {font-size:1.5rem; padding-top:10px; padding-bottom:25px;}
	header .top_tit {width:100%; margin:0 auto;}
	header .top_tit img {width:70%;}
	.contents .main_left {padding-top:0;}
	
	.right_con .main_con .con_txt {width:78%;}
}


@media screen and (max-width:600px) {
	header {margin-bottom:10px;}
	
	header .family {padding:10px 0;}
	header .family ul {padding:0 10px;}
	header .family li {margin-right:0; float:none;}
	header .family li p {font-size:1.1rem; line-height:2;}
	header .family li img {padding-bottom:6px; margin-top:5px;}
	
	header .top_txt {font-size:1.5rem; line-height:1.4; padding:5px 0 15px;}
	header .top_txt span {padding-left:0; display:block;}
	
	footer {padding:10px 0 30px;}
}


@media screen and (max-width:414px) {
	header .family li img {height:23px;}

	header .top_txt {font-size:1.65rem; padding:0 0 15px;}
	header .top_tit img {width:90%;}
}


@media screen and (max-width:375px) {
	header .top_txt {font-size:1.55rem;}
	
}

@media screen and (max-width:360px) {
	header .family li img {height:20px;}
	header .family li p {font-size:1rem;}
	
	header .top_txt {font-size:1.45rem;}
}*/