@charset "utf-8"; @import url("fonts.css"); @import url("reset.css"); /* 공통 라이브러리 스타일 */ h2.section-title { display:inline-block; padding-bottom:15px; border-bottom:6px solid #fdd947; font-size:40px; font-weight:700; color:#000; } h4.section-content-title { font-size:18px; font-weight:500; color:#000; line-height:150%; } a.aButton { display:inline-block; padding:10px 22px; font-size:14px; font-weight:600; color:#000; border:4px solid #000; background:transparent; transition:0.3s; } a.aButton:hover { background:#000; color:#fff; } a.aButtonBlack { text-transform:uppercase; display:inline-block; padding:15px 28px; font-size:14px; font-weight:600; color:#fff; border:2px solid #000; background:#000; transition:0.3s; } a.aButtonBlack:hover { background:#fff; color:#000; } button.aButtonBlack { cursor:pointer; text-transform:uppercase; display:inline-block; padding:15px 25px; font-size:14px; font-weight:600; color:#fff; border:2px solid #000; background:#000; transition:0.3s; } button.aButtonBlack:hover { background:#fff; color:#000; } #header { z-index:3; position:fixed; top:0; left:0; width:100%; height:75px; border-bottom:1px solid rgba(255,255,255, .3); background:rgba(0,0,0, 0); transition:all 0.25s; } #header.addClassHeader { border-bottom:0; height:60px; background:rgba(0,0,0, 1); } #header>div { width:100%; max-width:1170px; height:100%; margin:0 auto; } /* 로고와 메인메뉴 좌측박스 */ #header>div .header-nav-wrap { float:left; padding-left:15px; } #header>div .header-nav-wrap>ul { width:100%; } #header>div .header-nav-wrap>ul>li { display: inline-block; } /* 로고 */ #header>div .header-nav-wrap>ul>li>h2 { padding:22.5px 0; transition:all 0.25s; } #header.addClassHeader>div .header-nav-wrap>ul>li>h2 { padding:15px 0; } #header>div .header-nav-wrap>ul>li>h2>a>img { width:auto; height:30px; } /* 세로구분선 */ #header>div .header-nav-wrap>ul>li>span { display:block; margin:30px 20px 25px 20px; transition:all 0.25s; } #header.addClassHeader>div .header-nav-wrap>ul>li>span { margin:22.5px 20px 17.5px 20px; } #header>div .header-nav-wrap>ul>li>span>i { display:block; width:1px; height:20px; background:rgba(255,255,255, .7); } /* 메인메뉴 */ #header>div .header-nav-wrap>ul>li>nav { width:100%; } #header>div .header-nav-wrap>ul>li>nav>ul { padding:33px 0 30px 0; transition:all 0.25s; } #header.addClassHeader>div .header-nav-wrap>ul>li>nav>ul { padding:25.5px 0 22.5px 0; } #header>div .header-nav-wrap>ul>li>nav>ul>li { display:inline-block; margin:0 20px; } #header>div .header-nav-wrap>ul>li>nav>ul>li:first-child { margin-left:15px; } #header>div .header-nav-wrap>ul>li>nav>ul>li>a { display:block; padding-bottom:4px; border-bottom:1px solid rgba(255,255,255, 0); color:rgba(255,255,255, 1); font-size:12px; transition:all 0.25s; } #header>div .header-nav-wrap>ul>li>nav>ul>li>a.addMainbt { border-bottom:1px solid rgba(255,255,255, 1); } #header>div .header-nav-wrap>ul>li>nav>ul>li>a:hover { color:rgba(255,255,255, .7); } /* 사이드메뉴버튼 우측박스 */ #header>div .header-aside-wrap { float:right; padding-right:15px; } #header>div .header-aside-wrap>ul { padding:19px 0 16px 0; transition:all 0.25s; } #header.addClassHeader>div .header-aside-wrap>ul { padding:11.5px 0 8.5px 0; } #header>div .header-aside-wrap>ul>li { display:inline-block; } #header>div .header-aside-wrap>ul>li>span { display:block; padding:14px 10px 14px 0; color:#fff; font-size:12px; } #header>div .header-aside-wrap>ul>li>a { text-transform:uppercase; color:#fff; font-size:12px; display:block; padding:12px 20px; border:2px solid #fff; background:rgba(255,255,255, 0); transition:all 0.25s; } #header>div .header-aside-wrap>ul>li>a:hover { color:#555; background:rgba(255,255,255, 1); } /* 모바일전용 앱바 박스 */ #header>div .appbar-wrp { display:none; float:right; padding-right:15px; } #header>div .appbar-wrp>span { display:block; width:24px; height:14px; margin:30px 0 29px 0; transition:all 0.3s; } #header.addClassHeader>div .appbar-wrp>span { margin:24px 0 24px 0; } #header>div .appbar-wrp>span>a { position:relative; display:block; width:100%; height:100%; } #header>div .appbar-wrp>span>a>i { position:absolute; right:0; display:block; width:100%; height:2px; background:#fff; } #header>div .appbar-wrp>span>a>i.appbar-line0 { top:0; transition:all 0.3s; } #header>div .appbar-wrp>span>a.addClassAppbarX>i.appbar-line0 { top:50%; margin-top:-1px; transform:rotate(-45deg); } #header>div .appbar-wrp>span>a>i.appbar-line1 { top:50%; margin-top:-1px; transition:all 0.3s; width:70%; } #header>div .appbar-wrp>span>a.addClassAppbarX>i.appbar-line1 { display:none; } #header>div .appbar-wrp>span>a>i.appbar-line2 { bottom:0; transition:all 0.3s; } #header>div .appbar-wrp>span>a.addClassAppbarX>i.appbar-line2 { bottom:50%; margin-bottom:-1px; transform:rotate(45deg); } /* 모바일전용 앱바 메뉴 박스 */ .appbar-menu-wrap { display:none; z-index:4; position:fixed; top:76px; right:-100%; width:100%; height:100%; background:rgba(0,0,0, .96); transition:all 0.3s; } .appbar-menu-wrap.addClassHeader { top:61px; right:0;} .appbar-menu-wrap>nav { width:100%; } .appbar-menu-wrap>nav>ul { padding:0 20% 10% 20%; } .appbar-menu-wrap>nav>ul>li { border-bottom:1px solid #444; } .appbar-menu-wrap>nav>ul>li>a { display:block; font-size:14px; color:#ddd; padding:20px 20px; background:#000; transition:all 0.3s; } .appbar-menu-wrap>nav>ul>li>a:hover { color:#fff; background:#222; } #main { z-index:2; position:relative; width:100%; } #main #section1 { width:100%; } #main #section1 .slide-container { position:relative; width:100%; overflow:visible; } #main #section1 .slide-container .slide-view { width:100%; overflow:hidden; cursor:url(../img/icon-move-light.png),move; } /* 슬라이드박스 */ #main #section1 .slide-container .slide-view .slide-wrap { z-index:1; position:relative; width:500%; margin-left:-100%; height:969px; /* js height : winH 값 */ } #main #section1 .slide-container .slide-view .slide-wrap .slide { float:left; width:1903px; /* js width: winW 창너비 로 설정 */ height:100%; } /* 슬라이드 배경이미지 박스 */ #main #section1 .slide-container .slide-view .slide-wrap .slide .slide-bgImg { position:relative; width:100%; height:100%; } #main #section1 .slide-container .slide-view .slide-wrap .slide .slide-bgImg:after { content:''; display:block; z-index:1; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(37,37,37, .7); } #main #section1 .slide-container .slide-view .slide-wrap .slide0 .slide-bgImg { background:url(../img/slider-img1.jpg) no-repeat 50% 0; background-size:cover; } #main #section1 .slide-container .slide-view .slide-wrap .slide1 .slide-bgImg { background:url(../img/slider-img2.jpg) no-repeat 50% 0; background-size:cover; } #main #section1 .slide-container .slide-view .slide-wrap .slide2 .slide-bgImg { background:url(../img/slider-img3.jpg) no-repeat 50% 0; background-size:cover; } /* 슬라이드 콘텐츠 */ #main #section1 .slide-container .slide-view .slide-wrap .slide .slide-bgImg .slide-content { width:100%; max-width:1170px; margin:0 auto; } #main #section1 .slide-container .slide-view .slide-wrap .slide .slide-bgImg .slide-content>div { padding:0 15px;} /* 슬라이드 타이틀 박스 */ #main #section1 .slide-container .slide-view .slide-wrap .slide .slide-bgImg .slide-content>div .slide-title-wrap { z-index:2; position:relative; top:280px; /* js top : txtT 값 */ } #main #section1 .slide-container .slide-view .slide-wrap .slide .slide-bgImg .slide-content>div .slide-title-wrap>h2 { display:inline-block; font-size:100px; color:#fff; text-transform:uppercase; font-weight:700; } #main #section1 .slide-container .slide-view .slide-wrap .slide .slide-bgImg .slide-content>div .slide-title-wrap>h2>span {display:block;} #main #section1 .slide-container .slide-view .slide-wrap .slide .slide-bgImg .slide-content>div .slide-title-wrap>h2>i { display:block; width:100%; height:8px; margin:9% 0; background:#fdd947; } #main #section1 .slide-container .slide-view .slide-wrap .slide .slide-bgImg .slide-content>div .slide-title-wrap>h4 { font-size:15px; color:#fff; text-transform:uppercase; } #main #section1 .slide-container .pageBt-wrap { z-index:2; position:absolute; left:0; bottom:30px; width:100%; height:15px; text-align:center; } #main #section1 .slide-container .pageBt-wrap>li { display:inline-block; width:30px; height:15px; margin:0 5px; } #main #section1 .slide-container .pageBt-wrap>li>a { display:block; width:100%; height:3px; padding:10px 5px; } #main #section1 .slide-container .pageBt-wrap>li>a>i { display:block; width:100%; height:3px; background:rgba(255,255,255, 0.5); transition:all 0.25s; } #main #section1 .slide-container .pageBt-wrap>li>a.addClassPage>i { background:rgba(255,255,255, 1); } #main #section2 { width:100%; padding:130px 0; border-bottom:1px solid rgba(0,0,0, .15); background:#fff; } #main #section2>div { width:100%; max-width:1170px; margin:0 auto; } /* 섹션2 타이틀 */ #main #section2>div .section2-title { padding:0 15px 70px 15px; } /* 섹션2 콘텐츠 */ #main #section2>div .section2-content { width:100%; } /* 섹션2 콘텐츠 좌측박스 */ #main #section2>div .section2-content .section2-content-left { float:left; width:40%; } #main #section2>div .section2-content .section2-content-left>ul { padding:0 15px; } #main #section2>div .section2-content .section2-content-left>ul>li { } #main #section2>div .section2-content .section2-content-left>ul>li>p { font-size:14px; color:#626262; line-height:160%; padding:30px 0; } #main #section2>div .section2-content .section2-content-left>ul>li>span { display:block; } /* 섹션2 콘텐츠 우측박스 */ #main #section2>div .section2-content .section2-content-right { float:left; width:60%; } #main #section2>div .section2-content .section2-content-right>ul { padding:0 15px 0 110px; } #main #section2>div .section2-content .section2-content-right>ul>li { float:left; width:50%; } #main #section2>div .section2-content .section2-content-right>ul>li>ul { padding:0 28px 15px 28px; } #main #section2>div .section2-content .section2-content-right>ul>li>ul>li { padding-bottom:10px; } #main #section2>div .section2-content .section2-content-right>ul>li>ul>li:first-child>span { display:block; padding-bottom:10px; } #main #section2>div .section2-content .section2-content-right>ul>li>ul>li>span>i.icon { font-size:40px; color:#9a9a9a; } #main #section2>div .section2-content .section2-content-right>ul>li>ul>li>h3 { font-size:13px; color:#000; font-weight:700; } #main #section2>div .section2-content .section2-content-right>ul>li>ul>li>h3>span { } #main #section2>div .section2-content .section2-content-right>ul>li>ul>li:nth-child(3)>span { display:block; padding:10px 0; } #main #section2>div .section2-content .section2-content-right>ul>li>ul>li>span>i.line-yellow-h2-w30 { display:inline-block; width:30px; height:2px; background:#fdd947; } #main #section2>div .section2-content .section2-content-right>ul>li>ul>li>p { font-size:14px; line-height:160%; color:#626262; padding-bottom:15px; } #main #section3 { width:100%; padding:130px 0; background:#fff; } #main #section3>div { width:100%; max-width:1170px; margin:0 auto; } #main #section3>div>ul { padding:0 15px; } #main #section3>div>ul>li { float:left; width:25%; } #main #section3>div>ul>li>div { text-align:center; border-right:1px solid #ddd; } #main #section3>div>ul>li:last-child>div { border-right:0; } #main #section3>div>ul>li>div>h2 { font-size:35px; color:#000; font-weight:700; padding-bottom:15px; } #main #section3>div>ul>li>div>p { font-size:11px; color:#626262; font-weight:600; } #main #section4 { width:100%;} #main #section4>div { width:100%; } #main #section4>div .section4-left { float:left; width:50%; } #main #section4>div .section4-left>div { width:100%; height:684px; background:url(../img/parallax-img1-1.jpg) no-repeat fixed 50% 50px; background-size:cover; } #main #section4>div .section4-right { background:#f6f6f6; float:left; width:50%; height:684px; } #main #section4>div .section4-right>div { padding:11.6959064% 4.2038886%; } #main #section4>div .section4-right>div>ul { width:100%; } #main #section4>div .section4-right>div>ul>li { float:left; width:50%; } #main #section4>div .section4-right>div>ul>li>ul { padding:30px 16%; background:rgba(255,255,255, 0); outline:6px solid transparent; transition:all 0.5s; } #main #section4>div .section4-right>div>ul>li:hover>ul { background:rgba(255,255,255, 1); outline:6px solid #fdd947; } #main #section4>div .section4-right>div>ul>li>ul>li { text-align:center; } #main #section4>div .section4-right>div>ul>li>ul>li>span { display:block; } #main #section4>div .section4-right>div>ul>li>ul>li>span>i { font-size:60px; color:#fdd947; } #main #section4>div .section4-right>div>ul>li>ul>li>h3 { font-size:14px; color:#000; font-weight:600; padding:20px 0 10px 0; } #main #section4>div .section4-right>div>ul>li>ul>li>p { font-size:14px; color:#626262; line-height:160%; } #main #section5 { width:100%; background:#fff; padding-top:130px; } #main #section5>div { width:100%; } #main #section5>div .section5-title-menu { width:100%; max-width:1170px; margin:0 auto; padding-bottom:100px; } #main #section5>div .section5-title-menu>div { padding:0 15px; } #main #section5>div .section5-title-menu>div .section5-title { float:left; width:50%; } #main #section5>div .section5-title-menu>div .section5-menu { float:left; width:50%; } #main #section5>div .section5-title-menu>div .section5-menu>ul { padding:24px 0; } #main #section5>div .section5-title-menu>div .section5-menu>ul>li { display:inline-block; margin-right:30px; } #main #section5>div .section5-title-menu>div .section5-menu>ul>li>a { display:block; padding:4px 10px; font-size:13px; font-weight:600; background:#fff; color:#626262; transition:all 0.3s; } #main #section5>div .section5-title-menu>div .section5-menu>ul>li>a:hover { background:#fdd947; color:#000; } #main #section5>div .section5-title-menu>div .section5-menu>ul>li>a.addClasssec5Bt { background:#fdd947; color:#000; } #main #section5>div .gallery { width:100%; } #main #section5>div .gallery>ul { position:relative; width:100%; /* height: js에서정함 */} #main #section5>div .gallery>ul>li { float:left; position:absolute; width:25%; overflow:hidden; } #main #section5>div .gallery>ul>li:nth-child(1) { left:calc(25%*0); top:calc(475.75px*0); } #main #section5>div .gallery>ul>li:nth-child(2) { left:calc(25%*1); top:calc(475.75px*0); } #main #section5>div .gallery>ul>li:nth-child(3) { left:calc(25%*2); top:calc(475.75px*0); } #main #section5>div .gallery>ul>li:nth-child(4) { left:calc(25%*3); top:calc(475.75px*0); } #main #section5>div .gallery>ul>li:nth-child(5) { left:calc(25%*0); top:calc(475.75px*1); } #main #section5>div .gallery>ul>li:nth-child(6) { left:calc(25%*1); top:calc(475.75px*1); } #main #section5>div .gallery>ul>li:nth-child(7) { left:calc(25%*2); top:calc(475.75px*1); } #main #section5>div .gallery>ul>li:nth-child(8) { left:calc(25%*3); top:calc(475.75px*1); } #main #section5>div .gallery>ul>li>div { width:100%; transform:scale(0); transition:all 0.4s; } #main #section5>div .gallery>ul>li.addZoom>div { transform:scale(1); } #main #section5>div .gallery>ul>li>div>a { position:relative; display:block; width:100%; cursor:url(../img/icon-zoom.png),auto; } #main #section5>div .gallery>ul>li>div>a>span { display:block; width:100%; outline:8px solid rgba(253,217,71, 0); outline-offset:-58px; transition:all 0.4s; } #main #section5>div .gallery>ul>li>div>a:hover>span { outline:8px solid rgba(253,217,71, .98); } #main #section5>div .gallery>ul>li>div>a>span>img { z-index:1; position:relative; width:100%; opacity:1; transform:scale(1); transition:all 0.4s; } #main #section5>div .gallery>ul>li>div>a:hover>span>img { opacity:.15; transform:scale(1.1); } #main #section5>div .gallery>ul>li>div>a>strong { z-index:2; position:absolute; left:0; top:50%; margin-top:-8px; width:100%; text-align:center; height:16px; font-size:16px; color:#000; font-weight:600; opacity:0; transition:all 0.4s; text-transform:uppercase; } #main #section5>div .gallery>ul>li>div>a:hover>strong { opacity:1; } #main #section6 { width:100%; padding:130px 0; background:#fff; } #main #section6>div { width:100%; max-width:1170px; margin:0 auto; } #main #section6>div .section6-title { text-align:center; padding:0 15px; } #main #section6>div .section6-title>h2 { font-size:18px; color:#000; font-weight:500; } #main #section6>div ul.section6-content { padding:60px 15px 0 15px; text-align:center; } #main #section6>div ul.section6-content>li { display:inline-block; margin:0 5.982906%; } #main #section6>div ul.section6-content>li>a>span { display:block; padding-bottom:15px; } #main #section6>div ul.section6-content>li>a>span>i { font-size:50px; color:#fdd947; } #main #section6>div ul.section6-content>li>a>strong { font-size:11px; color:#000; font-weight:500; } #main #section7 { width:100%; } #main #section7>div { width:100%; } #main #section7>div>ul { width:100%; } #main #section7>div>ul>li { float:left; height:500px; } #main #section7>div>ul>li:nth-child(1) { width:25%; background:#000; } #main #section7>div>ul>li:nth-child(1)>div { padding:95.141px 19.9981083%; } #main #section7>div>ul>li:nth-child(1)>div>h2 { color:#fff; font-size:28px; line-height:130%; } #main #section7>div>ul>li:nth-child(2) { width:33%; } #main #section7>div>ul>li:nth-child(2)>div { height:100%; background:url(../img/agency-img1.jpg) no-repeat 50% 50%; background-size:cover; overflow:hidden; } #main #section7>div>ul>li:nth-child(2)>div>div { width:100%; height:100%; outline:5px solid #fff; outline-offset:-20px; } #main #section7>div>ul>li:nth-child(3) { width:42%; background:#f6f6f6; } #main #section7>div>ul>li:nth-child(3)>div { padding:95.141px 11.9036359%; } #main #section7>div>ul>li:nth-child(3)>div>ul { } #main #section7>div>ul>li:nth-child(3)>div>ul>li { } #main #section7>div>ul>li:nth-child(3)>div>ul>li>div { padding:15px 0; } #main #section7>div>ul>li:nth-child(3)>div>ul>li>div>h3 { font-size:14px; font-weight:600; } #main #section7>div>ul>li:nth-child(3)>div>ul>li>div>h4 { padding-top:15px; font-size:11px; color:#626262; } #main #section7>div>ul>li:nth-child(3)>div>ul>li>div>h4>strong { font-weight:500; } #main #section7>div>ul>li:nth-child(3)>div>ul>li>div>div { width:100%; height:4px; background:#dedede; } #main #section7>div>ul>li:nth-child(3)>div>ul>li>div>div>p { height:4px; background:#000; } #main #section7>div>ul>li:nth-child(3)>div>ul>li>div>div>p.graphe0 { width:80%; } #main #section7>div>ul>li:nth-child(3)>div>ul>li>div>div>p.graphe1 { width:90%; } #main #section7>div>ul>li:nth-child(3)>div>ul>li>div>div>p.graphe2 { width:95%; } #main #section7>div>ul>li:nth-child(3)>div>ul>li>div>div>p.graphe3 { width:90%; } #main #section8 { width:100%; padding:130px 0; overflow:hidden; } #main #section8>div { width:100%; max-width:1170px; margin:0 auto; } #main #section8>div>ul { width:100%; } #main #section8>div>ul>li { float:left; width:33.333%; } #main #section8>div>ul>li>div { margin:0 15px; } #main #section8>div>ul>li>div>div { position:relative; width:100%; } #main #section8>div>ul>li>div>div>ul { position:relative; top:400px; left:0; width:100%; opacity:0; } #main #section8>div>ul>li>div>div>ul>li { padding-bottom:25px; } #main #section8>div>ul>li>div>div>ul>li:last-child { padding-bottom:0; } #main #section8>div>ul>li>div>div>ul>li>div { padding:0 5%; text-align:center; } #main #section8>div>ul>li>div>div>ul>li>div>h2 { display:inline-block; width:120px; height:120px; border-radius:50%; overflow:hidden; } #main #section8>div>ul>li>div>div>ul>li>div>h2>img { width:100%; } #main #section8>div>ul>li>div>div>ul>li>div>p { letter-spacing:-0.3px; font-size:13px; line-height:170%; color:#828282;} #main #section8>div>ul>li>div>div>ul>li>div>h3 { font-size:11px; font-weight:600; } #main #section8>div>ul>li>div>div>ul>li>div>i { font-size:25px; color:#fdd947; } #main #section9 { width:100%; padding:130px 0; border-top:1px solid #ddd; } #main #section9>div { width:100%; max-width:1170px; margin:0 auto; } #main #section9>div>div { padding:0 15px; } #main #section9>div>div .section3-title { } #main #section9>div>div .section9-content { padding:70px 0 30px 0; } #main #section9>div>div .section9-content>ul { } #main #section9>div>div .section9-content>ul>li { float:left; } #main #section9>div>div .section9-content>ul>li:first-child { width:37%; } #main #section9>div>div .section9-content>ul>li:last-child { width:63%; } #main #section9>div>div .section9-content>ul>li .section9-content-right { } #main #section9>div>div .section9-content>ul>li .section9-content-right>ul { width:100%; } #main #section9>div>div .section9-content>ul>li .section9-content-right>ul>li { float:left; width:33.333%; } #main #section9>div>div .section9-content>ul>li .section9-content-right>ul>li>div { text-align:center; border-right:1px solid #ddd; } #main #section9>div>div .section9-content>ul>li .section9-content-right>ul>li:last-child>div { border-right:0; } #main #section9>div>div .section9-content>ul>li .section9-content-right>ul>li>div>h2 { font-size:35px; color:#000; font-weight:700; padding-bottom:15px; } #main #section9>div>div .section9-content>ul>li .section9-content-right>ul>li>div>p { font-size:11px; color:#626262; font-weight:600; } #main #section10 { width:100%; background:#fff;} #main #section10>div { width:100%; } #main #section10>div>ul { width:100%; } #main #section10>div>ul>li { float:left; width:25%; overflow:hidden; } #main #section10>div>ul>li>div { position:relative; } /* 배경이미지 */ #main #section10>div>ul>li>div span.sec10Image-wrap { z-index:1; opacity:0.5; position:relative; } #main #section10>div>ul>li>div span.sec10Image-wrap>img { width:100%; } /* 타이틀 */ #main #section10>div>ul>li>div h2.sec10Title-wrap { z-index:2; position:absolute; top:50%; margin-top:-17.5px; left:0; width:100%; text-align:center; } #main #section10>div>ul>li>div h2.sec10Title-wrap>span { display:inline-block; font-size:15px; padding:10px 20px; background:#fff; color:#000; text-align:center; font-weight:500; text-transform:uppercase; } /* content */ #main #section10>div>ul>li>div div.sec10Content-wrap { z-index:2; position:absolute; bottom:-100%; left:0; width:100%; background:rgba(253,217,71,.97); } #main #section10>div>ul>li>div div.sec10Content-wrap>div { padding:13.242302% 14.7136101%; text-align:center; } #main #section10>div>ul>li>div div.sec10Content-wrap>div>ul { } #main #section10>div>ul>li>div div.sec10Content-wrap>div>ul>li { color:#000; } #main #section10>div>ul>li>div div.sec10Content-wrap>div>ul>li>h3 { text-transform:uppercase; font-weight:600; font-size:15px; padding-bottom:15px; } #main #section10>div>ul>li>div div.sec10Content-wrap>div>ul>li>h4 { display:inline-block; text-transform:uppercase; font-weight:500; font-size:11px; } #main #section10>div>ul>li>div div.sec10Content-wrap>div>ul>li>h4>span { display:block; padding:20px 0; } #main #section10>div>ul>li>div div.sec10Content-wrap>div>ul>li>h4>span>i { display:block; width:100%; height:2px; background:#fff; } #main #section10>div>ul>li>div div.sec10Content-wrap>div>ul>li>div { padding-top:10px; } #main #section10>div>ul>li>div div.sec10Content-wrap>div>ul>li>div>span { margin-right:40px; } #main #section10>div>ul>li>div div.sec10Content-wrap>div>ul>li>div>span:last-child { margin-right:0; } #main #section10>div>ul>li>div div.sec10Content-wrap>div>ul>li>div>span>a { color:#000; } #main #section10>div>ul>li>div div.sec10Content-wrap>div>ul>li>div>span>a>i { font-size:18px; } #main #section11 { width:100%; background:#fff; padding:130px 0; } #main #section11>div { width:100%; } #main #section11>div .section11-title { width:100%; max-width:1170px; margin:0 auto; padding-bottom:70px; } #main #section11>div .section11-title>div { padding:0 15px; } #main #section11>div .section11-content { width:100%; max-width:1170px; margin:0 auto; } #main #section11>div .section11-content>div { padding:0 15px; } #main #section11>div .section11-content-list { width:100%; padding-top:70px; } #main #section11>div .section11-content-list>ul { width:100%; } #main #section11>div .section11-content-list>ul>li { width:100%; } #main #section11>div .section11-content-list>ul>li:nth-child(1)>div { position:relative; width:100%; height:262px; background:url(../img/blog-post-img1.jpg) no-repeat 0 0; background-size:cover; } #main #section11>div .section11-content-list>ul>li:nth-child(2)>div { position:relative; width:100%; height:262px; background:url(../img/blog-post-img2.jpg) no-repeat 0 0; background-size:cover; } #main #section11>div .section11-content-list>ul>li:nth-child(3)>div { position:relative; width:100%; height:262px; background:url(../img/blog-post-img3.jpg) no-repeat 0 0; background-size:cover; } #main #section11>div .section11-content-list>ul>li>div:before { content:''; display:block; z-index:1; position:absolute; top:0; left:0; width:100%; height:100%; background:#fff; opacity:1; } #main #section11>div .section11-content-list>ul>li.addSec11Hover>div:before { background:#626262; opacity:0.85; } #main #section11>div .section11-content-list>ul>li>div>div { z-index:2; position:relative; width:100%; max-width:1170px; height:100%; margin:0 auto; } #main #section11>div .section11-content-list>ul>li>div>div>div { width:auto; margin:0 15px; height:100%; } #main #section11>div .section11-content-list>ul>li>div>div>div span.sec11TopLine { display:block; width:50%; height:1px; } #main #section11>div .section11-content-list>ul>li>div>div>div span.sec11TopLine>i { display:block; width:100%; height:1px; background:#ddd; } #main #section11>div .section11-content-list>ul>li.addSec11Hover>div>div>div span.sec11TopLine>i { height:0; } #main #section11>div .section11-content-list>ul>li>div>div>div .section11-content-list-wrap { position:relative; left:0; padding:81px 0; transition:all 0.3s; } #main #section11>div .section11-content-list>ul>li.addSec11Hover>div>div>div .section11-content-list-wrap { left:45px; } #main #section11>div .section11-content-list>ul>li>div>div>div .section11-content-list-wrap>li:first-child { float:left; width:70px; } #main #section11>div .section11-content-list>ul>li>div>div>div .section11-content-list-wrap>li:first-child .sec11NumberTitle { position:relative; width:70px; height:64px; background:#fdd947; } #main #section11>div .section11-content-list>ul>li>div>div>div .section11-content-list-wrap>li:first-child .sec11NumberTitle>h2 { position:absolute; top:50%; margin-top:-14px; left:0; width:100%; text-align:center; } #main #section11>div .section11-content-list>ul>li>div>div>div .section11-content-list-wrap>li:first-child .sec11NumberTitle>h2>span { font-size:28px; font-weight:600; color:#000; } #main #section11>div .section11-content-list>ul>li>div>div>div .section11-content-list-wrap>li:last-child { float:left; width:90%; } #main #section11>div .section11-content-list>ul>li>div>div>div .section11-content-list-wrap>li:last-child ul.sec11TextWrap { padding-left:25px; } #main #section11>div .section11-content-list>ul>li>div>div>div .section11-content-list-wrap>li:last-child ul.sec11TextWrap>li { } #main #section11>div .section11-content-list>ul>li>div>div>div .section11-content-list-wrap>li:last-child ul.sec11TextWrap>li>div { } #main #section11>div .section11-content-list>ul>li>div>div>div .section11-content-list-wrap>li:last-child ul.sec11TextWrap>li.sec11TextWrap-row1>div>span { font-weight:500; color:#626262; transition:all 0.3s ease-in-out; } #main #section11>div .section11-content-list>ul>li.addSec11Hover>div>div>div .section11-content-list-wrap>li:last-child ul.sec11TextWrap>li.sec11TextWrap-row1>div>span { color:#fff; } #main #section11>div .section11-content-list>ul>li>div>div>div .section11-content-list-wrap>li:last-child ul.sec11TextWrap>li.sec11TextWrap-row1>div>span>a { color:#626262; font-size:11px; transition:all 0.3s ease-in-out; } #main #section11>div .section11-content-list>ul>li.addSec11Hover>div>div>div .section11-content-list-wrap>li:last-child ul.sec11TextWrap>li.sec11TextWrap-row1>div>span>a { color:#fff; } #main #section11>div .section11-content-list>ul>li>div>div>div .section11-content-list-wrap>li:last-child ul.sec11TextWrap>li.sec11TextWrap-row2>div { padding:20px 0; } #main #section11>div .section11-content-list>ul>li>div>div>div .section11-content-list-wrap>li:last-child ul.sec11TextWrap>li.sec11TextWrap-row2>div>a { font-weight:500; color:#626262; font-size:20px; transition:all 0.3s ease-in-out; } #main #section11>div .section11-content-list>ul>li.addSec11Hover>div>div>div .section11-content-list-wrap>li:last-child ul.sec11TextWrap>li.sec11TextWrap-row2>div>a { color:#fdd947; } #main #section11>div .section11-content-list>ul>li>div>div>div .section11-content-list-wrap>li:last-child ul.sec11TextWrap>li.sec11TextWrap-row3>div>span>a { color:#626262; font-size:11px; font-weight:500; transition:all 0.3s ease-in-out; } #main #section11>div .section11-content-list>ul>li.addSec11Hover>div>div>div .section11-content-list-wrap>li:last-child ul.sec11TextWrap>li.sec11TextWrap-row3>div>span>a { color:#fff; } #main #section11>div .section11-content-list>ul>li>div>div>div .section11-content-list-wrap>li:last-child ul.sec11TextWrap>li.sec11TextWrap-row3>div>span>a>i { } #main #section11>div .section11-button-wrap { width:100%; max-width:1170px; margin:0 auto; text-align:center; padding-top:100px; } #main #section11>div .section11-button-wrap>div { padding:0 15px; } #main #section12 { width:100%; background:#fdd947; padding:80px 0; } #main #section12>div { width:100%; max-width:1170px; margin:0 auto; } #main #section12>div>div { padding:0 15px; } #main #section12>div>div>div { text-align:center; } #main #section12>div>div>div>p>i { font-size:50px; color:#000; } #main #section12>div>div>div>h2 { padding:40px 0; font-size:24px; color:#000; font-weight:600; } #main #section12>div>div>div>div>span { margin:0 5px; } #main #section13 { width:100%; background:#fff; padding:130px 0; } #main #section13>div { width:100%; max-width:1170px; margin:0 auto; } #main #section13>div>div { padding:0 15px; } #main #section13>div>div .section13-title { padding-bottom:70px; } #main #section13>div>div .section13-title>div { width:100%; } #main #section13>div>div .section13-content { padding-bottom:60px; } #main #section13>div>div .section13-content>div { width:100%; } #main #section13>div>div .section13-content>div .section13-content-left { float:left; width:40%; } #main #section13>div>div .section13-content>div .section13-content-left>div { padding-right:15px; } #main #section13>div>div .section13-content>div .section13-content-right { float:left; width:60%; } #main #section13>div>div .section13-content>div .section13-content-right>div { padding-left:15px; padding-top:5px; } #main #section13>div>div .section13-content>div .section13-content-right>div>span { display:inline-block; } #main #section13>div>div .section13-content>div .section13-content-right>div>span>i { font-size:25px; color:#000; } #main #section13>div>div .section13-content>div .section13-content-right>div>span>i.icon { margin-top:-5px; margin-right:10px; } #main #section13>div>div .section13-content>div .section13-content-right>div>span>span { font-size:20px; color:#000; font-weight:500; } #main #section13>div>div .section13-content>div .section13-content-right>div>span>a { font-size:20px; color:#000; font-weight:500; } #main #section13>div>div .section13-content>div .section13-content-right>div>span.section13-vbar { margin:0 20px; } #main #section13>div>div .section13-content>div .section13-content-right>div>span.section13-vbar>i { display:block; width:2px; height:20px; background:#000; } #main #section13>div>div .section13-content-form { width:100%; } #main #section13>div>div .section13-content-form .section13-content-form-left { float:left; width:40%; } #main #section13>div>div .section13-content-form .section13-content-form-left>div { padding-right:15px; } #main #section13>div>div .section13-content-form .section13-content-form-left>div>ul { width:100%; } #main #section13>div>div .section13-content-form .section13-content-form-left>div>ul>li { padding-bottom:60px; } #main #section13>div>div .section13-content-form .section13-content-form-left>div>ul>li>div { display:inline-block; } #main #section13>div>div .section13-content-form .section13-content-form-left>div>ul>li>div>span { display:block; padding-right:50px; } #main #section13>div>div .section13-content-form .section13-content-form-left>div>ul>li>div>span>i { font-size:40px; color:#9a9a9a; } #main #section13>div>div .section13-content-form .section13-content-form-left>div>ul>li>div>div { width:100%; } #main #section13>div>div .section13-content-form .section13-content-form-left>div>ul>li>div>div>h4 { font-size:15px; font-weight:600; padding-bottom:5px; } #main #section13>div>div .section13-content-form .section13-content-form-left>div>ul>li>div>div>p { font-size:14px; line-height:200%; } #main #section13>div>div .section13-content-form .section13-content-form-left>div>ul>li>div>div>p>span { display:block; } #main #section13>div>div .section13-content-form .section13-content-form-left>div>ul>li>div>div>p>span>br { display:none; } #main #section13>div>div .section13-content-form .section13-content-form-right { float:left; width:60%; } #main #section13>div>div .section13-content-form .section13-content-form-right>div { padding-left:15px; } #main #section13>div>div .section13-content-form .section13-content-form-right>div form { width:100%; } #main #section13>div>div .section13-content-form .section13-content-form-right>div form>ul { width:100%; } #main #section13>div>div .section13-content-form .section13-content-form-right>div form>ul>li { width:100%; } #main #section13>div>div .section13-content-form .section13-content-form-right>div form>ul>li>div { padding-bottom:20px; } #main #section13>div>div .section13-content-form .section13-content-form-right>div form>ul>li:nth-child(5)>div { padding-bottom:0; } #main #section13>div>div .section13-content-form .section13-content-form-right>div form>ul>li>div>input { display:block; box-sizing:border-box; padding:12px 15px; width:100%; height:53px; border:2px solid rgba(0,0,0,.1); transition:all 0.3s; } #main #section13>div>div .section13-content-form .section13-content-form-right>div form>ul>li.error-message>div>input { border:2px solid rgba(204,0,0,1); } #main #section13>div>div .section13-content-form .section13-content-form-right>div form>ul>li>div>input::placeholder { color:#9a9a9a; } #main #section13>div>div .section13-content-form .section13-content-form-right>div form>ul>li>div>select { display:block; -webkit-appearance:none; appearance:none; background:transparent url(../img/select-arrow.png) no-repeat 97% 50%; padding:12px 15px; width:100%; height:60px; border:2px solid rgba(0,0,0,.1); color:#9a9a9a; } #main #section13>div>div .section13-content-form .section13-content-form-right>div form>ul>li>div>textarea { display:block; box-sizing:border-box; padding:12px 15px; width:100%; height:70px; border:2px solid rgba(0,0,0,.1); resize:none; transition:all 0.3s; } #main #section13>div>div .section13-content-form .section13-content-form-right>div form>ul>li.error-message>div>textarea { border:2px solid rgba(204,0,0,1); } #main #section13>div>div .section13-content-form .section13-content-form-right>div form>ul>li>div>textarea::placeholder { color:#9a9a9a; } #main #section13>div>div .section13-content-form .section13-content-form-right>div form>ul>li>div>button { margin-top:10px; } #main #section13>div>div .section13-content-form .section13-content-form-right>div form>ul>li>div>button { margin-top:10px; } #main #section13>div>div .section13-content-form .section13-content-form-right>div form>ul>li>div>span.ajax-loader { display:none; padding:23px 0 21px 5px; } #main #section13>div>div .section13-content-form .section13-content-form-right>div form>ul>li>div>span.ajax-loader.submit { display:inline-block; } #main #section13>div>div .section13-content-form .section13-content-form-right>div form>ul>li.error-text { display:none; } #main #section13>div>div .section13-content-form .section13-content-form-right>div form>ul>li.error-text.error-message { display:block; padding-top:20px; } #main #section13>div>div .section13-content-form .section13-content-form-right>div form>ul>li.error-text>div>p { padding:13px 0; text-align:center; color:#000; background:#fdd947; border:2px solid #fdd947; } #main #section13>div>div .section13-content-form .section13-content-form-right>div form>ul>li.success-text { display:none; } #main #section13>div>div .section13-content-form .section13-content-form-right>div form>ul>li.success-text.success-message { display:block; padding-top:20px; } #main #section13>div>div .section13-content-form .section13-content-form-right>div form>ul>li.success-text>div>p { padding:13px 0; text-align:center; color:#000; background:#fff; border:2px solid #398f14; } #footer { width:100%; background:#fff; border-top:1px solid #ddd; } #footer>div.footer-row1 { width:100%; padding:80px 0; max-width:1170px; margin:0 auto; } #footer>div.footer-row1>div { padding:0 15px; text-align:center; } #footer>div.footer-row1>div>div { width:100%; } #footer>div.footer-row1>div>div>h2 { width:100%; } #footer>div.footer-row1>div>div>h2>a>img { width:156px; } #footer>div.footer-row1>div>div>h4 { font-size:11px; color:#626262; padding:15px 0 60px 0; } #footer>div.footer-row1>div>div>ul { width:100%; } #footer>div.footer-row1>div>div>ul>li { display:inline-block; margin:0 2%; } #footer>div.footer-row1>div>div>ul>li>a { color:#626262; transition:all 0.3s; } #footer>div.footer-row1>div>div>ul>li>a:hover { color:#9b9b9b; } #footer>div.footer-row1>div>div>ul>li>a>i { font-size:22px; } #footer>div.footer-row2 { width:100%; padding:30px 0; background:#f6f6f6; } #footer>div.footer-row2>div { padding:0 15px; text-align:center; } #footer>div.footer-row2>div>address { } #footer>div.footer-row2>div>address>span { font-size:11px; color:#626262; } .goTop { display:none; z-index:4; position:fixed; right:50px; bottom:40px; width:25px; height:22px; } .goTop>span { display:block; width:100%; height:100%; } .goTop>span>a { display:block; color:#fff; background:#000; width:100%; height:100%; text-align:center; transition:all 0.3s; } .goTop>span>a:hover { background:#666; } .goTop>span>a>i { display:block; font-size:18px; padding:2px 0; } /* 모달창 */ .modal { display:none; z-index:5; position:fixed; top:0; left:0; width:100%; height:100%; background:#f9f9f9; } .modal .modal-img { box-shadow:2px 2px 15px rgba(0,0,0, .12); position:relative; top:50%; width:800px; margin:-400px auto 0 auto; } .modal .modal-img img { width:100%; } /* 모달창 닫기 버튼 */ .modal .modalCloseBt-wrap { position:absolute; top:0; right:0; width:55px; height:55px; } .modal .modalCloseBt-wrap img { width:100%; } /* 모달창 다음 버튼 */ .modal .modalNextBt-wrap { position:absolute; top:50%; margin-top:-31.5px; right:20px; width:42px; height:63px; } .modal .modalNextBt-wrap img { width:100%; } /* 모달창 이전 버튼 */ .modal .modalPrevBt-wrap { position:absolute; top:50%; margin-top:-31.5px; left:20px; width:42px; height:63px; } .modal .modalPrevBt-wrap img { width:100%; } /* 웹표준검사 */ .webStandard { z-index:4; position:fixed; bottom:10px; left:10px; width:80px; height:40px; }