@charset "utf-8"; /***** Common *****/ .header-top {background: #e7e7e7 !important; height: 40px;} .nmsw_no1_org:hover {background-color: #bec3ca;} .nmsw_no2_org:hover {background-color: #bec3ca;} .container {position: relative; max-width: 1280px;width:100%; margin: 0 auto; background:#e7e7e7;} .left-wrap {float: left;} .tab-list li {position: relative;float: left; display: block; padding: 0 20px; height: 40px; color: #373636; font-size: 15px;line-height: 40px; font-weight: 500; letter-spacing: -.03em; } .tab-list li:before {content: ''; position: absolute;top: 50%;left: 0; width: 1px; height: 9px; margin-top: -4px; background: #fff;} .right-wrap {float: right;} .split-list li {position: relative; float: left; display: block; padding: 0 20px; height: 40px; color: #373636; font-size: 14px; line-height: 40px; font-weight: 500; letter-spacing: -.03em;} .split-list > li + li:before {content: ''; position: absolute; top: 50%; left: 0; width: 1px; height: 9px; margin-top: -4px; background: #fff;} .clear { position:relative; width:100%; clear:both; margin:0; padding:0; visibility:hidden; font-size:0; height:0px; overflow:hidden; } .js_mobile_check {display:block;display:none;} body {overflow-x:none; position:relative; height:auto;} .layout {width:100%; max-width:1280px; margin:0 auto; position:relative;} #wrap .top_btn {display:none; overflow:hidden; opacity:0.8; position:fixed; left:auto !important; right:20px !important; z-index:999; bottom:20px; width:40px; border:1px solid #cbcbcb; border-radius:3px;} #wrap .top_btn a {display:block; width:40px; height:40px; background:#fff url(top_btn.gif) no-repeat center 50%;} #wrap .top_btn a span {width:0; height:0; line-height:0; font-size:0px; float:left; position:absolute; visibility:hidden; overflow:hidden;} .clearfix:after {content: "";clear: both;display: table;} .sound-only {display:inline-block !important;position:absolute; top:0; left:0; width:0; height:0; margin:0; padding:0; font-size:0; line-height:0; border:0; overflow:hidden;} .controls a {text-indent: -9999px;display: inline-block;position: relative;vertical-align: middle;padding: 0 7px;} .controls .btn-prev:before {content: '';position: absolute;top: 0;left: 0;width: 17px;height: 17px;background: url('control_prev.png') no-repeat center;} .controls .btn-stop:before {content: '';position: absolute;top: 0;left: 0;width: 17px;height: 17px;background: url('control_stop.png') no-repeat center;} .controls .btn-play .btn-stop { margin: -2px 0 0 0; } .controls .btn-play { display: none; margin: -1px 0 0 0;} .controls .btn-play:before {content: '';position: absolute;top: 0;left: 0;width: 20px;height: 17px;background: url('control_play.png') no-repeat center;} .controls .btn-next:before {content: '';position: absolute;top: 0;left: 0;width: 17px;height: 17px;background: url('control_next.png') no-repeat center;} .controls .btn-more:before {content: '';position: absolute;top: 0;left: 0;width: 17px;height: 17px;background: url('more_btn_img2.png') no-repeat center;background-size: contain;} .y-inner {margin: 0 auto;position: relative;} .roll {padding: 13px 0 ;background: #ffffff;border-top: 1px solid #eaeaea;} .roll .y-inner .fl {width: 260px;background: url('line.jpg') no-repeat right center;} .roll .y-inner .fl a {display: inline-block;} .roll .y-inner .fl a:nth-child(1) {margin-right: 25px;} .roll .y-inner .roll-slide {position: relative;width: 92%;margin: 0 0 0 50px;} .roll .y-inner .roll-slide .swiper-container {width: 100%;} .roll .y-inner .roll-slide .roll-prev {width: 25px;height: 25px;display: block;position: absolute;z-index: 10;top: 50%;left: -34px;margin: -14px 0 0 0;} .roll .y-inner .roll-slide .roll-prev:before {content: '';width: 25px;height: 25px;position: absolute;left: 0;top: 0;background: url('roll_prev_btn.png') no-repeat center;} .roll .y-inner .roll-slide .roll-next {width: 25px;height: 25px;display: block;position: absolute;z-index: 10;top: 50%;right: -22px;margin: -14px 0 0 0;} .roll .y-inner .roll-slide .roll-next:before {content: '';width: 25px;height: 25px;position: absolute;left: 0;top: 0;background: url('roll_next_btn.png') no-repeat center;} .roll .y-inner .roll-slide .roll-stop {width: 25px;height: 25px;display: block;position: absolute;z-index: 10;top: 50%;right: -50px;margin: -14px 0 0 0;} .roll .y-inner .roll-slide .roll-stop:before {content: '';position: absolute;top: 0;left: 0;width: 25px;height: 25px;background: url('roll_stop.png') no-repeat center;} .roll .y-inner .roll-slide .roll-play {width: 25px;height: 25px;display: block;position: absolute;z-index: 10;top: 50%;right: -50px;margin: -14px 0 0 0;display: none;} .roll .y-inner .roll-slide .roll-play:before {content: '';position: absolute;top: 0;left: 0;width: 25px;height: 25px;background: url('roll_play.png') no-repeat center;} .roll .y-inner .roll-slide .roll-more {width: 25px;height: 25px;display: block;position: absolute;z-index: 10;top: 50%;right: -80px;margin: -14px 0 0 0;} .roll .y-inner .roll-slide .roll-more:before {content: '';position: absolute;top: 0;left: 0;width: 25px;height: 25px;background: url('roll_more.png') no-repeat center;} .roll .y-inner .roll-slide1 {position: relative;width: 92%;margin: 0 0 0 50px;} .roll .y-inner .roll-slide1 .swiper-container {width: 100%;} .roll .y-inner .roll-slide1 .roll-prev {width: 25px;height: 25px;display: block;position: absolute;z-index: 10;top: 50%;left: -34px;margin: -14px 0 0 0;} .roll .y-inner .roll-slide1 .roll-prev:before {content: '';width: 25px;height: 25px;position: absolute;left: 0;top: 0;background: url('roll_prev_btn.png') no-repeat center;} .roll .y-inner .roll-slide1 .roll-next {width: 25px;height: 25px;display: block;position: absolute;z-index: 10;top: 50%;right: -22px;margin: -14px 0 0 0;} .roll .y-inner .roll-slide1 .roll-next:before {content: '';width: 25px;height: 25px;position: absolute;left: 0;top: 0;background: url('roll_next_btn.png') no-repeat center;} .roll .y-inner .roll-slide1 .roll-stop {width: 25px;height: 25px;display: block;position: absolute;z-index: 10;top: 50%;right: -50px;margin: -14px 0 0 0;} .roll .y-inner .roll-slide1 .roll-stop:before {content: '';position: absolute;top: 0;left: 0;width: 25px;height: 25px;background: url('roll_stop.png') no-repeat center;} .roll .y-inner .roll-slide1 .roll-play {width: 25px;height: 25px;display: block;position: absolute;z-index: 10;top: 50%;right: -50px;margin: -14px 0 0 0;display: none;} .roll .y-inner .roll-slide1 .roll-play:before {content: '';position: absolute;top: 0;left: 0;width: 25px;height: 25px;background: url('roll_play.png') no-repeat center;} .roll .y-inner .roll-slide1 .roll-more {width: 25px;height: 25px;display: block;position: absolute;z-index: 10;top: 50%;right: -80px;margin: -14px 0 0 0;} .roll .y-inner .roll-slide1 .roll-more:before {content: '';position: absolute;top: 0;left: 0;width: 25px;height: 25px;background: url('roll_more.png') no-repeat center;} #main_visual {position: relative;width: 100%;height: 100%;overflow: hidden;max-width:1280px;margin:0 auto;margin-top:20px;margin-bottom:20px;} /* header */ #header{position:relative; z-index:300; height:85px; background-color:#fff;border-bottom: solid 1px #898b89;} #header>.in{display:flex; align-items:center; width:100%; max-width:1280px; height:100%; margin:0 auto;} /* logo */ #header h1{position:relative; z-index:100;} #header h1>a{display:block; width:250px; height:55px; background:url(logo.png) no-repeat left top;} #header h1>a>span{position:absolute; font-size:0; color:transparent;} /* gnb */ #header #nav {overflow:hidden; position:absolute; left:0; top:0; z-index:20; width:100%; height:85px; background-color:#fff;} #header #nav #blind {display:none; opacity:0.95; width:100%; height:100%; position:absolute; left:0; top:85px; z-index:1; border-top:2px solid #23a305; background:#fff;} #header #nav #blind span {display:block; background:url(blind_bg.png) no-repeat left -60px; width:500px; height:100%; position:absolute; left:50%; top:0; margin-left:-900px;} #header #nav .layout {z-index:10;} #header #nav .layout .js_menu {width:100%; height:auto;} #header #nav .layout .js_menu>ul{text-align:center;} #header #nav .layout .js_menu>ul>li{float:none !important; display:inline-block; padding:0 20px; text-align:left;} #header #nav .layout .js_menu ul {width:100%; height:auto; position:relative; z-index:5;} #header #nav .layout .js_menu>ul>li {width:110px;} #header #nav .layout .js_menu>ul>li:first-child{padding-left:260px;} #header #nav .layout .js_menu ul li a {display:block; height:85px; font-weight:600; font-size:21px; line-height:85px; text-align:center; text-decoration:none; color:#333;} #header #nav .layout .js_menu ul li a.on, #header #nav .layout .js_menu ul li a:hover, #header #nav .layout .js_menu ul li a:active {color:#088708;} #header #nav .layout .js_menu ul li ul {opacity:0; position:absolute; left:0; top:120px; z-index:10; width:100%; display:none; padding:20px 0 30px 240px; box-sizing:border-box; min-height:350px;} #header #nav .layout .js_menu ul li ul li {width:auto; position:relative; min-height:52px; float:left;background-color: #fff;margin-bottom: 10px;margin-left: 10px;} #header #nav .layout .js_menu ul li ul li a {width:240px;height:46px;line-height:46px;border:1px solid #bcbcbc;box-sizing:border-box; background:#fff;font-size:18px; line-height:24px; height:auto; color:#333333; font-weight:700; padding:10px 20px; display:inline-block;text-align:left; } #header #nav .layout .js_menu ul li ul li a.on, #header #nav .layout .js_menu ul li ul li a:hover, #header #nav .layout .js_menu ul li ul li a:active {color:#fff;background:#079531; } #header #nav .layout .js_menu ul li ul li a.on, #header #nav .layout .js_menu ul li ul li a:hover, #header #nav .layout .js_menu ul li ul li a:active {color:#fff;} #header #nav .layout .js_menu ul li ul li ul {opacity:1; position:relative; left:auto; top:auto; width:100%; padding:10px 0; display:block; min-height:10px; FONT-FAMILY: "Nanum Barun Gothic", "Nanum Gothic", "돋움", Dotum, Helvetica, Verdana, Arial, sans-serif;} #header #nav .layout .js_menu ul li ul li:first-child ul {border-top:0;} #header #nav .layout .js_menu ul li ul li ul:after {content:""; display:block; clear:both;} #header #nav .layout .js_menu ul li ul li ul li {float:left; width:auto; min-height:10px; padding:0; background:none;} #header #nav .layout .js_menu ul li ul li ul li a {font-size:15px; line-height:21px; color:#666; padding:5px 10px; position:relative; left:auto; top:auto;} #header #nav .layout .js_menu ul li ul li ul li a.on, #header #nav .layout .js_menu ul li ul li ul li a:hover, #header #nav .layout .js_menu ul li ul li ul li a:active { background:#93723c; color:#fff;} #header #nav .layout .js_menu ul li .tmenu_ti {display:none; opacity:0; font-size:15px; line-height:22px; color:#333333; font-weight:normal; padding:34px 0 115px 5px; width:135px; position:absolute; left:0; top:90px;} #header #nav .layout .js_menu ul li .tmenu_ti span {display:block; font-size:25px; color:#23a305; line-height:42px;font-weight: 600;} #header #nav .layout .js_menu ul li.num1 .tmenu_ti {background:url(gnb_ico01.png) no-repeat right bottom;} #header #nav .layout .js_menu ul li.num2 .tmenu_ti {background:url(gnb_ico02.png) no-repeat right bottom;} #header #nav .layout .js_menu ul li.num3 .tmenu_ti {background:url(gnb_ico03.png) no-repeat right bottom;} #header #nav .layout .js_menu ul li.num4 .tmenu_ti {background:url(gnb_ico04.png) no-repeat right bottom;} #header #nav .layout .js_menu ul li.num5 .tmenu_ti {background:url(gnb_ico05.png) no-repeat right bottom;} #header #nav .layout .js_menu ul li.num6 .tmenu_ti {background:url(gnb_ico06.png) no-repeat right bottom;} #header #nav .layout .js_menu ul li.num7 {display:none;} #header #nav .layout .js_menu span.bar {display:inline-block; opacity:0; position:absolute; z-index:1; left:0; top:80px; height:6px; vertical-align:top; background:#23a305;} /* global */ #global{display:flex; align-items:center; position:relative; z-index:300; margin-left:auto;} #global .lan{flex-shrink:0; display:flex; align-items:center; position:relative; font-weight:600; font-size:16px; color:#666;} #global .lan::before{content:""; width:3.2em; height:3.2em; margin-right:0.6em; font-size:6px; background-image:url(layout.svg); background-repeat:no-repeat; background-position:0 -3.2em; background-size:150em auto;} #global .lan::after{ content:""; opacity:0; display:block; position:absolute; left:50%; top:calc(100% + 4px); width:0; height:2px; background-color:#d71920; -webkit-transition:left 0.3s linear, width 0.3s linear; transition:left 0.3s linear, width 0.3s linear; } #global .lan:hover{text-decoration:none;} #global .lan:hover::after{opacity:1; left:0; width:100%;} #global .search-open{flex-shrink:0; width:32px; height:32px; margin-left:30px; border:none; background-color:transparent; background-image:url(layout.svg); background-repeat:no-repeat; background-position:-32px 0; background-size:1500px auto;} #global .search-open>span{position:absolute; font-size:0; color:transparent;} #global .sitemap{flex-shrink:0; width:32px; height:32px; margin-left:10px; border:none; background-color:transparent; background-image:url(layout.svg); background-repeat:no-repeat; background-position:-64px 0; background-size:1500px auto;} #global .sitemap>span{position:absolute; font-size:0; color:transparent;} /* 검색 */ #search-form{display:flex; align-items:center; justify-content:center; position:absolute; left:0; top:-20px; z-index:0; width:100%; height:100px; background-color:#7a5632; -webkit-transition:top 0.3s linear; transition:top 0.3s linear;} #search-form>div{display:none; position:relative; width:100%; max-width:777px;} #search-form>div input[type="text"]{position:relative; z-index:0; width:100%; height:53px; padding:0 52px 0 20px; font-size:16px; border:none; color:#fff; background-color:rgba(255,255,255,0.1);} #search-form>div input[type="text"]::placeholder{color:rgba(255,255,255,0.5);} #search-form>div button{position:absolute; right:10px; top:calc(50% - 16px); z-index:20; width:32px; height:32px; border:none; background-color:transparent; background-image:url(layout.svg); background-repeat:no-repeat; background-position:-32px -64px; background-size:1500px auto;} #search-form>div button>span{position:absolute; font-size:0; color:transparent;} #search-form .close{display:none; width:3.2em; height:3.2em; margin-left:10px; font-size:12px; border:none; background-color:transparent; background-image:url(layout.svg); background-repeat:no-repeat; background-position:-12.8em -6.4em; background-size:150em auto;} #search-form .close>span{position:absolute; font-size:0; color:transparent;} #search-form[data-open="yes"]{top:85px;} #search-form>div, #search-form .close{display:block;} @media screen and (max-width:1690px) { } @media screen and (max-width:1200px) { #header>.in{width:calc(100% - 60px); max-width:100%; margin:0 30px;} #header #nav .layout .js_menu>ul>li{padding:0 8px;} #header #nav .layout .js_menu ul li a{font-size:18px;} } @media screen and (max-width:1024px) { #header #nav, #global .search-open, #search-form{display:none;} #header{height:75px;} #header h1>a{height:45px; background-size:contain;} #global .sitemap{margin-left:20px;} } @media screen and (max-width:650px) { #header>.in{width:calc(100% - 40px); margin:0 20px;} } @media screen and (max-width:500px) { #header{height:70px;} #header h1>a{width:200px; height:40px;} #global .sitemap{margin-left:5px;} } /* 사이트맵 */ .sitemap {width:100%; height:auto;} .sitemap:after {content:""; display:block; clear:both;} .sitemap li {margin-top:30px;} .sitemap li:first-child {margin-top:0;} .sitemap li a {display:block; background:url(sitemap_bg.gif) repeat-x left 50%;margin-bottom:10px;} .sitemap li a span {display:inline-block; vertical-align:top; color:#bd7a07; font-size:24px; line-height:28px; background:#fff url(sitemap_ico.png) no-repeat left top; padding:1px 15px 0 32px;} .sitemap li ul { } .sitemap li ul li {border-bottom:1px solid #e6e6e6; margin:0; position:relative; padding:8px 0 6px 20px; min-height:30px;float: left;} .sitemap li ul li a {width: 200px;height: 46px;line-height:46px;border:1px solid #bcbcbc; box-sizing: border-box; background: #fff; font-size: 16px; line-height: 24px; height: auto; color: #333333; font-weight: 700; padding: 10px 20px; display: inline-block;text-align: left;} .sitemap li ul:after {content:""; display:block; clear:both;} /* footer */ #footer{padding-bottom:72px; font-family: 'Nanum Barun Gothic'; background-color:#3e3730;} #footer>.layout{max-width:1280px;} #footer>.layout>.line-1{display:flex; flex-wrap:wrap; align-items:center; padding:5px 0; border-bottom:1px solid rgba(217, 212, 220, 0.3);} #footer>.layout>.line-1>ul{display:flex; flex-wrap:wrap; margin-right:auto;} #footer>.layout>.line-1>ul>li{margin-top:5px; margin-bottom:5px;} #footer>.layout>.line-1>ul>li:not(:last-child){margin-right:35px;} #footer>.layout>.line-1>ul>li>a{line-height:1.5; font-size:17px; color:#fff;} #footer>.layout>.line-1>ul>li>a>strong{color:#ffa345;} #footer>.layout>.line-1>div{display:flex; padding:10px 0;} #footer>.layout>.line-1>div>select{ width:165px; height:34px; padding:0 10px; font-size:15px; border:none; color:#fff; background-color:rgba(255,255,255,0.07); background-image:url(select.svg); background-repeat:no-repeat; background-position:right 10px center; appearance:none; -webkit-appearance:none; -moz-appearance:none; } #footer>.layout>.line-1>div>select::-ms-expand { display: none; } #footer>.layout>.line-1>div>select:not(:last-child){margin-right:10px;} #footer>.layout>.line-1>div>.select{position:relative; z-index:1000;} #footer>.layout>.line-1>div>.select:not(:last-child){margin-right:5px;} #footer>.layout>.line-1>div>.select>.head{width:165px; height:34px;} #footer>.layout>.line-1>div>.select>.head>button{ width:100%; height:100%; padding:0 10px; cursor:pointer; text-align:left; font-size:15px; border:none; color:#fff; background-color:rgba(255,255,255,0.07); background-image:url(select.svg); background-repeat:no-repeat; background-position:right 10px center; appearance:none; -webkit-appearance:none; -moz-appearance:none; } #footer>.layout>.line-1>div>.select>.midd{display:none; overflow:auto; position:absolute; left:0; top:100%; width:100%; max-height:160px; border-top:1px solid rgba(255,255,255,0.5); background-color:rgb(76 69 63);} #footer>.layout>.line-1>div>.select>.midd>ul{padding:5px 0;} #footer>.layout>.line-1>div>.select>.midd>ul>li>a{display:block; padding:5px 10px; font-size:14px; color:#fff;} #footer>.layout>.line-1>div>.select[data-open="yes"]>.midd{display:block;} #footer>.layout>.line-2{display:flex; padding:25px 0;} #footer>.layout>.line-2::before{content:""; flex-shrink:0; width:224px; height:46px; margin-right:30px; background-image:url(logo_gray.png); background-repeat:no-repeat; background-position:left top; background-size:contain;} #footer>.layout>.line-2>div address{font-style:normal; font-size:16px; color:#fff;} #footer>.layout>.line-2>div address>span{display:inline-flex; align-items:center; line-height:1.5;} #footer>.layout>.line-2>div address>span:not(:last-child)::after{content:""; width:1px; height:12px; margin:0 10px 4px 10px; background-color:rgba(217, 212, 220,0.3);} #footer>.layout>.line-2>div .copy{margin-top:10px; font-style:normal; font-size:16px; color:rgba(255,255,255,0.5);} #footer>.layout>.line-2>div:nth-child(2){flex-shrink:0; margin-left:auto;} #footer>.layout>.line-2>div:nth-child(2)>ul{display:flex;} #footer>.layout>.line-2>div:nth-child(2)>ul>li:not(:last-child){margin-right:12px;} #footer>.layout>.line-2>div:nth-child(2)>ul>li>a{ display:flex; width:35px; height:35px; background-color:rgba(255,255,255,0.2); border-radius:50%; -webkit-transition:background-color 0.3s linear; transition:background-color 0.3s linear; } #footer>.layout>.line-2>div:nth-child(2)>ul>li>a::before{content:""; width:5em; height:5em; margin:auto; font-size:6px; background-image:url(layout.svg); background-repeat:no-repeat; background-size:150em auto;} #footer>.layout>.line-2>div:nth-child(2)>ul>li>a.y::before{background-position:0 -70em;} #footer>.layout>.line-2>div:nth-child(2)>ul>li>a.f::before{background-position:-5em -70em;} #footer>.layout>.line-2>div:nth-child(2)>ul>li>a.i::before{background-position:-10em -70em;} #footer>.layout>.line-2>div:nth-child(2)>ul>li>a.b::before{background-position:-15em -70em;} #footer>.layout>.line-2>div:nth-child(2)>ul>li>a.c::before{background-position:-20em -70em;} #footer>.layout>.line-2>div:nth-child(2)>ul>li>a>span{position:absolute; font-size:0; color:transparent;} #footer>.layout>.line-2>div:nth-child(2)>ul>li>a:hover{background-color:rgba(255,255,255,1);} #footer>.layout>.line-2>div:nth-child(2)>ul>li>a.y:hover::before{background-position:0 -75em;} #footer>.layout>.line-2>div:nth-child(2)>ul>li>a.f:hover::before{background-position:-5em -75em;} #footer>.layout>.line-2>div:nth-child(2)>ul>li>a.i:hover::before{background-position:-10em -75em;} #footer>.layout>.line-2>div:nth-child(2)>ul>li>a.b:hover::before{background-position:-15em -75em;} #footer>.layout>.line-2>div:nth-child(2)>ul>li>a.c:hover::before{background-position:-20em -75em;} @media screen and (max-width:1690px) { } @media screen and (max-width:1360px) { #footer>.layout>.line-1{display:block; padding:20px 0;} #footer>.layout>.line-1>div>.select>.head{width:200px;} } @media screen and (max-width:1024px) { #footer>.layout{width:calc(100% - 60px); max-width:100%; margin:0 30px;} #footer{padding-bottom:50px;} #footer>.layout>.line-2{display:block;} #footer>.layout>.line-2::before{display:block;} #footer>.layout>.line-2>div{margin-top:20px;} } @media screen and (max-width:650px) { #footer{padding-bottom:30px;} #footer>.layout{width:calc(100% - 40px); margin:0 20px;} } @media screen and (max-width:600px) { #footer>.layout>.line-1>ul>li:not(:last-child){margin-right:20px;} #footer>.layout>.line-1>ul>li>a{font-size:15px;} #footer>.layout>.line-1>div>.select{width:100%;} #footer>.layout>.line-1>div>.select>.head{width:100%;} #footer>.layout>.line-2>div address{font-size:15px;} #footer>.layout>.line-2>div address>span:nth-child(1){width:100%;} #footer>.layout>.line-2>div address>span:nth-child(1)::after{display:none;} #footer>.layout>.line-2>div .copy{font-size:15px;} } /* mobile menu */ #mobile-menu, #mobile-menu *, #mobile-menu *::before, #mobile-menu *::after{box-sizing:border-box;} #mobile-menu{display:none; position:fixed; right:0; top:0; z-index:5000; width:100%; height:100%; font-family:"Nanum Barun Gothic"; background-color:rgba(0,0,0,0.5);} #mobile-menu>.in{display:flex; flex-direction:column; width:100%; height:100%; max-width:556px; margin-left:auto; background-color:#fff; -webkit-box-shadow:0 0 51px 6px rgba(0,0,0,0.14); box-shadow:0 0 51px 6px rgba(0,0,0,0.14);} #mobile-menu>.in>.head{flex-shrink:0; background-color:#312a24;} #mobile-menu>.in>.head>.title{display:flex; align-items:center; height:46px; padding:0 20px; font-size:20px; border-bottom:1px solid #6f6a66; color:#fff;} #mobile-menu>.in>.head>.search{height:56px; padding:10px 20px;} #mobile-menu>.in>.head>.search>div{position:relative; height:100%;} #mobile-menu>.in>.head>.search>div form{height:100%;} #mobile-menu>.in>.head>.search>div input[type="text"]{position:relative; z-index:0; width:100%; height:100%; padding:0 35px 0 10px; color:#fff; border:none; background-color:rgba(255,255,255,0.1);} #mobile-menu>.in>.head>.search>div button{position:absolute; right:0.5em; top:calc(50% - 1.6em); z-index:20; width:3.2em; height:3.2em; font-size:8px; border:none; background-color:transparent; background-image:url(layout.svg); background-repeat:no-repeat; background-position:-3.2em -6.4em; background-size:150em auto;} #mobile-menu>.in>.head>.search>div button>span{position:absolute; font-size:0; color:transparent;} #mobile-menu>.in>.close{display:block; position:absolute; right:15px; top:7px; width:3.2em; height:3.2em; font-size:10px; border:none; background-color:transparent; background-image:url(layout.svg); background-repeat:no-repeat; background-position:-12.8em -6.4em; background-size:150em auto;} #mobile-menu>.in>.close>span{position:absolute; font-size:0; color:transparent;} #mobile-menu>.in>.midd{position:relative; height:calc(100% - 100px); padding:0;} #mobile-menu>.in>.midd a{text-decoration:none;} #mobile-menu>.in>.midd>.l{ position:absolute; left:0; top:0; width:114px; height:100%; padding-top:20px; background-color:#fff; -webkit-box-shadow:0 0 26px 1px rgba(0,0,0,0.08); box-shadow:0 0 26px 1px rgba(0,0,0,0.08); } #mobile-menu>.in>.midd>.l>ul:nth-child(1)>li{position:relative; height:45px; border-bottom:1px solid #dadada;} #mobile-menu>.in>.midd>.l>ul:nth-child(1)>li>button{ position:absolute; left:0; top:0; width:100%; height:100%; cursor:pointer; font-weight:600; font-size:16px; border:none; color:#222; background-color:transparent; -webkit-transition:all 0.3s linear; transition:all 0.3s linear; } #mobile-menu>.in>.midd>.l>ul:nth-child(1)>li.on>button{left:15px; color:#fff; background-color:#bf0f16;} /* #mobile-menu>.in>.midd>.l>ul:nth-child(2){padding:10px;} #mobile-menu>.in>.midd>.l>ul:nth-child(2)>li:not(:last-child){margin-bottom:10px;} #mobile-menu>.in>.midd>.l>ul:nth-child(2)>li>a{display:flex; align-items:center; width:100%; height:35px; padding-left:8px; font-weight:600; font-size:15px; color:#222; background-color:#e5e8eb; border-radius:4px;} #mobile-menu>.in>.midd>.l>ul:nth-child(2)>li>a::before{content:""; width:3em; height:3em; margin-right:0.5em; font-size:8px; background-image:url(layout.svg); background-repeat:no-repeat; background-size:150em auto;} #mobile-menu>.in>.midd>.l>ul:nth-child(2)>li:nth-child(1)>a::before{background-position:0 -20em;} #mobile-menu>.in>.midd>.l>ul:nth-child(2)>li:nth-child(2)>a::before{background-position:-3em -20em;} */ #mobile-menu>.in>.midd>.l>ul>li[class*="etc-"]{height:auto; padding:10px 10px 7px; border-bottom:none;} #mobile-menu>.in>.midd>.l>ul>li:not(.etc-1){padding-top:0;} #mobile-menu>.in>.midd>.l>ul>li[class*="etc-"]>button{display:flex; align-items:center; position:relative !important; left:0 !important; width:100%; height:35px; padding-left:8px; font-weight:600; font-size:15px; color:#222; background-color:#e5e8eb; border-radius:4px;} #mobile-menu>.in>.midd>.l>ul>li[class*="etc-"]>button::before{content:""; width:3em; height:3em; margin:0 0.5em 0.2em 0; font-size:8px; background-image:url(layout.svg); background-repeat:no-repeat; background-size:150em auto;} #mobile-menu>.in>.midd>.l>ul>li.etc-1>button::before{background-position:0 -20em;} #mobile-menu>.in>.midd>.l>ul>li.etc-2>button::before{background-position:-3em -20em;} #mobile-menu>.in>.midd>.l>ul>li.etc-1.on>button::before{background-position:0 -23em;} #mobile-menu>.in>.midd>.l>ul>li.etc-2.on>button::before{background-position:-3em -23em;} #mobile-menu>.in>.midd>.r{overflow:auto; height:100%; margin-left:10px; padding:20px; box-sizing:border-box;} #mobile-menu>.in>.midd>.r>ul{} #mobile-menu>.in>.midd>.r>ul>li:nth-child(n+2){margin-top:20px;} #mobile-menu>.in>.midd>.r>ul>li>a{display:block; padding:8px 10px; font-weight:600; font-size:18px; border-bottom:1px solid #431d1f; color:#bf0f16;} #mobile-menu>.in>.midd>.r>ul>li>ul>li{background-color:#f2f4f4;} #mobile-menu>.in>.midd>.r>ul>li>ul>li>a{display:block; position:relative; padding:14px 30px 14px 10px; font-weight:600; font-size:15px; border-bottom:1px solid #dadada; color:#222; background-color:#fff;} #mobile-menu>.in>.midd>.r>ul>li>ul>li.child>a::after{ content:""; opacity:0.5; display:block; position:absolute; right:0; top:calc(50% - 1.6em); width:3.2em; height:3.2em; font-size:8px; background-image:url(layout.svg); background-repeat:no-repeat; background-position:-16em -3.2em; background-size:150em auto; -webkit-transform:rotate(180deg); transform:rotate(180deg); } #mobile-menu>.in>.midd>.r>ul>li>ul>li>ul{display:none; padding:15px 20px;} #mobile-menu>.in>.midd>.r>ul>li>ul>li>ul>li:nth-child(n+2){margin-top:10px;} #mobile-menu>.in>.midd>.r>ul>li>ul>li>ul>li>a{font-size:14px; color:#444;} #mobile-menu>.in>.midd>.r>ul>li>ul>li>ul>li>ul{display:none;} #mobile-menu>.in>.midd>.r>ul>li>ul>li.child>a.open::after{-webkit-transform:rotate(0); transform:rotate(0);} body[data-mobile-menu="on"] #mobile-menu{display:flex;} /***** Sub *****/ /* Visual */ #sub #visual {position:relative; width:100%; height:207px;background:url(sub_visual_bg_spring.jpg) no-repeat center bottom; background-size:cover;} #sub #visual.su1 {background:url(sub_visual_bg_su1.jpg) no-repeat center bottom; background-size:cover;} #sub #visual.su2 {background:url(sub_visual_bg_su2.jpg) no-repeat center bottom; background-size:cover;} #sub #visual.su3 {background:url(sub_visual_bg_su3.jpg) no-repeat center bottom; background-size:cover;} #sub #visual.su4 {background:url(sub_visual_bg_su4.jpg) no-repeat center bottom; background-size:cover;} #sub #visual.su5 {background:url(sub_visual_bg_su5.jpg) no-repeat center bottom; background-size:cover;} #sub #visual.su6 {background:url(sub_visual_bg_su6.jpg) no-repeat center bottom; background-size:cover;} #sub #visual span.obj {display:block; position:absolute; right:0; top:0; z-index:20; width:520px; height:299px; background:url(sub_visual_obj_spring.png) no-repeat right top;} #sub #visual span.pattenbg {display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:url(sub_visual_patternbg.png) repeat left top; z-index:1; -moz-opacity:0.1; -ms-opacity:0.1; -o-opacity:0.1; -webkit-opacity:0.1; opacity:0.1; filter:alpha(opacity=10);} /* Container */ #sub #container {width:100%; height:auto; background:url(sub_container_bg.jpg) repeat left top; padding:0 0 10px 0;} #sub #container .layout {background:#fff url(sub_container_bg3.jpg) repeat-y left top;} #sub #container .layout .top_btn:hover, #sub #container .layout .top_btn:active {background:#8a6d3a url(top_btn.png) no-repeat center 7px;} #sub #container #content_box {width:auto; position:relative; min-height:750px; padding:0 0 0 240px;} #sub #container #remote {position:absolute; left:0; top:0px; z-index:10; width:240px;} #sub #container #remote h2 {width:100%; height:80px; font-size:32px; line-height:40px; padding:40px 0 0 0; text-align:center; background:url(lnb_titlebg.jpg) no-repeat left top; color:#fff; font-weight:normal;} #sub #container #remote .so1 {background:url(lnb_titlebg1.jpg) no-repeat left top;} #sub #container #remote .so2 {background:url(lnb_titlebg2.jpg) no-repeat left top;} #sub #container #remote .so3 {background:url(lnb_titlebg3.jpg) no-repeat left top;} #sub #container #remote .so4 {background:url(lnb_titlebg4.jpg) no-repeat left top;} #sub #container #remote .so5 {background:url(lnb_titlebg5.jpg) no-repeat left top;} #sub #container #remote .so6 {background:url(lnb_titlebg6.jpg) no-repeat left top;} #sub #container #remote .js_menu {width:100%;} #sub #container #remote .js_menu ul {width:100%;} #sub #container #remote .js_menu ul li {border-bottom:1px solid #e3e3e2;} #sub #container #remote .js_menu ul li a {display:block; font-size:17px; line-height:19px; padding:15px 38px 15px 20px; text-decoration:none; position:relative; transition : all 0.2s ease; -webkit-transition : all 0.2s ease;} #sub #container #remote .js_menu ul li a span {display:block; width:7px; height:13px; background:url(lnb_depth1_bul.png) no-repeat left top; position:absolute; right:20px; top:50%; margin-top:-6px; transition : all 0.5s ease; -webkit-transition : all 0.5s ease;} #sub #container #remote .js_menu ul li a:link, #sub #container #remote .js_menu ul li a:visited, #sub #container #remote .js_menu ul li a:active {color:#404040;} #sub #container #remote .js_menu ul li a:hover, #sub #container #remote .js_menu ul li a.ov:link, #sub #container #remote .js_menu ul li a.ov:visited, #sub #container #remote .js_menu ul li a.ov:active, #sub #container #remote .js_menu ul li a.ov:hover {color:#fff; background:#4b4b4b url(lnb_depth1_ov.jpg) repeat-x left top;} #sub #container #remote .js_menu ul li a.ov span {-webkit-transform: rotate(90deg); transform: rotate(90deg);} #sub #container #remote .js_menu ul li ul {display:none; margin:15px 0px;} #sub #container #remote .js_menu ul li ul li {border-bottom:none; margin-top:2px;} #sub #container #remote .js_menu ul li ul li:first-child {margin-top:0;} #sub #container #remote .js_menu ul li ul li a {padding:3px 40px 3px 32px; font-size:15px; line-height:19px; background:url(lnb_depth2_bul.png) no-repeat 21px 9px;} #sub #container #remote .js_menu ul li ul li a:link, #sub #container #remote .js_menu ul li ul li a:visited, #sub #container #remote .js_menu ul li ul li a:active {color:#606060;} #sub #container #remote .js_menu ul li ul li a:hover, #sub #container #remote .js_menu ul li ul li a.ov:link, #sub #container #remote .js_menu ul li ul li a.ov:visited, #sub #container #remote .js_menu ul li ul li a.ov:active, #sub #container #remote .js_menu ul li ul li a.ov:hover {text-decoration:underline; color:#d41a57; background:url(lnb_depth2_bul_ov.png) no-repeat 21px 9px;} #sub #content {width:100%; height:auto; position:relative;} #sub #content #path {width:100%; height:120px; position:absolute; left:0; top:0px;background: #fff;border-bottom:1px solid #b0a7a7;} #sub #content #path h3 {position:relative; z-index:10; font-size:28px; line-height:54px; padding-left:50px; font-weight:normal; letter-spacing:0px; margin:35px 0 0 0; text-align:left; color:#000; font-family:"Nanum Barun Gothic", "Nanum Gothic", "돋움", Dotum;} #sub #content #path h3:after {content: '';width: 100px;height: 2px;background-color: #4ec32c;position: absolute;left: 50px;bottom: 2px;} #sub #content #path .navi {width:auto; text-align:right; position:relative; z-index:10; padding-right:40px;} #sub #content #path .navi a {display:inline-block; vertical-align:top; font-size:15px; padding:0 5px;} #sub #content #path .navi a.home {width:11px; height:10px; background:url(navi_home_ico.png) no-repeat center top; text-indent:-9999px; margin-top:4px;} #sub #content #path .navi a:last-child {font-weight:600; color:#1c1c1c;} #sub #content #path span.pattern_bor {display:block; width:100%; height:5px; position:absolute; left:0; bottom:0; z-index:5; background:#fff url(path_pattern_bg.png) repeat left top;} #sub #content #path span.bg {display:block; width:100%; height:100%; position:absolute; left:0; top:0; z-index:1; background:#fff;-moz-opacity:0.7; -ms-opacity:0.7; -o-opacity:0.7; -webkit-opacity:0.7; opacity:0.7; filter:alpha(opacity=70);} #sub #content #path .path_etc {position:fixed; z-index:51; right:50%; top:350px; margin-right:-680px; width:40px; display:block;} #sub #content #path .path_etc ul {width:100%; height:auto;} #sub #content #path .path_etc ul li {width:40px; height:auto;} #sub #content #path .path_etc ul li a {display:block; height:40px; text-indent:-9999px; transition : all 0.5s ease; -webkit-transition : all 0.5s ease;} #sub #content #path .path_etc ul li a.tw {background:#4bb3da url(path_ico.png) no-repeat center top;} #sub #content #path .path_etc ul li a.fb {background:#4862a3 url(path_ico.png) no-repeat center -40px;} #sub #content #path .path_etc ul li a.bl {background:#2db400 url(path_ico.png) no-repeat center -80px;} #sub #content #path .path_etc ul li a.print {background:#8f8f8f url(path_ico.png) no-repeat center -120px;} #sub #content #path .path_etc ul li a.tw:hover, #sub #content #path .path_etc ul li a.tw:active {background:#2f8bad url(path_ico.png) no-repeat center top;} #sub #content #path .path_etc ul li a.fb:hover, #sub #content #path .path_etc ul li a.fb:active {background:#2b4177 url(path_ico.png) no-repeat center -40px;} #sub #content #path .path_etc ul li a.bl:hover, #sub #content #path .path_etc ul li a.bl:active {background:#248d01 url(path_ico.png) no-repeat center -80px;} #sub #content #path .path_etc ul li a.print:hover, #sub #content #path .path_etc ul li a.print:active {background:#777 url(path_ico.png) no-repeat center -120px;} #sub #content #txt {min-height:570px; padding:150px 50px 30px 50px; color:#555; font-size:15px; line-height:22px; background:url(sub_container_bg2.jpg) repeat-y right top; position:relative;top: 0px;font-family:"Nanum Barun Gothic", "Nanum Gothic", "돋움", Dotum, Helvetica, Verdana, Arial, sans-serif;overflow: hidden;} #sub #content #txt h4, #sub #content #txt h5, #sub #content #txt h6 {font-family:"Nanum Barun Gothic", "Nanum Gothic", "돋움", Dotum, Helvetica, Verdana, Arial, sans-serif;} /* print #content #path {width:100%; height:157px;} */ #content #path h3 {position:relative; z-index:10; font-size:48px; line-height:54px; padding-right:40px; font-weight:normal; letter-spacing:-1px; margin:35px 0 20px 0; text-align:center; color:#000; font-family:"Buri", serif;} #content #path .navi {width:auto; text-align:center; position:relative; z-index:10; padding-right:40px;} #content #path .navi a {display:inline-block; vertical-align:top; font-size:15px; padding:0 5px;} #content #path .navi a.home {width:11px; height:10px; background:url(navi_home_ico.png) no-repeat center top; text-indent:-9999px; margin-top:4px;} #content #path .navi a:last-child {font-weight:600; color:#1c1c1c;} #content #path .path_etc {display:none;} /* main */ body#main #container{overflow:hidden; font-family:"Nanum Square", "Nanum Barun Gothic", "Nanum Gothic", "돋움", Dotum, Helvetica, Verdana, Arial, sans-serif;} body#main #container *, body#main #container *::before, body#main #container *::after{box-sizing:border-box;} [id*="main-line-"]>.in>.head>.title{margin-bottom:35px; text-align:center;} [id*="main-line-"]>.in>.head>.title>strong{display:block; font-weight:800; font-size:32px; color:#222;} [id*="main-line-"]>.in>.head>.title>span{display:block; font-size:20px; color:#997e6b;} [id*="main-line-"]>.in>.midd>[class*="item-"]{position:relative;} [id*="main-line-"]>.in>.midd>[class*="item-"]>.head.stitle{display:flex; align-items:center; border-bottom:1px solid #9c9c9c;} [id*="main-line-"]>.in>.midd>[class*="item-"]>.head.stitle>strong{position:relative; padding:0 20px 15px 0; font-weight:800; font-size:23px; color:#222;} [id*="main-line-"]>.in>.midd>[class*="item-"]>.head.stitle>strong::before{content:""; position:absolute; left:0; bottom:-2px; width:100%; height:3px; background-color:#d71920;} [id*="main-line-"]>.in>.midd>[class*="item-"]>.etc{position:absolute; right:0; top:0; display:flex; align-items:center; margin-left:auto;} [id*="main-line-"]>.in>.midd>[class*="item-"]>.etc .controll{display:flex; align-items:center;} [id*="main-line-"]>.in>.midd>[class*="item-"]>.etc .controll [class*="btn-"]{position:relative; width:3.2em; height:3.2em; cursor:pointer; font-size:10px; border:none; background-color:transparent;} [id*="main-line-"]>.in>.midd>[class*="item-"]>.etc .controll [class*="btn-"]::before{ content:""; display:block; width:100%; height:100%; background-image:url(layout.svg); background-repeat:no-repeat; background-size:150em auto; -webkit-transition:transform 0.3s linear; transition:transform 0.3s linear; } [id*="main-line-"]>.in>.midd>[class*="item-"]>.etc .controll [class*="btn-"]:not(:last-child)::after{content:""; position:absolute; right:-1px; top:calc(50% - 5px); width:1px; height:10px; background-color:#c9c9c9;} [id*="main-line-"]>.in>.midd>[class*="item-"]>.etc .controll [class*="btn-"]>span{position:absolute; font-size:0; color:transparent;} [id*="main-line-"]>.in>.midd>[class*="item-"]>.etc .controll .btn-prev::before{background-position:-16em -3.2em; -webkit-transform:rotate(-90deg); transform:rotate(-90deg);} [id*="main-line-"]>.in>.midd>[class*="item-"]>.etc .controll .btn-next::before{background-position:-16em -3.2em; -webkit-transform:rotate(90deg); transform:rotate(90deg);} [id*="main-line-"]>.in>.midd>[class*="item-"]>.etc .controll .btn-prev:hover::before, [id*="main-line-"]>.in>.midd>[class*="item-"]>.etc .controll .btn-next:hover::before{background-position:-16em 0;} [id*="main-line-"]>.in>.midd>[class*="item-"]>.etc .more{position:relative; width:3.2em; height:3.2em; font-size:10px;} [id*="main-line-"]>.in>.midd>[class*="item-"]>.etc .more::before{ content:""; display:block; width:100%; height:100%; background-image:url(layout.svg); background-position:-9.6em -3.2em; background-repeat:no-repeat; background-size:150em auto; -webkit-transition:transform 0.3s linear; transition:transform 0.3s linear; } [id*="main-line-"]>.in>.midd>[class*="item-"]>.etc .more>span{position:absolute; font-size:0; color:transparent;} [id*="main-line-"]>.in>.midd>[class*="item-"]>.etc .more:hover::before{background-position:-9.6em 0; -webkit-transform:rotate(180deg); transform:rotate(180deg);} @media screen and (max-width:650px) { [id*="main-line-"]>.in>.head>.title{margin-bottom:25px;} [id*="main-line-"]>.in>.head>.title>strong{font-size:27px;} [id*="main-line-"]>.in>.head>.title>span{font-size:14px;} [id*="main-line-"]>.in>.midd>[class*="item-"]>.head.stitle>strong{padding-bottom:10px; font-size:19px;} [id*="main-line-"]>.in>.midd>[class*="item-"]>.etc{top:-2px;} [id*="main-line-"]>.in>.midd>[class*="item-"]>.etc .controll [class*="btn-"], [id*="main-line-"]>.in>.midd>[class*="item-"]>.etc .more{font-size:8px;} } /* 1 */ #main-line-1{padding:0 0px;} #main-line-1>.grid{position:relative; height:523px; background-color:#ddd;} #main-line-1>.grid .in{max-width:1400px; margin:0 auto;} #main-line-1>.grid>.move, #main-line-1>.grid>.move>ul, #main-line-1>.grid>.move>ul>li{position:absolute; left:0; top:0; width:100%; height:100%;} #main-line-1>.grid>.move{z-index:0;} #main-line-1>.grid>.move>ul>li{ opacity:0; z-index:0; background-repeat:no-repeat; background-position:center center; background-size:cover; -webkit-transition:opacity 1s linear 1s; transition:opacity 1s linear 1s; } #main-line-1>.grid>.move>ul>li>.in{display:flex; flex-direction:column; justify-content:center; width:100%; height:100%;} #main-line-1>.grid>.move>ul>li>.in>strong{ font-family: 'Buri'; font-size:40px; color:#fff; -webkit-text-shadow:3px 6px 6px rgba(0,0,0,0.23); text-shadow:3px 6px 6px rgba(0,0,0,0.23); } #main-line-1>.grid>.move>ul>li>.in>strong>span{display:block;} #main-line-1>.grid>.move>ul>li>.in>span{margin-top:10px; font-size:20px; color:rgba(255,255,255,0.7);} #main-line-1>.grid>.controll{position:absolute; left:0; bottom:40px; z-index:200; width:100%;} #main-line-1>.grid>.controll>.in{display:flex; align-items:center;} #main-line-1>.grid>.controll>.in>button:not(:first-child){margin-left:20px;} #main-line-1>.grid>.controll>.in>button.simbol:not(:first-child){margin-left:30px;} #main-line-1>.grid>.controll .simbol{ position:relative; width:10px; height:10px; cursor:pointer; border:none; background-color:#fff; -webkit-transform:rotate(45deg); transform:rotate(45deg); } #main-line-1>.grid>.controll .simbol:nth-child(1){margin-left:10px;} #main-line-1>.grid>.controll .simbol::before{ opacity:0; content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%; border:1px solid #fff; -webkit-transform:scale(0); transform:scale(0); -webkit-transition:all 0.3s linear; transition:all 0.3s linear; } #main-line-1>.grid>.controll .simbol>span{position:absolute; font-size:0; color:transparent;} #main-line-1>.grid>.controll .simbol.on::before{ opacity:0.7; -webkit-transform:scale(1.8); transform:scale(1.8); } #main-line-1>.grid>.controll [class*="btn-"]{width:16px; height:16px; cursor:pointer; border:none; background-color:transparent; background-image:url(layout.svg); background-repeat:no-repeat; background-size:1500px auto;} #main-line-1>.grid>.controll [class*="btn-"]>span{position:absolute; font-size:0; color:transparent;} #main-line-1>.grid>.controll .btn-stop{background-position:-400px 0;} #main-line-1>.grid>.controll .btn-play{background-position:-416px 0;} #main-line-1>.grid>.move>ul>li.on{ opacity:1; z-index:100; -webkit-transition:opacity 1s linear 0s; transition:opacity 1s linear 0s; } @media screen and (max-width:1730px) { #main-line-1{padding:0;} } @media screen and (max-width:1460px) { #main-line-1>.grid .in{width:calc(100% - 60px); max-width:100%; margin:0 30px;} } @media screen and (max-width:1024px) { #main-line-1>.grid{height:435px;} #main-line-1>.grid>.move>ul>li>.in>strong{font-size:51px;} #main-line-1>.grid>.move>ul>li>.in>span{font-size:17px;} } @media screen and (max-width:650px) { #main-line-1>.grid{height:290px;} #main-line-1>.grid .in{width:calc(100% - 40px); padding-bottom:50px; margin:0 20px;} #main-line-1>.grid>.move>ul>li>.in>strong{font-size:32px;} #main-line-1>.grid>.move>ul>li>.in>span{font-size:13px;} #main-line-1>.grid>.controll{bottom:20px;} } @media screen and (max-width:360px) { #main-line-1>.grid>.move>ul>li>.in>strong{font-size:28px;} #main-line-1>.grid>.move>ul>li>.in>span{font-size:11px;} #main-line-1>.grid>.controll{bottom:20px;} } /* 2 */ #main-line-2{position:relative; padding:40px 0 20px;border-bottom: solid 1px #d5d0d0;} #main-line-2::before{content:""; display:block; position:absolute; left:-18em; top:-15em; width:38em; height:38em; font-size:10px; background-image:url(main-simbol.png); background-repeat:no-repeat; background-position:center center; background-size:contain;} #main-line-2>.in{width:100%; max-width:1280px; margin:0 auto;} #main-line-2>.in>.midd{display:flex; flex-wrap:wrap;} #main-line-2>.in>.midd>.item-1, #main-line-2>.in>.midd>.item-2{width:calc((100% - 40px) / 2);} #main-line-2>.in>.midd>.item-1{margin-right:40px;min-height: 260px;} #main-line-2>.in>.midd>.item-1>.midd{margin-top:8px;} #main-line-2>.in>.midd>.item-1>.midd>ul>li{position:relative; padding:11px 0 11px 12px;} #main-line-2>.in>.midd>.item-1>.midd>ul>li:nth-child(n+7){display:none;} #main-line-2>.in>.midd>.item-1>.midd>ul>li::before{content:""; display:block; position:absolute; left:0; top:19px; width:3px; height:3px; background-color:#c3c3c3;} #main-line-2>.in>.midd>.item-1>.midd>ul>li>a{display:flex; align-items:center; font-family: 'Nanum Barun Gothic';} #main-line-2>.in>.midd>.item-1>.midd>ul>li>a>strong{margin-right:5px; font-weight:500; font-size:17px; color:#222;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;} #main-line-2>.in>.midd>.item-1>.midd>ul>li>a>span{flex-shrink:0; margin-left:auto; font-size:14px; color:#666666;} #main-line-2>.in>.midd>.item-1>.midd>ul>li>a>i{flex-shrink:0; width:17px; height:17px; font-size:0; color:transparent; background-image:url(layout.svg); background-repeat:no-repeat; background-position:-300px 0; background-size:1500px auto;} #main-line-2>.in>.midd>.item-1>.midd>ul>li>a>*:nth-last-child(2){margin-right:20px;} #main-line-2>.in>.midd>.item-1>.midd>ul>li>a:hover{text-decoration:none;} #main-line-2>.in>.midd>.item-1>.midd>ul>li>a:hover>strong{color:#d71920;} #main-line-2>.in>.midd>.item-2{margin-right:0px;} #main-line-2>.in>.midd>.item-2>.midd{margin-top:8px;} #main-line-2>.in>.midd>.item-2>.midd>ul>li{position:relative; padding:11px 0 11px 12px;} #main-line-2>.in>.midd>.item-2>.midd>ul>li:nth-child(n+7){display:none;} #main-line-2>.in>.midd>.item-2>.midd>ul>li::before{content:""; display:block; position:absolute; left:0; top:19px; width:3px; height:3px; background-color:#c3c3c3;} #main-line-2>.in>.midd>.item-2>.midd>ul>li>a{display:flex; align-items:center; font-family: 'Nanum Barun Gothic';} #main-line-2>.in>.midd>.item-2>.midd>ul>li>a>strong{margin-right:5px; font-weight:500; font-size:17px; color:#222;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;} #main-line-2>.in>.midd>.item-2>.midd>ul>li>a>span{flex-shrink:0; margin-left:auto; font-size:14px; color:#666666;} #main-line-2>.in>.midd>.item-2>.midd>ul>li>a>i{flex-shrink:0; width:17px; height:17px; font-size:0; color:transparent; background-image:url(layout.svg); background-repeat:no-repeat; background-position:-300px 0; background-size:1500px auto;} #main-line-2>.in>.midd>.item-2>.midd>ul>li>a>*:nth-last-child(2){margin-right:20px;} #main-line-2>.in>.midd>.item-2>.midd>ul>li>a:hover{text-decoration:none;} #main-line-2>.in>.midd>.item-2>.midd>ul>li>a:hover>strong{color:#d71920;} @media screen and (max-width:1460px) { #main-line-2>.in{width:calc(100% - 60px); max-width:100%; margin:0 30px;} } @media screen and (max-width:950px) { #main-line-2>.in>.midd{flex-direction:column;} #main-line-2>.in>.midd>[class*="item-"]{width:100%;} #main-line-2>.in>.midd>.item-1{margin-right:0;} #main-line-2>.in>.midd>.item-2{margin-top:30px;} } @media screen and (max-width:650px) { #main-line-2{padding:45px 0;} #main-line-2>.in{width:calc(100% - 40px); margin:0 20px;} } @media screen and (max-width:550px) { #main-line-2>.in>.midd>.item-1 a strong{top: 1.4em; left: 1.2em; max-width: calc(100% - 2.4em); font-size: 16px; } #main-line-2>.in>.midd>.item-2>ul>li>a>strong{font-size:14px;} } @media screen and (max-width:400px) { #main-line-2>.in>.midd>.item-2>ul{flex-direction:column;} #main-line-2>.in>.midd>.item-2>ul>li{width:100%;} #main-line-2>.in>.midd>.item-2>ul>li:nth-child(1){margin-right:0;} #main-line-2>.in>.midd>.item-2>ul>li:nth-child(2){margin-top:20px;} } /* 3 */ #main-line-3{padding:50px 0 50px; background-color:#ece1d4; background-image:url(line-3_bg.jpg);} #main-line-3>.in{width:100%; max-width:1280px; margin:0 auto;} #main-line-3>.in>.midd>.item-1{display:flex;justify-content: space-between;} #main-line-3>.in>.midd>.item-1>.item-1_1{width:calc((100% - 0px) * 0.33); height:318px; margin-right:10px; background-color:#fff;} #main-line-3>.in>.midd>.item-1>.item-1_2{width:calc((100% - 0px) * 0.33); height:318px; margin-right:10px; background-color:#fff;} #main-line-3>.in>.midd>.item-1>.item-1_3{width:calc((100% - 0px) * 0.33); height:318px; background-color:#fff;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx{display:flex; flex-direction:column; justify-content:center; position:relative; width:100%; height:100%; padding:30px; background-image:url(service_img_1_pc.jpg); background-repeat:no-repeat; background-position:right bottom; background-size:cover;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx>em{display:flex; align-items:center; justify-content:center; position:absolute; left:-16px; top:30px; width:78px; height:30px; font-style:normal; font-family:'Nanum Barun Gothic'; font-size:16px; color:#fff; background-color:#7a5632;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx>strong{width:85px; height:21px; font-size:1.4rem;white-space : nowrap;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx>strong+span{line-height:1.5; margin-top:5px; font-family:'Nanum Barun Gothic'; font-size:16px; color:#3c2106;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx>strong+span>span{display:block;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx>strong+span+span{ display:flex; align-items:center; width:105px; height:34px; padding:0 5px 0 10px; margin-top:20px; font-weight:600; font-size:15px; color:#222; background-color:#fff; border-radius:4px; box-shadow:6px 6px 8px 2px rgba(0,0,0,0.1); -webkit-transition:background-color 0.3s linear; transition:background-color 0.3s linear; } #main-line-3>.in>.midd>.item-1>.item-1_1>.bx>strong+span+span::after{ content:""; width:3.2em; height:3.2em; margin-left:auto; font-size:7px; background-image:url(layout.svg); background-repeat:no-repeat; background-position:-16em 0; background-size:150em auto; -webkit-transform:rotate(90deg); transform:rotate(90deg); } #main-line-3>.in>.midd>.item-1>.item-1_1>.bx:hover{text-decoration:none;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx:hover>strong+span+span{color:#fff; background-color:#d71920;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx:hover>strong+span+span::after{background-position:-16em -6.4em;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul{position:relative; display:flex; flex-wrap:wrap; width:100%; height:100%;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul::before, #main-line-3>.in>.midd>.item-1>.item-1_2>ul::after{content:""; display:block; position:absolute; left:0; top:50%; width:100%; height:1px; background-color:#eadcd2;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li{width:50%; height:50%;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li>a{ display:flex; flex-direction:column; justify-content:center; width:100%; height:100%; padding:20px; text-decoration:none; color:#222; -webkit-transition:background 0.3s linear; transition:background 0.3s linear; } #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(2)>a {background-image:url(so_1.png);background-size: cover;border: solid 1px #edcfa5;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(1)>a {background-image:url(so_2.jpg);background-size: cover;border: solid 1px #edcfa5;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(1)>a::before{content:""; width:4em; height:3em; background-image:url(j_1.png); background-repeat:no-repeat; background-size:4em auto;background-position:0 0;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(2)>a::before{content:""; width:4em; height:3em; background-image:url(j-2.png); background-repeat:no-repeat; background-size:4em auto;background-position:0 0;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(3) {width:100%;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li>a>strong{margin-top:15px; font-size:23px; color:inherit;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li>a>span{margin-top:5px; font-family:'Nanum Barun Gothic'; font-size:15px; color:inherit;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li>a:hover{color:#fff; background-color:#7f5d3a;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(1)>a:hover, #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(2)>a:hover{background-image:url(line-3-item-2_bg_on.jpg);} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(1)>a:hover::before{background-position:0 0;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(2)>a:hover::before{background-position:0 0;} #main-line-3>.in>.midd>.item-1>.item-1_3{ display:flex; flex-direction:column-reverse; -webkit-box-shadow:2px 5px 18px 4px rgba(0,0,0,0.06); box-shadow:2px 5px 18px 4px rgba(0,0,0,0.06); } #main-line-3>.in>.midd>.item-1>.item-1_3>.head{flex-shrink:0; display:flex; align-items:center; height:42px; padding:0 16px; background-color:#fff;} #main-line-3>.in>.midd>.item-1>.item-1_3>.head>strong{margin-right:auto; font-weight:800; font-size:18px; color:#58595b;} #main-line-3>.in>.midd>.item-1>.item-1_3>.head>.controll{display:flex; align-items:center;} #main-line-3>.in>.midd>.item-1>.item-1_3>.head>.controll>span{margin-right:10px; letter-spacing:3px; font-size:18px; color:#888888;} #main-line-3>.in>.midd>.item-1>.item-1_3>.head>.controll>span>em{font-style:normal; font-weight:600; color:#d71920;} #main-line-3>.in>.midd>.item-1>.item-1_3>.head>.controll>span>span:last-child{font-size:15px;} #main-line-3>.in>.midd>.item-1>.item-1_3>.head>.controll>[class*="btn-"]{overflow:hidden; position:relative; width:20px; height:20px; cursor:pointer; border:none; background-color:transparent;} #main-line-3>.in>.midd>.item-1>.item-1_3>.head>.controll>[class*="btn-"]::before{content:""; display:block; position:absolute; left:calc(50% - 1.6em); top:calc(50% - 1.6em); width:3.2em; height:3.2em; font-size:10px; background-image:url(layout.svg); background-repeat:no-repeat; background-size:150em auto;} #main-line-3>.in>.midd>.item-1>.item-1_3>.head>.controll>[class*="btn-"]>span{position:absolute; font-size:0; color:transparent;} #main-line-3>.in>.midd>.item-1>.item-1_3>.head>.controll>.btn-prev::before{background-position:-16em -3.2em; -webkit-transform:rotate(-90deg); transform:rotate(-90deg);} #main-line-3>.in>.midd>.item-1>.item-1_3>.head>.controll>.btn-next::before{background-position:-16em -3.2em; -webkit-transform:rotate(90deg); transform:rotate(90deg);} #main-line-3>.in>.midd>.item-1>.item-1_3>.head>.controll>.btn-stop::before{background-position:-19.2em -3.2em;} #main-line-3>.in>.midd>.item-1>.item-1_3>.head>.controll>.btn-play::before{background-position:-22.4em -3.2em;} #main-line-3>.in>.midd>.item-1>.item-1_3>.midd{position:relative; height:100%; background-color:#efefef;} #main-line-3>.in>.midd>.item-1>.item-1_3>.midd>ul, #main-line-3>.in>.midd>.item-1>.item-1_3>.midd>ul>li{position:absolute; left:0; top:0; width:100%; height:100%;} #main-line-3>.in>.midd>.item-1>.item-1_3>.midd>ul>li{z-index:0;} #main-line-3>.in>.midd>.item-1>.item-1_3>.midd>ul>li>a{display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:auto 100%;} #main-line-3>.in>.midd>.item-1>.item-1_3>.midd>ul>li>a>span{position:absolute; font-size:0; color:transparent;} #main-line-3>.in>.midd>.item-1>.item-1_3>.midd>ul>li.on{z-index:300;} #main-line-3>.in>.midd>.item-2{position:relative; margin-top:40px;width: 100%;} #main-line-3>.in>.midd>.item-2>.scroll-box{overflow:auto; position:relative;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul{display:flex;justify-content: space-between;flex-wrap: wrap;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li{width:33%; padding:0;text-align: center;background-color: #c5cfc8;padding: 10px;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li:not(:last-child){margin-right:0px;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li>a{display:block; position:relative;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li>a::before{margin:0 auto;content:""; display:block; width:10em; height:10em; font-size:10px; background-color:#fff; background-image:url(layout.svg); background-repeat:no-repeat center; background-size:150em auto; border-radius:50%;-webkit-box-shadow:2px 5px 6px 2px rgba(0,0,0,0.04);box-shadow:2px 5px 6px 2px rgba(0,0,0,0.04);-webkit-transition:background-color 0.3s linear; transition:background-color 0.3s linear;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-1>a::before{background-position:calc(-10em * 0) -40em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-2>a::before{background-position:calc(-10em * 1) -40em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-3>a::before{background-position:calc(-10em * 2) -40em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-4>a::before{background-position:calc(-10em * 3) -40em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-5>a::before{background-position:calc(-10em * 4) -40em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-6>a::before{background-position:calc(-10em * 5) -40em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-7>a::before{background-position:calc(-10em * 6) -40em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-8>a::before{background-position:calc(-10em * 7) -40em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-9>a::before{background-position:calc(-10em * 8) -40em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-10>a::before{background-position:calc(-10em * 9) -40em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-11>a::before{background-position:calc(-10em * 10) -40em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-12>a::before{background-position:calc(-10em * 11) -40em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-13>a::before{background-position:calc(-10em * 12) -40em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li>a:hover{text-decoration:none;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li>a:hover::before{background-color:#7a5632;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-1>a:hover::before{background-position:calc(-10em * 0) -50em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-2>a:hover::before{background-position:calc(-10em * 1) -50em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-3>a:hover::before{background-position:calc(-10em * 2) -50em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-4>a:hover::before{background-position:calc(-10em * 3) -50em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-5>a:hover::before{background-position:calc(-10em * 4) -50em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-6>a:hover::before{background-position:calc(-10em * 5) -50em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-7>a:hover::before{background-position:calc(-10em * 6) -50em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-8>a:hover::before{background-position:calc(-10em * 7) -50em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-9>a:hover::before{background-position:calc(-10em * 8) -50em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-10>a:hover::before{background-position:calc(-10em * 9) -50em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-11>a:hover::before{background-position:calc(-10em * 10) -50em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-12>a:hover::before{background-position:calc(-10em * 11) -50em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li.icon-13>a:hover::before{background-position:calc(-10em * 12) -50em;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li>a>span{ display:block; width:100%; margin-top:15px; text-align:center; font-family:'Nanum Barun Gothic'; font-weight:500; font-size:17px; color:#222; word-break:keep-all; } #main-line-3>.in>.midd>.item-2>.scroll-box{ -ms-overflow-style: none; /* IE, Edge */ scrollbar-width: none; } #main-line-3>.in>.midd>.item-2>.scroll-box::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } #main-line-3>.in>.midd>.item-2 .scroll{display:block; position:absolute; height:3px; background-color:#d8c7b4; border-radius:5px;} #main-line-3>.in>.midd>.item-2 .scroll>span{position:absolute; left:0; top:0; width:10%; height:100%; background-color:#bea794; border-radius:5px;} @media screen and (max-width:1460px) { #main-line-3>.in{width:calc(100% - 60px); max-width:100%; margin:0 30px;} } @media screen and (max-width:1270px) { #main-line-3>.in>.midd>.item-1{padding-bottom:180px;} #main-line-3>.in>.midd>.item-1>.item-1_1, #main-line-3>.in>.midd>.item-1>.item-1_3{width:calc((100% - 20px) / 2);} #main-line-3>.in>.midd>.item-1>.item-1_1{margin-right:20px;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx{background-image:url(service_img_1_tablet.jpg);} #main-line-3>.in>.midd>.item-1>.item-1_2{position:absolute; left:0; bottom:0; width:100%; height:160px;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul::before, #main-line-3>.in>.midd>.item-1>.item-1_2>ul::after{display:none;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li{width:25%; height:100%;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(3) {width:50%; height:100%;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:not(:last-child){border-right:1px solid #eadcd2;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(1)>a, #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(3)>a{background-image:url(line-3-item-2_bg.jpg);} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:nth-child(4)>a{background-image:none;} } @media screen and (max-width:1100px) { #main-line-3>.in>.midd>.item-1>.item-1_1, #main-line-3>.in>.midd>.item-1>.item-1_3{height:280px;} } @media screen and (max-width:960px) { #main-line-3>.in>.midd>.item-1{padding-bottom:140px;} #main-line-3>.in>.midd>.item-1>.item-1_1, #main-line-3>.in>.midd>.item-1>.item-1_3{height:240px;} #main-line-3>.in>.midd>.item-1>.item-1_2{height:120px;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li>a::before{font-size:10px;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li>a>strong{font-size:16px;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li>a>span{display:none;} #main-line-3>.in>.midd>.item-2>{display: flex;justify-content: space-around;flex-direction: row;} } @media screen and (max-width:800px) { #main-line-3>.in>.midd>.item-1{flex-wrap:wrap; padding-bottom:0;} #main-line-3>.in>.midd>.item-1>.item-1_1, #main-line-3>.in>.midd>.item-1>.item-1_2{width:calc((100% - 20px) / 2); height:187px;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx{align-items:flex-start; padding:50px 30px 30px 30px;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx>em{left:-8px; top:12px; width:58px; height:23px; font-size:13px;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx>strong{flex-shrink:0;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx>strong+span{font-size:14px;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx>strong+span+span{margin-top:7px;} #main-line-3>.in>.midd>.item-1>.item-1_2{position:relative; margin-right:0;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul::before, #main-line-3>.in>.midd>.item-1>.item-1_2>ul::after{display:block;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li{width:50%; height:50%;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li:not(:last-child){border-right:none;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li>a{padding:15px; background-image:none !important;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li>a::before{font-size:10px;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li>a>strong{font-size:14px;} #main-line-3>.in>.midd>.item-1>.item-1_3{width:100%; height:310px; margin-top:20px;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li:not(:last-child){margin-right:0px;} } @media screen and (max-width:650px) { #main-line-3{padding:45px 0;} #main-line-3>.in{width:calc(100% - 40px); margin:0 20px;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li{width:33%; padding:0;text-align: center;} } @media screen and (max-width:550px) { #main-line-3>.in>.midd>.item-1>.item-1_1{width:100%; height:187px; margin-right:0;} #main-line-3>.in>.midd>.item-1>.item-1_2{width:100%; height:187px; margin-top:20px;} #main-line-3>.in>.midd>.item-1>.item-1_3{height:auto;} #main-line-3>.in>.midd>.item-1>.item-1_3>.head>strong{font-size:14px;} #main-line-3>.in>.midd>.item-1>.item-1_3>.midd::before{content:""; display:block; position:relative; z-index:-1; width:100%; padding-top:50%;} } @media screen and (max-width:400px) { #main-line-3>.in>.midd>.item-1>.item-1_1{height:94px;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx{flex-direction:row; align-items:center; padding:0; background-image:url(service_img_1_mobile.jpg);} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx>strong+span{display:none;} #main-line-3>.in>.midd>.item-1>.item-1_1>.bx>strong+span+span{margin:0 0 0 10px;} #main-line-3>.in>.midd>.item-1>.item-1_2{height:110px;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li>a{text-align:center;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li>a::before{display:none;} #main-line-3>.in>.midd>.item-1>.item-1_2>ul>li>a>strong{margin-top:0;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li:not(:last-child){margin-right:0px;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li>a::before{font-size:8px;} #main-line-3>.in>.midd>.item-2>.scroll-box>ul>li>a>span{font-size:14px;} } /* 4 */ #main-line-4{position:relative; padding:20px 0 20px;} #main-line-4::before{content:""; display:block; position:absolute; left:-18em; top:-15em; width:38em; height:38em; font-size:10px; background-image:url(main-simbol.png); background-repeat:no-repeat; background-position:center center; background-size:contain;} #main-line-4>.in{width:100%; max-width:1280px; margin:0 auto;} #main-line-4>.in>.midd{display:flex; flex-wrap:wrap;} #main-line-4>.in>.midd>.item-1, #main-line-4>.in>.midd>.item-2{width:calc((100% - 40px) / 2);} #main-line-4>.in>.midd>.item-1{margin-right:40px;min-height: 260px;} #main-line-4>.in>.midd>.item-1>.midd{margin-top:8px;} #main-line-4>.in>.midd>.item-1>.midd>ul>li{position:relative; padding:11px 0 11px 12px;} #main-line-4>.in>.midd>.item-1>.midd>ul>li:nth-child(n+7){display:none;} #main-line-4>.in>.midd>.item-1>.midd>ul>li::before{content:""; display:block; position:absolute; left:0; top:19px; width:3px; height:3px; background-color:#c3c3c3;} #main-line-4>.in>.midd>.item-1>.midd>ul>li>a{display:flex; align-items:center; font-family: 'Nanum Barun Gothic';} #main-line-4>.in>.midd>.item-1>.midd>ul>li>a>strong{margin-right:5px; font-weight:500; font-size:17px; color:#222;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;} #main-line-4>.in>.midd>.item-1>.midd>ul>li>a>span{flex-shrink:0; margin-left:auto; font-size:14px; color:#666666;} #main-line-4>.in>.midd>.item-1>.midd>ul>li>a>i{flex-shrink:0; width:17px; height:17px; font-size:0; color:transparent; background-image:url(layout.svg); background-repeat:no-repeat; background-position:-300px 0; background-size:1500px auto;} #main-line-4>.in>.midd>.item-1>.midd>ul>li>a>*:nth-last-child(2){margin-right:20px;} #main-line-4>.in>.midd>.item-1>.midd>ul>li>a:hover{text-decoration:none;} #main-line-4>.in>.midd>.item-1>.midd>ul>li>a:hover>strong{color:#d71920;} #main-line-4>.in>.midd>.item-2{margin-right:0px;} #main-line-4>.in>.midd>.item-2>.midd{margin-top:8px;} #main-line-4>.in>.midd>.item-2>.midd>ul>li{position:relative; padding:11px 0 11px 12px;} #main-line-4>.in>.midd>.item-2>.midd>ul>li:nth-child(n+7){display:none;} #main-line-4>.in>.midd>.item-2>.midd>ul>li::before{content:""; display:block; position:absolute; left:0; top:19px; width:3px; height:3px; background-color:#c3c3c3;} #main-line-4>.in>.midd>.item-2>.midd>ul>li>a{display:flex; align-items:center; font-family: 'Nanum Barun Gothic';} #main-line-4>.in>.midd>.item-2>.midd>ul>li>a>strong{margin-right:5px; font-weight:500; font-size:17px; color:#222;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;} #main-line-4>.in>.midd>.item-2>.midd>ul>li>a>span{flex-shrink:0; margin-left:auto; font-size:14px; color:#666666;} #main-line-4>.in>.midd>.item-2>.midd>ul>li>a>i{flex-shrink:0; width:17px; height:17px; font-size:0; color:transparent; background-image:url(layout.svg); background-repeat:no-repeat; background-position:-300px 0; background-size:1500px auto;} #main-line-4>.in>.midd>.item-2>.midd>ul>li>a>*:nth-last-child(2){margin-right:20px;} #main-line-4>.in>.midd>.item-2>.midd>ul>li>a:hover{text-decoration:none;} #main-line-4>.in>.midd>.item-2>.midd>ul>li>a:hover>strong{color:#d71920;} @media screen and (max-width:1460px) { #main-line-4>.in{width:calc(100% - 60px); max-width:100%; margin:0 30px;} } @media screen and (max-width:950px) { #main-line-4>.in>.midd{flex-direction:column;} #main-line-4>.in>.midd>[class*="item-"]{width:100%;} #main-line-4>.in>.midd>.item-1{margin-right:0;} #main-line-4>.in>.midd>.item-2{margin-top:30px;} } @media screen and (max-width:650px) { #main-line-4{padding:45px 0;} #main-line-4>.in{width:calc(100% - 40px); margin:0 20px;} } @media screen and (max-width:550px) { #main-line-4>.in>.midd>.item-1 a strong{top: 1.4em; left: 1.2em; max-width: calc(100% - 2.4em); font-size: 16px; } #main-line-4>.in>.midd>.item-2>ul>li>a>strong{font-size:14px;} } @media screen and (max-width:400px) { #main-line-4>.in>.midd>.item-2>ul{flex-direction:column;} #main-line-4>.in>.midd>.item-2>ul>li{width:100%;} #main-line-4>.in>.midd>.item-2>ul>li:nth-child(1){margin-right:0;} #main-line-4>.in>.midd>.item-2>ul>li:nth-child(2){margin-top:20px;} } /* 5 */ #main-line-5{ position:relative; background-color:#76695c; } #main-line-5::after{ content:""; display:block; position:absolute; left:0; bottom:-8px; z-index:0; width:1177em; height:6em; font-size:10px; background-image:url(slide-text.svg); background-repeat:repeat-x; background-position:left bottom; background-size:auto 100%; animation-name:slide_text; animation-fill-mode:forwards; animation-duration:20s; animation-iteration-count:infinite; animation-timing-function:linear; } @-webkit-keyframes slide_text { 0%{left:0;} 100%{left:-117.7em;} } @keyframes slide_text { 0%{left:0;} 100%{left:-117.7em;} } #main-line-5>.in{display:flex; align-items:center; position:relative; z-index:100; width:100%; max-width:1280px; height:100%; margin:0 auto;} #main-line-5>.in img{width:100%;} #main-line-5>.in>.head{flex-shrink:0; position:relative; z-index:100; width:200px;} #main-line-5>.in>.head>.title{text-align:left;} #main-line-5>.in>.head>.title>strong{color:#fff;} #main-line-5>.in>.head>.title>span{color:#eec79f;} #main-line-5>.in>.head>.title>.controll{display:flex; margin-top:20px;} #main-line-5>.in>.head>.title>.controll>[class*="btn-"]{ display:flex; width:45px; height:45px; cursor:pointer; border:1px solid #fff; background-color:transparent; -webkit-transition:background-color 0.3s linear; transition:background-color 0.3s linear; } #main-line-5>.in>.head>.title>.controll>[class*="btn-"]:not(:last-child){border-right:none;} #main-line-5>.in>.head>.title>.controll>[class*="btn-"]::before{content:""; display:block; width:3.2em; height:3.2em; margin:auto; font-size:10px; background-image:url(layout.svg); background-position:-16em -6.4em; background-repeat:no-repeat; background-size:150em auto;} #main-line-5>.in>.head>.title>.controll>[class*="btn-"]>span{position:absolute; font-size:0; color:transparent;} #main-line-5>.in>.head>.title>.controll>.btn-prev::before{-webkit-transform:rotate(-90deg); transform:rotate(-90deg);} #main-line-5>.in>.head>.title>.controll>.btn-next::before{-webkit-transform:rotate(90deg); transform:rotate(90deg);} #main-line-5>.in>.midd{position:relative; z-index:0; height:100%;} #main-line-5>.in>.midd>ul{display:flex; position:relative;} #main-line-5>.in>.midd>ul>li{position:relative; width:328px; height:340px; margin:0 20px; margin-top:60px;} #main-line-5>.in>.midd>ul>li>a{ display:block; width:100%; height:100%; background-color:#fff; -webkit-box-shadow:9px 9px 18px 4px rgba(0,0,0,0.07); box-shadow:9px 9px 18px 4px rgba(0,0,0,0.07); -webkit-transition:all 0.3s linear; transition:all 0.3s linear; } #main-line-5>.in>.midd>ul>li>a>span{display:block; position:relative; background-repeat:no-repeat; background-position:center center; background-size:cover;} #main-line-5>.in>.midd>ul>li>a>span::after{ content:""; opacity:0; display:block; position:absolute; left:0; bottom:0; z-index:100; width:100%; height:5px; background-color:#d71920; -webkit-transition:all 0.3s linear; transition:all 0.3s linear; } #main-line-5>.in>.midd>ul>li>a>span::before{content:""; display:block; position:relative; z-index:-1; width:100%; padding-top:68.3%;} #main-line-5>.in>.midd>ul>li>a>span>em{ display:flex; position:absolute; right:0; bottom:0; z-index:300; -webkit-box-shadow: 3px 2px 7px rgba(0, 0, 0, 0.3); box-shadow: 3px 2px 7px rgba(0, 0, 0, 0.3); } #main-line-5>.in>.midd>ul>li>a>span>em>i{display:flex; align-items:center; height:24px; padding:0 10px; font-style:normal; font-size:14px; color:#fff;} #main-line-5>.in>.midd>ul>li>a>span>em>i.c1{background-color:#D71920;} #main-line-5>.in>.midd>ul>li>a>span>em>i.c2{background-color:#7A5632;} #main-line-5>.in>.midd>ul>li>a>strong{display:block; padding:20px 26px;} #main-line-5>.in>.midd>ul>li>a>strong>em{display:block; font-style:normal; font-weight:600; font-size:20px; color:#222;} #main-line-5>.in>.midd>ul>li>a>strong>span{ display:block; margin-top:10px; line-height:1.5; font-family:'Nanum Barun Gothic'; font-weight:400; font-size:15px; color:#222; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #main-line-5>.in>.head>.title>.controll>[class*="btn-"]:hover{background-color:#f8e4d0;} #main-line-5>.in>.head>.title>.controll>[class*="btn-"]:hover::before{background-position:-16em -9.6em;} #main-line-5>.in>.midd>ul>li>a:hover, #main-line-5>.in>.midd>ul>li.on>a{ text-decoration:none; -webkit-transform:translateY(-28px); transform:translateY(-28px); -webkit-box-shadow:7px 7px 36px 8px rgb(110, 77, 45, 0.31); box-shadow:7px 7px 36px 8px rgb(110, 77, 45, 0.31); } #main-line-5>.in>.midd>ul>li>a:hover>span::after, #main-line-5>.in>.midd>ul>li.on>a>span::after{opacity:1;} #main-line-5>.in>.midd>ul>li>a:hover>strong>em, #main-line-5>.in>.midd>ul>li.on>a>strong>em{color:#7e1111;} /* 6 */ #main-line-6{ padding:0px 0 0px; background-color:#fff; background-image:url(line-6_bg.jpg); background-repeat:no-repeat; background-position:center bottom; background-size:cover;} @-webkit-keyframes slide_text { 0%{left:0;} 100%{left:-117.7em;} } @keyframes slide_text { 0%{left:0;} 100%{left:-117.7em;} } #main-line-6>.in{/*display:flex; align-items:center;*/ position:relative; z-index:100; width:100%; max-width:1280px; height:400px; margin:0 auto;} #main-line-6>.in>.head{flex-shrink:0; position:relative; z-index:100; width:200px;} #main-line-6>.in>.head>.title{text-align:left;} #main-line-6>.in>.head>.title>strong{color:#fff;} #main-line-6>.in>.head>.title>span{color:#eec79f;} #main-line-6>.in>.midd{position:relative; z-index:0; height:100%;} #main-line-6>.in>.midd>ul{display:flex; position:relative; justify-content: space-between;} #main-line-6>.in>.midd>ul>li{position:relative; width:23.7%; height:340px; margin-top:50px;} #main-line-6>.in>.midd>ul>li>a{ display:block; width:100%; height:100%; background-color:#fff; -webkit-box-shadow:9px 9px 18px 4px rgba(0,0,0,0.07); box-shadow:9px 9px 18px 4px rgba(0,0,0,0.07); -webkit-transition:all 0.3s linear; transition:all 0.3s linear; } #main-line-6>.in>.midd>ul>li>a>span{display:block; position:relative; background-repeat:no-repeat; background-position:center center; background-size:cover;} #main-line-6>.in>.midd>ul>li>a>span::after{ content:""; opacity:0; display:block; position:absolute; left:0; bottom:0; z-index:100; width:100%; height:5px; background-color:#d71920; -webkit-transition:all 0.3s linear; transition:all 0.3s linear; } #main-line-6>.in>.midd>ul>li>a>span::before{content:""; display:block; position:relative; z-index:-1; width:100%; padding-top:68.3%;} #main-line-6>.in>.midd>ul>li>a>span>em{ display:flex; position:absolute; right:0; bottom:0; z-index:300; -webkit-box-shadow: 3px 2px 7px rgba(0, 0, 0, 0.3); box-shadow: 3px 2px 7px rgba(0, 0, 0, 0.3); } #main-line-6>.in>.midd>ul>li>a>span>em>i{display:flex; align-items:center; height:24px; padding:0 10px; font-style:normal; font-size:14px; color:#fff;} #main-line-6>.in>.midd>ul>li>a>span>em>i.c1{background-color:#D71920;} #main-line-6>.in>.midd>ul>li>a>span>em>i.c2{background-color:#7A5632;} #main-line-6>.in>.midd>ul>li>a>strong{display:block; padding:20px 26px;} #main-line-6>.in>.midd>ul>li>a>strong>em{display:block; font-style:normal; font-weight:600; font-size:20px; color:#222;} #main-line-6>.in>.midd>ul>li>a>strong>span{ display:block; margin-top:10px; line-height:1.5; font-family:'Nanum Barun Gothic'; font-weight:400; font-size:15px; color:#222; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #main-line-6>.in>.midd>ul>li>a:hover, #main-line-6>.in>.midd>ul>li.on>a{ text-decoration:none; -webkit-transform:translateY(-28px); transform:translateY(-28px); -webkit-box-shadow:7px 7px 36px 8px rgb(110, 77, 45, 0.31); box-shadow:7px 7px 36px 8px rgb(110, 77, 45, 0.31); } #main-line-6>.in>.midd>ul>li>a:hover>span::after, #main-line-6>.in>.midd>ul>li.on>a>span::after{opacity:1;} #main-line-6>.in>.midd>ul>li>a:hover>strong>em, #main-line-6>.in>.midd>ul>li.on>a>strong>em{color:#7e1111;} @media screen and (max-width:1460px) { #main-line-6>.in{width:calc(100% - 60px); max-width:100%; margin:0 30px;} } @media screen and (max-width:1024px) { #main-line-6{ background-position:left top, right bottom; background-size:auto 50%, auto 50%; } #main-line-6::after{display:none;} #main-line-6>.in{flex-direction:column; align-items:flex-start; padding-top:30px;height:350px;} #main-line-6>.in>.head{width:100%;} #main-line-6>.in>.head>.title{display:flex; align-items:center; width:100%; margin-bottom:20px;} #main-line-6>.in>.head>.title>span{font-weight:600; font-size:20px;} #main-line-6>.in>.head>.title>strong{margin-left:10px; font-size:32px;} #main-line-6>.in>.head>.title>.controll{margin:0 0 0 auto;} #main-line-6>.in>.head>.title>.controll>[class*="btn-"]{border-color:rgba(255,255,255,0.5);} #main-line-6>.in>.midd>ul>li{top:0 !important; margin:0;} #main-line-6>.in>.midd>ul>li>a:hover, #main-line-5>.in>.midd>ul>li.on>a{-webkit-transform:translateY(0); transform:translateY(0);} #main-line-6>.in>.midd>ul>li {position: relative;width: 24%;height: 270px;margin: 0 20px;margin-top: 10px;} } @media screen and (max-width:650px) { /* #main-line-5{padding:45px 0;} */ #main-line-6>.in{padding-top:10px;height:450px;} #main-line-6>.in>.midd>ul {display: flex;position: relative;justify-content: space-between;flex-wrap: wrap;} #main-line-6>.in>.midd>ul>li>a>strong>span {display: none;} #main-line-6>.in>.midd>ul>li {position: relative;width: 42%;height: 220px;margin: 10px 0 0 0;} #main-line-6>.in{width:calc(100% - 20px); margin:0;} #main-line-6>.in>.head>.title>span{font-size:17px;} #main-line-6>.in>.head>.title>strong{font-size:27px;} } @media screen and (max-width:370px) { #main-line-6>.in>.midd>ul>li {height: 180px;} #main-line-6>.in>.midd>ul>li{width:40%;} } /* 7 */ #main-line-7{padding:20px 0 0px; background-color:#fff;} #main-line-7>.in {width: 100%;max-width: 1280px;margin: 0 auto;} #main-line-7>.in>.midd>.item-2{width:calc((100% - 40px));} #main-line-7>.in>.midd>.item-2>.head{border-bottom-color:transparent;} #main-line-7>.in>.midd>.item-2>.head>strong::before{background-color:transparent;} #main-line-7>.in>.midd>.item-2>.midd>ul{display:flex; position:relative;} #main-line-7>.in>.midd>.item-2>.midd>ul>li{flex-shrink:0; width:calc((100% - 20px) / 4);} #main-line-7>.in>.midd>.item-2>.midd>ul>li:not(:last-child){margin-right:20px;} #main-line-7>.in>.midd>.item-2>.midd>ul>li>a{ display:block; background-image:url(no_img.gif); background-repeat:no-repeat; background-position:center -40px; background-size:cover; -webkit-box-shadow:9px 7px 15px 3px rgba(0,0,0,0.08); box-shadow:9px 7px 15px 3px rgba(0,0,0,0.08); } #main-line-7>.in>.midd>.item-2>.midd>ul>li>a>span{display:block; position:relative; background-repeat:no-repeat; background-position:center center; background-size:cover;height: 240px;} #main-line-7>.in>.midd>.item-2>.midd>ul>li>a>span::before{content:""; display:block; width:100%; padding-top:160px;} #main-line-7>.in>.midd>.item-2>.midd>ul>li>a>span::after{ content:""; opacity:0; display:block; position:absolute; left:0; bottom:0; z-index:100; width:100%; height:60%; background: rgb(215,25,32); background: linear-gradient(0deg, rgba(215,25,32,1) -50%, rgba(255,255,255,0) 50%); -webkit-transition:all 1s linear; transition:all 1s linear; } #main-line-7>.in>.midd>.item-2>.midd>ul>li>a>strong{ display:block; line-height:1.4; padding:16px 20px; font-family:'Nanum Barun Gothic'; font-weight:500; font-size:17px; border:1px solid #e8e8e8; border-top:none; color:#222; background-color:#fff; } #main-line-7>.in>.midd>.item-2>.midd>ul>li>a>strong>span{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #main-line-7>.in>.midd>.item-2>.midd>ul>li>a:hover{text-decoration:none;} #main-line-7>.in>.midd>.item-2>.midd>ul>li>a:hover>span::after{opacity:1;} @media screen and (max-width:1460px) { #main-line-7>.in{width:calc(100% - 60px); max-width:100%; margin:0 30px;} } @media screen and (max-width:950px) { #main-line-7>.in>.midd>.item-2>.midd>ul>li{width:calc((100% - 20px) / 3);} #main-line-7::before{font-size:7px;} #main-line-7>.in>.midd>.item-1, #main-line-7>.in>.midd>.item-2{width:100%;} #main-line-7>.in>.midd>.item-1{margin-right:0;} #main-line-7>.in>.midd>.item-2{margin-top:30px;} #main-line-7>.in>.midd>.item-2>.midd>ul>li>a>span::before{padding-top:48.53%;} } @media screen and (max-width:650px) { #main-line-7::before{left:-14em; font-size:4px;} #main-line-7{padding:45px 0;} #main-line-7>.in{width:calc(100% - 40px); margin:0 20px;} #main-line-7>.in>.midd>.item-2>.midd>ul>li>a>strong{font-size:14px;} } @media screen and (max-width:550px) { #main-line-7>.in>.midd>.item-2>.midd>ul>li{width:100%;} } @media screen and (max-width:500px) { #main-line-7>.in>.midd>.item-1>.midd>ul>li{padding:7px 0 7px 10px;} #main-line-7>.in>.midd>.item-1>.midd>ul>li::before{top:15px;} #main-line-7>.in>.midd>.item-1>.midd>ul>li>a>strong{font-size:15px;} #main-line-7>.in>.midd>.item-1>.midd>ul>li>a>span{display:none;} } @media screen and (max-width:400px) { } /* 8 */ #main-line-8{ padding:0px 0 0px; background-color:#fff; background-image:url(line-8_bg.jpg); background-repeat:no-repeat; background-position:center bottom; background-size:cover;} @-webkit-keyframes slide_text { 0%{left:0;} 100%{left:-117.7em;} } @keyframes slide_text { 0%{left:0;} 100%{left:-117.7em;} } #main-line-8>.in{/*display:flex; align-items:center;*/ position:relative; z-index:100; width:100%; max-width:1280px; height:437px; margin:0 auto;} #main-line-8>.in>.head{flex-shrink:0; position:relative; z-index:100; width:200px;} #main-line-8>.in>.head>.title{text-align:left;} #main-line-8>.in>.head>.title>strong{color:#fff;} #main-line-8>.in>.head>.title>span{color:#eec79f;} #main-line-8>.in>.midd{position:relative; z-index:0; height:100%;} #main-line-8>.in>.midd>ul{display:flex; position:relative; justify-content: space-between;} #main-line-8>.in>.midd>ul>li{position:relative; width:23.7%; height:340px; margin-top:50px;} #main-line-8>.in>.midd>ul>li>a{ display:block; width:100%; height:100%; background-color:#fff; -webkit-box-shadow:9px 9px 18px 4px rgba(0,0,0,0.07); box-shadow:9px 9px 18px 4px rgba(0,0,0,0.07); -webkit-transition:all 0.3s linear; transition:all 0.3s linear; } #main-line-8>.in>.midd>ul>li>a>span{display:block; position:relative; background-repeat:no-repeat; background-position:center center; background-size:cover;} #main-line-8>.in>.midd>ul>li>a>span::after{ content:""; opacity:0; display:block; position:absolute; left:0; bottom:0; z-index:100; width:100%; height:5px; background-color:#d71920; -webkit-transition:all 0.3s linear; transition:all 0.3s linear; } #main-line-8>.in>.midd>ul>li>a>span::before{content:""; display:block; position:relative; z-index:-1; width:100%; padding-top:68.3%;} #main-line-8>.in>.midd>ul>li>a>span>em{ display:flex; position:absolute; right:0; bottom:0; z-index:300; -webkit-box-shadow: 3px 2px 7px rgba(0, 0, 0, 0.3); box-shadow: 3px 2px 7px rgba(0, 0, 0, 0.3); } #main-line-8>.in>.midd>ul>li>a>span>em>i{display:flex; align-items:center; height:24px; padding:0 10px; font-style:normal; font-size:14px; color:#fff;} #main-line-8>.in>.midd>ul>li>a>span>em>i.c1{background-color:#D71920;} #main-line-8>.in>.midd>ul>li>a>span>em>i.c2{background-color:#7A5632;} #main-line-8>.in>.midd>ul>li>a>strong{display:block; padding:20px 26px;} #main-line-8>.in>.midd>ul>li>a>strong>em{display:block; font-style:normal; font-weight:600; font-size:20px; color:#222;} #main-line-8>.in>.midd>ul>li>a>strong>span{ display:block; margin-top:10px; line-height:1.5; font-family:'Nanum Barun Gothic'; font-weight:400; font-size:15px; color:#222; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #main-line-8>.in>.midd>ul>li>a:hover, #main-line-8>.in>.midd>ul>li.on>a{ text-decoration:none; -webkit-transform:translateY(-28px); transform:translateY(-28px); -webkit-box-shadow:7px 7px 36px 8px rgb(110, 77, 45, 0.31); box-shadow:7px 7px 36px 8px rgb(110, 77, 45, 0.31); } #main-line-8>.in>.midd>ul>li>a:hover>span::after, #main-line-8>.in>.midd>ul>li.on>a>span::after{opacity:1;} #main-line-8>.in>.midd>ul>li>a:hover>strong>em, #main-line-8>.in>.midd>ul>li.on>a>strong>em{color:#7e1111;} @media screen and (max-width:1460px) { #main-line-8>.in{width:calc(100% - 60px); max-width:100%; margin:0 30px;} } @media screen and (max-width:1024px) { #main-line-8{ background-position:left top, right bottom; background-size:auto 50%, auto 50%; } #main-line-8::after{display:none;} #main-line-8>.in{flex-direction:column; align-items:flex-start; padding-top:30px;height:350px;} #main-line-8>.in>.head{width:100%;} #main-line-8>.in>.head>.title{display:flex; align-items:center; width:100%; margin-bottom:20px;} #main-line-8>.in>.head>.title>span{font-weight:600; font-size:20px;} #main-line-8>.in>.head>.title>strong{margin-left:10px; font-size:32px;} #main-line-8>.in>.head>.title>.controll{margin:0 0 0 auto;} #main-line-8>.in>.head>.title>.controll>[class*="btn-"]{border-color:rgba(255,255,255,0.5);} #main-line-8>.in>.midd>ul>li{top:0 !important; margin:0;} #main-line-8>.in>.midd>ul>li>a:hover, #main-line-5>.in>.midd>ul>li.on>a{-webkit-transform:translateY(0); transform:translateY(0);} #main-line-8>.in>.midd>ul>li {position: relative;width: 24%;height: 270px;margin: 0 20px;margin-top: 10px;} } @media screen and (max-width:650px) { /* #main-line-5{padding:45px 0;} */ #main-line-8>.in{padding-top:10px;height:450px;} #main-line-8>.in>.midd>ul {display: flex;position: relative;justify-content: space-between;flex-wrap: wrap;} #main-line-8>.in>.midd>ul>li>a>strong>span {display: none;} #main-line-8>.in>.midd>ul>li {position: relative;width: 42%;height: 220px;margin: 10px 0 0 0;} #main-line-8>.in{width:calc(100% - 20px); margin:0;} #main-line-8>.in>.head>.title>span{font-size:17px;} #main-line-8>.in>.head>.title>strong{font-size:27px;} } @media screen and (max-width:370px) { #main-line-8>.in>.midd>ul>li {height: 180px;} #main-line-8>.in>.midd>ul>li{width:40%;} } /* main-quick */ #main-quick{position:fixed; right:0; top:278px; z-index:2000;} #main-quick>ul>li{position:relative;} #main-quick>ul>li:not(:last-child){margin-bottom:1px;} #main-quick>ul>li>.head>button{ width:77px; height:75px; cursor:pointer; font-size:15px; border:none; background-color:transparent; -webkit-box-shadow:2px 3px 8px 3px rgba(0,0,0,0.13); box-shadow:2px 3px 8px 3px rgba(0,0,0,0.13); -webkit-transition:background-color 0.3s linear; transition:background-color 0.3s linear; } #main-quick>ul>li>.head>button::before{content:""; display:block; width:3em; height:3em; margin:0 auto 2px; font-size:10px; background-image:url(layout.svg); background-repeat:no-repeat; background-size:150em auto;} #main-quick>ul>li:nth-child(1)>.head>button{color:#444; background-color:#fff;} #main-quick>ul>li:nth-child(1)>.head>button::before{background-position:-30em -20em;} #main-quick>ul>li:nth-child(1)>.head>button:hover::before{background-position:-30em -23em;} #main-quick>ul>li:nth-child(2)>.head>button{color:#fff; background-color:#d71920;} #main-quick>ul>li:nth-child(2)>.head>button::before{background-position:-33em -23em;} #main-quick>ul>li>.midd{display:none; position:absolute; right:100%; top:0; width:370px; height:287px; border:2px solid #875626; background-color:#fff;} #main-quick>ul>li>.midd>ul{display:flex; flex-wrap:wrap; padding:30px 20px;} #main-quick>ul>li>.midd>ul>li{width:calc((100% - 1px) / 3);} #main-quick>ul>li>.midd>ul>li:nth-child(n+4){margin-top:20px;} #main-quick>ul>li>.midd>ul>li>a{display:block;} #main-quick>ul>li>.midd>ul>li>a::before{ content:""; display:block; width:3.8em; height:3.8em; margin:0 auto 0.7em; font-size:10px; background-color:#f4f6f9; background-image:url(layout.svg); background-repeat:no-repeat; background-size:150em auto; border-radius:50%; -webkit-transition:background-color 0.3s linear; transition:background-color 0.3s linear; } #main-quick>ul>li>.midd>ul>li>a.icon-1::before{background-position:calc(-30em - (3.8em * 0)) -30em;} #main-quick>ul>li>.midd>ul>li>a.icon-2::before{background-position:calc(-30em - (3.8em * 1)) -30em;} #main-quick>ul>li>.midd>ul>li>a.icon-3::before{background-position:calc(-30em - (3.8em * 2)) -30em;} #main-quick>ul>li>.midd>ul>li>a.icon-4::before{background-position:calc(-30em - (3.8em * 3)) -30em;} #main-quick>ul>li>.midd>ul>li>a.icon-5::before{background-position:calc(-30em - (3.8em * 4)) -30em;} #main-quick>ul>li>.midd>ul>li>a.icon-6::before{background-position:calc(-30em - (3.8em * 5)) -30em;} #main-quick>ul>li>.midd>ul>li>a.icon-7::before{background-position:calc(-30em - (3.8em * 6)) -30em;} #main-quick>ul>li>.midd>ul>li>a.icon-8::before{background-position:calc(-30em - (3.8em * 7)) -30em;} #main-quick>ul>li>.midd>ul>li>a.icon-9::before{background-position:calc(-30em - (3.8em * 8)) -30em;} #main-quick>ul>li>.midd>ul>li>a.icon-10::before{background-position:calc(-30em - (3.8em * 9)) -30em;} #main-quick>ul>li>.midd>ul>li>a.icon-11::before{background-position:calc(-30em - (3.8em * 10)) -30em;} #main-quick>ul>li>.midd>ul>li>a.icon-12::before{background-position:calc(-30em - (3.8em * 11)) -30em;} #main-quick>ul>li>.midd>ul>li>a.icon-13::before{background-position:calc(-30em - (3.8em * 12)) -30em;} #main-quick>ul>li>.midd>ul>li>a.icon-14::before{background-position:calc(-30em - (3.8em * 13)) -30em;} #main-quick>ul>li>.midd>ul>li>a.icon-15::before{background-position:calc(-30em - (3.8em * 14)) -30em;} #main-quick>ul>li>.midd>ul>li>a.icon-16::before{background-position:calc(-30em - (3.8em * 15)) -30em;} #main-quick>ul>li>.midd>ul>li>a.icon-17::before{background-position:calc(-30em - (3.8em * 16)) -30em;} #main-quick>ul>li>.midd>ul>li>a:hover{text-decoration:none;} #main-quick>ul>li>.midd>ul>li>a:hover::before{background-color:#7A5632;} #main-quick>ul>li>.midd>ul>li>a.icon-1:hover::before{background-position:calc(-30em - (3.8em * 0)) -33.8em;} #main-quick>ul>li>.midd>ul>li>a.icon-2:hover::before{background-position:calc(-30em - (3.8em * 1)) -33.8em;} #main-quick>ul>li>.midd>ul>li>a.icon-3:hover::before{background-position:calc(-30em - (3.8em * 2)) -33.8em;} #main-quick>ul>li>.midd>ul>li>a.icon-4:hover::before{background-position:calc(-30em - (3.8em * 3)) -33.8em;} #main-quick>ul>li>.midd>ul>li>a.icon-5:hover::before{background-position:calc(-30em - (3.8em * 4)) -33.8em;} #main-quick>ul>li>.midd>ul>li>a.icon-6:hover::before{background-position:calc(-30em - (3.8em * 5)) -33.8em;} #main-quick>ul>li>.midd>ul>li>a.icon-7:hover::before{background-position:calc(-30em - (3.8em * 6)) -33.8em;} #main-quick>ul>li>.midd>ul>li>a.icon-8:hover::before{background-position:calc(-30em - (3.8em * 7)) -33.8em;} #main-quick>ul>li>.midd>ul>li>a.icon-9:hover::before{background-position:calc(-30em - (3.8em * 8)) -33.8em;} #main-quick>ul>li>.midd>ul>li>a.icon-10:hover::before{background-position:calc(-30em - (3.8em * 9)) -33.8em;} #main-quick>ul>li>.midd>ul>li>a.icon-11:hover::before{background-position:calc(-30em - (3.8em * 10)) -33.8em;} #main-quick>ul>li>.midd>ul>li>a.icon-12:hover::before{background-position:calc(-30em - (3.8em * 11)) -33.8em;} #main-quick>ul>li>.midd>ul>li>a.icon-13:hover::before{background-position:calc(-30em - (3.8em * 12)) -33.8em;} #main-quick>ul>li>.midd>ul>li>a.icon-14:hover::before{background-position:calc(-30em - (3.8em * 13)) -33.8em;} #main-quick>ul>li>.midd>ul>li>a.icon-15:hover::before{background-position:calc(-30em - (3.8em * 14)) -33.8em;} #main-quick>ul>li>.midd>ul>li>a.icon-16:hover::before{background-position:calc(-30em - (3.8em * 15)) -33.8em;} #main-quick>ul>li>.midd>ul>li>a.icon-17:hover::before{background-position:calc(-30em - (3.8em * 16)) -33.8em;} #main-quick>ul>li>.midd>ul>li>a>span{display:block; text-align:center;} #main-quick>ul>li>.close{display:none; position:absolute; right:calc(100% + 370px); top:0; width:36px; height:36px; cursor:pointer; border:none; background-color:#875626;} #main-quick>ul>li>.close::before{ content:""; width:3.2em; height:3.2em; margin:auto; font-size:10px; background-image:url(layout.svg); background-repeat:no-repeat; background-position:-12.8em -6.4em; background-size:150em auto; -webkit-transition:transform 0.3s linear; transition:transform 0.3s linear; } #main-quick>ul>li>.close>span{position:absolute; font-size:0; color:transparent;} #main-quick>ul>li>.close:hover::before{-webkit-transform:rotate(180deg); transform:rotate(180deg);} #main-quick>ul>li:nth-child(2)>.midd{border-color:#d51920;} #main-quick>ul>li:nth-child(2)>.close{background-color:#8d0308;} #main-quick>ul>li:nth-child(1)>.head>button:hover, #main-quick[data-open="1"]>ul>li:nth-child(1)>.head>button{color:#fff; background-color:#875626;} #main-quick[data-open="1"]>ul>li:nth-child(1)>.head>button::before{background-position:-30em -23em;} #main-quick[data-open="1"]>ul>li:nth-child(1)>.midd{display:block;} #main-quick[data-open="1"]>ul>li:nth-child(1)>.close{display:flex;} #main-quick>ul>li:nth-child(2)>.head>button:hover, #main-quick[data-open="2"]>ul>li:nth-child(2)>.head>button{background-color:#8d0308;} #main-quick[data-open="2"]>ul>li:nth-child(2)>.midd{display:block;} #main-quick[data-open="2"]>ul>li:nth-child(2)>.close{display:flex;} @media screen and (max-width:1024px) { #main-quick{display:none;} } /* animation */ body#main [data-animation="scroll"]{ opacity:0; -webkit-transform:translateY(50px); transform:translateY(50px); -webkit-transition:opacity 0.5s linear 0.3s, transform 0.5s linear 0.3s; transition:opacity 0.5s linear 0.3s, transform 0.5s linear 0.3s; } body#main [data-animation="scroll"].viewport{ opacity:1; -webkit-transform:translateY(0); transform:translateY(0); }