.subtop {width: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; height: 48vh; position: relative; } #subtop1 {background-image: url(../image/subtop1.png);} #subtop2 {background-image: url(../image/subtop2.png);} #subtop2-2 {background-image: url(../image/subtop2-2.png);} #subtop2-3 {background-image: url(../image/subtop2-3.png);} #subtop3 {background-image: url(../image/subtop3.png);} #subtop4 {background-image: url(../image/subtop4.png);} #subtop5 {background-image: url(../image/subtop5.png);} #subtop6 {background-image: url(../image/subtop6.png);} #subtop7 {background-image: url(../image/subtop7.png);} .subtop .txtbox {width: 100%; position: absolute; left: 0px; text-align: center; top: 58%; transform: translateY(-50%);} .subtop .txtbox p:nth-child(1) { line-height: 1.3; font-weight: bold; font-size: 1.5rem; letter-spacing: 2.5px; color: #FFFFFF;} .subtop .txtbox p:nth-child(2) { font-weight: bold; font-size: 3.8rem; text-transform: capitalize; color: #fff; margin: 2vh 0px 3vh;} .subtop .txtbox p:nth-child(3) { font-size: 1rem; letter-spacing: 1.7px; text-transform: uppercase; color: #fff; font-weight: 200;} .sub_top_wrap { width: 100%; position: relative; z-index: 10; background-color: #fff; box-sizing: border-box; border-bottom: 1px solid rgba(0,0,0,0.1);} .subtop_nav { width: 90%; max-width: 1500px; margin:auto; font-size: 0px; z-index: 99; position: relative; border-bottom: 1px solid rgba(0,0,0,0.1);} .subtop_nav > li:nth-child(1) { width: 50px; text-align: center; padding: 5px 0px;} .subtop_nav > li:nth-child(1) a {display: block; width: 100%; height: 100%;} .subtop_nav > li:nth-child(1) a img { display: inline-block; vertical-align: middle; width: 100%; max-width: 25px; margin: auto;} .subtop_nav > li { cursor: pointer; display: inline-block; vertical-align: top; color: #999999; font-size: 0.9rem; line-height: 45px; width: calc((100% - 50px)/5); position: relative; box-sizing: border-box; padding: 5px 20px; text-transform: uppercase; } .subtop_nav > li p {position: relative;} .subtop_nav > li p i { font-size: 1.2rem; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); transition: all 0.2s linear;} .subtop_nav > li .subtop_btn { position: absolute; right: 8%; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; display: none;} .bar1 {width: 100%; height: 1px; background-color: #ddd; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); } .bar2 { max-width: 1px; height: 100%; background-color: #ddd; width: 100%; margin: auto; transition: all 0.4s;} .subtop_nav > li:hover p i {color: #FF951A;} .subtop_nav > li:hover .bar2 {transform: rotate(90deg);} /* .subtop_nav > li:hover .subtop_ul {display: block;} */ .subtop_ul { position: absolute; top: 55px; left: 0px; width: 100%; background-color: #FF951A; padding: 10px 20px; box-sizing: border-box; transition: all 0.2s linear; pointer-events: none; opacity: 0;} .subtop_ul > li { line-height: 1.4; padding: 5px 0px;} .subtop_ul > li a { display: block; color: #fff; width: 100%; height: 100%; transition: all 0.4s;border-bottom: 1px solid transparent; opacity: 0.8; } .subtop_ul > li:hover a {opacity: 1;} .subtop_nav > li:last-child::after { content: ""; width: 100%; height: 2px; background-color: #ff951a; position: absolute; left: 0px; bottom: -2px;} .subtop_nav > li.open i { transform: translateY(-50%) rotate(180deg); color: #FF951A;} .subtop_nav > li.open .subtop_ul { opacity: 1; pointer-events: initial;} .sub_top_wrap.color2 .subtop_nav > li:hover p i {color: #6ca845;} .sub_top_wrap.color2 .subtop_ul { background-color: #6ca845;} .sub_top_wrap.color2 .subtop_nav > li:last-child::after { background-color: #6ca845; } .sub_top_wrap.color2 .subtop_nav > li.open i { color: #6ca845;} .sub_top_wrap.color3 .subtop_nav > li:hover p i {color: #3792ff;} .sub_top_wrap.color3 .subtop_ul { background-color: #3792ff;} .sub_top_wrap.color3 .subtop_nav > li:last-child::after { background-color: #3792ff; } .sub_top_wrap.color3 .subtop_nav > li.open i { color: #3792ff;} .color1 {color:#FF951A !important} .color2 {color:#6ca845 !important} .color3 {color:#3792ff !important} .color4 {color:#094eaa !important} .sub {position: relative; width:100%;} .sub_title {width: 100%; margin: 100px 0px 100px; position: relative; } .sub_p1 {font-size: 3rem; line-height: 1.3; letter-spacing: -1px; color: #000000; font-weight: 700; text-transform: uppercase;} .sub_p1.deco { font-size: 2.2rem;} .sub_p1.deco::before { content: ""; display: block; width: 35px; height: 5px; background: #ff921a;margin: 0px auto 15px;} .sub_p2 { font-size: 1rem; letter-spacing: 1.5px; text-transform: uppercase; color: #FF951A; margin-bottom: 15px;} .sub_p3 {font-size: 1rem; line-height: 1.5; color: #666666; font-weight: 300;} .sub_p4 { font-weight: 800; font-size: 3rem; line-height: 1.2; letter-spacing: -1.25px; color: #000000; position: relative;} .sub_p5 { font-size: 1.8rem; line-height: 1.3; letter-spacing: -0.75px; color: #000000; position: relative;} .sub_p6 {font-size: 1.6rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.75px; text-transform: uppercase; color: #1a1a1a;} .sub_p7 {font-size: 1.4rem; line-height: 1.3; letter-spacing: -0.62px; color: #1a1a1a;} .sub_inner {width:90%; max-width: 1200px; margin: auto; position: relative;} .sub_inner2 {width:90%; margin: auto; position: relative;} .sub_board {margin: 100px 0px 250px;} /*sub1-1*/ .s111 { margin: 100px 0px 180px;} .s111_ul { font-size: 0px; width: 100%; position: relative;} .s111_ul > li { display: inline-block; vertical-align: top; width: 50%; height: 65vh;} .s111_ul > li.img { background: no-repeat center/cover; position: absolute; right: 0px; top: 0px;} .s111_ul.ver2 > li.img { position: relative; right: auto; top: auto;} .s111_ul > li.img1 { background-image: url(../image/s1/s111_img1.png);} .s111_ul > li.img2 { background-image: url(../image/s1/s111_img2.png);} .s111_ul > li.img3 { background-image: url(../image/s1/s111_img3.png);} .s111_ul > li.img4 { background-image: url(../image/s1/s111_img4.png);} .s111_ul > li.txt { position: relative; box-sizing: border-box; padding-right: 8%; word-break: keep-all;} .s111_ul.ver2 > li.txt {position: relative;} .s111_ul > li.txt .txtbox { position: absolute; left: 0px; top: 50%; transform: translateY(-50%); width: 100%; padding-right: 15%; box-sizing: border-box; word-break: keep-all;} .s111_ul.ver2 > li.txt .txtbox { padding-right: 10%; padding-left: 10%;} .s111_ul > li.txt .txtbox p:nth-child(1) { padding-top: 10vh; min-height: 2em;} .s111_ul > li.txt .txtbox p:nth-child(1) span.num { font-family: 'NEXON Lv1 Gothic OTF Bold'; font-weight: bold; font-size: 8rem; line-height: 1; text-transform: uppercase; color: #e5e5e5; position: absolute; left: 0px; top: 0px; z-index: -1;} .s111_ul > li.txt .txtbox p:nth-child(2) { margin-top: 3vh; line-height: 1.7;} /* .s111_ul > li.txt.pc {display: inline-block;} .s111_ul > li.txt.pc img {max-width: 100%;} .s111_ul > li.txt.mob {display: none;} */ .s111_ul > li.txt.pc {display:none;} .s111_ul > li.txt.pc img {max-width: 100%;} .s111_ul > li.txt.mob {display: inline-block;} .s112 { padding: 80px 0px 150px; background-color: #ff951a; } .s112_ul { width: 100%; font-size: 0px; margin-top: 10vh;} .s112_ul > li { display: inline-block; vertical-align: top; width: 25%; text-align: center;} .s112_ul > li > img { width: 100%; max-width: 148px; margin: auto; display: block;} .s112_ul > li > p:nth-child(2) { font-size: 1.5rem; line-height: 1.3; text-transform: uppercase; color: #FFFFFF; margin: 3vh 0px 1.5vh;} .s112_ul > li > p:nth-child(2) span { font-family: 'NEXON Lv1 Gothic OTF Bold'; font-size: 2.5rem; color: #FFFFFF;} .s112_ul > li > p:nth-child(3) { font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.5px; color: #fff;} /*sub1-2*/ .s121 { margin: 100px 0px 0px;} .h_tab {font-size: 0px; width: 100%; margin: 0px auto 15vh; text-align: center;} .h_tab_ul > li { width: 25%; border: 1px solid #ddd; border-right: 0px; box-sizing: border-box; display: inline-block; vertical-align: top; cursor: pointer; padding: 15px 0px; position: relative; font-size: 1.1rem; letter-spacing: -0.45px; text-transform: capitalize; color: #999999; transition: all 0.4s;} .h_tab_ul > li:last-child {border-right: 1px solid #ddd;} .h_tab_ul > li:hover { color: #FF951A;} .h_tab_ul > li::after { border: 1px solid #FF951A; content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: -1; box-sizing: border-box; transition: all 0.4s; opacity: 0;} .h_tab_ul > li:hover::after { opacity: 1;} .h_tab_ul > li > a {display: block; width: 100%; transition: all 0.4s;} .h_tab_ul > li:hover > a { color: #FF951A;} .h_contbox { width: 100%; position: relative; font-size: 0px;} .h_progress_box { position: absolute; left: 33%; height: 100%; width: 1px; background-color: #ddd;} .h_progress_bar {width: 3px;height: 0%;position: absolute;left: -1px;top: 0px;background-color: #ff951a;} progress { position: fixed; top: 0; left: 0; -webkit-appearance: none; appearance: none; width: 100%; height: 15px; border: none; background: transparent; } progress::-webkit-progress-bar { background: transparent; } progress::-webkit-progress-value { background: #ff951a; background-attachment: fixed; } progress::-moz-progress-bar { background: #ff951a; background-attachment: fixed; } .h_cont {width: 100%;padding-bottom: 10vh; padding-top: 10vh;} .h_cont.first {padding-top: 0px;} .h_cont:last-child { padding-bottom: 30vh;} .h_cont .tit_year { width: 28%; text-align: right; display: inline-block; vertical-align: top; transition: all 0.4s; line-height: 1; color: #ff951a;} .h_list { display: inline-block; vertical-align: top; width: 62%; margin-left: 10%; position: relative;} .h_list::before { content: ""; position: absolute; left: calc(-10% + 10px); top: 0px; width: 11px; height: 11px; background-color: #ff951a; border-radius: 100%;} .h_list .list_item { padding-bottom: 2vh; border-bottom: 1px solid rgba(0,0,0,0.2); margin-bottom: 2vh;} .h_list .list_item p { padding-left: 20%; box-sizing: border-box; margin-bottom: 2vh; word-break: keep-all; position: relative;} .h_list .list_item p:last-child {margin-bottom: 0px;} .h_list .list_item p span.year { position: absolute; left: 0px; top: 0px; font-weight: 800; font-size: 1.3rem; letter-spacing: -0.5px; text-transform: uppercase; color: #1a1a1a; line-height: 1;} /*sub1-3*/ .s131 { margin: 100px 0px 150px;} .s131_img { width: 100%; max-width: 850px; margin: auto;} .s131_img img { width: 100%;} .s131_txtbox { width: 100%; text-align: center; margin-top: 12vh;} .s131_txtbox p { display: inline-block; border-bottom: 1px solid #ddd; padding: 10px 20px; font-size: 1.8rem; letter-spacing: -0.75px; color: #000000;} .s131_txtbox p img { display: inline-block; vertical-align: top; padding: 0px 4px; margin-top: -8px; box-sizing: border-box;} .s131_txtbox p span { display: inline-block; vertical-align: top;} .s131_txtbox p > span.color { position: relative;} .s131_txtbox p > span.color::before {content: ""; background-color: #ffc870; width: 102%; height: 50%; position: absolute; left: -1%; bottom: 0px; z-index: -1;} .s132 { margin: 150px 0px; } .s132_ul { font-size: 0px; width: 100%; max-width: 1000px; margin: 8vh auto 0px;} .s132_ul > li { display: inline-block; vertical-align: top; width: 30%; margin-right: 5%;} .s132_ul > li:last-child {margin-right: 0px;} .s132_ul > li .imgbox { width: 100%; height: 40vh; background: no-repeat center/cover;} .s132_ul > li .imgbox.img1 {background-image: url(../image/s1/s132_img1.png);} .s132_ul > li .imgbox.img2 {background-image: url(../image/s1/s132_img2.png);} .s132_ul > li .imgbox.img3 {background-image: url(../image/s1/s132_img3.png);} .s132_ul > li p:nth-child(2) { font-size: 0.95rem; text-transform: uppercase; color: #FF951A; position: relative;} .s132_ul > li p:nth-child(2)::before { content: ""; width: 1px; height: 4vh; display: block; margin: 0px auto 1vh; background-color: #FF951A;} .s132_ul > li p:nth-child(3) { margin-bottom: 2vh;} .s133 { width: 100%;} .s133_titbox { width: 90%; max-width: 1200px; margin: 0px auto 8vh; position: relative; padding-top: 15vh;} .s133_txtbg { position: absolute; left: 0px; bottom: 0px; width: 100%;} .s133_titbox p:nth-child(3) {color: #ff951a; padding-bottom: 4vh;} .s133_contbox {padding: 150px 0px; background: url(../image/s1/s133_img.png) no-repeat center/cover;} .s133_ul { width: 100%; font-size: 0px;} .s133_ul > li { display: inline-block; vertical-align: top; width: 33.333%; border-right: 1px solid #fff;border-bottom: 1px solid #fff; box-sizing: border-box; padding: 5vh 0px; text-align: center;} .s133_ul > li:nth-child(3n) {border-right: 0px;} .s133_ul > li .num { font-family: 'NEXON Lv1 Gothic OTF'; font-weight: bold; font-size: 1.3rem; line-height: 1; text-transform: uppercase; color: #fff; margin-bottom: 2vh;} .s133_ul > li .txt { font-size: 1.3rem; line-height: 1.3; letter-spacing: -0.55px; text-transform: uppercase; color: #fff;} .s133_ul > li.bottom { border-bottom: 0px; position: relative;} .s133_ul > li.bottom .num { position: absolute; left: 50%; bottom: 0px; transform: translateX(-50%);} .s133_ul > li.bottom .txt { padding-bottom: 2vh;} /*sub1-4*/ .s141 { margin: 100px 0px 0px;} .s141_img { width: 100%; max-width: 1080px; margin: auto;} .s141_img img { width: 100%;} .s141_cont1 { width: 100%; margin-top: 5vh; text-align: center;} .s141_cont1_tit { position: relative; font-size: 1rem; font-weight: 300; letter-spacing: -0.45px; text-transform: uppercase; color: #FFFFFF; display: inline-block; background-color: #ff951a; padding: 20px 55px; border-radius: 30px; box-sizing: border-box;} .s141_partbox { border-top: 1px solid #ddd; margin-top: -30px;} .s141_part { width: 100%; font-size: 0px; max-width: 900px; margin: auto;} .s141_part > li { display: inline-block; vertical-align: top; width: 33.3333%; padding: 7vh 0px 5vh; box-sizing: border-box; border-right: 1px solid #ddd;} .s141_part > li:last-child {border-right: 0px;} .s141_part > li img { width: 100%; max-width: 200px; margin: auto; display: block;} .s141_part > li p { color: #000000; text-transform: uppercase; margin-top: 2vh;} .s141_cont2 { width: 100%; font-size: 0px;} .s141_cont2 > li { display: inline-block; vertical-align: top; width: 50%; height: 45vh; position: relative; box-sizing: border-box;} .s141_cont2 > li.txt { background-color: #f7f7f7;} .s141_cont2 > li.txt .txtbox { position: absolute; right: 5%; top: 50%; transform: translateY(-50%);} .s141_cont2 > li.txt .txtbox p { font-size: 2rem; line-height: 1.3; letter-spacing: 0.15px; color: #000000;} .s141_cont2 > li.txt .txtbox p > span { display: block; position: relative; border-bottom: 1px solid #ddd; padding: 10px 50px 10px 20px;} .s141_cont2 > li.txt .txtbox p > span > img { position: absolute; width: 16px;} .s141_cont2 > li.txt .txtbox p > span:nth-child(1) > img { left: 5px; top: -5px;} .s141_cont2 > li.txt .txtbox p > span:nth-child(2) > img { right: 20px; top: 10px;} .s141_cont2 > li.txt .txtbox p > span:nth-child(2) .color { font-weight: bold; position: relative; display: inline-block;} .s141_cont2 > li.txt .txtbox p > span:nth-child(2) .color::before {content: ""; background-color: #ffbd4a; width: 106%; height: 50%; position: absolute; left: -3%; bottom: 0px; z-index: -1;} .s141_cont2 > li.img { background: url(../image/s1/s141_cont2_img.png) no-repeat center/cover;} /* sub1-5 */ .s151 { margin: 100px 0px 150px;} .s151_ul { width: 100%; display: flex; flex-wrap: wrap; gap: 5%;} .s151_ul > li { display: inline-block; width: 30%; overflow: hidden; position: relative; margin-bottom: 10vh;} .s151_ul > li.last {margin-bottom: 0;} .s151_ul > li > img.catal { width: 100%;} .s151_down { display: block; max-width: 225px; margin: 35px auto 0px; background: #ff951a; text-align: center; padding: 20px 0px; border-radius: 40px; font-size: 0.9rem; text-transform: uppercase; color: #FFFFFF; font-weight: 300; transition: all 0.4s; margin-bottom: 10px;} .s151_down:hover { box-shadow: 3px 4px 10px rgb(0 0 0 / 30%);} .s151_down img { display: inline-block; vertical-align: middle; margin-right: 15px; width: 17px;} .s151_ul > li .txtbox { position: absolute; left: 0px; bottom: 0%; transition: all 0.4s; background: #fff; padding-top: 20px; min-height: 45%; width: 100%;} .s151_ul > li .txtbox p.tit { font-size: 1.1rem; line-height: 1.3; color: #000000; font-weight: 700; border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 10px;} .s151_ul > li .txtbox .listbox { width: 100%;} .s151_ul > li .txtbox .listbox p { font-size: 0.9rem; line-height: 1.2; letter-spacing: -0.43px; color: #404040; position: relative; padding-left: 120px; box-sizing: border-box; margin-bottom: 8px; word-break: keep-all;} .s151_ul > li .txtbox .listbox p:last-child {margin-bottom: 0px;} .s151_ul > li .txtbox .listbox p span.sub_tit { position: absolute; left: 0px; top: 0px; font-weight: 600; border-left: 3px solid #ff951a; padding-left: 8px;} .s151_ul > li:hover .txtbox { bottom: -50%; } /*sub2-1*/ .s211 { margin: 100px 0px 250px; font-size: 0px;} .s211_ul { width: 100%; font-size: 0px;} .s211_ul > li { display: inline-block; vertical-align: top; width: 50%;} .s211_ul > li.wid100 {width: 100%;} .s211_ul > li.wid100 .sub_p2 { color: #000000;} .s211_ul > li.left { padding-right: 5%; box-sizing: border-box;} .s211_ul > li.right {text-align: justify; word-break: keep-all; letter-spacing: -0.5px;} .s211_slidebox {width: 80%; margin-left: 20%; margin-top: 12vh;} .s211_slide {width: 100%;} .s211_slide .swiper-slide img {width: 100%;} .s212 { background-color: #ebebeb; padding: 10vh 0px 15vh;} .s212_ul { width: 100%; font-size: 0px; position: relative; margin-top: 5vh; padding-bottom: 10vh;} .s212_ul > li { display: inline-block; vertical-align: top;} .s212_ul > li.chart { width: 700px; } .myChart_box {position: relative; width: 700px; height: 700px;} .myChart_box::before { content: ""; width: 90%; height: 90%; position: absolute; left: 5%; top: 5%; background-color: #f2f2f2; display: block; border-radius: 100%;} .myChart_box .centerbox { position: absolute; left: 50%; top: 50%; background-color: #fff; width: 240px; height: 240px; border-radius: 100%; transform: translate(-50%,-50%); display: flex; justify-content: center; align-items: center;} .myChart_box .centerbox p { font-weight: bold; font-size: 1.5rem; letter-spacing: -0.65px; text-align: center;} #myChart { transform: scale(0.8);} .s212_ul > li.desc { width: calc(100% - 650px); height: 100%; position: absolute; right: 3%; top: 0px; overflow: hidden;} .s212_ul > li.desc .desc_top { position: absolute; left: 0px; top: 18%; } .s212_ul > li.desc .desc_top .s21_desc_box { padding-top: 25px; padding-left: 80px;} .s212_ul > li.desc .desc_top .s21_desc_box::before { content: ""; position: absolute; left: 0px; top: 0px; width: 125%; height: 50px; background: url(../image/s2/s21_desc1.png) no-repeat left top/contain;} .s21_desc_box p { font-size: 1.1rem; line-height: 1.3; letter-spacing: -0.5px; color: #4d4d4d; width: 85%; } .s212_ul > li.desc .desc_bottom { position: absolute; left: 0px; bottom:5%; width: 85%;} .s212_ul > li.desc .desc_bottom .s21_desc_box { padding-bottom: 25px; padding-left: 80px; position: relative;} .s212_ul > li.desc .desc_bottom .s21_desc_box::before { content: ""; position: absolute; left: 0px; bottom: 0px; width: 125%; height: 50px; background: url(../image/s2/s21_desc2.png) no-repeat left top/contain;} .s21_country_box { width: calc(100% - 70px); font-size: 0px; background-color: #fff; padding: 3vh 8% 1vh; box-sizing: border-box; border-radius: 30px; margin-top: 20px; margin-left: 80px;} .s21_country_box > li { display: inline-block; vertical-align: top; width: 50%; margin-bottom: 2vh;} .s21_country_box > li img { width: 100%; max-width: 48px; margin: auto; display: block;} .s21_country_box > li p { font-size: 0.9rem; line-height: 1; letter-spacing: -0.45px; text-transform: uppercase; color: #4d4d4d; text-align: center; margin-top: 10px;} /*sub2-1-pro*/ #bo_v_con ul { margin: 0px; padding-left: 0px;} #bo_v_con li { display: inline-block;} #bo_v_con a { color: inherit; text-decoration: none;} .bo_v_con_top { font-size: 0px; width: 100%;} .bo_v_con_top > li { display: inline-block; vertical-align: middle;} .bo_v_con_top > li.wid100_tit { width: 100%; margin-bottom: 50px;} .bo_v_con_top > li.wid100_tit .tit { font-weight: 700; font-size: 4.2rem; line-height: 1; letter-spacing: -4px; color: #1a1a1a;} .bo_v_con_top > li.info { width: 42%; margin-right: 3%;} .bo_v_con_top > li.info .tag_txt { color: #FFFFFF; font-size: 1rem; font-weight: 300; margin-bottom: 20px;} .bo_v_con_top > li.info .tag_txt span { display: inline-block; background: #ff951a; padding: 0px 10px;} .bo_v_con_top > li.info .tit { font-weight: 700; font-size: 4.2rem; line-height: 1; letter-spacing: -4px; color: #1a1a1a; margin-bottom: 50px;} .bo_v_con_top.ver2 > li.info .tit {display: none;} .bo_v_con_top > li.info .sub_tit { font-weight: 800; font-size: 1.3rem; color: #1a1a1a; line-height: 1.3; margin-bottom: 15px; word-break: keep-all;} .bo_v_con_top > li.info .desc_en { font-size: 1rem; line-height: 1.3; color: #1a1a1a; margin-bottom: 15px; word-break: keep-all;} .bo_v_con_top > li.info .desc_kr { font-size: 1rem; line-height: 1.3; color: #666666; word-break: keep-all;} .bo_v_link_box { text-align: right; margin-top: 50px; display:none;} #bo_v_con a.bo_v_link { font-size: 1rem; color: #666666; display: inline-block; font-weight: 300; transition: all 1s;} #bo_v_con a.bo_v_link:hover {margin-right: 20px;} .bo_v_link .arrow { display: inline-block; width: 35px; height: 1px; background-color: #666666; position: relative; margin-left: 5px; transition: all 0.4s; vertical-align: middle;} .bo_v_link .arrow::before { content: ""; position: absolute; right: 0px; top: -3px; width: 5px; height: 1px; background-color: #666666; transform: rotate(60deg); transition: all 0.4s;} .bo_v_con_top > li.thum {width: 55%;} .bo_v_con_top > li.thum .imgbox { width: 100%;} .bo_v_con_top > li.thum .imgbox img { width: 100%; max-width:560px !important; margin: auto; display: block;} .bo_v_conbox { width: 100%; margin: 150px 0px; font-size: 0px;} .bo_v_conbox > li { display: inline-block; vertical-align: top;} .bo_v_conbox > li.title { width: 30%;} .bo_v_conbox > li.title p { font-weight: 800; font-size: 1.4rem; line-height: 1.3; letter-spacing: -0.6px; color: #1a1a1a; position: relative; padding-left: 12px;} .bo_v_conbox > li.title p::before {content: ""; width: 10px; height: 10px; position: absolute; left: 0px; top: -5px; border-radius: 100%; background: #ff951a; } .bo_v_conbox > li.img { width: 70%;} .bo_v_conbox > li.img img { max-width: 100%; margin: auto; display: block;} .bo_v_conbox > li.img img.margin {margin:5vh auto} .bo_v_conbox > li.img img.margin2 {margin:3vh auto} .bo_v_conbox > li.img .desc_en { font-size: 1rem; line-height: 1.3; color: #1a1a1a; margin-bottom: 15px; word-break: keep-all;} .bo_v_conbox > li.img .desc_kr { font-size: 1rem; line-height: 1.3; color: #666666; word-break: keep-all;} .bo_v_conbox > li.title.wid100 {width: 100%; margin-bottom: 30px;} .bo_v_conbox > li.img.wid100 {width: 100%;} .bo_v_conbox_sub { width: 100%;} .bo_v_conbox_sub > li { display: inline-block; width: 100%; vertical-align: top;} .bo_v_conbox_sub > li:nth-child(1) { padding-right: 5%; box-sizing: border-box;} .bo_v_conbox_sub.on > li {width: 50%;} .bo_v_conbox_sub.on > li img {max-width: 560px; } .v_list_btn {text-align: right;} .v_list_btn > a {display: block;} .v_list_btn > a img {width: 100%; max-width: 98px;} .bo_v_contbox_ul { border-bottom: 1px solid #ddd; padding-bottom: 4vh; margin-bottom: 4vh;} .bo_v_contbox_ul:last-child {border-bottom: 0px; margin-bottom: 0px; padding-bottom: 0px;} .bo_v_contbox_ul > li { display: inline-block; vertical-align: middle;} .bo_v_contbox_ul > li.v_img {width: 30%;} .bo_v_contbox_ul > li.v_img img { width: 100%; max-width: 260px;} .bo_v_contbox_ul > li.v_txt {width: 70%;} .bo_v_conbox > li.img .v_txtbox {margin-bottom: 10vh;} .bo_v_conbox > li.img .v_txtbox:last-child {margin-bottom: 0px;} .bo_v_conbox > li.img .v_sub_cont {margin-bottom: 25px;} .bo_v_conbox > li.img .v_sub_cont.line-top {padding-top: 2vh; margin-top: 2vh; border-top: 1px solid #808080; font-size: 0.9rem;} .bo_v_conbox > li.img .v_sub_cont .small { font-size: 0.9rem; display: block; margin-top: 10px;} .bo_v_conbox > li.img .v_sub_tit { color: #1a1a1a; margin-bottom: 10px;} .bo_v_conbox > li.img .black {color: #1a1a1a; font-weight: 400;} #bo_v .go_inquiry{display: block; width: 180px; height: 42px; background: #FF951A; margin: auto; border-radius: 8px; transition: all 0.4s;} #bo_v .go_inquiry span{display: block; font-size: 0.95rem; font-weight: 600; color: #fff; text-align: center; line-height: 42px;} #bo_v .go_inquiry:hover{box-shadow: 3px 3px 11px rgba(0,0,0,0.25);} /*sub2-2*/ .s221 { margin: 150px 0px;} .s221_ul { width: 100%; font-size: 0px; margin: 16vh 0px;} .s221_ul > li { display: inline-block; vertical-align: top; width: 45%; margin-right: 5%;} .s221_ul > li:nth-child(2n) { margin-right: 0px; border-left: 1px solid #ddd; box-sizing: border-box; padding-left: 5%;} .s221_ul > li > img { width: 100%; max-width: 400px; margin: 0px auto 3vh; display: block;} .tit_arrow { position: relative; padding-left: 20px; box-sizing: border-box; margin-bottom: 2vh;} .tit_arrow::before { content: ""; width: 0px; border-left: 9px solid #6ca845; height: 0px; position: absolute; left: 0px; top: 50%;transform: translateY(-50%); border-right: 5px solid transparent; border-top: 5px solid transparent; border-bottom: 5px solid transparent;} .tit_arrow.arrow_color1::before {border-left-color: #FF951A; } .tit_arrow.arrow_color2::before {border-left-color: #6ca845; } .tit_arrow.arrow_color3::before {border-left-color: #3792ff; } .m22_listbox { width: 100%; padding-left: 25px; box-sizing: border-box;} .m22_listbox > p { position: relative; padding-left: 35px; margin-bottom: 8px; font-weight: 400;} .m22_listbox > p:last-child { margin-bottom: 0px;} .m22_listbox > p > .num { position: absolute; left: 0px; top: 0px; color: #6ca845;} .m22_listbox > p.add > span { display: inline-block; vertical-align: top;} .m22_listbox > p.add > span.descbox { margin-left: 15px; font-weight: 200; color: #8c8c8c;} .s222 { background: url(../image/s2/s222_bg.png) no-repeat center / cover; padding: 10vh 0px 14vh;} .s222_ul {width: 100%; font-size: 0px;} .s222_ul > li { display: inline-block; vertical-align: top; margin-right: 6%;} .s222_ul > li:last-child {margin-right: 0px;} .s222_ul > li .m22_listbox {padding-left: 0px;} /*sub2-3*/ .s231 { margin: 150px 0px 250px;} .s231_slidebox { width: 100%; margin-top: 16vh;} .s231_slide_top { display: flex; justify-content: space-between; width: 100%; padding: 0px 10px; box-sizing: border-box;} .s231_pag { position: relative; display: inline-block;} .s231_pag .swiper-pagination-bullet { background-color: #b2b2b2; opacity: 1; margin: 0px 8px; transition: all 0.4s} .s231_pag .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #3792ff;} .s231_slide {width: 100%;} .s231_slide_contbox {width: 100%;} .s231_slide_contbox > .imgbox {background: no-repeat center/cover; width: 100%; height: 40vh; margin: 10px 0px 20px;} .s231_slide_contbox > .imgbox.img1 { background-image: url(../image/s2/s231_slide1.png);} .s231_slide_contbox > .imgbox.img2 { background-image: url(../image/s2/s231_slide2.png);} .s231_slide_contbox > .imgbox.img3 { background-image: url(../image/s2/s231_slide3.png);} .s231_slide_contbox > .sub_p6 { padding: 0px 10px; box-sizing: border-box; margin-bottom: 8px;} .s231_slide_contbox > .sub_p3 { padding: 0px 10px; box-sizing: border-box;} .s231_next { width: 70px; height: 70px; right: -7vw; top: 65%;} svg.progress_wrap { height: 100%; transform: rotate(-90deg); width: 100%; position: absolute; left: 0; top: 0; z-index: -1;} .progress-bar_background { fill: none; stroke: #b2b2b2;stroke-width: 0.1; } .progress-bar_progress {fill: none; stroke: #3792ff; stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: square; stroke-width: 0.7; transition: all 0.4s;} .s231_next > i { color: #3792ff; font-size: 25px; position: absolute; left: 55%; top: 50%; transform: translate(-50%,-50%);} .s231_next:hover .progress-bar_progress {stroke-dasharray: 200; } /*sub product*/ .pro_section1 { margin: 150px 0px;} .pro_section1.ver2 {margin-bottom: 0px;} .pro_section1.ver3 {margin-bottom: 8vh;} .pro_top_wrap { font-size: 0px; width: 100%;} .pro_nav { display: inline-block; vertical-align: top; width: 270px;} .pro_nav .nav_item { margin-bottom: 10px; box-sizing: border-box; } .pro_nav .nav_item > a {border-left: 3px solid #cccccc; font-weight: 700; font-size: 1rem; line-height: 1.2; letter-spacing: -0.75px; color: #666666; text-transform: capitalize; padding: 5px 0px; padding-left: 8px; box-sizing: border-box; display: block; transition: all 0.4s;} .pro_nav .nav_item.on a { font-size: 1.2rem; letter-spacing: -1px; text-transform: uppercase; background-color: #f2f2f2; border-color: #3792ff; color: #3792FF; padding-left: 20px;} .pro_nav .nav_item:hover a {background-color: #f2f2f2; border-color: #000000;} .pro_top_cont {margin-left: 30px; font-size: 0px; width: calc(100% - 300px); display: inline-block; vertical-align: top;} .pro_top_ul { width: 100%; font-size: 0px;} .pro_top_ul > li { display: inline-block; vertical-align: top;} .pro_top_ul > li.img { width: 40%;} .pro_top_ul > li.img img {width: 90%; max-width: 420px; display: block; box-shadow: 25px 25px 0px #f2f2f2;} .pro_top_ul > li.txt { word-break: keep-all; width: 50%; margin-top: 50px;;} .pro_top_ul > li.txt .sub_p6 {margin-bottom: 25px; text-align: justify} .pro_ban { width: 100%; background: no-repeat center/cover; padding: 10vh 0px; margin: 150px 0px;} .pro_ban.ban1-1 { background-image: url(../image/s2/pro_ban1-1.png);} .pro_ban.ban3-1 { background-image: url(../image/s2/pro_ban3-1.png);} .pro_ban.ban3-2 { background-image: url(../image/s2/pro_ban3-2.png);} .pro_ban.ban3-3 { background-image: url(../image/s2/pro_ban3-3.png);} .pro_ban.ban3-4 { background-image: url(../image/s2/pro_ban3-4.png);} .pro_databox { margin: 8vh 0px;} .pro_tit { position: relative; padding-left: 16px; padding-top: 5px; margin-bottom: 40px;} .pro_tit::before { content: ""; width: 10px; height: 10px; position: absolute; left: 0px; top: 0px; border-radius: 100%;} .pro_tit.dot_color1::before {background-color:#FF951A } .pro_tit.dot_color2::before {background-color:#6ca845 } .pro_tit.dot_color3::before {background-color:#3792ff } .pro_data_imgbox {width: 100%;} .pro_data_imgbox img {width: 100%;} .pro_last {margin-bottom: 250px;} .mb-25 {margin-bottom: 25vh;} .pro_tab { width: 80%;} .pro_tab_ul {font-size: 0px; width: 100%; margin: 0px auto; text-align: center; margin-top: 5vh;} .pro_tab_ul > li { width: 25%; border: 1px solid #ddd; border-right: 0px; box-sizing: border-box; display: inline-block; vertical-align: top; cursor: pointer; padding: 15px 0px; position: relative; font-size: 1.1rem; letter-spacing: -0.45px; text-transform: capitalize; color: #999999; transition: all 0.4s;} .pro_tab_ul > li:last-child {border-right: 1px solid #ddd;} .pro_tab_ul.ver2 {margin-top:10vh} .pro_tab_ul.ver2 > li {padding: 0px;} .pro_tab_ul.ver2 > li a {padding: 15px 0px;} .pro_tab_ul > li.on { color: #FF951A;} .pro_tab_ul > li::after { border: 1px solid #FF951A; content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: -1; box-sizing: border-box; transition: all 0.4s; opacity: 0;} .pro_tab_ul > li.on::after { opacity: 1;} .pro_tab_ul > li > a {display: block; width: 100%; transition: all 0.4s;} .pro_tab_ul > li.on > a { color: #FF951A;} .pro_tab_ul.ul_color1 > li.on { color: #FF951A;} .pro_tab_ul.ul_color1 > li::after { border-color: #FF951A;} .pro_tab_ul.ul_color1 > li.on > a { color: #FF951A;} .pro_tab_ul.ul_color2 > li.on { color: #6ca845;} .pro_tab_ul.ul_color2 > li::after { border-color: #6ca845;} .pro_tab_ul.ul_color2 > li.on > a { color: #6ca845;} .pro_tab_ul.ul_color3 > li.on { color: #3792ff;} .pro_tab_ul.ul_color3 > li::after { border-color: #3792ff;} .pro_tab_ul.ul_color3 > li.on > a { color: #3792ff;} .pro_databox_wrap {width: 100%;} .pro_databox_wrap > .pro_databox {display: none;} .pro_databox_wrap > .pro_databox.on {display: block;} /*sub3-1*/ .s311 { margin: 100px 0px 250px; } .s311_ul { width: 100%;} .video_content { display: none; } .video_content_0 {display: block;} .video_content.show { display: block; border-top: 1px solid #666666; padding-top: 6vh; margin-top: 6vh;} .s311_ul .video_content > li { position: relative; width: 100%; font-size: 0px; border-bottom: 1px solid #666666; padding-bottom: 6vh; margin-bottom: 6vh;} .s311_ul .video_content > li:last-child{margin-bottom: 0px; padding-bottom: 0px; border-bottom: 0px;} .s311_ul_ul { width: 100%; font-size: 0px; position: relative;} .s311_ul_ul > li { display: inline-block; vertical-align: middle; width: 50%; position: relative;} .s311_ul_ul > li.img img { width: 100%;} .s311_ul_ul > li.img .play_btn { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; transform: translate(-50%,-50%); font-size: 0; color: #fff; border: 1px solid #fff; border-radius: 100%; display: flex; justify-content: center; align-items: center; transition: all 0.4s;} .s311_ul_ul.wid100 > li.img .play_btn { display: none;} .s311_ul_ul > li.img .play_btn i { font-size: 35px; margin-left: 3px;} .s311_ul_ul > li.img:hover .play_btn { color: #ff921a; border-color: #ff921a;} .s311_ul_ul > li.txt .txtbox { padding-left: 10%; box-sizing: border-box;} .s311_ul_ul > li.txt .txtbox .sub_p1 { font-size: 2.2rem;} .s311_ul_ul > li.txt .txtbox .desc_box { display: flex; flex-wrap: wrap; margin-top: 30px;} .s311_ul_ul > li.txt .txtbox .desc_box .desc_item { font-size: 0.9rem; font-weight: 500; line-height: 1; color: #666666; border: 1px solid #a6a6a6; padding: 7px 15px; border-radius: 20px; margin-right: 20px;text-transform: uppercase; margin-bottom:10px} .s311_ul_ul > li.txt .txtbox .desc_box .desc_item:last-child { margin-right: 0;} .s311_ul_ul > li.txt .play_btn { position: absolute; right: 5%; top: 50%; width: 60px; height: 60px; transform: translateY(-50%); font-size: 0; color: #fff; border: 1px solid #fff; border-radius: 100%; display: flex; justify-content: center; align-items: center; transition: all 0.4s;} .s311_ul_ul > li.txt .play_btn i { font-size: 35px; margin-left: 3px;} .s311_ul_ul > li.txt:hover .play_btn { color: #ff921a; border-color: #ff921a;} .s311_ul_ul.wid100 > li {width: 100%;} .s311_ul_ul.wid100 > li.txt { position: absolute; left: 0; bottom: 0; background: linear-gradient(to bottom, transparent 5%, rgba(0,0,0,0.8));} .s311_ul_ul.wid100 > li.txt .txtbox { padding: 5%;} .s311_ul_ul.wid100 > li.txt .txtbox .sub_p1 {font-size: 3rem;} .s311_ul_ul.wid100 > li.txt .txtbox .desc_box .desc_item {border-color: #fff;} .video_more { display: block; max-width: 200px; margin: 100px auto 0px; background: #ff951a; text-align: center; padding: 18px 0px; border-radius: 40px; font-size: 1rem; text-transform: uppercase; color: #FFFFFF; font-weight: 300; transition: all 0.4s; cursor: pointer;} .video_more:hover { box-shadow: 3px 4px 10px rgb(0 0 0 / 30%);} .video_more.hide {display: none;} .video_wrap { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 15; background: rgba(255, 255, 255, 0.6); display: none;} .video_wrap .inner { width: 90%; max-width: 1200px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);} .video_wrap .close_btn { color: #000000; text-align: right; margin-bottom: 20px; cursor: pointer; transition: all 0.4s;} .video_wrap .close_btn i { font-size: 50px;} .video_wrap .close_btn:hover { color: #ff921a;} .video_wrap .video_box { width: 100%;} .video_wrap .video_box video {width: 100%;} /*sub4-1*/ .s411 { margin: 100px 0px 150px; } .s411_top_contbox { display: flex; flex-wrap: wrap; align-items: center;} .s411_top_contbox > li { width: 45%;} .s411_top_contbox > li.txt { margin-right: 5%;} .s411_top_contbox > li.txt p:nth-child(1) { font-weight: 700; font-size: 2.2rem; line-height: 1.3; color: #0d0d0d; margin-bottom: 30px;} .s411_top_contbox > li.txt p:nth-child(1) span { font-size: 1.8rem; letter-spacing: -2.5px; display: inline-block; vertical-align: top; margin-top: 5px;} .s411_top_contbox > li.txt p:nth-child(2) { font-size: 1rem; line-height: 1.5; color: #666666; word-break: keep-all; margin-bottom: 45px; text-align: justify; letter-spacing: -0.5px;} .s411_top_contbox > li.txt .more { border: 1px solid #ddd; padding: 8px 15px; box-sizing: border-box;} .s411_top_contbox > li.txt .more .arrow { background: #ddd;} .s411_top_contbox > li.txt .more .arrow::before { background: #ddd;} .s411_top_contbox > li.txt .more:hover {background: #ff911a; border-color: #ff911a; color: #fff;} .s411_top_contbox > li.txt .more:hover .arrow, .s411_top_contbox > li.txt .more:hover .arrow::before {background: #fff;} .s411_top_contbox > li.img img { width: 100%; max-width: 420px; margin: auto; display: block;} .s421 {margin: 150px 0px 250px;} .s421_sub_top_img { width: 100%; height: 50vh; background: no-repeat center/cover; margin-bottom: -20vh;} .s421_sub_top_img.img1 {background-image: url(../image/s4/s4_subtop1.png);} .s421_sub_top_img.img2 {background-image: url(../image/s4/s4_subtop2.png);} .s421_sub_top_img.img3 {background-image: url(../image/s4/s4_subtop3.png);} .s421 .sub_inner { background: #fff; padding: 8vh 5%; box-sizing: border-box; box-shadow: 7px 7px 5px rgb(0 0 0 / 15%);} .s412_cont_txt { width: 100%; margin-top: 8vh; margin-bottom: 10vh; border-top: 1px solid #999999; border-bottom: 1px solid #999999; box-sizing: border-box; font-size: 0px;} .s412_cont_txt > li { display: inline-block; vertical-align: top; width: 50%; padding: 18px 0px; border-bottom: 1px solid #ddd;} .s412_cont_txt > li.wid45 {width: 45%;} .s412_cont_txt > li.wid55 {width: 55%;} .s412_cont_txt > li.wid100 {width: 100%;} .s412_cont_txt > li.last {border-bottom: 0px;} .s412_cont_txt > li p { font-size: 1rem; line-height: 1.3; letter-spacing: -0.5px; color: #666666; position: relative; padding-left: 115px; box-sizing: border-box;} .s412_cont_txt > li p span { position: absolute; left: 0px; top: 0px; font-weight: 800; color: #000000;} .s412_cont_txt > li p span.left {left: 15px;} .s412_cont_img { display: flex; flex-wrap: wrap; gap: 10px;} .s412_cont_img > li { width: calc((100% - 30px)/4);} .s412_cont_img > li img { width: 100%;} .s412_cont_img.ver2 > li { width: calc((100% - 20px)/3);} /*sub5-1*/ .s511 { margin: 100px 0px 250px;} /*sub5-2*/ .s521 { margin: 100px 0px 250px; } .s521_tab { font-size: 0px; width: 100%; margin: 0px auto 10vh; text-align: center;} .s521_tab > li { width: 33.3%; border: 1px solid #ddd; border-right: 0px; box-sizing: border-box; display: inline-block; vertical-align: top; cursor: pointer; padding: 15px 0px; position: relative; font-size: 1.1rem; letter-spacing: -0.45px; text-transform: capitalize; color: #999999; transition: all 0.4s;} .s521_tab > li:last-child {border-right: 1px solid #ddd;} .s521_tab > li.on {color: #FF951A;} .s521_tab > li::after { border: 1px solid #FF951A; content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 10; box-sizing: border-box; transition: all 0.4s; opacity: 0;} .s521_tab > li.on::after {opacity: 1;} .s521_cont { width: 100%; display: none; margin: auto;} #s521_cont1 {display: block;} .s521_ul {width: 100%; font-size: 0px; } .s521_ul li {width: 40%; display: inline-block; vertical-align: top; border-bottom: 1px solid #b2b2b2; padding-bottom: 20px; margin-bottom: 85px; min-height: 195px;} .s521_ul li:nth-child(2n-1) {margin-right: 10%;} .s521_ul li:nth-child(2n) {margin-left: 10%;} .s521_ul li > p:nth-child(1) { font-size: 1.8rem; line-height: 1.3; letter-spacing: -0.8px; color: #1a1a1a; position: relative; font-weight: 700;} .s521_ul li > p:nth-child(1) span { font-size: 1.1rem; letter-spacing: -0.5px; display: block; font-weight: 600;} .s521_ul li > p:nth-child(1) img {position: absolute; right: 0px; top: 0px; width: 100%; max-width: 60px;} .s521_ul li > p:nth-child(2) { font-size: 1rem; line-height: 1.3; letter-spacing: -0.45px; color: #666666; margin-top: 8px;} .s52_info {width: 100%; margin-top: 10px;} .s52_info p { position: relative; padding-left: 30px; box-sizing: border-box; font-size: 1rem; line-height: 30px; letter-spacing: -0.45px; color: #666666; font-weight: 300;} .s52_info p i { position: absolute; left: 0px; top: 0px; line-height: 30px; color: #FF951A; font-size:1.2rem;} .s52_info p .last { position: absolute; right: 15px; top: 0px; width: 85px; text-align: right; font-size: 1.1rem; letter-spacing: -0.5px; color: #FF951A; font-weight: 300;} /*sub5-3*/ .s531 { margin: 100px 0px 250px; } .s531_ul { width: 100%; display: flex; flex-wrap: wrap; gap: 5%;} .s531_ul > li { display: inline-block; width: 30%; overflow: hidden; position: relative; margin-bottom: 10vh;} .s531_ul > li.last {margin-bottom: 0;} .s531_ul > li > img.catal { width: 100%;} .s531_ul > li .txtbox { margin-top: 30px; width: 100%;} .s531_ul > li .txtbox p.tit { font-size: 1.1rem; line-height: 1.3; color: #000000; font-weight: 700;} .s531_ul > li .txtbox .s151_down { margin: 20px 0px;} .s531_ul > li .txtbox .cont { font-size: 0.9rem; line-height: 1.4; font-weight: 300; letter-spacing: -0.43px; color: #404040; position: relative; box-sizing: border-box; word-break: keep-all; border-top: 1px solid #ddd; padding-top: 15px;} /*sub5-2*/ .s541 { margin: 100px 0px 250px; } .s541_tab {font-size: 0px; width: 100%; margin: 0px auto 8vh; text-align: center;} .s541_tab_ul > li { width: 25%; border: 1px solid #ddd; border-right: 0px; box-sizing: border-box; display: inline-block; vertical-align: top; cursor: pointer; padding: 15px 0px; position: relative; font-size: 1.1rem; letter-spacing: -0.45px; text-transform: capitalize; color: #999999; transition: all 0.4s;} .s541_tab_ul > li:last-child {border-right: 1px solid #ddd;} .s541_tab_ul > li.on { color: #FF951A;} .s541_tab_ul > li::after { border: 1px solid #FF951A; content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: -1; box-sizing: border-box; transition: all 0.4s; opacity: 0;} .s541_tab_ul > li.on::after { opacity: 1;} .s541_mapbox_wrap { position: relative;} .s541_mapbox { position: absolute; left: 0px; top: 0px; width: 100%; opacity: 0; transition: all 0.4s; z-index: 1;} .s541_mapbox:nth-child(1) { position: relative; left: auto; top: auto;} .s541_mapbox.on { opacity: 1; z-index: 10;} .s541_mapbox .mapbox {width: 100%; height: 75vh;} .s541_mapbox .map_txtbox { font-size: 0px; margin-top: 7vh;} .s541_mapbox .map_txtbox > li { display: inline-block; vertical-align: top; width: 30%; border-right: 1px solid #ddd; border-left: 1px solid #ddd; padding: 0px 3%; box-sizing: border-box;} .s541_mapbox .map_txtbox > li:nth-child(1) { width: 40%; border: 0px; padding-left: 0px;} .s541_mapbox .map_txtbox > li:nth-child(3) { border: 0px; padding-right: 0px;} .s541_mapbox .map_txtbox > li > img { width: 100%; max-width: 50px; margin-bottom: 15px;} .s541_mapbox .map_txtbox > li .infobox {position: relative; width: 100%; padding-left: 85px; box-sizing: border-box; padding-top: 0.3rem;} .s541_mapbox .map_txtbox > li .infobox .tit { font-weight: 700; font-size: 1.6rem; line-height: 1.3; letter-spacing: -1.5px; color: #000000; position: absolute; left: 0px; top: 0px;} .s541_mapbox .map_txtbox > li .infobox p {font-size: 1rem; line-height: 1.3; letter-spacing: -0.9px; color: #666666; margin-bottom: 15px;} .s541_mapbox .map_txtbox > li .infobox p:last-child { margin-bottom: 0px;} .s541_mapbox .map_txtbox > li .infobox p .sub_txt { font-weight: 600; margin-right: 15px;} .s541_mapbox .map_txtbox > li .infobox p .sub_txt.none {opacity: 0; pointer-events: none;} /*sub6-3*/ .s631 { margin: 100px 0px 200px; font-size: 0px;} .border-line { width: 100%; height: 3px; margin-bottom: 5px; background:#FF951A;} /*board*/ .cmt_btn span.total { color: #FF951A !important;} .bo_v_nb li,.cmt_btn, .btn_confirm, #bo_vc_empty {transform: skewX(-0.3deg);} .bo_sch h3 {font-size: 1.3em;} .bo_sch .bo_sch_cls {background-color: transparent !important;} .btn_bo_user li { display: inline-block; vertical-align: top; } .btn_bo_user li a.btn, .btn_bo_user li .btn { height: 30px; line-height: 30px;} .btn_bo_user i { font-size: 1rem;} .top_op_btn {margin-top: 0; padding: 0 12px;} .top_chk_all { padding-top: 0;} .chk_box input[type="checkbox"] + label span {width: 30px; height: 30px;} #bo_list .more_opt li { font-size: 12px; padding-left: 5px;} #bo_v .more_opt li { font-size: 15px; padding-left: 18px;} #bo_v_info .profile_info .profile_info_ct {font-size: 0.9rem} #bo_v_con { font-size: 0.9rem;color: #000000;} .pg_wrap { width: 100%; text-align: center;} .pg_current {background: #fff !important; color: #737373 !important; padding: 0px 5px !important; min-width: 30px !important; text-decoration: underline !important;} .pg_page {color: #737373 !important; line-height: 30px !important; padding: 0 5px !important; min-width: 30px !important; background-color: #fff !important;} .pg_page, .pg_current {border: 0px !important; font-size: 0.9rem;} /*sub7-1*/ .s711 { margin: 120px 0px 250px;} #sitemap_nav { width: 100%; margin: 0 auto; font-size: 0px; border-top: 5px solid #FF951A; border-bottom: 5px solid #FF951A; padding: 70px 0px;} #sitemap_nav > li { width: 100%; vertical-align: top; display: inline-block; padding: 0px 50px 50px; box-sizing: border-box; border-bottom: 1px solid #ddd; margin-bottom: 50px} #sitemap_nav > li:last-child {padding-bottom: 0px; margin-bottom: 0px; border-bottom: 0px;} #sitemap_nav > li > a { font-size: 1.5rem; color: #666666; text-transform: uppercase; font-weight: 600; line-height: 1.3; } .site_sub_menu { width: 100%; margin-top: 5px; padding-left: 30px; box-sizing: border-box;} .site_sub_menu > li { width: 50%; display: inline-block; vertical-align: top; margin: 15px 0 0;} .site_sub_menu.wid3 > li {width: 33.333%; } .site_sub_menu.wid4 > li {width: 25%; } .site_sub_menu > li > a {font-size: 1rem; color: #333333; text-transform: uppercase; display: inline-block; margin-bottom: 10px; border-bottom: 1px solid transparent; transition: all 0.4s; position: relative; line-height: 1.3; } .site_sub_menu > li > a::before {content: ""; position: absolute; left: -20px;top: 50%; transform: translateY(-50%); width: 5px; height: 5px; background-color: #FF951A; border-radius: 100%;} .site_sub_menu > li > a:hover {border-bottom: 1px solid #333333} .sub_site_sub_menu { width: 95%; margin-left: 5%; border-left: 1px solid #FF951A;} .sub_site_sub_menu > li {margin-bottom: 15px; } .sub_site_sub_menu > li > a { font-size: 0.9rem; color: #666666; margin-left: 20px; line-height: 1.3; border-bottom: 1px solid transparent; transition: all 0.4s; text-transform: uppercase; } .sub_site_sub_menu > li > a:hover {border-bottom: 1px solid #666666} .sub_sub_site_sub_menu { width: 100%; margin-left:30px; margin-bottom: 20px;} .sub_sub_site_sub_menu li { width: 25%; padding: 6px 0px; display: inline-block; vertical-align: top;} .sub_sub_site_sub_menu li a { font-size: 0.8rem; line-height: 1.3; color: #666666; transition: all 0.4s; border-bottom: 1px solid transparent;} .sub_sub_site_sub_menu li a:hover {color:#FF951A; border-bottom: 1px solid #FF951A;} .sub_sub_site_sub_menu li a.none {pointer-events: none; opacity: 0.5;} .sub_sub_site_sub_menu li a.none:hover {color: #666666; font-weight: normal;} /* etc */ .sch_word { background: #FF951A !important;}