@charset "euc-kr";
/* CSS Document */
*{margin:0; padding:0; letter-spacing:-1px; font-family:'³ª´®°íµñ', 'Nanum Gothic', 'NanumGothic', sans-serif; box-sizing:border-box;}
a{text-decoration:none;}
a:link{text-decoration:none;}
a:hover{text-decoration:none;}
a:active{text-decoration:none;}
a:visited{text-decoration:none;}
.clearfix:before,
.clearfix:after{display:table; content:"";}
.clearfix:after{clear:both;}
ul,li{list-style:none;}

.top .tbox,
.section .sbox,
.footer .fbox,
.sub .contents{width:1200px; margin:0 auto;}


/* top */
.top{position:fixed; top:0; left:0; z-index:998; width:100%; border-bottom:1px solid rgba(255,255,255, 0.5); transition:all 0.3s;}
.top .tbox{position:relative; text-align:center;}
.top .tbox .logo{position:absolute; top:50%; left:0; transform:translateY(-50%); z-index:1;}
.top .tbox .logo img{width:auto;}
.top .tbox .logo .logo2{display:none;}
.top .tbox .menu li{display:inline-block; position:relative;}
.top .tbox .menu li>a{display:block; height:84px; padding:0 20px; font-size:20px; color:#fff; line-height:84px;}
.top.on .tbox .menu li:before{display:block;}
.top.on .tbox .menu li>a{color:#333;}

.top .tbox .menu_all{position:absolute; top:0; right:0; z-index:1; width:220px; height:84px; padding-top:30px; border-left:1px solid rgba(255,255,255, 0.5); cursor:pointer;}
.top .tbox .menu_all p{padding-right:37px; font-size:20px; font-weight:700; color:#fff; text-align:right;}
.top .tbox .menu_all p strong{display:none;}
.top .tbox .menu_all .menubtn{position:absolute; top:23px; right:0; width:26px; height:37px;}
.top .tbox .menu_all .menubtn li{height:2px; margin:7px 0; background:#fff; transition:all 0.5s; transform-origin: left center;}
.top .tbox .menu_all .menubtn.on .bar_t{transform:rotate(45deg);}
.top .tbox .menu_all .menubtn.on .bar_m{width:0;}
.top .tbox .menu_all .menubtn.on .bar_b{transform:rotate(-45deg);}

/* top on */
.top.on{border-color:rgba(0,0,0, 0.5); background:#fff;}
.top.on .tbox .logo .logo1{display:none;}
.top.on .tbox .logo .logo2{display:block;}
.top.on .tbox .menu_all{border-color:rgba(0,0,0, 0.5);}
.top.on .tbox .menu li>a,
.top.on .tbox .menu_all p{color:#333;}
.top.on .tbox .menu_all .menubtn li{background:#333;}

/* submenu */
.top .tbox .menu li .submenu{display:none; position:absolute; top:84px; left:50%; transform:translateX(-50%); z-index:998; width:200px; padding:10px 0; text-align:center; border:1px solid #ddd; background:#fff;}
.top .tbox .menu li .submenu p a{display:block; padding:10px 0; font-size:14px; color:#666;}
.top .tbox .menu li .submenu p a:hover{color:#000;}

/* sidemenu */
.sidemenu{position:fixed; top:0; left:0; z-index:-1; width:100%; height:100%; background:url('../img/sidemenu_bg.jpg') no-repeat right center; transition:all 0.9s; opacity:0;}
.sidemenu.on{z-index:9999; opacity:1;}
.sidemenu .sbox{padding:100px;}
.sidemenu .sbox .menu_all{position:relative; float:right; cursor:pointer;}
.sidemenu .sbox .menu_all p{padding-right:37px; font-size:20px; font-weight:700; color:#fff; text-align:right;}
.sidemenu .sbox .menu_all p strong{display:none;}
.sidemenu .sbox .menu_all .menubtn{position:absolute; top:-4px; right:0; width:26px; height:37px;}
.sidemenu .sbox .menu_all .menubtn li{height:2px; margin:7px 0; background:#fff; transition:all 0.5s; transform-origin: left center;}
.sidemenu .sbox .menu_all .menubtn.on .bar_t{transform:rotate(45deg);}
.sidemenu .sbox .menu_all .menubtn.on .bar_m{width:0;}
.sidemenu .sbox .menu_all .menubtn.on .bar_b{transform:rotate(-45deg);}
.sidemenu .sbox .menu{margin-top:50px;}
.sidemenu .sbox .menu li{position:relative; border-top:1px solid rgba(255,255,255, 0.3);}
.sidemenu .sbox .menu li:last-child{border-bottom:1px solid rgba(255,255,255, 0.3);}
.sidemenu .sbox .menu li>a{display:block; width:300px; height:130px; padding:0 30px; font-size:30px; color:#fff; line-height:130px;}
.sidemenu .sbox .menu li .submenu{position:absolute; top:50%; left:300px; transform:translateY(-50%); width:calc(100% - 300px);}
.sidemenu .sbox .menu li .submenu p{float:left; margin-right:30px;}
.sidemenu .sbox .menu li .submenu p a{display:block; font-size:20px; color:rgba(255,255,255, 0.5); transition:all 0.5s;}
.sidemenu .sbox .menu li .submenu p a:hover{color:#fff;}

/* slidetext */
.slidetext{position:absolute; top:50%; left:50%; transform:translate(-50%, -130px); z-index:997; width:1200px; text-align:center;}
.slidetext p{font-size:15px; color:rgba(255,255,255, 0.9);}
.slidetext p:nth-of-type(1){font-size:55px; line-height:65px; letter-spacing:-2px;}
.slidetext p:nth-of-type(2){margin:15px 0 30px; line-height:20px;}
.slidetext div a{display:inline-block; width:160px; height:50px; font-size:18px; color:#fff; line-height:50px; border:1px solid #fff; background:rgba(43,40,40, 0.65);}

/* section all */
.section{position:relative; overflow:hidden; padding:60px 0;}
.section .sbox{position:relative; overflow:hidden;}
.section .title{text-align:center;}
.section .title p span{padding-bottom:3px; font-size:26px; font-weight:700; color:#000; border-bottom:1px solid #000;}
.section .title p:nth-of-type(2){margin:60px 0 25px; font-size:50px; font-weight:700; color:#000;}
.section .title p:nth-of-type(3){font-size:18px; color:#000; line-height:24px;}

/* section style */
.section1{background:url('../img/section1_bg.png') repeat center;}
.section1 .sbox{height:370px; margin-top:50px;}
.section1 .sbox .ssbox{position:absolute; top:0; width:274px; border:2px solid transparent; transition:all 2s;}
.section1 .sbox .ssbox1{left:1200px;}
.section1 .sbox .ssbox2{left:1800px;}
.section1 .sbox .ssbox3{left:2400px;}
.section1 .sbox .ssbox4{left:3000px;}
.section1 .sbox .ssbox .imgbox{position:relative; height:186px; overflow:hidden;}
.section1 .sbox .ssbox .imgbox img{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); transition:all 0.5s;}
.section1 .sbox .ssbox .box{padding:20px; background:#fff;}
.section1 .sbox .ssbox .box p:nth-of-type(1){font-size:20px; font-weight:700; color:#5a5a5a;}
.section1 .sbox .ssbox .box p:nth-of-type(2){margin:15px 0 20px; font-size:18px; color:#6f6f6f; line-height:30px;}
.section1 .sbox .ssbox .box div a{font-size:12px; color:#0e0e0e;}
.section1 .sbox .ssbox:hover{border-color:#000;}
.section1 .sbox .ssbox:hover .imgbox img{transform:translate(-50%, -50%) scale(1.1);}

/* section1 on */
.section1.on .sbox .ssbox1{left:0;}
.section1.on .sbox .ssbox2{left:309px;}
.section1.on .sbox .ssbox3{left:618px;}
.section1.on .sbox .ssbox4{left:926px;}

.section2{height:704px; padding:0; background:url('../img/section2_bg.jpg') no-repeat center;}
.section2 .title{position:absolute; top:300px; left:50%; transform:translateX(-50%); z-index:1; width:1200px; transition:all 2s; overflow:hidden; opacity:0;}
.section2 .title p span{color:#fff; border-color:#fff;}
.section2 .title p:nth-of-type(2),
.section2 .title p:nth-of-type(3){color:#fff;}
.section2 .sbox .ssbox{float:left; width:300px; height:704px; padding-top:800px; text-align:center; border-left:1px solid rgba(255,255,255, 0.2); transition:all 2s; overflow:hidden;}
.section2 .sbox .ssbox4{border-right:1px solid rgba(255,255,255, 0.2);}
.section2 .sbox .ssbox p{color:#fff;}
.section2 .sbox .ssbox p:nth-of-type(1){margin:20px 0 30px; font-size:36px; font-weight:700;}
.section2 .sbox .ssbox p:nth-of-type(2){font-size:15px; line-height:20px;}

/* section2 on */
.section2.on1 .title{top:100px; opacity:1;}
.section2.on2 .sbox .ssbox{padding-top:390px;}

.section3 .sbox{margin-top:50px;}

/* footer */
.footer{background:#333;}
.footer .fbox{padding:50px 0;}
.footer .fbox .flogo{float:left; width:300px;}
.footer .fbox .textbox{float:left; width:900px; padding-left:50px; border-left:1px solid #aaa;}
.footer .fbox .textbox ul li{float:left; margin-right:10px;}
.footer .fbox .textbox ul li a{display:block; padding-right:10px; font-size:16px; color:#aaa; border-right:1px solid #aaa; line-height:12px;}
.footer .fbox .textbox ul li:last-child a{border-right:none;}
.footer .fbox .textbox p{margin-bottom:20px;}
.footer .fbox .textbox p:last-child{margin-bottom:0;}
.footer .fbox .textbox p:nth-of-type(1){margin-top:20px;}
.footer .fbox .textbox p span{margin-right:10px; font-size:16px; color:#aaa;}

.topbutton{position:fixed; bottom:30px; right:30px; z-index:9998; width:50px; height:50px; font-size:16px; font-weight:700; color:#fff; text-align:center; line-height:50px; background:#000; border-radius:50%; transition:all 0.7s; opacity:0.7; cursor:pointer;}
.topbutton:hover{opacity:1;}

/* subtop */
.subtop{height:600px; padding-top:220px;}
.subtop p{color:#fff; text-align:center;}
.subtop p:nth-of-type(1){position:relative; padding-top:50px; font-size:66px; font-weight:700;}
.subtop p:nth-of-type(1)::before{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:60px; border-bottom:1px solid #fff;}
.subtop p:nth-of-type(2){margin-top:30px; font-size:19px; line-height:30px;}
.subtop01{background:url('../img/subtop01.jpg') no-repeat center;}
.subtop02{background:url('../img/subtop02.jpg') no-repeat center;}
.subtop03{background:url('../img/subtop03.jpg') no-repeat center;}
.subtop04{background:url('../img/subtop04.jpg') no-repeat center;}
.subtop05{background:url('../img/subtop05.jpg') no-repeat center;}
.subtop06{background:url('../img/subtop06.jpg') no-repeat center;}

/* smenu */
.smenu{margin-top:50px; text-align:center;}
.smenu ul{display:inline-block; padding:5px 25px; border:1px solid #888; border-radius:30px;}
.smenu ul li{float:left;}
.smenu ul li a{display:block; position:relative; width:150px; height:50px; font-size:16px; color:#888; line-height:50px; transform:translateZ(0);}
.smenu ul li a:before{display:none; content:""; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:-1; width:190px; height:100%; border-radius:30px; background:#274e77;}

/* smenu active */
.sub01 .smenu ul li:nth-child(1) a,
.sub02 .smenu ul li:nth-child(2) a,
.sub03 .smenu ul li:nth-child(3) a,
.sub04 .smenu ul li:nth-child(4) a,
.sub05 .smenu ul li:nth-child(5) a,
.sub06 .smenu ul li:nth-child(6) a{color:#fff;}

.sub01 .smenu ul li:nth-child(1) a:before,
.sub02 .smenu ul li:nth-child(2) a:before,
.sub03 .smenu ul li:nth-child(3) a:before,
.sub04 .smenu ul li:nth-child(4) a:before,
.sub05 .smenu ul li:nth-child(5) a:before,
.sub06 .smenu ul li:nth-child(6) a:before{display:block;}

/* sub all */
.sub .contents{padding:150px 0 100px;}
.sub .contents .title{text-align:center;}
.sub .contents .title p:nth-of-type(1){font-size:46px; font-weight:700; color:#000;}
.sub .contents .title p:nth-of-type(2){margin-top:50px; font-size:24px; color:#333;}
.sub .contents .title p:nth-of-type(2) strong{color:#274e77;}
.sub .contents .title p:nth-of-type(3){margin-top:20px; font-size:16px; color:#264494;}
.sub .contents .title div{margin-top:10px; }
.sub .contents .title div a{font-size:36px; font-weight:700; color:#274e77;}
.sub .contents .sbox{margin-top:100px;}
.sub .contents .round{width:300px; height:300px; margin:100px auto 0; font-size:30px; font-weight:500; color:#eee; text-align:center; line-height:300px; border:1px solid #ddd; border-radius:50%;}


/* sub style */
.sub01_01 .contents{width:100%; min-width:1200px;}
.sub01_01 .contents .sbox .ssbox{float:left; width:50%; height:500px;}
.sub01_01 .contents .sbox .ssbox1{background:url('../img/sub01_01.jpg') no-repeat right center;}
.sub01_01 .contents .sbox .ssbox2{position:relative;}
.sub01_01 .contents .sbox .ssbox2 .box{position:absolute; bottom:0; left:50px; width:100%;}
.sub01_01 .contents .sbox .ssbox2 .box p{font-size:19px; color:#888; line-height:30px;}
.sub01_01 .contents .sbox .ssbox2 .box .basic{margin-top:50px;}
.sub01_01 .contents .sbox .ssbox2 .box .basic th,
.sub01_01 .contents .sbox .ssbox2 .box .basic td{padding-bottom:10px; font-size:16px; color:#333; text-align:left;}
.sub01_01 .contents .sbox .ssbox2 .box .basic th{width:100px;}

.sub01_02 .contents{width:100%; min-width:1200px;}
.sub01_02 .contents .sbox{height:600px; padding-top:100px; text-align:center; background:url('../img/sub01_02.jpg') no-repeat center;}
.sub01_02 .contents .sbox .ssbox{display:inline-block; vertical-align:top; width:380px; height:380px; padding:80px 10px 10px; border:20px solid #274e77; border-radius:50%; background:#fff;}
.sub01_02 .contents .sbox .ssbox:nth-child(2){margin:0 30px;}
.sub01_02 .contents .sbox .ssbox p:nth-of-type(1){font-size:30px; font-weight:700; color:#333;}
.sub01_02 .contents .sbox .ssbox p:nth-of-type(2){margin-top:50px; font-size:16px; color:#888; line-height:30px;}
.sub01_02 .contents .sbox .ssbox p:nth-of-type(2) strong{font-weight:400; color:#333;}

.sub01_03 .contents{overflow:hidden;}
.sub01_03 .contents .sbox{position:relative; padding-top:20px;}
.sub01_03 .contents .sbox:before{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:50px; border-top:2px solid #274e77;}
.sub01_03 .contents .sbox:after{content:""; position:absolute; top:170px; left:50%; width:1px; height:100%; border-right:1px dotted #630;}
.sub01_03 .contents .sbox>p{text-align:center;}
.sub01_03 .contents .sbox>p:nth-of-type(1){font-size:30px; font-weight:700; color:#333;}
.sub01_03 .contents .sbox>p:nth-of-type(2){margin-top:20px; font-size:20px; color:#333;}
.sub01_03 .contents .sbox .ssbox{margin-top:44px;}
.sub01_03 .contents .sbox .ssbox1 .rbox{position:relative; float:right; width:50%;}
.sub01_03 .contents .sbox .ssbox1 .rbox:before{content:""; position:absolute; top:0; left:-13px; z-index:2; width:30px; height:30px; border:5px solid #274e77; border-radius:50%; background:#fff; box-sizing:border-box;}
.sub01_03 .contents .sbox .ssbox1 .rbox p{padding-left:45px; font-size:30px; color:#274e77; line-height:30px;}
.sub01_03 .contents .sbox .ssbox1 .rbox ul{padding-top:16px;}
.sub01_03 .contents .sbox .ssbox1 .rbox ul li{position:relative; margin-top:18px; padding-left:48px; font-size:16px; color:#666; line-height:30px;}
.sub01_03 .contents .sbox .ssbox1 .rbox ul li span{font-size:20px; font-weight:700; color:#333;}
.sub01_03 .contents .sbox .ssbox1 .rbox ul li:before{content:""; position:absolute; top:7px; left:-1px; z-index:1; width:5px; height:5px; background:#bf9f7e;}
.sub01_03 .contents .sbox .ssbox2 .lbox{position:relative; float:left; width:50%; text-align:right;}
.sub01_03 .contents .sbox .ssbox2 .lbox:before{content:""; position:absolute; top:0; right:-16px; z-index:2; width:30px; height:30px; border:5px solid #274e77; border-radius:50%; background:#fff; box-sizing:border-box;}
.sub01_03 .contents .sbox .ssbox2 .lbox p{padding-right:45px; font-size:30px; color:#274e77; line-height:30px;}
.sub01_03 .contents .sbox .ssbox2 .lbox ul{padding-top:16px;}
.sub01_03 .contents .sbox .ssbox2 .lbox ul li{position:relative; margin-top:18px; padding-right:48px; font-size:16px; color:#666; line-height:30px;}
.sub01_03 .contents .sbox .ssbox2 .lbox ul li span{font-size:20px; font-weight:700; color:#333;}
.sub01_03 .contents .sbox .ssbox2 .lbox ul li:before{content:""; position:absolute; top:7px; right:-4px; z-index:1; width:5px; height:5px; background:#bf9f7e;}

.sub01_04 .contents .sbox div{text-align:center;}

.sub01_05 .contents .sbox .ssbox{margin-bottom:20px; padding:50px 100px; background:#274e77;}
.sub01_05 .contents .sbox .ssbox p{font-size:36px; font-weight:700; color:#fff;}
.sub01_05 .contents .sbox .ssbox .basic{margin-top:10px;}
.sub01_05 .contents .sbox .ssbox .basic th,
.sub01_05 .contents .sbox .ssbox .basic td{padding:10px 0; font-size:16px; font-weight:700; color:rgba(255,255,255, 0.7); text-align:left;}
.sub01_05 .contents .sbox .ssbox .basic th{width:80px; font-size:20px; color:#fff;}

.sub01_06 .contents .sbox{text-align:center;}
.sub01_06 .contents .sbox .ssbox1{border:1px solid #ddd;}
.sub01_06 .contents .sbox .ssbox1 .box{position:relative; height:300px; padding-left:350px;}
.sub01_06 .contents .sbox .ssbox1 .box div{position:absolute; top:50%; left:0; transform:translateY(-50%); width:300px; text-align:center;}
.sub01_06 .contents .sbox .ssbox1 .box p{padding:50px 20px 20px; font-size:20px; color:#333; text-align:left; line-height:40px;}

.sub02_01 .contents .sbox .ssbox{float:left; width:585px;}
.sub02_01 .contents .sbox .ssbox:first-child{margin-right:30px;}
.sub02_01 .contents .sbox .ssbox .box{float:left; width:285px; height:575px; padding:10px; border:1px solid #333;}
.sub02_01 .contents .sbox .ssbox .box:first-child{margin-right:10px;}
.sub02_01 .contents .sbox .ssbox .box>p{font-size:20px; font-weight:700; color:#333;}
.sub02_01 .contents .sbox .ssbox .box .list{margin-top:20px;}
.sub02_01 .contents .sbox .ssbox .box .list div{margin-bottom:20px;}
.sub02_01 .contents .sbox .ssbox .box .list div:last-child{margin-bottom:0;}
.sub02_01 .contents .sbox .ssbox .box .list div p:nth-of-type(1){font-size:16px; font-weight:700; color:#333;}
.sub02_01 .contents .sbox .ssbox .box .list div p:nth-of-type(2){margin-top:10px; font-size:14px; color:#666; line-height:20px;}

.prdlist .contents .sbox .ssbox{margin-bottom:30px; padding-bottom:30px; border-bottom:1px solid #ddd;}
.prdlist .contents .sbox .ssbox:last-child{margin-botom:0;}
.prdlist .contents .sbox .ssbox .box{float:left;}
.prdlist .contents .sbox .ssbox .box1{width:228px; height:300px; overflow:hidden;}
.prdlist .contents .sbox .ssbox .box1 div{display:none; position:fixed; top:104px; left:50%; transform:translateX(-50%); z-index:1; width:527px;}
.prdlist .contents .sbox .ssbox .box1 div img{width:100%;}
.prdlist .contents .sbox .ssbox .box2{width:calc(100% - 228px); padding-left:20px;}
.prdlist .contents .sbox .ssbox .box2 p:nth-of-type(1){padding-bottom:10px; font-size:20px; font-weight:700; color:#333; border-bottom:1px solid #333;}
.prdlist .contents .sbox .ssbox .box2 p:nth-of-type(2){margin-top:20px; font-size:16px; color:#666; line-height:30px;}
.prdlist .contents .sbox .ssbox1 .box1{background:url('../img/sub02_hwangwan01.jpg') no-repeat center / 100% auto;}
.prdlist .contents .sbox .ssbox2 .box1{background:url('../img/sub02_hwangwan02.jpg') no-repeat center / 100% auto;}
.prdlist .contents .sbox .ssbox3 .box1{background:url('../img/sub02_hwangwan03.jpg') no-repeat center / 100% auto;}
.prdlist .contents .sbox .ssbox4 .box1{background:url('../img/sub02_hwangwan04.jpg') no-repeat center / 100% auto;}
.prdlist .contents .sbox .ssbox5 .box1{background:url('../img/sub02_hwangwan05.jpg') no-repeat center / 100% auto;}
.prdlist .contents .sbox .ssbox6 .box1{background:url('../img/sub02_hwangwan06.jpg') no-repeat center / 100% auto;}
.prdlist .contents .sbox .ssbox7 .box1{background:url('../img/sub02_hwangwan07.jpg') no-repeat center / 100% auto;}
.prdlist .contents .sbox .ssbox8 .box1{background:url('../img/sub02_hwangwan08.jpg') no-repeat center / 100% auto;}
.prdlist .contents .sbox .ssbox9 .box1{background:url('../img/sub02_hwangwan09.jpg') no-repeat center / 100% auto;}
.prdlist .contents .sbox .ssbox10 .box1{background:url('../img/sub02_hwangwan10.jpg') no-repeat center / 100% auto;}
.prdlist .contents .sbox .ssbox11 .box1{background:url('../img/sub02_hwangwan11.jpg') no-repeat center / 100% auto;}
.prdlist .contents .sbox .ssbox12 .box1{background:url('../img/sub02_hwangwan12.jpg') no-repeat center / 100% auto;}
.prdlist2 .contents .sbox .ssbox1 .box1{background:url('../img/sub02_gaggwan01.jpg') no-repeat center / 100% auto;}
.prdlist2 .contents .sbox .ssbox2 .box1{background:url('../img/sub02_gaggwan02.jpg') no-repeat center / 100% auto;}
.prdlist2 .contents .sbox .ssbox3 .box1{background:url('../img/sub02_gaggwan03.jpg') no-repeat center / 100% auto;}
.prdlist2 .contents .sbox .ssbox4 .box1{background:url('../img/sub02_gaggwan04.jpg') no-repeat center / 100% auto;}
.prdlist2 .contents .sbox .ssbox5 .box1{background:url('../img/sub02_gaggwan05.jpg') no-repeat center / 100% auto;}
.prdlist2 .contents .sbox .ssbox6 .box1{background:url('../img/sub02_gaggwan06.jpg') no-repeat center / 100% auto;}
.prdlist2 .contents .sbox .ssbox7 .box1{background:url('../img/sub02_gaggwan07.jpg') no-repeat center / 100% auto;}