@charset "utf-8"; /* CSS Document */ /****************************************************/ /***************** header_wrap ******************/ /****************************************************/ img{display:block;vertical-align:top} span.hidden{overflow:hidden;position:absolute;width:0;height:0;font-size:0;line-height:0;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0} .header_wrap{position:relative; width:100%; height:600px;} .gnb_wrapper{position:relative; width:100%; z-index:100;} .gnb_wrapper .gnb_wrap{position:relative; width:100%; background:transparent; -webkit-transition:background-image .2s ease-in-out;-o-transition:background-image .2s ease-in-out;transition:background-image .2s ease-in-out;} .gnb_wrapper .gnb_wrap.active{background-color:#fff; /* box-shadow:0px 3px 3px rgba(0,0,0,0.2); */ border-bottom:solid 1px #989898;} .gnb_wrapper .gnb_wrap.active .tnb .tnbBox .langForm ul li a{color:#282828;} .gnb_wrapper .gnb_wrap.active .tnb .tnbBox .langForm ul li.on a{color:#fff;} .gnb_wrapper .gnb_wrap.active .tnb .tnbBox .snsForm ul li a{color:#9a9a9a; padding-left:25px;} .gnb_wrapper .gnb_wrap.active .tnb .tnbBox .snsForm ul li a:hover{color:#222;} .gnb_wrapper .gnb_wrap.active .tnb .tnbBox .snsForm ul li a.snsfacebook{background:url("../../image/front/new/icon_facebook_active.png") left center no-repeat;} .gnb_wrapper .gnb_wrap.active .tnb .tnbBox .snsForm ul li a.snsfacebook:hover{background:url("../../image/front/new/icon_facebook_on.png") left center no-repeat;} .gnb_wrapper .gnb_wrap.active .tnb .tnbBox .snsForm ul li a.snsyoutube{background:url("../../image/front/new/icon_youtube_active.png") left center no-repeat;} .gnb_wrapper .gnb_wrap.active .tnb .tnbBox .snsForm ul li a.snsyoutube:hover{background:url("../../image/front/new/icon_youtube_on.png") left center no-repeat;} .gnb_wrapper .gnb_wrap.active .tnb .tnbBox .snsForm ul li a.snsinstagram{background:url("../../image/front/new/icon_instagram_active.png") left center no-repeat;} .gnb_wrapper .gnb_wrap.active .tnb .tnbBox .snsForm ul li a.snsinstagram:hover{background:url("../../image/front/new/icon_instagram_on.png") left center no-repeat;} .gnb_wrapper .gnb_wrap.active .tnb .tnbBox .snsForm ul li a.snsblog{background:url("../../image/front/new/icon_blog_active.png") left center no-repeat;} .gnb_wrapper .gnb_wrap.active .tnb .tnbBox .snsForm ul li a.snsblog:hover{background:url("../../image/front/new/icon_blog_on.png") left center no-repeat;} .gnb_wrapper .gnb_wrap.active .tnb .tnbBox .snsForm ul li a.snsflickr{background:url("../../image/front/new/icon_flickr_active.png") left center no-repeat;} .gnb_wrapper .gnb_wrap.active .tnb .tnbBox .snsForm ul li a.snsflickr:hover{background:url("../../image/front/new/icon_flickr_on.png") left center no-repeat;} .gnb_wrapper .gnb_wrap.active .tnb .tnbBox .snsForm ul li a.snstwitter{background:url("../../image/front/new/icon_twitter_active.png") left center no-repeat;} .gnb_wrapper .gnb_wrap.active .tnb .tnbBox .snsForm ul li a.snstwitter:hover{background:url("../../image/front/new/icon_twitter_on.png") left center no-repeat;} .gnb_wrapper .gnb_wrap.active .tnb .tnbBox .snsForm ul li a.snsvkontakte{background:url("../../image/front/new/icon_vk_active.png") left center no-repeat;} .gnb_wrapper .gnb_wrap.active .tnb .tnbBox .snsForm ul li a.snsvkontakte:hover{background:url("../../image/front/new/icon_vk_on.png") left center no-repeat;} .gnb_wrapper .gnb_wrap.active .tnb .tnbBox .snsForm ul li a.snsweibo{background:url("../../image/front/new/icon_weibo_active.png") left center no-repeat;} .gnb_wrapper .gnb_wrap.active .tnb .tnbBox .snsForm ul li a.snsweibo:hover{background:url("../../image/front/new/icon_weibo_on.png") left center no-repeat;} .gnb_wrapper .gnb_wrap.active .tnb .tnbBox .snsForm ul li a.snskoo{background:url("../../image/front/new/icon_koo_active.png") left center no-repeat;} .gnb_wrapper .gnb_wrap.active .tnb .tnbBox .snsForm ul li a.snskoo:hover{background:url("../../image/front/new/icon_koo_on.png") left center no-repeat;} .gnb_wrapper .gnb_wrap.active .gnbBox .logo a{background:url("../../image/front/new/logo_top_on.png") left center no-repeat;} .gnb_wrapper .gnb_wrap.active .gnbBox .logo a.logoCanada{background:url("../../image/front/new/logo_top_ca_on.png") left center no-repeat;} /* 20240724 캐나다 로고 추가 */ .gnb_wrapper .gnb_wrap.active .gnbBox .logo a ul.logoSub{border:solid 1px #b8b8b8;} .gnb_wrapper .gnb_wrap.active .gnbBox .logo a ul.logoSub li{font-size:14px; font-family:'NotoKrDL'; float:left;} .gnb_wrapper .gnb_wrap.active .gnbBox .logo a ul.logoSub li.logotxt01{color:#58585a;} .gnb_wrapper .gnb_wrap.active .gnbBox .logo a ul.logoSub li.logotxt01:after{border-right:solid 1px #b8b8b8;} .gnb_wrapper .gnb_wrap.active .gnbBox .logo a ul.logoSub li.logotxt02{color:#c02462;} .gnb_wrapper .gnb_wrap.active .gnbBox .nav li:nth-child(1) > div > ul{} .gnb_wrapper .gnb_wrap.active .gnbBox .nav li:nth-child(2) > div > ul{} .gnb_wrapper .gnb_wrap.active .gnbBox .nav li:nth-child(3) > div > ul{} .gnb_wrapper .gnb_wrap.active .gnbBox .nav li:nth-child(4) > div > ul{/* width:960px; */ text-align:center;} /* 20230220 text-align 수정 */ /* 20230222 width 삭제 */ .gnb_wrapper .gnb_wrap.active .gnbBox .nav li:nth-child(5) > div > ul{/* width:1000px; */ text-align:center;} /* 20230220 text-align 수정 */ /* 20230222 width 삭제 */ .gnb_wrapper .gnb_wrap.active .gnbBox .nav li:nth-child(6) > div > ul{/* width:1000px; */ text-align:center;} /* 20220525 추가 */ /* 20230220 text-align 수정 */ /* 20230222 width 삭제 */ .gnb_wrapper .gnb_wrap.active .gnbBox .nav li.depth01 a{color:#333;} .gnb_wrapper .gnb_wrap.active .gnbBox .nav li.depth01.on .navSub{display:block; position:absolute; left:0; top:113px; width:100%; /* height:60px; */ background-color:#fff; border-top:solid 1px #989898; box-shadow:0px 3px 3px rgba(0,0,0,0.2);} .gnb_wrapper .gnb_wrap.active .gnbBox .nav li.depth01.on .navSub ul{position:relative; margin:0 auto;} .gnb_wrapper .gnb_wrap.active .gnbBox .nav li.depth01.on .navSub ul li{display:inline-block; padding:0 20px; line-height:55px; margin-bottom:10px;} .gnb_wrapper .gnb_wrap.active .gnbBox .nav li.depth01.on .navSub ul li a{font-size:16px; color:#6c6c6c; /* font-family:'NotoKrDL'; */} /* 20230308 서브gnb 폰트변경 */ .gnb_wrapper .gnb_wrap.active .gnbBox .nav li.depth01.on .navSub ul li a:hover{color:#c02462;} .gnb_wrapper .gnb_wrap.active .gnbBox .nav li.depth01RussiaCenter.on .navSub{left:50%; width:auto; transform: translateX(-41%); } /* 20220411 추가 */ .gnb_wrapper .gnb_wrap.active .gnbBox .nav li.depth01RussiaCenter.on .navSub ul{min-width: 2400px;} /* 20220411 추가 */ .gnb_wrapper .gnb_wrap.active .gnbBox .multiLink ul li.searchForm a{display:block; width:70px; height:70px; background:url("../../image/front/new/icon_search_active.png") center center no-repeat;} .gnb_wrapper .gnb_wrap.active .gnbBox .multiLink ul li.webAllMenu a.allMenu{background:url("../../image/front/new/icon_allMenu_active.png") center center no-repeat; display:block; width:70px; height:70px;} .gnb_wrapper .gnb_wrap.active .gnbBox .multiLink ul li.searchForm .searchBoxHeader, .gnb_wrapper .gnb_wrap .gnbBox .multiLink ul li.searchForm .searchBoxHeader{display:none;} .gnb_wrapper .gnb_wrap.active .gnbBox .multiLink ul li.searchForm.open .searchBoxHeader{display:block; position:absolute; /* top:114px; */ left:0; width:100%;} .gnb_wrapper .gnb_wrap.active .gnbBox .multiLink ul li.searchForm.open a{background:url("../../image/front/new/icon_search_on.png") center center no-repeat; background-color:#c02462;} .gnb_wrapper .gnb_wrap.active .gnbBox .multiLink ul li.searchForm.open .searchBoxHeader .searchBox-bg{background-color:#c02462; height:60px;} .gnb_wrapper .gnb_wrap.active .gnbBox .multiLink ul li.searchForm.open .searchBoxHeader .searchBox-bg{width:100%;} .gnb_wrapper .gnb_wrap.active .gnbBox .multiLink ul li.searchForm.open .searchBoxHeader .searchBox-area{position:absolute; width:60%; top:0; left:50%; transform:translateX(-50%);} /* 20230127 gnb 간격 수정 start */ @media screen and (max-width: 1400px) { .gnb_wrapper .gnb_wrap.active .gnbBox .nav li.depth01.on .navSub ul li{padding:0 13px;} /* 20230214 추가 */ } @media screen and (max-width: 1260px) { .gnb_wrapper .gnb_wrap.active .gnbBox .nav li.depth01.on .navSub ul li{padding:0 12px;} /* 20230214 추가 */ .gnb_wrapper .gnb_wrap.active .gnbBox .nav li.depth01.on .navSub ul li a{font-size:15px;} /* 20230214 추가 */ } @media screen and (max-width: 1200px) { .gnb_wrapper .gnb_wrap.active .gnbBox .nav li.depth01.on .navSub ul li{padding:0 10px;} /* 20230214 추가 */ } @media screen and (max-width: 1150px) { .gnb_wrapper .gnb_wrap.active .gnbBox .nav li.depth01.on .navSub ul li{padding:0 5px;} /* 20230214 추가 */ } /* 20230214 gnb 간격 수정 end */ /* .searchBox-area::after{content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:#eb912a; transition:width .3s;} */ .searchBox-area input{display:block; width:100%; padding: 15px 35px 9px 10px; background:transparent; border-bottom:2px solid rgba(255,255,255,0.9); color:#fff; font-weight:500; outline:none; -webkit-appearance: none; -webkit-border-radius: 0;} .searchBox-area input::placeholder{color:#cfa6b6; font-size:16px;} .searchBox-area input::-webkit-input-placeholder{color:#cfa6b6; font-size:16px;} /* 크롬 구버전 */ .searchBox-area input:-ms-input-placeholder{color:#cfa6b6; font-size:16px;} /* IE적용 */ /* 언어별 css 추가 20210128 */ html:lang(hu) .gnb_wrapper .gnb_wrap.active .gnbBox .nav li.depth01.on .navSub ul li a{font-family:'Open Sans';} /* 아랍어 개편 css 추가 20201211 */ html:lang(ar) .gnb_wrapper .gnb_wrap.active .gnbBox .logo a{background:url("../../image/front/new/logo_top_on.png") right center no-repeat;} html:lang(ar) .gnbBox .multiLink{float:left;} html:lang(ar) .searchBox-area button.btn-submit{right:unset;left:5px;} html:lang(ar) .searchBox-area input{padding:15px 6px 9px 10px;} html:lang(ar) .gnb_wrapper .gnb_wrap.active .gnbBox .nav li:nth-child(1) > div > ul{width: 1000px; text-align:center;} /* 20230220 text-align 수정 */ html:lang(ar) .gnb_wrapper .gnb_wrap.active .gnbBox .nav li:nth-child(2) > div > ul{width: 1000px; text-align:center;} /* 20230220 text-align 수정 */ html:lang(ar) .gnb_wrapper .gnb_wrap.active .gnbBox .nav li:nth-child(3) > div > ul{} html:lang(ar) .gnb_wrapper .gnb_wrap.active .gnbBox .nav li:nth-child(4) > div > ul{width: auto; text-align: center;} /* 20230220 text-align 수정 */ html:lang(ar) .gnb_wrapper .gnb_wrap.active .gnbBox .nav li:nth-child(5) > div > ul{width: auto; text-align: center;} /* 20230220 text-align 수정 */ /* html:lang(ar) .nav {float:right; margin-right: 245px;} */ /* 러시아어 추가 20220411 */ html:lang(ru) .gnb_wrapper .gnb_wrap.active .gnbBox .nav li.depth01RussiaCenter.on .navSub{left:50%; width:auto; transform: translateX(-39%); } /* 20220411 추가 */ .searchBox-area button.btn-submit{position:absolute; display:block; top:50%; right:5px; width:24px; height:24px; text-indent:-999em; overflow:hidden; transform:translateY(-50%); background:url("../../image/front/new/icon_search.png") center center no-repeat;} .topLinkBox{position:relative;overflow:hidden;width:100%; /* height:70px; */ padding:10px 0;border-bottom:1px solid #e4e4e4} .topLink{margin:0 auto;width:1400px;text-align:right; display:none;} .topLink > ul{float:right} .topLink > ul li{float:left} .topLink > ul li:first-child span{margin-right:10px;padding-right:15px;background:url("../images/layout/toplink_line.gif") right center no-repeat;font-family:"Noto Sans KR DL";font-size:0.8125rem/*14px*/;vertical-align:baseline} .topLink > ul li:first-child span:last-child{margin:0;padding:0;background:none} .topLink > ul li:first-child span a{color:#737373} .topLink > ul li:first-child span a:hover, .topLink > ul li:first-child span a:focus{color:#585858} .blockIR{display:block;width:0;height:0;font-size:0;color:transparent;line-height:0} .multiLink > ul > li.webAllMenu{display:none} .allMenu{display:none !important; background:url("../../image/front/new/icon_allMenu.png") center center no-repeat; display:block; width:70px; height:70px;} .tnb{position:relative; width:100%; border-bottom:solid 1px #babab9; height: 43px;} /* 20230220 height 추가 */ .tnbBox{width:1400px; margin:0 auto; padding:10px 0; overflow:hidden;} .tnbBox .langForm{} .tnbBox .langForm ul{} .tnbBox .langForm ul li{float:left; margin-right:10px;} .tnbBox .langForm ul li a{font-size:15px; color:#fff; padding:2px 10px;} .tnbBox .langForm ul li.on a{font-size:15px; color:#fff; background-color:#282828; border:solid 1px #999;} .tnbBox .snsForm{float:right;} .tnbBox .snsForm ul{} .tnbBox .snsForm ul li{float:left;} .tnbBox .snsForm ul li a{font-size:15px; color:#cdcdcd; margin-left:20px; font-family:'NotoKrL'; padding-left:25px;} .tnbBox .snsForm ul li a span{vertical-align:baseline;} .tnbBox .snsForm ul li a.snsfacebook{background:url("../../image/front/new/icon_facebook.png") left center no-repeat;} .tnbBox .snsForm ul li a.snsyoutube{background:url("../../image/front/new/icon_youtube.png") left center no-repeat;} .tnbBox .snsForm ul li a.snsinstagram{background:url("../../image/front/new/icon_instagram.png") left center no-repeat;} .tnbBox .snsForm ul li a.snsblog{background:url("../../image/front/new/icon_blog.png") left center no-repeat;} .tnbBox .snsForm ul li a.snsflickr{background:url("../../image/front/new/icon_flickr.png") left center no-repeat;} .tnbBox .snsForm ul li a.snstwitter{background:url("../../image/front/new/icon_twitter.png") left center no-repeat;} .tnbBox .snsForm ul li a.snsvkontakte{background:url("../../image/front/new/icon_vk.png") left center no-repeat;} .tnbBox .snsForm ul li a.snsweibo{background:url("../../image/front/new/icon_weibo.png") left center no-repeat;} .tnbBox .snsForm ul li a.snskoo{background:url("../../image/front/new/icon_koo.png") left center no-repeat;} .gnbBox{width:1400px; height:70px; margin:0 auto; overflow:hidden; text-align:center;} .gnbBox .logo{float:left; padding-top:10px;} .gnbBox .logo a{display:block; height:50px; background:url("../../image/front/new/logo_top.png") left center no-repeat; padding-left:180px;} .gnbBox .logo a p{float:left;} .gnbBox .logo a ul.logoSub{float:left; border:solid 1px #fff; border-radius:3px; padding:6px 10px; margin:8px 0 0 15px;} .gnbBox .logo a ul.logoSub li{font-size:14px; font-family:'NotoKrDL'; float:left;} .gnbBox .logo a ul.logoSub li.logotxt01{color:#fff;} .gnbBox .logo a ul.logoSub li.logotxt01:after{content:""; position:relative; display:inline-block; top:1px; height:12px; border-right:solid 1px #fff; margin-left:10px;} .gnbBox .logo a ul.logoSub li.logotxt02{color:#f6ff00; padding-left:8px;} .gnbBox .nav{display:inline-block;} .gnbBox .nav li.depth01{float:left; margin-left:30px; line-height:65px;} .gnbBox .nav li.depth01:first-child{/* margin-left:0; */} .gnbBox .nav li.depth01 a.depth01Txt{display:block; position:relative; height:70px; text-align:center; font-size:18px; color:#fff; padding:0 20px;} .gnbBox .nav li.depth01 a.depth01Txt:before{content:""; position:absolute; right:50%; bottom:0; width:0; height:4px; background:#c02462; transition: all 0.3s ease-in-out;} .gnbBox .nav li.depth01 a.depth01Txt:after{content:""; position:absolute; left:50%; bottom:0; width:0; height:4px; background:#c02462; transition: all 0.3s ease-in-out;} .gnbBox .nav li.depth01 a.depth01Txt:hover:before {width:40%;} .gnbBox .nav li.depth01 a.depth01Txt:hover:after {width:40%;} .gnbBox .nav li.depth01 .navSub{display:none;} .gnbBox .multiLink{display:inline-block; float:right; /* height:70px; */} .gnbBox .multiLink ul{} .multiLink > ul > li{float:left;} em.IR{display:inline-block;width:0;height:0;font-size:0;color:transparent;line-height:0} .gnbBox .multiLink ul li.searchForm{} .gnbBox .multiLink ul li.searchForm a{display:block; width:70px; height:70px; background:url("../../image/front/new/icon_search.png") center center no-repeat;} .gnbBox .multiLink ul li.allMenuForm{display:none;} /* 메뉴명 길이 관련 css 20201223 */ .gnbBox .nav.otherCase li.depth01{margin-left:10px;} /* 20230222 수정 */ .gnbBox .nav.otherCase li.depth01 a.depth01Txt{font-size:17px;} /* 언어별 css 추가 20210128 */ html:lang(hu) .gnbBox .nav li.depth01 a.depth01Txt{font-family:'Open Sans'; font-weight:bold;} /* 언어별 태국 css 추가 202205024 */ html:lang(th) .gnbBox .nav.otherCase li.depth01{margin-left:10px;} html:lang(th) .gnbBox .nav li.depth01 a.depth01Txt{padding:0 10px;} /* 아랍어 개편 css 추가 20201211 */ html:lang(ar) .gnb_wrap .gnbBox .logo {float:right;} html:lang(ar) .gnb_wrap .gnbBox .logo a {padding-left:unset;padding-right:190px; background:url("../../image/front/new/logo_top.png") right center no-repeat;} /* html:lang(ar) .gnb_wrap .gnbBox .logo a ul.logoSub {position:absolute;margin: 8px 15px 0 0;} */ /* html:lang(ar) .gnb_wrap.active .gnbBox .logo a ul.logoSub {position:absolute; margin-right: 192px;} */ html:lang(ar) .gnb_wrap .gnbBox .logo a ul.logoSub li.logotxt01 {float:right; /* margin-right:10px; */} html:lang(ar) .gnb_wrap .gnbBox .logo a ul.logoSub li.logotxt01:after{margin-right:10px;} html:lang(ar) .gnb_wrap .gnbBox .multiLink ul{right:50%;left:unset;} html:lang(ar) div.active .gnbBox .multiLink ul{right:50%;left:unset;} html:lang(ar) .gnbBox .nav li.depth01{margin-left:0px;} /****************************************************/ /***************** footer ******************/ /****************************************************/ #footer{position:relative; width:100%; border-top:solid 1px #c0c0c0; margin-top:50px;} /* banner_slider */ .bannerForm{position:relative;overflow:hidden;width:100%;margin-top:40px;padding:30px 0 35px;border-top:1px solid rgba(134,134,134,0.3)} .bannerBox{margin:auto; position:relative; bottom:0px; width:1400px; background-color:#fff; padding:20px 0; margin:0px auto; overflow:hidden; border-bottom:solid 1px #e5e5e5;} .bannerBox .bx-wrapper{max-width:100% !important;} .bannerBox:after{content:"";clear:both;display:block} .banner_slider{float:left;position:relative;width:1400px} .bannerControl{float:right;width:140px} .bannerBox .banner_slider .bx-viewport{width:85% !important; float:left;} .bannerBox .banner_slider .bx-controls{float:right; width:15%; position:relative;} .banner_slider ul{margin:auto;width:100%} .banner_slider ul li{float:left; text-align:center; margin:0 10px !important;} /* .banner_slider ul li{float:left; text-align:center; width: auto !important; min-width:250px; padding:0 15px;} 20200921 수정 */ .banner_slider ul li a{display:inline-block;width:100%;height:100%;font-family:"NotoKrDL";color:#444 !important; font-size:15px; font-weight: 600;} .banner_slider ul li a p{word-wrap:break-word; line-height:1.4; word-break:keep-all; /* display:-webkit-box; */ overflow:hidden; text-overflow:ellipsis; white-space:normal; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-family:'Open Sans';} .banner_slider ul li a p i.newWindow{display:inline-block;width:13px;height:13px;margin-left:5px;background:url("../../image/front/new/icon_newWindow02.png") no-repeat;vertical-align:baseline} .banner_slider .bx-controls-direction{position:absolute;right:0;top:8px;width:110px;height:20px;} .banner_slider .bx-controls-direction .bx-prev{display:inline-block;position:absolute;left:0;width:23px;height:14px} .banner_slider .bx-controls-direction .bx-next{display:inline-block;position:absolute;right:0;width:23px;height:14px} .banner_slider .bx-controls-direction .bx-prev:hover, .banner_slider .bx-controls-direction .bx-prev:focus, .banner_slider .bx-controls-direction .bx-next:hover, .banner_slider .bx-controls-direction .bx-next:focus{opacity:0.85;-fileter:alpha(opacity=85)} .banner_slider .bx-controls-auto{position:absolute;right:50px;top:8px} .banner_slider .bx-controls-auto a.bx-start{display:block;width:14px;height:14px} .banner_slider .bx-controls-auto a.bx-stop{display:block;width:14px;height:14px} .banner_slider .bx-controls-auto a.bx-start img{position:absolute;left:0;top:0; /* background:url("../../image/front/new/banner_play.png") center center no-repeat */} .banner_slider .bx-controls-auto a.bx-stop img{position:absolute;left:0;top:0; /* background:url("../../image/front/new/banner_stop.png") center center no-repeat */} .banner_slider .bx-controls-auto a.bx-start:hover, .banner_slider .bx-controls-auto a.bx-start:focus, .banner_slider .bx-controls-auto a.bx-stop:hover, .banner_slider .bx-controls-auto a.bx-stop:focus{opacity:0.85;-fileter:alpha(opacity=85)} .banner_slider .bx-controls-auto a.active{display:none} .etcLinkBox{margin:auto;position:relative;overflow:hidden;width:1400px; margin-top:30px;} .etcLinkBox:after{content:"";clear:both;display:block} .etcLink li{float:left; margin-left:35px; transition:0.3s} .etcLink li:first-child{margin-left:0; } .etcLink li a{display:block; font-size:18px; color:#000; transition:0.3s; font-family:'NotoKrL';} .etcLink li a span{font-family:'NotoKrM'; color: #72532c;} /* 20230919 color 추가 */ .addressForm{margin:auto; width:1400px; padding:25px 0; transition:0.3s} .addressForm:after{content:""; clear:both; display:block} .addressForm .address{float:left; width:70%;} .addressForm .address:after{content:""; clear:both; display:block} .addressForm .address li{float:left; width:100%; font-size:15px; color:#373940; font-family:'NotoKrL'; margin-bottom:6px;} .addressForm .address li:last-child{margin-bottom:0px;} .addressForm p.footerMI{display:none; float:right; width:180px; height:45px; margin:0 0 5px 0; background:url("../../image/front/new/footerMI.png") no-repeat;transition:0.3s} /* 탑버튼 */ #back-top{display: none; position: fixed; bottom: 30%; right: 0; z-index: 30;} #back-top a{display: block; cursor: pointer;} /* 언어별 css 추가 20210128 */ html:lang(hu) .banner_slider ul li a{font-family:'Open Sans';} html:lang(ko) .etcLink li a{font-family:'NotoKrL';} html:lang(hu) .addressForm .address li{font-family:'Open Sans';} html:lang(ar) .etcLink li{float:right;} html:lang(ar) .addressForm .address {float:right;} /* 뉴스레터 개인정보 수집 재동의 20230313 start */ .nl_wrap{display: block;width: 100%;overflow: hidden;margin-top: 60px; /* direction: ltr; */} /* 2023427 수정 */ /* 20231211 추가 start */ .btn_lang{display: block; text-align: right; margin-bottom: 20px; font-size: 0; line-height: 0;} .btn_lang button{display: inline-block; font-size: 14px; font-family: 'NotoKrDL'; color: #0078c3; padding: 4px 0; min-width: 100px; text-align: center; border: solid 1px #0078c3; border-radius: 5px; background-color: #fff; margin-left: 4px;} .btn_lang button.on{color: #fff; background-color: #0078c3; border: solid 1px #0078c3;} .btn_lang button:hover{color: #fff; background-color: #0078c3; border: solid 1px #0078c3;} /* 20231211 추가 end */ .nl_tit h2{font-size: 22px; color: #6d532c; font-family: 'NotoKrM'; margin-bottom: 10px; line-height: 1.2em;} .nl_box02{display: block; border: solid 5px #e0ddd8; padding: 25px 30px; box-sizing: border-box; margin-top: 25px;} .nl_box02 p{font-family: 'NotoKrDL'; font-size: 15px; color: #333; line-height: 26px;} /* .nl_box02 p:first-child{margin-bottom: 10px;} */ .nl_Agree_Wrap{display: block; width: 100%; overflow: hidden;} .nl_section01{display: block; width: 100%; overflow: hidden;} .nl_section01 p{font-size: 15px; color: #333333; font-family: 'NotoKrDL'; margin-bottom: 5px;} .nl_box01{display: block; width: 100%; min-height: 290px; padding: 50px 0px 0px 0px; margin-top: 15px; box-sizing: border-box; background: url(../../image/front/new/nl_bg.png) no-repeat right top;} /* 2023427 수정 */ .nl_box01 h3{color: #2c2c2c; font-size: 18px; font-family: 'NotoKrM';} .nl_box01 h3:first-child{margin-bottom: 5px;} .nl_box01 ol{width: calc(100% - 350px);} /* 2023427 추가 */ .nl_box01 li{font-size: 15px; color: #444; font-family: 'NotoKrL'; margin-top: 13px; line-height: 24px;} .nl_box01 li span{color:#d23270; text-decoration: underline; font-size:16px; font-weight:bold;} .nl_tit02{position: relative; padding-left: 15px; box-sizing: border-box; margin-bottom: 30px; width: calc(100% - 350px);} /* 2023427 수정 */ .nl_tit02::before{content:""; position:absolute; left: 0px; top: 8px; width: 6px; height: 6px; border: solid 2px #2c2c2c;} .nl_txt01{color: #856e4c !important; margin-top: 7px;} .nl_section02{display: block; width: 100%; overflow: hidden; background-color: #f6f6f6; margin-top: 40px; padding: 30px; box-sizing: border-box; border: solid 1px #d8d8d8; text-align: center;} .nl_section02 li{display: inline-block; margin: 0 20px;} .nl_info{display: block; overflow: hidden;} .nl_info input{width: 230px; padding: 5px; color: #333333; margin: 0 0 2px 2px; box-sizing: border-box; border: 1px solid #d9d9d9;} .nl_check{border-top: solid 1px #d6d6d6; margin-top: 35px; padding-top: 30px; box-sizing: border-box;} .nl_check input{appearance: auto; -moz-appearance: auto; -webkit-appearance: auto; margin: 0 3px 2px 0;} .nl_check label{font-size: 15px;} .nl_btn{display: block; background-color: #887354 !important; color: #fff; padding: 15px 70px; text-align: center; text-decoration: none; font-family: 'NotoKrM'; font-size: 16px; border-radius: 10px; margin: 30px auto !important; box-sizing: border-box; cursor: pointer;} html:lang(ar) .nl_box01{background: url(../../image/front/new/nl_bg.png) no-repeat left top;} /* 2023427 추가 */ html:lang(ar) .nl_tit02{padding: 0 15px 0 0;} /* 2023427 추가 */ html:lang(ar) .nl_tit02::before{left: auto; right: 0px;} /* 2023427 추가 */ html:lang(ar) .btn_lang{text-align: left;} /* 20231211 추가 */ html:lang(ar) .btn_lang button{margin-right: 4px; margin-left: 0px;} /* 20231211 추가 */ @media screen and (max-width: 1400px){ .nl_wrap{padding: 0 20px;} } @media screen and (max-width: 1220px){ .nl_box01{padding: 20px 0px 10px 0px; min-height: auto; background-image: none;} /* 2023427 수정 */ .nl_box01 ol{width: 100%;} /* 2023427 추가 */ .nl_tit02{width: 100%;} /* 2023427 추가 */ html:lang(ar) .nl_box01{background-image: none;} /* 2023427 추가 */ } @media screen and (max-width: 830px){ .nl_section02 {padding: 20px 2%; margin-top: 25px;} .nl_info li.nl_input {display: block; overflow: hidden; width: 320px; margin: 10px auto !important;} .nl_info input{width: 210px;} .nl_input label {float: left; width: 100px; text-align: left; padding-top: 5px;} .nl_input input {float: right;} .nl_check {margin-top: 20px; padding-top: 20px;} .btn_lang button{font-size: 13px; padding: 3px 0; min-width: 80px;} /* 20231211 추가 */ } @media screen and (max-width: 400px){ .nl_tit h2 {font-size: 20px;} .nl_info li.nl_input {width: 94%;} .nl_box01 {margin-top: 5px;} .nl_box02 {margin-top: 15px; padding: 20px;} .nl_box01 h3 {font-size: 17px;} .nl_input label {width: 34%; font-size: 14px;} .nl_info input {width: 65%;} .nl_tit02 {margin-bottom: 20px;} .nl_btn {padding: 12px 65px; margin: 20px auto !important; font-size: 15px;} .nl_section02 {margin-top: 10px;} .nl_section02 li{margin: 0 5px;} .nl_check label{font-size: 14px;} } @media screen and (max-width: 380px){ .btn_lang button{font-size: 12.5px; min-width: 76px;} /* 20231211 추가 */ } /* 뉴스레터 개인정보 수집 재동의 20230313 end */ /* 개인정보처리방침 20230919 start */ .policy_Area{position: relative;} .policy_Area h3{display: block; text-align: center; width: 100%; font-size: 46px; color: #72532c; font-weight: bold; font-family: 'NotoKrB';} .policy_date{overflow: hidden; margin-top: 40px;} .policy_date p{font-size: 15px; color: #fff; padding: 10px 45px; background-color: #555; border-radius: 5px; float: right;} .policy_boxTxt{display: block; width: 100%; margin-top: 20px; background-color: #fafafa; padding: 30px 40px; box-sizing: border-box; font-size: 16px; line-height: 29px; color: #666; border: solid 1px #cecece;} .policy_boxTxt span{color: #93591b;} .policy_listWrap{display: block; overflow: hidden;} .policy_list{margin: 45px 0;} .policy_list h4{font-size: 25px; color: #000; font-weight: bold; margin-bottom: 30px;} .policy_list p{margin-bottom: 25px; line-height: 28px;} .policy_list p:last-child{margin-top: 25px;} .policy_listBullet li{position: relative; display: block; margin-bottom: 10px; padding-left: 15px; color: #555; font-size: 16px;} .policy_listBullet li:last-child{margin-bottom: 0;} .policy_listBullet li::before{content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 2px; background-color: #9e7447;} .policy_listBullet li a{color: #007b99;} .policy_red{color: #c32361;} .policy_director{position: relative; font-size: 20px; color: #333; padding-top: 20px; margin-top: 30px; font-weight: bold;; z-index: 2;} .policy_director::before{content: ''; position: absolute; left: 0; top: 0; width: 30px; height: 4px; background-color: #565656;} /* .policy_director::after{content: ''; position: absolute; left: -3px; bottom: -5px; width: 201px; height: 15px; background-color: #ffcf92; z-index: -1;} */ @media screen and (max-width: 1000px){ .policy_Area h3{font-size: 40px;} } @media screen and (max-width: 768px){ .policy_Area h3{font-size: 32px;} .policy_date{margin-top: 30px;} .policy_date p{font-size: 14px; padding: 8px 30px;} .policy_boxTxt{padding: 15px 25px; box-sizing: border-box; font-size: 15px; line-height: 26px;} .policy_list {margin: 25px 0;} .policy_list h4 {font-size: 20px; margin-bottom: 20px;} .policy_list p {font-size: 15px; line-height: 26px; margin-bottom: 15px;} .policy_list p:last-child {margin-top: 15px;} .policy_listBullet li{margin-bottom: 7px; font-size: 15px;} .policy_director {font-size: 18px; margin-top: 20px;} } @media screen and (max-width: 500px){ .policy_Area h3{font-size: 30px;} .policy_list h4 {font-size: 18px;} .policy_director {font-size: 17px;} } /* 개인정보처리방침 20230919 end */ /* 뉴스레터 구독 페이지 20230413 start */ .Subs_wrap{display: block; width: 100%; margin-top: 110px;} .Subs_container{} .Subs_tit{position: relative;} .Subs_tit::after{content: ''; position: absolute; width: 250px; height: 165px; background: url(../../image/front/new/bg_subs.png) no-repeat; right: 80px; bottom: -30px;} .Subs_tit h2{font-size: 30px; color: #6d532c; font-weight: bold; margin-bottom: 10px; line-height: 1.2em; padding-bottom: 30px; border-bottom: 3px solid #3c3c3b;} .Subs_txtArea{position: relative; margin-top: 40px;} p.Subs_h3{font-size: 17px; color: #222; font-weight: 500;} .Subs_box{display: block; border: solid 5px #e0ddd8; padding: 25px 30px; box-sizing: border-box; margin-top: 25px;} .Subs_box p{font-family: 'NotoKrDL'; font-size: 15px; color: #333; line-height: 26px; margin-bottom: 15px;} .Subs_box p:first-child{font-weight: bold;} .Subs_box p:last-child{margin-bottom: 0;} .Subs_box p span{color: #EA4C89;} .Subs_box p span.yearBold{color: #EA4C89; font-weight: bold; font-size: 18px; text-decoration: underline;} .Subs_section02{display: block; width: 100%; overflow: hidden; background-color: #f6f6f6; margin-top: 40px; padding: 30px; box-sizing: border-box; border: solid 1px #d8d8d8; text-align: center;} .Subs_section02 li{display: inline-block; margin: 0 20px;} .Subs_info{display: block; overflow: hidden; box-sizing: border-box;} .Subs_info input{width: 230px; padding: 5px; color: #333333; margin: 0 0 2px 2px; box-sizing: border-box; border: 1px solid #d9d9d9;} .Subs_check{border-bottom: solid 1px #d6d6d6; margin-bottom: 35px; padding-bottom: 30px; box-sizing: border-box;} .Subs_check input{appearance: auto; -moz-appearance: auto; -webkit-appearance: auto; margin: 0 3px 2px 0;} .Subs_check label{font-size: 15px;} .Subs_btn{display: block; background-color: #887354 !important; color: #fff; padding: 15px 70px; text-align: center; text-decoration: none; font-family: 'NotoKrM'; font-size: 16px; border-radius: 10px; margin: 30px auto !important; box-sizing: border-box; cursor: pointer;} .Subs_btnCase02{background-color:#8d8d8d !important;} .Subs_dis{margin-top: 80px;} .Subs_dis > .Subs_tit::after{display: none;} .Subs_pt5{margin-top: 20px;} html:lang(ar) .Subs_tit::after {right: auto; left: 80px;} html:lang(ar) .Subs_input label {float: right; text-align: right; margin-left: 5px;} html:lang(ar) .Subs_input input {float: left;} @media screen and (max-width: 1420px){ .Subs_wrap {padding: 0 15px;} } @media screen and (max-width: 1200px){ .Subs_wrap {margin-top: 80px;} .Subs_tit::after{width: 200px; bottom: -55px; right: 30px; background-size: 200px;} .Subs_tit h2 {font-size: 25px; padding-bottom: 20px;} p.Subs_h3 {font-size: 16px;} } @media screen and (max-width: 830px){ .Subs_section02 {padding: 20px 2%; margin-top: 25px;} .Subs_info li.nl_input {display: block; overflow: hidden; width: 320px; margin: 10px auto !important;} .Subs_info input{width: 210px;} .Subs_input label {float: left; width: 130px; text-align: left; padding-top: 5px;} .Subs_input input {float: right;} } @media screen and (max-width: 768px){ .Subs_wrap {margin-top: 60px;} .Subs_txtArea {margin-top: 30px;} .Subs_box {padding: 15px 20px;} .Subs_box p {font-size: 14px;} .Subs_section02 {margin-top: 20px;} .Subs_section02 {padding: 20px;} .Subs_check {margin-bottom: 25px; padding-bottom: 20px;} .Subs_dis {margin-top: 50px;} } @media screen and (max-width: 640px){ .Subs_wrap {margin-top: 10px;} .Subs_tit::after{background: none;} } @media screen and (max-width: 500px){ .Subs_tit h2 {font-size: 22px;} p.Subs_h3 {font-size: 15px;} .Subs_txtArea {margin-top: 20px;} .Subs_box {margin-top: 20px;} .Subs_check {margin-bottom: 10px;} .Subs_section02 li:first-child {margin-bottom: 5px;} .Subs_input {width: 90%; margin: 0 auto;} .Subs_input label {float: none; display: block; text-align: center; width: 100%; margin-bottom: 5px; font-size: 15px;} .Subs_input input {float: none; display: block; width: 100%; margin: 0;} .Subs_btn {padding: 12px 70px; font-size: 15px; margin: 25px auto !important;} .Subs_pt5{padding-top: 5px;} html:lang(ar) .Subs_input label {float: none; text-align: center;} } /* 뉴스레터 구독 페이지 20230413 end */ @media screen and (max-width: 1420px){ .header_wrap{height:570px;} .tnbBox{width:100%; padding-left:10px; padding-right:10px;} .gnbBox{width:100%; padding-left:10px;} /* banner_slider */ .bannerBox{width:calc(100% - 40px) !important;} .banner_slider{width:calc(100% - 20px) !important;} .etcLinkBox{width:100%; padding-left:10px; padding-right:10px;} .addressForm{width:100%; padding-left:10px; padding-right:10px;} /* 메뉴명 길이 관련 css 20201223 */ .gnbBox .nav.otherCase li.depth01{} .gnbBox .nav.otherCase li.depth01 a.depth01Txt{padding:0 10px;} /*아랍어 20201210 추가*/ html:lang(ar) .gnbBox{width:100%; padding-right:10px; padding-left:0px;} html:lang(ar) .gnbBox .multiLink{left:unset; right:50%;} html:lang(ar) .mobNav{text-align:right;} /* html:lang(ar) .mobNav > ul > li.on a, .mobNav > ul > li a:hover, .mobNav > ul > li a:focus{background:url("../../image/front/new/mobNav_bullet01on.png") calc(100% - 95%) 20px no-repeat;color:#c02462} */ html:lang(ar) .mobNavBox{right:unset !important;left:0;background: url(../../image/front/new/mobNav_bg.gif) right top repeat-y #f1f1f1;background-size: 50%;} html:lang(ar) .mobNavBox .topLinkBox .multiLink > ul > li{float: right; margin-left:unset;margin-right:20px;} html:lang(ar) .mobNavBox .multiLink > ul{float:left;} html:lang(ar) .mobNavBox .multiLink > p{float: right;padding: 14px 20px 0 0;} html:lang(ar) .mobNavBox .mobSearchLayer .mob_totalSearch input{float:right;} /* 언어별 태국 css 추가 202205024 */ html:lang(th) .gnbBox .nav.otherCase li.depth01{margin-left:0px;} html:lang(th) .gnbBox .nav li.depth01 a.depth01Txt{font-size:16px; padding:0 10px;} } @media screen and (max-width: 1330px){ .gnbBox .nav li.depth01{margin-left:20px;} .gnbBox .nav li.depth01 a.depth01Txt{padding:0 10px;} /* 메뉴명 길이 관련 css 20201223 */ .gnbBox .nav.otherCase li.depth01{margin-left:5px;} .gnbBox .nav.otherCase li.depth01 a.depth01Txt{font-size:16.5px; padding:0 7px;} /* 언어별 태국 css 추가 202205024 */ html:lang(th) .gnbBox .nav.otherCase li.depth01{margin-left:0px;} html:lang(th) .gnbBox .nav li.depth01 a.depth01Txt{padding:0 5px;} } @media screen and (max-width: 1240px){ /* 언어별 태국 css 추가 202205024 */ html:lang(th) .gnbBox .nav li.depth01 a.depth01Txt{font-size:15px;} } @media screen and (max-width: 1200px){ .multiLink > ul > li.webAllMenu{display:block} .allMenu{display:block !important} .nav{display:none !important} .tnb{display:none;} .header_wrap{height:520px;} /* mobNav */ .mask{display:none;z-index:3;position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.7)} .mobNavBox{display:none; z-index:4; position:fixed; overflow-x:hidden; overflow-y:auto; right:-600px; top:0; width:85%; height:100%; background:url("../../image/front/new/mobNav_bg.gif") left top repeat-y #f1f1f1; transition:0.5s; background-size:50%;} .mobNavBox .topLinkBox{padding:0;background:#fff} .mobNavBox .topLinkBox .multiLink > ul > li{margin-left:20px;} .mobNavBox .topLinkBox .multiLink > ul > li:first-child{margin-left:0;} .mobNavBox .topLink{position:relative;overflow:hidden;width:100%;padding:10px;border-bottom:1px solid #e4e4e4;box-sizing:border-box} .mobNavBox .topLink a{transition:0.5s} .mobNavBox .topLink .koreaNet{display:inline-block;width:61px;background:url("../../image/front/new/koreanet.png") left center no-repeat} .mobNavBox .topLink .koreaNet:hover{background:url("../../image/front/new/koreanet_over.png") left center no-repeat} .mobNavBox .topLink .sns a{margin-left:10px} .mobNavBox .multiLink{clear:both;display:block;width:100%; background-color:#c02462;} .mobNavBox .multiLink > p{float:left;padding:14px 0 0 20px} .mobNavBox .multiLink > p:after{content:"";clear:both;display:block} .mobNavBox .multiLink > p .home{display:block;min-width:30px;padding-top:30px;background:url("../../image/front/new/icon_home.png") center top no-repeat;font-family:"Noto Sans KR L";font-size:0.875rem/*14px*/;color:#6c6c6c;transition:0.3s;} .mobNavBox .multiLink > ul{float:right; padding:13px 10px 10px 20px;} .mobNavBox .multiLink > ul:after{content:"";clear:both;display:block} .mobNavBox .multiLink > ul > li > a{display:block; min-width:30px; padding-top:30px; background-size:auto; font-family:'NotoKrL'; font-size:14px; color:#fff; transition:0.3s} .mobNavBox .close{display:block;background:url("../../image/front/new/btn_close2_over.png") center top no-repeat} .search{background:url("../../image/front/new/icon_search.png") center top no-repeat; background-size:auto;} .home{background: url("../../image/front/new/icon_home_over.png") center top no-repeat;} .mobNavBox .mobSearchLayer{display:none;clear:both;position:relative;width:100%;height:50px;background:#e3e3e3} .mobNavBox .mobSearchLayer .mob_totalSearch input{float:left;width:calc(100% - 50px);height:50px;padding:10px;border:none;box-sizing:border-box;background:#e3e3e3} .mobNavBox .mobSearchLayer .mobBtnClose{float:right;width:50px;height:50px;background:url("../../image/front/new/btn_close3.png") center center no-repeat;text-indent:-99999px} .IR{display:inline-block;width:0;height:0;font-size:0;color:transparent;line-height:0} select.selectLang{cursor:pointer; float:left; width:100%; padding:5px 30px 5px 10px;; box-sizing:border-box; border:1px solid #fff; border-radius:4px; background:url("../../image/front/new/icon_langSelect.png") calc(100% - 10px) center no-repeat; font-family:'NotoKrDL'; font-size:15px; color:#fff; letter-spacing:-0.03em; -webkit-appearance:none; -moz-appearance:none; appearance:none; transition:0.3s} select.selectLang option{color:#000; background-color:#fff;} .mobNav{position:relative; text-align:left;} .mobNav > ul > li{width:50%;border-bottom:1px solid #fff} .mobNav > ul > li > a{display:block;padding:15px 20px; background-color:#fff; font-size:18px;color:#2c2c2c;letter-spacing:-0.03em; word-break:keep-all;} /* 20210202 수정 */ .mobNav > ul > li.on a, .mobNav > ul > li a:hover, .mobNav > ul > li a:focus{background:url("../../image/front/new/mobNav_bullet01on.png") calc(100% - 20px) 20px no-repeat;color:#c02462} .mobNav > ul > li.on a .newWindow{display:inline-block;background:url("../../image/front/new/icon_newWindow2.png") right center no-repeat;font-style:normal} .mobNav > ul > li ul{display:none} .mobNav > ul > li > ul{display:none;position:absolute;left:50%;top:0;width:100%} .mobNav > ul > li > ul > li{position:relative;width:50%;border-bottom:1px solid #e6e6e6} .mobNav > ul > li > ul > li > a{display:block;padding:12px 20px;font-size:16px;color:#333 !important; background:calc(100% - 20px) 15px no-repeat #f1f1f1 !important;transition:0.3s; word-break: keep-all !important;} .mobNav > ul > li > ul > li.on > a{background:url("../../image/front/new/mobNav_bullet02on.png") calc(100% - 20px) 15px no-repeat #f1f1f1 !important;color:#006ecd !important} .mobNav > ul > li > ul > li > ul > li{border-bottom:1px solid #dfdfdf;background:#fff} .mobNav > ul > li > ul li:last-child{border-bottom:none} .mobNav > ul > li > ul > li > ul > li > a{display:block;padding:10px 20px;background:url("../../image/front/new/mobNav_bullet03.png") calc(100% - 20px) 18px no-repeat !important;font-size:0.9375rem/*15px*/;color:#4e4e4e !important;transition:0.3s} .mobNav > ul > li > ul > li > ul > li.on > a, .mobNav > ul > li > ul > li > ul > li > a:hover, .mobNav > ul > li > ul > li > ul > li > a:focus{color:#1f1f1f !important} .mobNav > ul > li > ul > li > ul > li.on > a{background:url("../../image/front/new/mobNav_bullet03on.png") calc(100% - 20px) 18px no-repeat !important} .mobNav > ul > li > ul > li > ul > li > ul > li > a{display:block;padding:3px 20px 5px;background:#fff !important;font-size:0.875rem/*14px*/;color:#5d5d5d !important} .mobNav > ul > li > ul > li > ul > li > ul > li > a:before{content:"-";} .mobNav > ul > li > ul > li > ul > li > ul > li.on > a, .mobNav > ul > li > ul > li > ul > li > ul > li > a:hover, .mobNav > ul > li > ul > li > ul > li > ul > li > a:focus{color:#2c2c2c !important;text-decoration:underline} .mobNav > ul li.noDepth a, .mobNav > ul li.noDepth a:hover, .mobNav > ul li.noDepth a:focus{background-image:none !important} .bottomSns{position:absolute; bottom:40px; left:20px;} .bottomSns ul{} .bottomSns ul li{float:left; margin-right:10px;} .bottomSns ul li a{display:block; width:20px; height:20px;} .bottomSns ul li a.snsfacebook{background:url("../../image/front/new/icon_facebook_active.png") left center no-repeat;} .bottomSns ul li a.snsfacebook:hover{background:url("../../image/front/new/icon_facebook_on.png") left center no-repeat;} .bottomSns ul li a.snsyoutube{background:url("../../image/front/new/icon_youtube_active.png") left center no-repeat;} .bottomSns ul li a.snsyoutube:hover{background:url("../../image/front/new/icon_youtube_on.png") left center no-repeat;} .bottomSns ul li a.snsinstagram{background:url("../../image/front/new/icon_instagram_active.png") left center no-repeat;} .bottomSns ul li a.snsinstagram:hover{background:url("../../image/front/new/icon_instagram_on.png") left center no-repeat;} .bottomSns ul li a.snsblog{background:url("../../image/front/new/icon_blog_active.png") left center no-repeat;} .bottomSns ul li a.snsblog:hover{background:url("../../image/front/new/icon_blog_on.png") left center no-repeat;} .bottomSns ul li a.snsflickr{background:url("../../image/front/new/icon_flickr_active.png") left center no-repeat;} .bottomSns ul li a.snsflickr:hover{background:url("../../image/front/new/icon_flickr_on.png") left center no-repeat;} .bottomSns ul li a.snstwitter{background:url("../../image/front/new/icon_twitter_active.png") left center no-repeat;} .bottomSns ul li a.snstwitter:hover{background:url("../../image/front/new/icon_twitter_on.png") left center no-repeat;} .bottomSns ul li a.snsvkontakte{background:url("../../image/front/new/icon_vk_active.png") left center no-repeat;} .bottomSns ul li a.snsvkontakte:hover{background:url("../../image/front/new/icon_vk_on.png") left center no-repeat;} .bottomSns ul li a.snsweibo{background:url("../../image/front/new/icon_weibo_active.png") left center no-repeat;} .bottomSns ul li a.snsweibo:hover{background:url("../../image/front/new/icon_weibo_on.png") left center no-repeat;} .bottomSns ul li a.snskoo{background:url("../../image/front/new/icon_koo_active.png") left center no-repeat;} .bottomSns ul li a.snskoo:hover{background:url("../../image/front/new/icon_koo_on.png") left center no-repeat;} /*아랍어 추가 20201218 */ html:lang(ar) .mobNav > ul > li.on a, html:lang(ar) .mobNav > ul > li a:hover, html:lang(ar) .mobNav > ul > li a:focus{background:url("../../image/front/new/mobNav_bullet01on.png") calc(100% - 95%) 20px no-repeat;color:#c02462} html:lang(ar) .bottomSns{position:absolute; bottom:40px; right:20px;} html:lang(ar) .bottomSns ul{} html:lang(ar) .bottomSns ul li{float:right; margin-left:10px; margin-right:0;} /* banner_slider */ .bannerForm{margin-top:20px;padding:20px 0 25px} .banner_slider ul li a{font-size:0.9375rem/*15px*/} /* footer */ .familySite select{background-size:12px auto} .addressForm{} .addressForm .mark a img{width:auto; height:40px} } @media screen and (max-width: 1024px){ .header_wrap{height:520px;} } @media screen and (max-width: 800px){ .bannerBox{display:none;} .searchBox-area input{padding:13px 35px 9px 10px; font-size:16px; -webkit-appearance:none; -webkit-border-radius:0;}} .etcLink li a{font-size:17px;} @media screen and (max-width: 640px){ .gnbBox .logo a{padding-left:120px; background-size:65%;} .gnbBox .logo a ul.logoSub {padding:3px 9px; margin:5px 0 0 15px; text-align:left;} .gnbBox .logo a ul.logoSub li {font-size:12px; float:none;} .gnbBox .logo a ul.logoSub li.logotxt01:after{border:0;} .gnbBox .logo a ul.logoSub li.logotxt02 {padding-left:0px;} .tnbBox .snsForm ul li{margin-left:0px;} .tnbBox .snsForm ul li a{margin-left:12px; padding-left:20px;} .tnbBox .snsForm ul li a span{display:none;} .gnb_wrapper .gnb_wrap.active .gnbBox .logo a{padding-left:120px; background-size:65%;} .gnb_wrapper .gnb_wrap.active .gnbBox .logo a ul.logoSub {padding:3px 9px; margin:5px 0 0 15px;} .gnb_wrapper .gnb_wrap.active .gnbBox .logo a ul.logoSub li {float:none;} .gnb_wrapper .gnb_wrap.active .gnbBox .logo a ul.logoSub li.logotxt01:after{border:0;} .gnb_wrapper .gnb_wrap.active .gnbBox .logo a ul.logoSub li.logotxt02 {padding-left:0px;} .gnb_wrapper .gnb_wrap.active .gnbBox .logo a{padding-left:120px; background-size:130px;} .gnb_wrapper .gnb_wrap.active .gnbBox .logo a.logoCanada{padding-left:120px; background-size:130px;} /* 20240724 캐나다 로고 추가 */ .gnb_wrapper .gnb_wrap.active .gnbBox .logo a ul.logoSub li{font-size:12px;} .gnb_wrapper .gnb_wrap.active .gnbBox .multiLink ul li.searchForm a{width:45px;} .gnb_wrapper .gnb_wrap.active .gnbBox .multiLink ul li.webAllMenu a.allMenu{width:45px;} .gnb_wrapper .gnb_wrap.active .tnbBox .snsForm ul li{margin-left:0px;} .gnb_wrapper .gnb_wrap.active .tnbBox .snsForm ul li a{margin-left:12px; padding-left:20px !important;} .gnb_wrapper .gnb_wrap.active .tnbBox .snsForm ul li a span{display:none;} .mobNavBox{} .etcLinkBox ul{text-align:center;} .etcLink li {float:none; display:inline-block;} .addressForm .address{float:none; width:100%; text-align:center;} .addressForm p.footerMI{float:none; width:100%; margin:15px 0 5px 0; background-position:center;} /* 아랍 어 개편 css 추가 20201215 */ html:lang(ar) .etcLink{float:none;} html:lang(ar) .gnb_wrap .gnbBox .logo a{padding-right:120px; background-size:65%; padding-left:0;} html:lang(ar) .gnb_wrap .gnbBox .logo a ul.logoSub {padding:3px 9px; margin:5px 15px 0 0; text-align:right;} html:lang(ar) .gnb_wrapper .gnb_wrap.active .gnbBox .logo a {padding-right:120px; background-size:65%; padding-left:0;} html:lang(ar) .gnb_wrapper .gnb_wrap.active .gnbBox .logo a ul.logoSub {padding:3px 9px; margin:5px 15px 0 0; text-align:right;} html:lang(ar) .etcLink li {float:none; display:inline-block;} html:lang(ar) .gnb_wrapper .gnb_wrap.active .gnbBox .logo a{padding-right:120px; background-size:130px;}/* 추가 20210611 */ } @media screen and (max-width: 500px){ } @media screen and (max-width: 450px){ /* iPhone 6/7/8 Plus */ .gnbBox .multiLink ul li.searchForm a{width:45px;} .allMenu{width:45px;} } @media screen and (max-width: 400px){ /* iPhone 6/7/8 */ .mobNavBox .topLinkBox .multiLink > ul > li{margin-left:10px;} .mobNavBox .multiLink > p{padding:14px 0 0 7px;} .mobNavBox .topLinkBox .multiLink > ul > li{margin-left:3px;} .mobNavBox .multiLink > ul{padding:13px 5px 10px 5px;} .mobNav > ul > li > a{padding: 15px 15px;} .mobNav > ul > li.on a, .mobNav > ul > li a:hover, .mobNav > ul > li a:focus{background: url(../../image/front/new/mobNav_bullet01on.png) calc(100% - 8px) 20px no-repeat;} /* 아랍 어 css 추가 20200611 */ html:lang(ar) .gnb_wrap .gnbBox .logo a ul.logoSub li.logotxt01:after{margin:0px; padding:0;} html:lang(ar) .gnb_wrapper .gnb_wrap.active .gnbBox .logo a ul.logoSub {padding:3px 3px;} } @media screen and (max-width: 370px){ /* Galaxy S5 */ /* 아랍 어 css 추가 20200611 */ html:lang(ar) .gnb_wrapper .gnb_wrap.active .gnbBox .logo a{padding-right:110px; background-size:120px;} html:lang(ar) .gnb_wrapper .gnb_wrap.active .gnbBox .multiLink ul li.searchForm a{width:35px;} html:lang(ar) .gnb_wrapper .gnb_wrap.active .gnbBox .multiLink ul li.webAllMenu a.allMenu{width:35px;} } @media screen and (max-width: 350px){ /* iPhone 5/se */ .gnb_wrapper .gnb_wrap.active .gnbBox .logo a ul.logoSub {padding:3px 3px;} .gnb_wrapper .gnb_wrap.active .gnbBox .logo a ul.logoSub li.logotxt01:after{display:none;} .gnb_wrapper .gnb_wrap .gnbBox .multiLink ul li.searchForm a{width:40px;} .gnb_wrapper .gnb_wrap .gnbBox .multiLink ul li.webAllMenu a.allMenu{width:40px;} .gnb_wrapper .gnb_wrap.active .gnbBox .multiLink ul li.searchForm a{width:40px;} .gnb_wrapper .gnb_wrap.active .gnbBox .multiLink ul li.webAllMenu a.allMenu{width:40px;} } @media screen and (max-width: 330px){ .gnb_wrapper .gnb_wrap .gnbBox .multiLink ul li.searchForm a{width:35px;} .gnb_wrapper .gnb_wrap .gnbBox .multiLink ul li.webAllMenu a.allMenu{width:35px;} .gnb_wrapper .gnb_wrap.active .gnbBox .multiLink ul li.searchForm a{width:35px;} .gnb_wrapper .gnb_wrap.active .gnbBox .multiLink ul li.webAllMenu a.allMenu{width:35px;} /* 아랍 어 css 추가 20200611 */ html:lang(ar) .gnb_wrapper .gnb_wrap .gnbBox .multiLink ul li.searchForm a{width:30px;} html:lang(ar) .gnb_wrapper .gnb_wrap .gnbBox .multiLink ul li.webAllMenu a.allMenu{width:30px;} html:lang(ar) .gnb_wrapper .gnb_wrap.active .gnbBox .multiLink ul li.searchForm a{width:30px;} html:lang(ar) .gnb_wrapper .gnb_wrap.active .gnbBox .multiLink ul li.webAllMenu a.allMenu{width:30px;} } /* error page */ .errorWrap{ background-color: #ECEDF0; } .errorArea{ padding-bottom: 30px; box-sizing: border-box; } .errorMi{ display: flex; justify-content: center; flex-direction: column; align-items: center; height: 80px; } .errorCon{ display: flex; justify-content: center; flex-direction: column; align-items: center; max-width: 1400px; margin: 0 auto; } .errortxt{ position: relative; padding-top: 270px; margin-top: 30px; } .errortxt::before{ content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 360px; height: 240px; background:url('../../image/front/new/error_img.png') no-repeat; } .errortxt p{ text-align: center; font-size: 17px; color: #333; line-height: 28px; margin-bottom: 30px; font-family: 'NotoKrR'; } .errortxt strong{ font-size: 32px; color: #111; line-height: 48px; font-family: 'NotoKrB'; } .errorEng{ background-color: #fff; border-radius: 10px; border: solid 1px #BCBCBC; padding: 20px; box-sizing: border-box; min-width: 750px; margin-top: 10px; } .errorEng p{ text-align: center; font-size: 17px; color: #333; line-height: 23px; margin-bottom: 10px; font-family: 'Open Sans'; } .errorEng p:first-child{ margin-bottom: 20px; } .errorEng strong{ font-size: 25px; color: #111; line-height: 30px; font-family: 'Open Sans'; } .errorBtn{ position: relative; color: #fff; margin-top: 50px; } .errorBtn a{ display: block; color: #fff; font-size: 17px; padding: 12px 75px 12px 30px; background-color: #39A1DE; border-radius: 5px; text-align: center; } .errorBtn a span{ font-family: 'Open Sans'; } .errorBtn::after{ content: ""; position: absolute; width: 16px; height: 16px; right: 25px; top: 50%; transform: translateY(-50%); background:url('../../image/front/new/icon_error.png') no-repeat; } @media screen and (max-width: 780px) { .errorArea{ padding: 0 20px; box-sizing: border-box; } .errortxt{ padding-top: 210px; margin-top: 20px; } .errortxt::before{ width: 300px; height: 200px; background-size: 300px 200px; } .errortxt p{ font-size: 16px; line-height: 26px; margin-bottom: 20px; } .errortxt strong{ font-size: 28px; line-height: 40px; } .errorEng{ min-width: auto; width: 100%; padding: 20px; margin-top: 10px; } .errorEng p{ font-size: 16px; line-height: 23px; margin-bottom: 0px; } .errorEng p:first-child{ margin-bottom: 15px; } .errorEng strong{ font-size: 22px; line-height: 30px; } .errorBtn{ margin-top: 40px; } .errorBtn a{ font-size: 16px; padding: 10px 70px 10px 25px; } } @media screen and (max-width: 480px) { .errorMi h1 img{ width: 160px; } .errortxt{ padding-top: 180px; margin-top: 10px; } .errortxt::before{ width: 250px; height: 167px; background-size: 250px 167px; } .errortxt p{ font-size: 15px; line-height: 25px; margin-bottom: 15px; } .errortxt strong{ font-size: 21px; line-height: 35px; } .errorEng{ min-width: auto; width: 100%; padding: 20px; margin-top: 10px; } .errorEng p{ font-size: 15px; line-height: 23px; margin-bottom: 0px; } .errorEng p:first-child{ margin-bottom: 15px; } .errorEng strong{ font-size: 20px; line-height: 28px; } .errorBtn{ margin-top: 30px; } .errorBtn a{ font-size: 15px; } }