@media (max-width: 1280px) and (min-width: 1021px) { /* ipad 세로 */ #sec1_dek {width:100%; } #section1 {} #section1 .dek1 {font-size:18px; color:#fff; font-weight:400;} #section1 .dek2 {font-size:55px; color:#fff; font-weight:900; line-height:1.1; margin:0 0 20px 0; } #section1 .dek3 {border-bottom:3px solid #3d5cc9; width:50px; display:block; margin:0 0 15px 0;} #section1 .dek4 {font-size:20px; color:#fff; font-weight:400; text-align:left; line-height:1.3; padding:0; margin:10px 0 320px 0;} #section1 .dek1 { left: 0%; } #section1 .dek2 { left: -10%; } #section1 .dek3 { left: -20%; } #section1 .dek4 { left: -30%; } #section1 .showpd1 { top:110%; left: 0%; height:278px; } #section1 .showpd1 img {width:100%; max-width:200px;} #section1 .showpd2 { top:110%; left: 30%; height:auto; } #section1 .showpd2 img {width:100%; max-width:200px;} #section1 .showpd3 { top:122%; left: 53%; height:auto; } #section1 .showpd3 img {width:100%; max-width:200px;} #section1 .showpd4 { top:125%; left: 100%; height:auto;} #section1 .showpd4 img {width:100%; max-width:200px;} body.fp-viewing-firstPage #section1 .dek1{ left: 7%; opacity:1;} body.fp-viewing-firstPage #section1 .dek2{ left: 7%; opacity:1;} body.fp-viewing-firstPage #section1 .dek3{ left: 7%; opacity:1;} body.fp-viewing-firstPage #section1 .dek4{ left: 7%; opacity:1;} body.fp-viewing-firstPage #section1 .showpd1{ top:140%; left: 5%; opacity:1; } body.fp-viewing-firstPage #section1 .showpd2{ top:143%; left: 26%; opacity:1;} body.fp-viewing-firstPage #section1 .showpd3{ top:140%; left: 48%; opacity:1;} body.fp-viewing-firstPage #section1 .showpd4{ top:130%; left: 70%; opacity:1;} #section2 .sec2_left {top:0; left: -1000%; position:absolute; display:inline-block; opacity:0; transition: all 600ms ease; } #section2 .sec2_right {bottom:-40%; right: -100%; position:absolute; display:inline-block; opacity:0; transition: all 600ms ease; } body.fp-viewing-secondPage #section2 .sec2_left{ top:0%; left: 0%; opacity:0.5;} body.fp-viewing-secondPage #section2 .sec2_right{ bottom:-40%; right: -0%; opacity:0.5;} .sec2_showroom {width:100%; max-width:1200px; border:0px solid #ff00ff; display:inline-block; position:relative; padding:0; margin:0 auto;} .sec2_showroom .pdbox {/*width:258px;*/ width:40%; height:auto; display:inline-block; position:relative; margin:0 1% 20px 1%;} .sec2_showroom ul.sec2txt {right:-100%; width:auto; display:block; position:relative; margin:50px auto 40px auto; text-align:center; opacity:0; transition: all 600ms ease;} .sec2_showroom ul.sec2txt li {color:#fff; text-align:center; line-height:1; } .sec2_showroom ul.sec2txt li.big {font-size:32px; font-weight:700; padding:0; margin:0;} .sec2_showroom ul.sec2txt li.line {display: none; /*padding:0; margin:10px 0 10px 0; text-align:right; display:block;*/ } .sec2_showroom ul.sec2txt li.line span {position:absolute; right:49%; display:block; width:60px; border-bottom:3px solid #5eb885; padding:0; margin:10px 0 10px 0;} .sec2_showroom ul.sec2txt li.small {margin:15px 0 0 0; font-size:20px; font-weight:300; } .sec2_showroom .pdbox div.pdimg {width:200px; height:200px; display:inline-block; position:relative; text-align:center; background-color:rgba(15,117,51,0.8); border-radius:50%; overflow:hidden;} .sec2_showroom .pdbox div.pdimg img {width:100%; max-width:280px; vertical-align:middle; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; transition: transform .5s ease; } .sec2_showroom .pdbox a:hover div.pdimg img {transform: scale(1.3);} .sec2_showroom .pdbox div.arrow {width:60px; height:60px; position:absolute; top:160px; left:0; right:0; margin:0 auto; padding:0; z-index:10; background-color:rgba(4,38,16,0.8); border-radius:50%;} .sec2_showroom .pdbox div.arrow img {width:100%; max-width:31px; vertical-align:middle; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;} .sec2_showroom .pdbox div.pdname {width:98%; margin:35px 1% 20px 0; line-height:1.5; font-size:16px; font-weight:400; color:#fff; display:inline-block; position:relative; text-align:center; } body.fp-viewing-secondPage #section2 .sec2_showroom ul.sec2txt {top:0; right:0px; opacity:1;} #section3 .intro{ left: -130%; position:relative; transition: all 600ms ease; } #section3 .sec3_QuickBox {width:100%; max-width:1200px; border:0px solid #ff00ff; display:inline-block; position:relative; padding:0; margin:100px auto 0 auto;} #section3 .sec3_QuickBox .boxarea {vertical-align:top; width:254px; height:auto; display:inline-block; position:relative; margin:0 1% 0 1%; padding:200px 0 0 0;} #section3 .sec3_QuickBox .area1 .bg {width:100%; max-width:254px; height:100%; position:absolute; top:0; left:0; background:url(/images/main/section/section3_man1.jpg) no-repeat left top; background-size:cover; z-index:1;} #section3 .sec3_QuickBox .area2 .bg {width:100%; max-width:254px; height:100%; position:absolute; top:0; left:0; background:url(/images/main/section/section3_man3.jpg) no-repeat left -120px; background-size:cover; z-index:1;} #section3 .sec3_QuickBox .area3 .bg {width:100%; max-width:254px; height:100%; position:absolute; top:0; left:0; background:url(/images/main/section/section3_man2.jpg) no-repeat left -115px; background-size:cover; z-index:1;} #section3 .sec3_QuickBox .boxarea.area1 ul.overlayer li {background:#7483d1;} #section3 .sec3_QuickBox .boxarea.area2 ul.overlayer li {background:#ffffff;} #section3 .sec3_QuickBox .boxarea.area3 ul.overlayer li {background:#2e3459;} #section3 .sec3_QuickBox .boxarea ul.overlayer {width:100%; display:block; position:relative; margin:0 0 0 0; z-index:2;} #section3 .sec3_QuickBox .boxarea ul.overlayer li {width:100%; margin:0 auto; padding:0; line-height:1; color:#fff; text-align:left;} #section3 .sec3_QuickBox .boxarea.area2 ul.overlayer li {color:#2d3459;} #section3 .sec3_QuickBox .boxarea ul.overlayer li span{display:block;} #section3 .sec3_QuickBox .boxarea ul.overlayer li.headimg {background:none; width:100%; padding:0;} #section3 .sec3_QuickBox .boxarea ul.overlayer li.headimg img {width:100%;} #section3 .sec3_QuickBox .boxarea ul.overlayer li.num span{padding:0 0 0 38px; font-size:60px; font-weight:900; display:block;} #section3 .sec3_QuickBox .boxarea ul.overlayer li.t_big span{padding:20px 40px 0 44px; font-size:22px; font-weight:700; } #section3 .sec3_QuickBox .boxarea ul.overlayer li.t_sub1 span{padding:5px 40px 0 44px; font-size:20px; font-weight:400; font-family:NotoSanskr, nsr, 나눔고딕, 'Nanum Gothic', 나눔바른고딕, 돋움;} #section3 .sec3_QuickBox .boxarea ul.overlayer li.t_sub2 span{padding:30px 40px 30px 44px; font-size:20px; font-weight:300; opacity:0.8; font-family:NotoSanskr, nsr, 나눔고딕, 'Nanum Gothic', 나눔바른고딕, 돋움;} #section3 .sec3_QuickBox .area1 {left: -10%; position:relative; transition: all 600ms ease; opacity:0;} body.fp-viewing-3rdPage #section3 .area1 {left: 0%; opacity:1;} #section3 .sec3_QuickBox .area2 {position:relative; transition: all 600ms ease; opacity:0;} body.fp-viewing-3rdPage #section3 .area2 {left: 0%; opacity:1;} #section3 .sec3_QuickBox .area3 {right: -10%; position:relative; transition: all 600ms ease; opacity:0;} body.fp-viewing-3rdPage #section3 .area3 {right: 0%; opacity:1;} #section4 {background:url(/images/main/section/section4_bg.jpg) no-repeat 50% 50%; background-size:cover; } #section4 * {font-family:NotoSanskr, nsr, '나눔고딕', 'Nanum Gothic', '나눔바른고딕', '돋움' !important;} #section4 .board_area {text-align:left; width:100%; max-width:1400px; } #section4 .board_area .newsBox {width:94%; height:250px; padding:0; margin:0 3% 30px 3%; } #section4 .board_area .newsBox h1 {font-size:20px; color:#214485; font-weight:500; width:90%; margin:30px 5% 20px 5%; padding:0;} #section4 .board_area .newsBox a {width:90%; margin:0 5%; padding:0; display:block; cursor:pointer;} #section4 .board_area .newsBox a.txt_tit {font-size:25px; color:#214485; font-weight:400; line-height:1.5; padding:0 0 20px 0; } #section4 .board_area .newsBox a.txt_con {font-size:15px; color:#686869; font-weight:300; line-height:1.5; padding:0 0 15px 0; } #section4 .board_area .newsBox a.btn_more {width:20px; height:20px; position:absolute; top:20px; right:10%; font-size:30px; color:#bfbfbf; margin:0; padding:0; display:block; text-align:right; font-weight:400; z-index:10;} #section4 .board_area .newsBox a:link, #section4 .board_area .newsBox a:visited, #section4 .board_area .newsBox a:active {} #section4 .board_area .newsBox a:hover {color:#316d1d;} #section4 .board_area .newsBox span.txtdate {font-size:12px; color:#686869; font-weight:300; line-height:1; width:90%; margin:0 5%; display:block;} #section4 .board_area .dataBox {width:55%; height:auto; background:#68a596; padding:0; margin:0 3% 0 3%; display:inline-block; position:relative; overflow:hidden;} #section4 .board_area .dataBox h1 {font-size:20px; color:#fff; font-weight:500; width:90%; margin:30px 5% 20px 5%; padding:0;} #section4 .board_area .dataBox a {width:90%; margin:0 5%; padding:0; display:block; cursor:pointer;} #section4 .board_area .dataBox a.txt_tit {font-size:15px; color:#e3f5f1; font-weight:400; line-height:1.3; padding:3px 0 15px 0; } #section4 .board_area .dataBox a.btn_more {width:20px; height:20px; position:absolute; top:20px; right:10%; font-size:30px; color:#bfbfbf; margin:0; padding:0; display:block; text-align:right; font-weight:400; z-index:10;} #section4 .board_area .dataBox a:link, #section4 .board_area .dataBox a:visited, #section4 .board_area .dataBox a:active {} #section4 .board_area .dataBox a:hover {color:#fff;} #section4 .board_area .goBox {width:36%; height:auto; padding:0; margin:0; } #section4 .board_area .goBox .consult {width:100%; height:auto; margin:0 0 30px 0; display:inline-block; } #section4 .board_area .goBox .consult h1 {font-size:20px; margin:20px 8% 0 20px; padding:0 0 10px 0; display:block;} #section4 .board_area .goBox .consult img {width:40%; max-width:100px; position:absolute; right:15px; top:10px; transition: transform .5s ease;} #section4 .board_area .goBox .consult a:hover img {transform: scale(1.1);} #section4 .board_area .goBox .consult span {font-size:15px; margin:0 8% 40px 20px; padding:0; width:55%; } #section4 .board_area .goBox .consult a:hover span {color:#fff;} #section4 .board_area .goBox .helpinfo {width:100%; height:auto; background:#328396; margin:0 0 0 0; display:inline-block; } #section4 .board_area .goBox .helpinfo h1 {font-size:20px; font-weight:700; color:#fff; margin:20px 8% 0 20px; padding:0 0 10px 0; display:block;} #section4 .board_area .goBox .helpinfo table {display:table; border-collapse:collapse; width:84%; margin:0 8% 10px 20px; color:#fff;} #section4 .board_area .goBox .helpinfo table td {color:#fff; font-size:15px; font-weight:300; padding:4px; line-height:1.2; font-family: 'Roboto', Helvetica, Helvetica Neue, Arial, sans-serif, NotoSanskr, nsr, 나눔고딕, 'Nanum Gothic', 나눔바른고딕, 돋움; } #section4 .board_area {bottom: 0%; position:relative; transition: all 600ms ease; opacity:0.5;} body.fp-viewing-4thpage #section4 .board_area {bottom:0%; opacity:1;} #section5 {} #section5 .copyArea {text-align:left; width:100%; max-width:1300px; display: grid; /*grid-template-columns: repeat(3, 1fr);*/ grid-template-columns: 40% 19% 15% 15%; grid-row-gap: 0px; grid-column-gap: 0px; vertical-align:top; position:relative; padding:0; margin:70px 1%; overflow:hidden;} #section5 .copyArea .container_A {width:100%; max-width:700px; overflow:hidden; border:0px solid #00ff00;} #section5 .copyArea .container_B {width:100%; max-width:200px; overflow:hidden; border:0px solid #00ff00;} #section5 .copyArea .container_C {width:100%; max-width:200px; overflow:hidden; border:0px solid #00ff00;} #section5 .copyArea .container_C img {width:95%; padding-left:5%;} #section5 .copyArea .container_D {width:100%; max-width:200px; overflow:hidden; border:0px solid #00ff00;} #section5 .copyArea div {color:#888888; font-size:14px; font-weight:400; font-family:NotoSanskr, nsr, 나눔고딕, 'Nanum Gothic', 나눔바른고딕, 돋움;} #section5 .copyArea a {color:#888888;} #section5 .copyArea a:link, #section5 .copyArea a:visited, #section5 .copyArea a:active {color:#888888; font-family:NotoSanskr, nsr, 나눔고딕, 'Nanum Gothic', 나눔바른고딕, 돋움;} #section5 .copyArea a:hover {color:#fff; font-family:NotoSanskr, nsr, 나눔고딕, 'Nanum Gothic', 나눔바른고딕, 돋움;} #section5 .copyArea .container_A div {padding-bottom:10px;} #section5 .copyArea .container_A .add {font-size:14px; width:100%; max-width:540px; padding-bottom:20px; display:inline-block; overflow:hidden; } #section5 .copyArea .container_A .number {color:#bbbbbb; font-size:14px; width:100%; max-width:540px; display:inline-block; overflow:hidden; font-family: 'Roboto', Helvetica, Helvetica Neue, Arial; } #section5 .copyArea .container_A .number span {color:#fff; font-weight:400; display:inline-block; padding:0 10px 0 0;} #section5 .copyArea .container_B span {width:100%; display:block; margin:0 0 8px 0; padding:0;} #section5 .copyArea .container_D a.filedown {text-align:center; display:block; padding:10px 10px 10px 10px; margin:0; border:1px solid #3b4168; background:#2e3459; border-radius:10px; cursor:pointer;} #section5 .copyArea .container_D a.filedown img {padding:5px 0 10px 0; display:inline-block; border:0; opacity:0.7;} #section5 .copyArea .container_D a.filedown div {font-size:14px; display:inline-block; padding:0; margin:0;} #section5 .copyArea .container_D a.filedown div span {font-size:11px; padding-left:2px; } #section5 .copyArea .container_D a.filedown:hover div {color:#fff;} #section5 .copyArea .container_D a.filedown:hover img {opacity:1;} #section5 .copyArea .container_COPY { grid-column-start: 1; grid-column-end: 5; margin:30px 0; } #section5 .copyArea .container_COPY span {color:#bbbbbb; font-weight:700;} #section5 .copyArea h1 {font-size:18px; font-weight:700; color:#fff; padding:0 0 25px 0; font-family: 'Roboto', Helvetica, Helvetica Neue, Arial, sans-serif, NotoSanskr, nsr, 나눔고딕, 'Nanum Gothic', 나눔바른고딕, 돋움; } } @media only screen and (max-width: 1020px) and (min-width: 768px) { #sec1_dek {width:100%; } #section1 {} #section1 .dek1 {font-size:18px; color:#fff; font-weight:400;} #section1 .dek2 {font-size:55px; color:#fff; font-weight:900; line-height:1.1; margin:0 0 20px 0; } #section1 .dek3 {border-bottom:3px solid #3d5cc9; width:50px; display:block; margin:0 0 15px 0;} #section1 .dek4 {font-size:20px; color:#fff; font-weight:400; text-align:left; line-height:1.3; padding:0; margin:10px 0 320px 0;} #section1 .dek1 { left: 0%; } #section1 .dek2 { left: -10%; } #section1 .dek3 { left: -20%; } #section1 .dek4 { left: -30%; } #section1 .showpd1 { top:110%; left: 0%; height:278px; } #section1 .showpd1 img {width:100%; max-width:200px;} #section1 .showpd2 { top:110%; left: 30%; height:auto; } #section1 .showpd2 img {width:100%; max-width:200px;} #section1 .showpd3 { top:122%; left: 53%; height:auto; } #section1 .showpd3 img {width:100%; max-width:200px;} #section1 .showpd4 { top:125%; left: 100%; height:auto;} #section1 .showpd4 img {width:100%; max-width:200px;} body.fp-viewing-firstPage #section1 .dek1{ left: 7%; opacity:1;} body.fp-viewing-firstPage #section1 .dek2{ left: 7%; opacity:1;} body.fp-viewing-firstPage #section1 .dek3{ left: 7%; opacity:1;} body.fp-viewing-firstPage #section1 .dek4{ left: 7%; opacity:1;} body.fp-viewing-firstPage #section1 .showpd1{ top:140%; left: 3%; opacity:1;} body.fp-viewing-firstPage #section1 .showpd2{ top:143%; left: 26%; opacity:1;} body.fp-viewing-firstPage #section1 .showpd3{ top:140%; left: 48%; opacity:1;} body.fp-viewing-firstPage #section1 .showpd4{ top:130%; left: 70%; opacity:1;} #section2 .sec2_left {top:0; left: -1000%; position:absolute; display:inline-block; opacity:0; transition: all 600ms ease; } #section2 .sec2_right {bottom:-40%; right: -100%; position:absolute; display:inline-block; opacity:0; transition: all 600ms ease; } body.fp-viewing-secondPage #section2 .sec2_left{ top:0%; left: 0%; opacity:0.5;} body.fp-viewing-secondPage #section2 .sec2_right{ bottom:-40%; right: -0%; opacity:0.5;} .sec2_showroom {width:100%; max-width:1200px; border:0px solid #ff00ff; display:inline-block; position:relative; padding:0; margin:0 auto;} .sec2_showroom .pdbox {/*width:258px;*/ width:40%; height:auto; display:inline-block; position:relative; margin:0 1% 20px 1%;} .sec2_showroom ul.sec2txt {right:-100%; width:auto; display:block; position:relative; margin:50px auto 40px auto; text-align:center; opacity:0; transition: all 600ms ease;} .sec2_showroom ul.sec2txt li {color:#fff; text-align:center; line-height:1; } .sec2_showroom ul.sec2txt li.big {font-size:32px; font-weight:700; padding:0; margin:0;} .sec2_showroom ul.sec2txt li.line {display: none; /*padding:0; margin:10px 0 10px 0; text-align:right; display:block;*/ } .sec2_showroom ul.sec2txt li.line span {position:absolute; right:49%; display:block; width:60px; border-bottom:3px solid #5eb885; padding:0; margin:10px 0 10px 0;} .sec2_showroom ul.sec2txt li.small {margin:15px 0 0 0; font-size:20px; font-weight:300; } .sec2_showroom .pdbox div.pdimg {width:200px; height:200px; display:inline-block; position:relative; text-align:center; overflow:hidden; border-radius:50%;} .sec2_showroom .pdbox div.pdimg img {width:100%; max-width:180px; vertical-align:middle; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; transition: transform .5s ease; } .sec2_showroom .pdbox a:hover div.pdimg img {transform: scale(1.3);} .sec2_showroom .pdbox div.arrow {width:60px; height:60px; position:absolute; top:160px; left:0; right:0; margin:0 auto; padding:0; z-index:10; background-color:rgba(4,38,16,0.8); border-radius:50%;} .sec2_showroom .pdbox div.arrow img {width:100%; max-width:31px; vertical-align:middle; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;} .sec2_showroom .pdbox div.pdname {width:98%; margin:35px 1% 20px 0; line-height:1.5; font-size:16px; font-weight:400; color:#fff; display:inline-block; position:relative; text-align:center; } body.fp-viewing-secondPage #section2 .sec2_showroom ul.sec2txt {top:0; right:0px; opacity:1;} #section3 .intro{ left: -130%; position:relative; transition: all 600ms ease; } #section3 .sec3_QuickBox {width:100%; max-width:1200px; border:0px solid #ff00ff; display:inline-block; position:relative; padding:0; margin:100px auto 0 auto;} #section3 .sec3_QuickBox .boxarea {vertical-align:top; width:254px; height:auto; display:inline-block; position:relative; margin:0 1% 0 1%; padding:200px 0 0 0;} #section3 .sec3_QuickBox .area1 .bg {width:100%; max-width:254px; height:100%; position:absolute; top:0; left:0; background:url(/images/main/section/section3_man1.jpg) no-repeat left top; background-size:cover; z-index:1;} #section3 .sec3_QuickBox .area2 .bg {width:100%; max-width:254px; height:100%; position:absolute; top:0; left:0; background:url(/images/main/section/section3_man3.jpg) no-repeat left -120px; background-size:cover; z-index:1;} #section3 .sec3_QuickBox .area3 .bg {width:100%; max-width:254px; height:100%; position:absolute; top:0; left:0; background:url(/images/main/section/section3_man2.jpg) no-repeat left -115px; background-size:cover; z-index:1;} #section3 .sec3_QuickBox .boxarea.area1 ul.overlayer li {background:#7483d1;} #section3 .sec3_QuickBox .boxarea.area2 ul.overlayer li {background:#ffffff;} #section3 .sec3_QuickBox .boxarea.area3 ul.overlayer li {background:#2e3459;} #section3 .sec3_QuickBox .boxarea ul.overlayer {width:100%; display:block; position:relative; margin:0 0 0 0; z-index:2;} #section3 .sec3_QuickBox .boxarea ul.overlayer li {width:100%; margin:0 auto; padding:0; line-height:1; color:#fff; text-align:left;} #section3 .sec3_QuickBox .boxarea.area2 ul.overlayer li {color:#2d3459;} #section3 .sec3_QuickBox .boxarea ul.overlayer li span{display:block;} #section3 .sec3_QuickBox .boxarea ul.overlayer li.headimg {background:none; width:100%; padding:0;} #section3 .sec3_QuickBox .boxarea ul.overlayer li.headimg img {width:100%;} #section3 .sec3_QuickBox .boxarea ul.overlayer li.num span{padding:0 0 0 38px; font-size:60px; font-weight:900; display:block;} #section3 .sec3_QuickBox .boxarea ul.overlayer li.t_big span{padding:20px 40px 0 44px; font-size:22px; font-weight:700; } #section3 .sec3_QuickBox .boxarea ul.overlayer li.t_sub1 span{padding:5px 40px 0 44px; font-size:20px; font-weight:400; font-family:NotoSanskr, nsr, 나눔고딕, 'Nanum Gothic', 나눔바른고딕, 돋움;} #section3 .sec3_QuickBox .boxarea ul.overlayer li.t_sub2 span{padding:30px 40px 30px 44px; font-size:20px; font-weight:300; opacity:0.8; font-family:NotoSanskr, nsr, 나눔고딕, 'Nanum Gothic', 나눔바른고딕, 돋움;} #section3 .sec3_QuickBox .area1 {left: -10%; position:relative; transition: all 600ms ease; opacity:0;} body.fp-viewing-3rdPage #section3 .area1 {left: 0%; opacity:1;} #section3 .sec3_QuickBox .area2 {position:relative; transition: all 600ms ease; opacity:0;} body.fp-viewing-3rdPage #section3 .area2 {left: 0%; opacity:1;} #section3 .sec3_QuickBox .area3 {right: -10%; position:relative; transition: all 600ms ease; opacity:0;} body.fp-viewing-3rdPage #section3 .area3 {right: 0%; opacity:1;} #section4 {background:url(/images/main/section/section4_bg.jpg) no-repeat 50% 50%; background-size:cover; } #section4 * {font-family:NotoSanskr, nsr, '나눔고딕', 'Nanum Gothic', '나눔바른고딕', '돋움' !important;} #section4 .board_area {text-align:left; width:100%; max-width:1400px; } #section4 .board_area .newsBox {width:94%; height:250px; padding:0; margin:0 3% 30px 3%; } #section4 .board_area .newsBox h1 {font-size:20px; color:#214485; font-weight:500; width:90%; margin:30px 5% 20px 5%; padding:0;} #section4 .board_area .newsBox a {width:90%; margin:0 5%; padding:0; display:block; cursor:pointer;} #section4 .board_area .newsBox a.txt_tit {font-size:25px; color:#214485; font-weight:400; line-height:1.5; padding:0 0 20px 0; } #section4 .board_area .newsBox a.txt_con {font-size:15px; color:#686869; font-weight:300; line-height:1.5; padding:0 0 15px 0; } #section4 .board_area .newsBox a.btn_more {width:20px; height:20px; position:absolute; top:20px; right:10%; font-size:30px; color:#bfbfbf; margin:0; padding:0; display:block; text-align:right; font-weight:400; z-index:10;} #section4 .board_area .newsBox a:link, #section4 .board_area .newsBox a:visited, #section4 .board_area .newsBox a:active {} #section4 .board_area .newsBox a:hover {color:#316d1d;} #section4 .board_area .newsBox span.txtdate {font-size:12px; color:#686869; font-weight:300; line-height:1; width:90%; margin:0 5%; display:block;} #section4 .board_area .dataBox {width:55%; height:auto; background:#68a596; padding:0; margin:0 3% 0 3%; display:inline-block; position:relative; overflow:hidden;} #section4 .board_area .dataBox h1 {font-size:20px; color:#fff; font-weight:500; width:90%; margin:30px 5% 20px 5%; padding:0;} #section4 .board_area .dataBox a {width:90%; margin:0 5%; padding:0; display:block; cursor:pointer;} #section4 .board_area .dataBox a.txt_tit {font-size:15px; color:#e3f5f1; font-weight:400; line-height:1.3; padding:3px 0 15px 0; } #section4 .board_area .dataBox a.btn_more {width:20px; height:20px; position:absolute; top:20px; right:10%; font-size:30px; color:#bfbfbf; margin:0; padding:0; display:block; text-align:right; font-weight:400; z-index:10;} #section4 .board_area .dataBox a:link, #section4 .board_area .dataBox a:visited, #section4 .board_area .dataBox a:active {} #section4 .board_area .dataBox a:hover {color:#fff;} #section4 .board_area .goBox {width:36%; height:auto; padding:0; margin:0; } #section4 .board_area .goBox .consult {width:100%; height:auto; margin:0 0 30px 0; display:inline-block; } #section4 .board_area .goBox .consult h1 {font-size:20px; margin:20px 8% 0 20px; padding:0 0 10px 0; display:block;} #section4 .board_area .goBox .consult img {width:40%; max-width:100px; position:absolute; right:15px; top:10px; transition: transform .5s ease;} #section4 .board_area .goBox .consult a:hover img {transform: scale(1.1);} #section4 .board_area .goBox .consult span {font-size:15px; margin:0 8% 40px 20px; padding:0; width:55%; } #section4 .board_area .goBox .consult a:hover span {color:#fff;} #section4 .board_area .goBox .helpinfo {width:100%; height:auto; background:#328396; margin:0 0 0 0; display:inline-block; } #section4 .board_area .goBox .helpinfo h1 {font-size:20px; font-weight:700; color:#fff; margin:20px 8% 0 20px; padding:0 0 10px 0; display:block;} #section4 .board_area .goBox .helpinfo table {display:table; border-collapse:collapse; width:84%; margin:0 8% 10px 20px; color:#fff;} #section4 .board_area .goBox .helpinfo table td {color:#fff; font-size:15px; font-weight:300; padding:4px; line-height:1.2; font-family: 'Roboto', Helvetica, Helvetica Neue, Arial, sans-serif, NotoSanskr, nsr, 나눔고딕, 'Nanum Gothic', 나눔바른고딕, 돋움; } #section4 .board_area {bottom: 0%; position:relative; transition: all 600ms ease; opacity:0.5;} body.fp-viewing-4thpage #section4 .board_area {bottom:0%; opacity:1;} #section5 {} #section5 .copyArea {text-align:left; width:100%; max-width:1300px; display: grid; /*grid-template-columns: repeat(3, 1fr);*/ grid-template-columns: 40% 19% 15% 15%; grid-row-gap: 0px; grid-column-gap: 0px; vertical-align:top; position:relative; padding:0; margin:70px 1%; overflow:hidden;} #section5 .copyArea .container_A {width:100%; max-width:700px; overflow:hidden; border:0px solid #00ff00;} #section5 .copyArea .container_B {width:100%; max-width:200px; overflow:hidden; border:0px solid #00ff00;} #section5 .copyArea .container_C {width:100%; max-width:200px; overflow:hidden; border:0px solid #00ff00;} #section5 .copyArea .container_C img {width:95%; padding-left:5%;} #section5 .copyArea .container_D {width:100%; max-width:200px; overflow:hidden; border:0px solid #00ff00;} #section5 .copyArea div {color:#888888; font-size:14px; font-weight:400; font-family:NotoSanskr, nsr, 나눔고딕, 'Nanum Gothic', 나눔바른고딕, 돋움;} #section5 .copyArea a {color:#888888;} #section5 .copyArea a:link, #section5 .copyArea a:visited, #section5 .copyArea a:active {color:#888888; font-family:NotoSanskr, nsr, 나눔고딕, 'Nanum Gothic', 나눔바른고딕, 돋움;} #section5 .copyArea a:hover {color:#fff; font-family:NotoSanskr, nsr, 나눔고딕, 'Nanum Gothic', 나눔바른고딕, 돋움;} #section5 .copyArea .container_A div {padding-bottom:10px;} #section5 .copyArea .container_A .add {font-size:14px; width:100%; max-width:540px; padding-bottom:20px; display:inline-block; overflow:hidden; } #section5 .copyArea .container_A .number {color:#bbbbbb; font-size:14px; width:100%; max-width:540px; display:inline-block; overflow:hidden; font-family: 'Roboto', Helvetica, Helvetica Neue, Arial; } #section5 .copyArea .container_A .number span {color:#fff; font-weight:400; display:inline-block; padding:0 10px 0 0;} #section5 .copyArea .container_B span {width:100%; display:block; margin:0 0 8px 0; padding:0;} #section5 .copyArea .container_D a.filedown {text-align:center; display:block; padding:10px 10px 10px 10px; margin:0; border:1px solid #3b4168; background:#2e3459; border-radius:10px; cursor:pointer;} #section5 .copyArea .container_D a.filedown img {padding:5px 0 10px 0; display:inline-block; border:0; opacity:0.7;} #section5 .copyArea .container_D a.filedown div {font-size:14px; display:inline-block; padding:0; margin:0;} #section5 .copyArea .container_D a.filedown div span {font-size:11px; padding-left:2px; } #section5 .copyArea .container_D a.filedown:hover div {color:#fff;} #section5 .copyArea .container_D a.filedown:hover img {opacity:1;} #section5 .copyArea .container_COPY { grid-column-start: 1; grid-column-end: 5; margin:30px 0; } #section5 .copyArea .container_COPY span {color:#bbbbbb; font-weight:700;} #section5 .copyArea h1 {font-size:18px; font-weight:700; color:#fff; padding:0 0 25px 0; font-family: 'Roboto', Helvetica, Helvetica Neue, Arial, sans-serif, NotoSanskr, nsr, 나눔고딕, 'Nanum Gothic', 나눔바른고딕, 돋움; } } @media only screen and (max-width: 767px) and (min-width: 480px) { #sec1_dek {width:100%; } #section1 {} #section1 .dek1 {font-size:15px; color:#fff; font-weight:400;} #section1 .dek2 {font-size:35px; color:#fff; font-weight:900; line-height:1.1; margin:0 0 20px 0; } #section1 .dek3 {border-bottom:3px solid #3d5cc9; width:40px; display:block; margin:0 0 15px 0;} #section1 .dek4 {width:88%; font-size:18px; color:#fff; font-weight:400; text-align:left; line-height:1.3; padding:0; margin:10px 0 320px 0;} #section1 .dek1 { left: 0%; } #section1 .dek2 { left: -10%; } #section1 .dek3 { left: -20%; } #section1 .dek4 { left: -30%; } #section1 .showpd1 { top:110%; left: 0%; height:278px; } #section1 .showpd1 img {width:100%; max-width:130px;} #section1 .showpd2 { top:110%; left: 30%; height:auto; } #section1 .showpd2 img {width:100%; max-width:130px;} #section1 .showpd3 { top:122%; left: 53%; height:auto; } #section1 .showpd3 img {width:100%; max-width:140px;} #section1 .showpd4 { top:125%; left: 100%; height:auto;} #section1 .showpd4 img {width:100%; max-width:130px;} body.fp-viewing-firstPage #section1 .dek1{ left: 7%; opacity:1;} body.fp-viewing-firstPage #section1 .dek2{ left: 7%; opacity:1;} body.fp-viewing-firstPage #section1 .dek3{ left: 7%; opacity:1;} body.fp-viewing-firstPage #section1 .dek4{ left: 7%; opacity:1;} body.fp-viewing-firstPage #section1 .showpd1{ top:140%; left: 11%; opacity:1;} body.fp-viewing-firstPage #section1 .showpd2{ top:143%; left: 53%; opacity:1;} body.fp-viewing-firstPage #section1 .showpd3{ top:265%; left: 11%; opacity:1;} body.fp-viewing-firstPage #section1 .showpd4{ top:250%; left: 53%; opacity:1;} #section2 .sec2_left {top:0; left: -1000%; position:absolute; display:inline-block; opacity:0; transition: all 600ms ease; } #section2 .sec2_right {bottom:-40%; right: -100%; position:absolute; display:inline-block; opacity:0; transition: all 600ms ease; } body.fp-viewing-secondPage #section2 .sec2_left{ top:0%; left: 0%; opacity:0.5;} body.fp-viewing-secondPage #section2 .sec2_right{ bottom:-40%; right: -0%; opacity:0.5;} .sec2_showroom {width:100%; max-width:1200px; border:0px solid #ff00ff; display:inline-block; position:relative; padding:0; margin:50px auto 0 auto;} .sec2_showroom .pdbox {/*width:258px;*/ width:45%; height:auto; display:inline-block; position:relative; margin:0 1% 20px 1%; } .sec2_showroom ul.sec2txt {right:-100%; width:100%; display:block; position:relative; margin:50px 10px 40px 0; text-align:center; opacity:0; transition: all 600ms ease;} .sec2_showroom ul.sec2txt li {color:#fff; text-align:right; line-height:1; } .sec2_showroom ul.sec2txt li.big {font-size:30px; font-weight:700; text-align:center} .sec2_showroom ul.sec2txt li.line {display:none; } .sec2_showroom ul.sec2txt li.line span {position:absolute; right:50%; display:block; width:50px; border-bottom:3px solid #5eb885; padding:0; margin:10px 0 10px 150px;} .sec2_showroom ul.sec2txt li.small {margin:15px 0 0 0; font-size:20px; font-weight:300; text-align:center} .sec2_showroom .pdbox div.pdimg {width:100%; max-width:200px; height:auto; min-height:200px; display:inline-block; position:relative; text-align:center; overflow:hidden; } .sec2_showroom .pdbox div.pdimg img {width:100%; max-width:200px; vertical-align:middle; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; transition: transform .5s ease; } .sec2_showroom .pdbox a:hover div.pdimg img {transform: scale(1.3);} .sec2_showroom .pdbox div.arrow {width:60px; height:60px; position:absolute; top:173px; left:0; right:0; margin:0 auto; padding:0; z-index:10; background-color:rgba(4,38,16,0.8); border-radius:50%;} .sec2_showroom .pdbox div.arrow img {width:100%; max-width:31px; vertical-align:middle; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;} .sec2_showroom .pdbox div.pdname {width:98%; margin:35px 1% 20px 0; line-height:1.5; font-size:16px; font-weight:400; color:#fff; display:inline-block; position:relative; text-align:center; } body.fp-viewing-secondPage #section2 .sec2_showroom ul.sec2txt {top:0; right:0px; opacity:1;} #section3 .intro{ left: -130%; position:relative; transition: all 600ms ease; } #section3 .sec3_QuickBox {width:100%; max-width:1200px; border:0px solid #ff00ff; display:inline-block; position:relative; padding:0; margin:90px auto 0 auto;} #section3 .sec3_QuickBox .boxarea {vertical-align:top; border:0px solid #00ff00; width:98%; height:33%; display:inline-block; position:relative; margin:0 1% 10px 1%; padding:0; text-align:left; overflow:hidden;} #section3 .sec3_QuickBox .area1 .bg {width:90%; max-width:479px; height:200px; position:absolute; top:0; left:-25%; background:url(/images/main/section/section3_man1.jpg) no-repeat 60px top; background-size:80%; z-index:1; display:inline-block;} #section3 .sec3_QuickBox .area2 .bg {width:90%; max-width:479px; height:200px; position:absolute; top:0; left:-25%; background:url(/images/main/section/section3_man3.jpg) no-repeat 150px -110px; background-size:65%; z-index:1; display:inline-block;} #section3 .sec3_QuickBox .area3 .bg {width:90%; max-width:479px; height:200px; position:absolute; top:0; left:-25%; background:url(/images/main/section/section3_man2.jpg) no-repeat 180px -70px; background-size:65%; z-index:1; display:inline-block;} #section3 .sec3_QuickBox .boxarea.area1 ul.overlayer li {background:#7483d1;} #section3 .sec3_QuickBox .boxarea.area2 ul.overlayer li {background:#ffffff;} #section3 .sec3_QuickBox .boxarea.area3 ul.overlayer li {background:#2e3459;} #section3 .sec3_QuickBox .boxarea ul.overlayer {width:70%; display:inline-block; position:relative; margin:0 0 0 30%; z-index:2;} #section3 .sec3_QuickBox .boxarea ul.overlayer li {width:100%; margin:0 auto; padding:0; line-height:1; color:#fff; text-align:left;} #section3 .sec3_QuickBox .boxarea.area2 ul.overlayer li {color:#2d3459;} #section3 .sec3_QuickBox .boxarea ul.overlayer li span{display:block;} #section3 .sec3_QuickBox .boxarea ul.overlayer li.headimg {display:none;} #section3 .sec3_QuickBox .boxarea ul.overlayer li.headimg img {width:100%;} #section3 .sec3_QuickBox .boxarea ul.overlayer li.num span{padding:10px 0 0 20px; font-size:28px; font-weight:900; display:inline-block; } #section3 .sec3_QuickBox .boxarea ul.overlayer li.t_big span{padding:20px 20px 0 22px; font-size:17px; font-weight:700; } #section3 .sec3_QuickBox .boxarea ul.overlayer li.t_sub1 span{padding:5px 20px 0 22px; font-size:17px; font-weight:400; } #section3 .sec3_QuickBox .boxarea ul.overlayer li.t_sub2 span{padding:30px 20px 20px 22px; font-size:15px; font-weight:300; opacity:0.8; } #section3 .sec3_QuickBox .area1 {left: -10%; position:relative; transition: all 600ms ease; opacity:0;} body.fp-viewing-3rdPage #section3 .area1 {left: 0%; opacity:1;} #section3 .sec3_QuickBox .area2 {position:relative; transition: all 600ms ease; opacity:0;} body.fp-viewing-3rdPage #section3 .area2 {left: 0%; opacity:1;} #section3 .sec3_QuickBox .area3 {right: -10%; position:relative; transition: all 600ms ease; opacity:0;} body.fp-viewing-3rdPage #section3 .area3 {right: 0%; opacity:1;} #section4 {background:url(/images/main/section/section4_bg.jpg) no-repeat 50% 50%; background-size:cover; } #section4 * {font-family:NotoSanskr, nsr, '나눔고딕', 'Nanum Gothic', '나눔바른고딕', '돋움' !important;} #section4 .board_area {text-align:left; width:100%; max-width:1400px; } #section4 .board_area .newsBox {width:94%; height:auto; padding:0; margin:70px 3% 20px 3%; } #section4 .board_area .newsBox h1 {font-size:20px; color:#214485; font-weight:500; width:90%; margin:20px 5% 15px 5%; padding:0;} #section4 .board_area .newsBox a {width:90%; margin:0 5%; padding:0; display:block; cursor:pointer;} #section4 .board_area .newsBox a.txt_tit {font-size:20px; color:#214485; font-weight:400; line-height:1.3; padding:0 0 15px 0; } #section4 .board_area .newsBox a.txt_con {font-size:15px; color:#686869; font-weight:300; line-height:1.3; padding:0 0 10px 0; } #section4 .board_area .newsBox a.btn_more {width:20px; height:20px; position:absolute; top:10px; right:20px; font-size:30px; color:#bfbfbf; margin:0; padding:0; display:block; text-align:right; font-weight:400; z-index:10;} #section4 .board_area .newsBox a:link, #section4 .board_area .newsBox a:visited, #section4 .board_area .newsBox a:active {} #section4 .board_area .newsBox a:hover {color:#316d1d;} #section4 .board_area .newsBox span.txtdate {font-size:12px; color:#686869; font-weight:300; line-height:1; width:90%; margin:0 5% 10px 5%; display:block;} #section4 .board_area .dataBox {width:94%; height:auto; background:#68a596; padding:0; margin:0 3% 15px 3%; display:inline-block; position:relative; overflow:hidden;} #section4 .board_area .dataBox h1 {font-size:20px; color:#fff; font-weight:500; width:90%; margin:20px 5% 15px 5%; padding:0;} #section4 .board_area .dataBox a {width:90%; margin:0 5%; padding:0; display:block; cursor:pointer;} #section4 .board_area .dataBox a.txt_tit {font-size:15px; color:#e3f5f1; font-weight:400; line-height:1.3; padding:3px 0 10px 0; } #section4 .board_area .dataBox a.btn_more {width:20px; height:20px; position:absolute; top:10px; right:20px; font-size:30px; color:#bfbfbf; margin:0; padding:0; display:block; text-align:right; font-weight:400; z-index:10;} #section4 .board_area .dataBox a:link, #section4 .board_area .dataBox a:visited, #section4 .board_area .dataBox a:active {} #section4 .board_area .dataBox a:hover {color:#fff;} #section4 .board_area .goBox {width:94%; height:auto; padding:0; margin:0 3%; } #section4 .board_area .goBox .consult {width:100%; height:auto; margin:0 0 15px 0; display:inline-block; } #section4 .board_area .goBox .consult h1 {font-size:20px; margin:20px 8% 0 20px; padding:0 0 10px 0; display:block;} #section4 .board_area .goBox .consult img {width:40%; max-width:100px; position:absolute; right:15px; top:10px; transition: transform .5s ease;} #section4 .board_area .goBox .consult a:hover img {transform: scale(1.1);} #section4 .board_area .goBox .consult span {font-size:15px; margin:0 8% 40px 20px; padding:0; width:55%; } #section4 .board_area .goBox .consult a:hover span {color:#fff;} #section4 .board_area .goBox .helpinfo {width:100%; height:auto; background:#328396; margin:0 0 60px 0; display:inline-block; } #section4 .board_area .goBox .helpinfo h1 {font-size:20px; font-weight:700; color:#fff; margin:20px 8% 0 20px; padding:0 0 10px 0; display:block;} #section4 .board_area .goBox .helpinfo table {display:table; border-collapse:collapse; width:84%; margin:0 8% 10px 20px; color:#fff;} #section4 .board_area .goBox .helpinfo table td {color:#fff; font-size:15px; font-weight:300; padding:4px; line-height:1.2; font-family: 'Roboto', Helvetica, Helvetica Neue, Arial, sans-serif, NotoSanskr, nsr, 나눔고딕, 'Nanum Gothic', 나눔바른고딕, 돋움; } #section4 .board_area {bottom: 0%; position:relative; transition: all 600ms ease; opacity:0.5;} body.fp-viewing-4thpage #section4 .board_area {bottom:0%; opacity:1;} #section5 {} #section5 .copyArea {text-align:left; width:100%; max-width:1300px; display: grid; /*grid-template-columns: repeat(3, 1fr);*/ grid-template-columns: 90%; grid-row-gap: 0px; grid-column-gap: 0px; vertical-align:top; position:relative; padding:0; margin:70px 5%; overflow:hidden;} #section5 .copyArea .container_A {width:100%; margin-bottom:30px; max-width:700px; overflow:hidden; border:0px solid #00ff00;} #section5 .copyArea .container_B {width:100%; max-width:700px; margin-bottom:30px; overflow:hidden; border:0px solid #00ff00;} #section5 .copyArea .container_C { display: none; /*width:100%; max-width:700px; margin-bottom:30px; overflow:hidden; border:0px solid #00ff00;*/} #section5 .copyArea .container_C img {width:95%; padding-left:5%;} #section5 .copyArea .container_D {width:100%; max-width:700px; margin-bottom:30px; overflow:hidden; border:0px solid #00ff00;} #section5 .copyArea div {color:#888888; font-size:14px; font-weight:400; font-family:NotoSanskr, nsr, 나눔고딕, 'Nanum Gothic', 나눔바른고딕, 돋움;} #section5 .copyArea a {color:#888888;} #section5 .copyArea a:link, #section5 .copyArea a:visited, #section5 .copyArea a:active {color:#888888; font-family:NotoSanskr, nsr, 나눔고딕, 'Nanum Gothic', 나눔바른고딕, 돋움;} #section5 .copyArea a:hover {color:#fff; font-family:NotoSanskr, nsr, 나눔고딕, 'Nanum Gothic', 나눔바른고딕, 돋움;} #section5 .copyArea .container_A div {padding-bottom:10px;} #section5 .copyArea .container_A .add {font-size:14px; width:100%; max-width:540px; padding-bottom:15px; display:inline-block; overflow:hidden; } #section5 .copyArea .container_A .number {color:#bbbbbb; font-size:14px; width:45%; max-width:540px; display:inline-block; margin:0 2% 0 0; } #section5 .copyArea .container_A .number span {color:#fff; font-weight:400; display:inline-block; padding:0 10px 0 0;} #section5 .copyArea .container_B span {width:45%; max-width:540px; margin:0 2% 8px 0; padding:0; display:inline-block; } #section5 .copyArea .container_D a.filedown {text-align:center; display:block; padding:10px 10px 10px 10px; margin:0; border:1px solid #3b4168; background:#2e3459; border-radius:10px; cursor:pointer;} #section5 .copyArea .container_D a.filedown img {padding:5px 0 10px 0; display:inline-block; border:0; opacity:0.7;} #section5 .copyArea .container_D a.filedown div {font-size:14px; display:inline-block; padding:0; margin:0;} #section5 .copyArea .container_D a.filedown div span {font-size:11px; padding-left:2px; } #section5 .copyArea .container_D a.filedown:hover div {color:#fff;} #section5 .copyArea .container_D a.filedown:hover img {opacity:1;} #section5 .copyArea .container_COPY { grid-column-start: 1; grid-column-end: 2; margin:30px 0; } #section5 .copyArea .container_COPY span {color:#bbbbbb; font-weight:700;} #section5 .copyArea h1 {font-size:18px; font-weight:700; color:#fff; padding:0 0 25px 0; font-family: 'Roboto', Helvetica, Helvetica Neue, Arial, sans-serif, NotoSanskr, nsr, 나눔고딕, 'Nanum Gothic', 나눔바른고딕, 돋움; } } @media only screen and (max-width: 479px) and (min-width: 250px) { #sec1_dek {width:100%; } #section1 {} #section1 .dek1 {font-size:15px; color:#fff; font-weight:400;} #section1 .dek2 {font-size:35px; color:#fff; font-weight:900; line-height:1.1; margin:0 0 20px 0; } #section1 .dek3 {border-bottom:3px solid #3d5cc9; width:40px; display:block; margin:0 0 15px 0;} #section1 .dek4 {width:88%; font-size:18px; color:#fff; font-weight:400; text-align:left; line-height:1.3; padding:0; margin:10px 0 320px 0;} #section1 .dek1 { left: 0%; } #section1 .dek2 { left: -10%; } #section1 .dek3 { left: -20%; } #section1 .dek4 { left: -30%; } #section1 .showpd1 { top:110%; left: 0%; height:278px; } #section1 .showpd1 img {width:100%; max-width:130px;} #section1 .showpd2 { top:110%; left: 30%; height:auto; } #section1 .showpd2 img {width:100%; max-width:130px;} #section1 .showpd3 { top:122%; left: 53%; height:auto; } #section1 .showpd3 img {width:100%; max-width:140px;} #section1 .showpd4 { top:125%; left: 100%; height:auto;} #section1 .showpd4 img {width:100%; max-width:130px;} body.fp-viewing-firstPage #section1 .dek1{ left: 7%; opacity:1;} body.fp-viewing-firstPage #section1 .dek2{ left: 7%; opacity:1;} body.fp-viewing-firstPage #section1 .dek3{ left: 7%; opacity:1;} body.fp-viewing-firstPage #section1 .dek4{ left: 7%; opacity:1;} body.fp-viewing-firstPage #section1 .showpd1{ top:140%; left: 11%; opacity:1;} body.fp-viewing-firstPage #section1 .showpd2{ top:143%; left: 53%; opacity:1;} body.fp-viewing-firstPage #section1 .showpd3{ top:265%; left: 11%; opacity:1;} body.fp-viewing-firstPage #section1 .showpd4{ top:250%; left: 53%; opacity:1;} #section2 .sec2_left {top:0; left: -1000%; position:absolute; display:inline-block; opacity:0; transition: all 600ms ease; } #section2 .sec2_right {bottom:-40%; right: -100%; position:absolute; display:inline-block; opacity:0; transition: all 600ms ease; } body.fp-viewing-secondPage #section2 .sec2_left{ top:0%; left: 0%; opacity:0.5;} body.fp-viewing-secondPage #section2 .sec2_right{ bottom:-40%; right: -0%; opacity:0.5;} .sec2_showroom {width:100%; max-width:1200px; border:0px solid #ff00ff; display:inline-block; position:relative; padding:0; margin:60px auto 0 auto;} .sec2_showroom .pdbox {/*width:258px;*/ width:45%; height:auto; display:inline-block; position:relative; margin:0 1% 20px 1%; } .sec2_showroom ul.sec2txt {display:none; right:-100%; width:100%; display:block; position:relative; margin:0 0 10px 0; text-align:center; opacity:0; transition: all 600ms ease;} .sec2_showroom ul.sec2txt li {color:#fff; text-align:center; line-height:1; } .sec2_showroom ul.sec2txt li.big {font-size:25px; font-weight:700; } .sec2_showroom ul.sec2txt li.line {display:none; } .sec2_showroom ul.sec2txt li.line span {} .sec2_showroom ul.sec2txt li.small {margin:10px 0 20px 0; font-size:20px; font-weight:300; } .sec2_showroom .pdbox div.pdimg {width:100%; max-width:200px; height:auto; min-height:150px; display:inline-block; position:relative; text-align:center; overflow:hidden; background-color:rgba(15,117,51,0.8); border-radius:10px;} .sec2_showroom .pdbox div.pdimg img {width:100%; max-width:130px; vertical-align:middle; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; transition: transform .5s ease; } .sec2_showroom .pdbox a:hover div.pdimg img {transform: scale(1.3);} .sec2_showroom .pdbox div.arrow {width:60px; height:60px; position:absolute; top:113px; left:0; right:0; margin:0 auto; padding:0; z-index:10; background-color:rgba(4,38,16,0.8); border-radius:50%;} .sec2_showroom .pdbox div.arrow img {width:100%; max-width:31px; vertical-align:middle; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;} .sec2_showroom .pdbox div.pdname {width:98%; margin:35px 1% 20px 0; line-height:1.5; font-size:16px; font-weight:400; color:#fff; display:inline-block; position:relative; text-align:center; } body.fp-viewing-secondPage #section2 .sec2_showroom ul.sec2txt {top:0; right:0px; opacity:1;} #section3 .intro{ left: -130%; position:relative; transition: all 600ms ease; } #section3 .sec3_QuickBox {width:100%; max-width:1200px; border:0px solid #ff00ff; display:inline-block; position:relative; padding:0; margin:30px auto 0 auto;} #section3 .sec3_QuickBox .boxarea {vertical-align:top; border:0px solid #00ff00; width:98%; height:33%; display:inline-block; position:relative; margin:0 1% 10px 1%; padding:0; text-align:left; overflow:hidden;} #section3 .sec3_QuickBox .area1 .bg {width:90%; max-width:479px; height:200px; position:absolute; top:0; left:-40%; background:url(/images/main/section/section3_man1.jpg) no-repeat center top; background-size:100%; z-index:1; display:inline-block;} #section3 .sec3_QuickBox .area2 .bg {width:90%; max-width:479px; height:200px; position:absolute; top:0; left:0; background:url(/images/main/section/section3_man3.jpg) no-repeat center -120px; background-size:cover; z-index:1; display:inline-block;} #section3 .sec3_QuickBox .area3 .bg {width:90%; max-width:479px; height:200px; position:absolute; top:0; left:0; background:url(/images/main/section/section3_man2.jpg) no-repeat center -115px; background-size:cover; z-index:1; display:inline-block;} #section3 .sec3_QuickBox .boxarea.area1 ul.overlayer li {background:#7483d1;} #section3 .sec3_QuickBox .boxarea.area2 ul.overlayer li {background:#ffffff;} #section3 .sec3_QuickBox .boxarea.area3 ul.overlayer li {background:#2e3459;} #section3 .sec3_QuickBox .boxarea ul.overlayer {width:70%; display:inline-block; position:relative; margin:0 0 0 30%; z-index:2;} #section3 .sec3_QuickBox .boxarea ul.overlayer li {width:100%; margin:0 auto; padding:0; line-height:1; color:#fff; text-align:left;} #section3 .sec3_QuickBox .boxarea.area2 ul.overlayer li {color:#2d3459;} #section3 .sec3_QuickBox .boxarea ul.overlayer li span{display:block;} #section3 .sec3_QuickBox .boxarea ul.overlayer li.headimg {display:none;} #section3 .sec3_QuickBox .boxarea ul.overlayer li.headimg img {width:100%;} #section3 .sec3_QuickBox .boxarea ul.overlayer li.num span{padding:10px 0 0 20px; font-size:28px; font-weight:900; display:inline-block; } #section3 .sec3_QuickBox .boxarea ul.overlayer li.t_big span{padding:20px 20px 0 22px; font-size:17px; font-weight:700; } #section3 .sec3_QuickBox .boxarea ul.overlayer li.t_sub1 span{padding:5px 20px 0 22px; font-size:17px; font-weight:400; } #section3 .sec3_QuickBox .boxarea ul.overlayer li.t_sub2 span{padding:30px 20px 20px 22px; font-size:15px; font-weight:300; opacity:0.8; } #section3 .sec3_QuickBox .area1 {left: -10%; position:relative; transition: all 600ms ease; opacity:0;} body.fp-viewing-3rdPage #section3 .area1 {left: 0%; opacity:1;} #section3 .sec3_QuickBox .area2 {position:relative; transition: all 600ms ease; opacity:0;} body.fp-viewing-3rdPage #section3 .area2 {left: 0%; opacity:1;} #section3 .sec3_QuickBox .area3 {right: -10%; position:relative; transition: all 600ms ease; opacity:0;} body.fp-viewing-3rdPage #section3 .area3 {right: 0%; opacity:1;} #section4 {background:url(/images/main/section/section4_bg.jpg) no-repeat 50% 50%; background-size:cover; } #section4 * {font-family:NotoSanskr, nsr, '나눔고딕', 'Nanum Gothic', '나눔바른고딕', '돋움' !important;} #section4 .board_area {text-align:left; width:100%; max-width:1400px; } #section4 .board_area .newsBox {width:94%; height:auto; padding:0; margin:70px 3% 20px 3%; } #section4 .board_area .newsBox h1 {font-size:20px; color:#214485; font-weight:500; width:90%; margin:20px 5% 15px 5%; padding:0;} #section4 .board_area .newsBox a {width:90%; margin:0 5%; padding:0; display:block; cursor:pointer;} #section4 .board_area .newsBox a.txt_tit {font-size:20px; color:#214485; font-weight:400; line-height:1.3; padding:0 0 15px 0; } #section4 .board_area .newsBox a.txt_con {font-size:15px; color:#686869; font-weight:300; line-height:1.3; padding:0 0 10px 0; } #section4 .board_area .newsBox a.btn_more {width:20px; height:20px; position:absolute; top:10px; right:20px; font-size:30px; color:#bfbfbf; margin:0; padding:0; display:block; text-align:right; font-weight:400; z-index:10;} #section4 .board_area .newsBox a:link, #section4 .board_area .newsBox a:visited, #section4 .board_area .newsBox a:active {} #section4 .board_area .newsBox a:hover {color:#316d1d;} #section4 .board_area .newsBox span.txtdate {font-size:12px; color:#686869; font-weight:300; line-height:1; width:90%; margin:0 5% 10px 5%; display:block;} #section4 .board_area .dataBox {width:94%; height:auto; background:#68a596; padding:0; margin:0 3% 15px 3%; display:inline-block; position:relative; overflow:hidden;} #section4 .board_area .dataBox h1 {font-size:20px; color:#fff; font-weight:500; width:90%; margin:20px 5% 15px 5%; padding:0;} #section4 .board_area .dataBox a {width:90%; margin:0 5%; padding:0; display:block; cursor:pointer;} #section4 .board_area .dataBox a.txt_tit {font-size:15px; color:#e3f5f1; font-weight:400; line-height:1.3; padding:3px 0 10px 0; } #section4 .board_area .dataBox a.btn_more {width:20px; height:20px; position:absolute; top:10px; right:20px; font-size:30px; color:#bfbfbf; margin:0; padding:0; display:block; text-align:right; font-weight:400; z-index:10;} #section4 .board_area .dataBox a:link, #section4 .board_area .dataBox a:visited, #section4 .board_area .dataBox a:active {} #section4 .board_area .dataBox a:hover {color:#fff;} #section4 .board_area .goBox {width:94%; height:auto; padding:0; margin:0 3%; } #section4 .board_area .goBox .consult {width:100%; height:auto; margin:0 0 15px 0; display:inline-block; } #section4 .board_area .goBox .consult h1 {font-size:20px; margin:20px 8% 0 20px; padding:0 0 10px 0; display:block;} #section4 .board_area .goBox .consult img {width:40%; max-width:100px; position:absolute; right:15px; top:10px; transition: transform .5s ease;} #section4 .board_area .goBox .consult a:hover img {transform: scale(1.1);} #section4 .board_area .goBox .consult span {font-size:15px; margin:0 8% 40px 20px; padding:0; width:55%; } #section4 .board_area .goBox .consult a:hover span {color:#fff;} #section4 .board_area .goBox .helpinfo {width:100%; height:auto; background:#328396; margin:0 0 60px 0; display:inline-block; } #section4 .board_area .goBox .helpinfo h1 {font-size:20px; font-weight:700; color:#fff; margin:20px 8% 0 20px; padding:0 0 10px 0; display:block;} #section4 .board_area .goBox .helpinfo table {display:table; border-collapse:collapse; width:84%; margin:0 8% 10px 20px; color:#fff;} #section4 .board_area .goBox .helpinfo table td {color:#fff; font-size:15px; font-weight:300; padding:4px; line-height:1.2; font-family: 'Roboto', Helvetica, Helvetica Neue, Arial, sans-serif, NotoSanskr, nsr, 나눔고딕, 'Nanum Gothic', 나눔바른고딕, 돋움; } #section4 .board_area {bottom: 0%; position:relative; transition: all 600ms ease; opacity:0.5;} body.fp-viewing-4thpage #section4 .board_area {bottom:0%; opacity:1;} #section5 {} #section5 .copyArea {text-align:left; width:100%; max-width:1300px; display: grid; /*grid-template-columns: repeat(3, 1fr);*/ grid-template-columns: 90%; grid-row-gap: 0px; grid-column-gap: 0px; vertical-align:top; position:relative; padding:0; margin:70px 5%; overflow:hidden;} #section5 .copyArea .container_A {width:100%; margin-bottom:30px; max-width:700px; overflow:hidden; border:0px solid #00ff00;} #section5 .copyArea .container_B {width:100%; max-width:700px; margin-bottom:30px; overflow:hidden; border:0px solid #00ff00;} #section5 .copyArea .container_C { display: none; /*width:100%; max-width:700px; margin-bottom:30px; overflow:hidden; border:0px solid #00ff00;*/} #section5 .copyArea .container_C img {width:95%; padding-left:5%;} #section5 .copyArea .container_D {width:100%; max-width:700px; margin-bottom:30px; overflow:hidden; border:0px solid #00ff00;} #section5 .copyArea div {color:#888888; font-size:14px; font-weight:400; font-family:NotoSanskr, nsr, 나눔고딕, 'Nanum Gothic', 나눔바른고딕, 돋움;} #section5 .copyArea a {color:#888888;} #section5 .copyArea a:link, #section5 .copyArea a:visited, #section5 .copyArea a:active {color:#888888; font-family:NotoSanskr, nsr, 나눔고딕, 'Nanum Gothic', 나눔바른고딕, 돋움;} #section5 .copyArea a:hover {color:#fff; font-family:NotoSanskr, nsr, 나눔고딕, 'Nanum Gothic', 나눔바른고딕, 돋움;} #section5 .copyArea .container_A div {padding-bottom:10px;} #section5 .copyArea .container_A .add {font-size:14px; width:100%; max-width:540px; padding-bottom:15px; display:inline-block; overflow:hidden; } #section5 .copyArea .container_A .number {color:#bbbbbb; font-size:14px; width:45%; max-width:540px; display:inline-block; margin:0 2% 0 0; } #section5 .copyArea .container_A .number span {color:#fff; font-weight:400; display:inline-block; padding:0 10px 0 0;} #section5 .copyArea .container_B span {width:45%; max-width:540px; margin:0 2% 8px 0; padding:0; display:inline-block; } #section5 .copyArea .container_D a.filedown {text-align:center; display:block; padding:10px 10px 10px 10px; margin:0; border:1px solid #3b4168; background:#2e3459; border-radius:10px; cursor:pointer;} #section5 .copyArea .container_D a.filedown img {padding:5px 0 10px 0; display:inline-block; border:0; opacity:0.7;} #section5 .copyArea .container_D a.filedown div {font-size:14px; display:inline-block; padding:0; margin:0;} #section5 .copyArea .container_D a.filedown div span {font-size:11px; padding-left:2px; } #section5 .copyArea .container_D a.filedown:hover div {color:#fff;} #section5 .copyArea .container_D a.filedown:hover img {opacity:1;} #section5 .copyArea .container_COPY { grid-column-start: 1; grid-column-end: 2; margin:30px 0; } #section5 .copyArea .container_COPY span {color:#bbbbbb; font-weight:700;} #section5 .copyArea h1 {font-size:18px; font-weight:700; color:#fff; padding:0 0 25px 0; font-family: 'Roboto', Helvetica, Helvetica Neue, Arial, sans-serif, NotoSanskr, nsr, 나눔고딕, 'Nanum Gothic', 나눔바른고딕, 돋움; } }