@charset "UTF-8";
/*----------reset css-----------*/
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

body { margin: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

a { background-color: transparent; }

a:active, a:hover { outline: 0; }

img { border: 0; max-width: 100%; }

iframe { max-width: 100%; }

button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }

button { overflow: visible; }

button, select { text-transform: none; }

button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }

button[disabled], html input[disabled] { cursor: default; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

input { line-height: normal; }

input[type="text"]:focus { outline: none; }

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }

input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

textarea { overflow: auto; }

textarea:focus { outline: none; }

table { border-collapse: collapse; border-spacing: 0; }

td, th { padding: 0; }

ul, ol, dl, h1, h2, h3, h4, h5, h6, p, figure { padding: 0; margin: 0; }

textarea { resize: none; }

/*-------------------basic scss---------------------*/
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

a { text-decoration: none; color: inherit; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; }

a:active, a:focus { text-decoration: none; }

::-webkit-input-placeholder { color: #999; }

::-moz-placeholder { color: #999; opacity: 1; }

/* firefox 19+ */
:-ms-input-placeholder { color: #999; opacity: 1; }

/* ie */
input:-moz-placeholder { color: #999; }

/*反白文字*/
::selection { background: #b79285; color: white; }

::-moz-selection { background: #b79285; color: white; }

img { vertical-align: middle; }

.clearfloat { clear: both; height: 0; font-size: 1px; line-height: 0px; }

.floatleft { float: left; }

.floatright { float: right; }

.textEllipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%; display: block; }

.vermid { vertical-align: middle; display: inline-block; }

.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }

.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.red { color: #cc0000; }

.fontsize12 { font-size: 12px; }

.textalignrigh { text-align: right; }

.textunderline { text-decoration: underline; }

/*元素垂直置中*/
/*會由後台上稿的圖片*/
/*-------------------unrest css-----------------*/
.unreset li { display: list-item; }
.unreset head { display: none; }
.unreset col { display: table-column; }
.unreset colgroup { display: table-column-group; }
.unreset td, .unreset th { display: table-cell; }
.unreset caption { display: table-caption; text-align: center; }
.unreset th { font-weight: bold; text-align: center; }
.unreset body { margin: 8px; }
.unreset address, .unreset blockquote, .unreset dd, .unreset div, .unreset dl, .unreset dt, .unreset fieldset, .unreset form, .unreset frame, .unreset frameset, .unreset h1, .unreset h2, .unreset h3, .unreset h4, .unreset h5, .unreset h6, .unreset noframes, .unreset ol, .unreset p, .unreset ul, .unreset center, .unreset dir, .unreset hr, .unreset menu, .unreset pre { display: block; }
.unreset h1 { font-size: 2em; margin: 0.67em 0; }
.unreset h2 { font-size: 1.5em; margin: 0.75em 0; }
.unreset h3 { font-size: 1.17em; margin: 0.83em 0; }
.unreset h4, .unreset p, .unreset blockquote, .unreset ul, .unreset fieldset, .unreset form, .unreset ol, .unreset dl, .unreset dir, .unreset menu { margin: 1.12em 0; }
.unreset h5 { font-size: .83em; margin: 1.5em 0; }
.unreset h6 { font-size: .75em; margin: 1.67em 0; }
.unreset h1, .unreset h2, .unreset h3, .unreset h4, .unreset h5, .unreset h6, .unreset b, .unreset strong { font-weight: bolder; }
.unreset blockquote { margin-left: 40px; margin-right: 40px; }
.unreset i, .unreset cite, .unreset em, .unreset var, .unreset address { font-style: italic; }
.unreset pre, .unreset tt, .unreset code, .unreset kbd, .unreset samp { font-family: monospace; }
.unreset pre { white-space: pre; }
.unreset button, .unreset textarea, .unreset input, .unreset select { display: inline-block; }
.unreset big { font-size: 1.17em; }
.unreset small, .unreset .unreset sub, .unreset .unreset sup { font-size: 0.83em; }
.unreset sub { vertical-align: sub; }
.unreset sup { vertical-align: super; }
.unreset s, .unreset strike, .unreset del { text-decoration: line-through; }
.unreset hr { border: 1px inset; }
.unreset ol, .unreset ul, .unreset dir, .unreset menu, .unreset dd { margin-left: 40px; }
.unreset ol, .unreset ol li { list-style-type: decimal; }
.unreset ol ul, .unreset ul ol, .unreset ul ul, .unreset ol ol { margin-top: 0; margin-bottom: 0; }
.unreset ul, .unreset ul li { list-style-type: disc; }
.unreset u, .unreset ins { text-decoration: underline; }
.unreset br:before { content: "\A"; white-space: pre-line; }
.unreset center { text-align: center; }
.unreset:link, .unreset:visited { text-decoration: underline; }
.unreset:focus { outline: thin dotted invert; }
.unreset img { max-width: 100%; height: initial !important; }
.unreset iframe { max-width: 100%; }

/*-------------------common css-----------------*/
html { font-size: 10px; }

body { font-size: 1.6rem; color: #222222; font-family: Arial, Microsoft JhengHei, sans-serif, Helvetica, Arial, PMingLiU; line-height: 1.7; font-weight: normal; width: 100%; overflow-x: auto; margin: 0 auto; position: relative; margin: 0 auto; min-width: 320px; max-width: 1920px; overflow-x: hidden; }

.wrapper { max-width: 1280px; margin-left: auto; margin-right: auto; width: 100%; padding-left: 40px; padding-right: 40px; }

.ad { text-align: center; padding: 26px 0 26px 0; border-bottom: 1px solid #dddddd; }
.ad img { max-width: 810px; width: 100%; }

header .haedertopblock { position: relative; }
header .haedertopblock .lang { padding-top: 14px; display: flex; justify-content: flex-end; }
header .haedertopblock .htbot { display: flex; flex-wrap: wrap; justify-content: space-between; }
header .haedertopblock .htbot .logo { padding-top: 22px; }
header .haedertopblock .htbot .logo img { max-width: 288px; }
header .haedertopblock .htbot .haederrmenub { display: flex; flex-wrap: wrap; position: relative; }
header .haedertopblock .htbot .haederrmenub .socialbox { display: flex; flex-wrap: wrap; margin-top: 18px; }
header .haedertopblock .htbot .haederrmenub .socialbox .sicon { border: 1px solid #fd7e14; border-radius: 100%; display: block; color: #fd7e14; width: 50px; height: 50px; margin: 5px; position: relative; }
header .haedertopblock .htbot .haederrmenub .socialbox .sicon.fblink { font-size: 2.5rem; }
header .haedertopblock .htbot .haederrmenub .socialbox .sicon.mobilecartshow { display: none; }
header .haedertopblock .htbot .haederrmenub .socialbox .sicon.linelink .centermid { padding-left: 5px; }
header .haedertopblock .htbot .haederrmenub .socialbox .sicon.linelink img { max-width: 36px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
header .haedertopblock .htbot .haederrmenub .socialbox .sicon.linelink img.cartimgmobile { max-width: 28px; }
header .haedertopblock .htbot .haederrmenub .socialbox .sicon.playicon { font-size: 2.5rem; }
header .haedertopblock .htbot .haederrmenub .socialbox .sicon.learntxt { font-size: 1.4rem; line-height: 1.3; }
header .haedertopblock .htbot .haederrmenub .socialbox .sicon .centermid { top: 0; bottom: 0; left: 0; right: 0; position: absolute; flex-direction: column; justify-content: center; display: flex; text-align: center; }
header .haedertopblock .htbot .haederrmenub .socialbox .sicon:hover { background: #fd7e14; color: white; }
header .haedertopblock .htbot .haederrmenub .hotkeywordsearbox { margin-top: 20px; margin-left: 24px; margin-bottom: 20px; }
header .haedertopblock .htbot .haederrmenub .hotkeywordsearbox .hotkeyword { font-size: 1.4rem; color: #777777; line-height: 1.3; margin-bottom: 5px; overflow-x: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 220px; }
header .headmenu { border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; }
header .headmenu ul { display: flex; flex-wrap: wrap; }
header .headmenu ul li { list-style: none; position: relative;}
header .headmenu ul li.mobileshow {display: none;}
header .headmenu ul li a { display: block; color: white; padding: 22px 27px; line-height: 1; font-size: 1.6rem; color: #222222; }
header .headmenu ul li a.cartimg { padding-top: 18px; padding-bottom: 12px; }
header .headmenu ul li a:hover, header .headmenu ul li a.active { background: #fd7e14; color: white; }
header .headmenu ul > li.active .subMenu { width: 100%; left: 0; position: relative; z-index: 999; }

header .headmenu ul .subMenu { display: none; width: 100%; left: 0; position: absolute; z-index: 999; }
header .headmenu ul .subMenu li { width: 100%; }
header .headmenu ul .subMenu li:not(:last-child) { border-bottom: solid 1px #fbf297; }
header .headmenu ul .subMenu a { background: #fd7e14; color: #222; font-size: 15px; display: block; line-height: 20px; padding: 13px 10px; text-align: center; width: 100%; transition: all 0.3s ease; }
header .headmenu ul .subMenu a:hover { background: #fbf297; color: #222; }


.searchbox .searchinbox { display: flex; flex-wrap: wrap; }
.searchbox input { border: none; background: #eeeeee; width: 180px; height: 40px; padding: 5px; }
.searchbox button { border: none; background: #fd7e14; position: relative; color: white; width: 40px; height: 40px; }
.searchbox button .centermid { top: 0; bottom: 0; left: 0; right: 0; position: absolute; flex-direction: column; justify-content: center; display: flex; text-align: center; }

.main { align-items: initial; display: flex; justify-content: space-between; padding-top: 40px; }
.main.mainpage { padding-top: 0px; }
.main.mainpage .magazine { margin-top: 50px; }
.main .mainleft { max-width: calc(100% - 300px - 40px); margin-right: 40px; width: 100%; }
.main .mainleft.inpgbg { background: #f6f6f6; }
.main .mainleft.sharepage .detailwrapper { display: flex; align-items: start; }
.main .mainright { width: 300px; margin-bottom: 30px; }

.banner { padding-bottom: 40px; }

.banner .sliderBtn { background: #fbfbfb; cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); transition: all 0.3s ease; z-index: 1; height: 40px; width: 40px; }

.banner .sliderBtn.left { left: 0; }

.banner .sliderBtn.right { right: 0; }

.banner .sliderBtn:hover { background: #fd7e14; }

.banner .sliderBtn i { color: #222; font-size: 18px; transform: translate(-50%, -50%); left: 50%; position: absolute; top: 50%; }

.imgBox { text-align: center; }

.articlebox {padding-bottom: 0px;width: 100%;}
.articlebox.searchpage { margin-top: 30px; }

.vediobox { padding-bottom: 40px; }

.maintitle { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 15px; background: url(../images/bgline.jpg) repeat; position: relative; }
.maintitle .orblock { margin-right: 12px; width: 20px; height: 20px; align-items: center; }
.maintitle .titletxt { font-size: 20px; line-height: 1; background: white; padding: 0 10px; margin-left: 20px; text-transform: uppercase; }
.maintitle .morelink { position: absolute; right: 40px; top: -20px; }
.maintitle .morelink .whitecircle { background: white; width: 30px; height: 30px; top: 0; bottom: 0; left: 0; right: 0; position: absolute; flex-direction: column; justify-content: center; display: flex; text-align: center; border-radius: 100%; background: white; }
.maintitle .morelink .whitecircle img { max-width: 17px; margin-left: 7px; }

.artiboxwrap {display: flex;flex-wrap: wrap;width: 100%;}

.innerpage .artibox {max-width: none;}

.artibox {/* max-width: 260px; */margin-bottom: 40px;width: 33.33333%;padding-right: 10px;padding-left: 10px;}
.artibox.firstblock { width: 100%; max-width: 100%; display: flex; flex-wrap: wrap; align-items: center; }
.artibox.firstblock .artiboximg { width: 50%; }
.artibox.firstblock .artirightbox { width: 50%; padding-left: 30px; padding-right: 30px; }
.artibox.firstblock .artirightbox .arttitle { font-size: 2.7rem; font-weight: bold; }
.artibox.focusarti {width: 100%;max-width: 100%;display: flex;flex-wrap: wrap;align-items: flex-start;padding-bottom: 20px;margin-bottom: 20px;border-bottom: 1px solid #f0f0f0;}
.artibox.focusarti:last-child { padding-bottom: none; border-bottom: none; }
.artibox.focusarti .artiboximg {width: 214px;}
.artibox.focusarti .artirightbox { max-width: calc(100% - 214px - 90px); padding-left: 30px; padding-right: 30px; padding-top: 0px; }
.artibox.focusarti .artirightbox .contxt {max-height: 44px;margin-bottom: 0;margin-top: 10px;}
.artibox.focusarti .artirightbox .arttitle { font-size: 2rem; border-bottom: none; padding-bottom: 0; font-weight: bold; }
.artibox.focusarti .focuslastbox { width: 90px; text-align: right; }
.artibox.focusarti .focuslastbox .date { line-height: 1; color: #fab378; font-size: 15px; margin-bottom: 10px; }
.artibox .artiboximg .pic { height: 0; text-align: center; position: relative; display: block; padding-bottom: 54.34783%; }
.artibox .artiboximg .pic img { max-width: 100%; max-height: 100%; position: absolute; display: block; margin: auto; top: 0; left: 0; right: 0; bottom: 0; }
.artibox .artirightbox { padding-top: 15px; }
.artibox .artirightbox .subtitle {margin-bottom: 3px;font-size: 17px;line-height: 27px;color: #999;display: block;max-height: 54px;overflow: hidden;}
.artibox .artirightbox .arttitle {display: block;color: #222;font-size: 20px;font-weight: bold;line-height: 26px;max-height: 52px;overflow: hidden;}
.artibox .artirightbox .contxt {display: block;color: #444;font-size: 17px;line-height: 25px;max-height: 75px;overflow: hidden;margin-bottom: 15px;/* border-top: 1px solid #cccccc; */}
.artibox .artirightbox .articlelistbot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; color: #999; font-size: 15px; }
.artibox .artirightbox .articlelistbot .articlelistdate { padding-right: 8px; }
.borderbline{
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
}

.focusbox { margin-bottom: 40px; }

.readlink { font-size: 15px; text-align: center; color: #555555; border: 1px solid #555555; border-radius: 5px; padding: 8px 20px; text-transform: uppercase; display: inline-block; line-height: 1; }
.readlink:hover { background: #fd7e14; border: 1px solid #fd7e14; color: white; }
.readlink.backbtn { background: #473183; color: white; }
.readlink.backbtn:hover { background: #fd7e14; border: 1px solid #fd7e14; color: white; }

.centerad { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 40px; }
.centerad .cenadblock { width: 50%; max-width: 410px; }
.centerad .cenadblock img { width: 100%; }

.magazine { margin-bottom: 35px; background: url(../images/aside-atricle-bg.jpg) repeat; padding-top: 30px; padding-bottom: 30px; }
.magazine .magdate { font-size: 15px; text-align: center; line-height: 1; margin-bottom: 16px; }
.magazine .magdate .fa { margin-right: 8px; }
.magazine .magbook { text-align: center; }
.magazine .magbook img { max-width: 100%; }
.magazine .magicon { display: flex; flex-wrap: wrap; justify-content: space-between; width: 238px; margin: 0 auto; margin-top: 24px; }
.magazine .magicon .magiconone { max-width: 70px; }
.magazine .magicon .magiconone a.maglink { display: block; }
.magazine .magicon .magiconone a.maglink .magiconimg { display: block; }
.magazine .magicon .magiconone a.maglink .magicontxt { text-align: center; margin-top: 12px; font-weight: bold; font-size: 1.5rem; display: block; line-height: 1; }

.sidetitle { display: flex; flex-wrap: wrap; align-items: center; }
.sidetitle .nt1 { width: 10px; height: 18px; margin-right: 7px; background: #333333; }
.sidetitle .nt2 { background: url(../images/sidelinebg.png) repeat-x; width: calc(100% - 20px); line-height: 1; }
.sidetitle .nt2 .sidetitlewhitebg { font-size: 2rem; line-height: 1; background: white; padding-right: 7px; }

.newsletter .newsletinput form .newsletemail { display: flex; flex-wrap: wrap; margin-top: 20px; }
.newsletter .newsletinput form .emailinput { margin-right: 5px; width: calc(100% - 114px); }
.newsletter .newsletinput form .emailinput input { border: 1px solid #aaaaaa; padding: 10px 14px; background: white; width: 180px; height: 38px; }
.newsletter .newsletinput form .emailbtn button { text-align: center; border: none; background: white; height: 38px; padding: 0 10px; }
.newsletter .newsletinput form .emailbtn button[type="submit"] { background: #fd7e14; border: 1px solid #fd7e14; color: white; border-radius: 5px 0 0 5px; }
.newsletter .newsletinput form .emailbtn button[type="submit"].canclebtn { background: white; color: #fd7e14; border: 1px solid #fd7e14; border-radius: 0 5px 5px 0; }

.googlead { text-align: center; }
.googlead img { width: 100%; max-width: 300px; }

.sideoneblock { margin-bottom: 35px; }

.tabContent { margin-top: 25px; }

.tabContent .tabs { align-items: flex-start; display: flex; justify-content: space-between; }

.tabContent .tabs .tabLink { border-bottom: solid 4px transpareent; text-align: center; width: 50%; border: 1px solid #dddddd; border-bottom: solid 4px #ffffff; color: #aaaaaa; line-height: 4.5rem; }
.tabContent .tabs .tabLink:nth-child(2) { border-left: none; }

.tabContent .tabs .tabLink.active { border-bottom: solid 4px #fd7e14; }

.tabContent .tabs a { color: #222; font-size: 1.6rem; transition: all 0.3s ease; }

.tabContent .tabs a:hover { color: #fd7e14; }

.tabContent .content { background: url("../images/aside-atricle-bg.jpg") repeat; padding: 30px 40px; }

.tabContent .content .tabData { display: none; }

.tabContent .content .tabData.active { display: block; }

.tabContent .content .tabItem { padding-bottom: 5px; }

.tabContent .content .tabItem:not(:first-child) { padding-top: 10px; }

.tabContent .content .tabItem:not(:last-child) { border-bottom: dotted 1px #bdbdbd; }

.tabContent .content .tabItem a { color: #222; font-size: 1.7rem; line-height: 2.4rem; align-items: flex-start; display: flex; justify-content: space-between; justify-content: initial; }

.tabContent .content .tabItem.top { font-weight: bold; }

.tabContent .content .tabItem .no { color: #fd7e14; margin-right: 10px; width: 2rem; }

.infoArea { padding: 20px; }

.infoArea .infoItem { margin-bottom: 10px; }

.infoArea .infoItem p { color: #222; font-size: 1.5rem; line-height: 2rem; margin-top: 5px; }

/*footer*/
footer {background: #fd7e14;padding: 40px 0;justify-content: space-between;margin-top: 50px;}
footer .wrapper {color: white;display: flex;flex-wrap: wrap;justify-content: space-between;position: relative;}
footer .top{
  border: solid 1px #222;
  border-radius: 50%;
  background: #fff;
  color: #222;
  padding: 12px 8px;
  transition: all 0.3s ease;
  position: absolute;
  right: 40px;
  top: -110px;
  z-index: 999;
  width: 46px;
  height: 46px;
  font-size: 14px;
}
footer .top:hover {
    border: solid 1px #fd7e14;
    color: #fd7e14;
}
footer .logo { padding-top: 22px; }
footer .logo img { max-width: 230px; }
footer .footerbox2 { width: 46%; }
footer .footerbox2 .f_menu ul { display: flex; flex-wrap: wrap; margin-bottom: 30px; }
footer .footerbox2 .f_menu ul li { list-style: none; font-size: 1.6rem; font-weight: bold; }
footer .footerbox2 .f_menu ul li:after { content: "|"; display: inline-block; padding: 0 15px; line-height: 1; }
footer .footerbox2 .f_menu ul li:last-child:after { display: none; }
footer .footerbox2 .f_menu ul li a { line-height: 1; }
footer .footerbox2 .f_menu ul li a:hover { color: #473183; }
footer .footerbox2 .f_phone_address { font-size: 1.4rem; display: flex; flex-wrap: wrap; }
footer .footerbox2 .f_phone_address .f_box1 { width: 48%; }
footer .footerbox2 .f_phone_address .f_box2 { width: 52%; }
footer .footerbox3 .footer_icon { font-size: 2.3rem; margin-bottom: 18px; text-align: right; }
footer .footerbox3 .footer_icon a { padding: 0 15px; }
footer .footerbox3 .footer_icon a:hover { color: #473183; }
footer .footerbox3 .f_copyright { font-size: 1.4rem; }

.fbiframe { text-align: center; }

.innebg { padding: 15px 30px 50px 30px; }

.road { font-size: 1.5rem; line-height: 1.3; padding-top: 5px; padding-bottom: 10px; }

.innerpage { background: white; padding: 40px 30px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); }

.intitle:before { height: 6px; width: 107px; background: #fd7e14; display: block; content: ""; margin-bottom: 10px; }
.intitle .dsubti { color: #777; font-size: 17px; font-weight: normal; line-height: 37px; }
.intitle .intitletxt { color: #222; font-size: 27px; font-weight: bold; position: relative; z-index: 1; }
.intitle h1.intitletxt:after { content: ""; display: block; background: #f0f0f0; height: 1px; width: 100%; bottom: 8px; left: 0; position: absolute; }
.intitle .intitlebot { padding: 0px 0 3px 0; margin-bottom: 30px; }
.intitle .intitlebot .oranget { color: #fd7e14; margin-right: 10px; font-size: 1.6rem; }
.intitle .intitlebot .grayt { color: #777777; font-size: 1.5rem; }
.intitle .intitlebot .grayt .gline { font-size: 1.5rem; font-weight: lighter; color: #cccccc; }

.selectclass { margin-top: 20px; margin-bottom: 20px; text-align: right; background: white; }
.selectclass select { font-size: 1.7rem; border: none; border-bottom: 4px solid #222222; width: 230px; padding: 10px 0; }

.pagenum { text-align: center; margin-top: 10px; }
.pagenum a { font-size: 1.6rem; font-weight: lighter; }
.pagenum a.arrow { margin: 0 15px; }
.pagenum a.num { border-radius: 100%; width: 40px; height: 40px; display: inline-block; line-height: 40px; }
.pagenum a.num.active, .pagenum a.num:hover { background: #473183; color: white; }

.tagtxt { margin-bottom: 40px; }
.tagtxt .orgtxt { color: #fd7e14; }

.returnback { text-align: center; margin-bottom: 50px; }

.invediobox { margin-top: 40px; margin-bottom: 40px; }
.invediobox .artibox.focusarti { align-items: normal; border-bottom: none; }
.invediobox .artibox.focusarti .artirightbox { max-width: calc(100% - 280px); width: 100%; padding-left: 30px; padding-right: 30px; padding-top: 20px; background: #f2f2f2; }
.invediobox .artibox.focusarti .artirightbox .vediomtitle { display: block; color: #222; font-size: 20px; line-height: 28px; max-height: 55px; overflow: hidden; margin-bottom: 10px; }
.invediobox .artibox.focusarti .artirightbox .vediocontext { display: block; color: #444; font-size: 17px; line-height: 25px; max-height: 75px; overflow: hidden; margin-bottom: 15px; }
.invediobox .artibox.focusarti .artirightbox.videorightbox { padding: 18px 30px 17px; }
.invediobox .artibox.focusarti .artiboximg { width: 280px; background: #f2f2f2; }
.invediobox .artibox.focusarti .artirightbox .arttitle { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 24px; height: 48px; white-space: normal; margin-bottom: 5px; }
.invediobox a.readlink { background: white; }
.invediobox a.readlink:hover { color: white; background: #fd7e14; }

.w100 { width: 100%; }

.contactsec { margin-top: 5px; }
.contactsec .contxt { font-size: 1.7rem; color: #444444; margin-bottom: 30px; margin-top: 25px; }

.formset { display: flex; flex-wrap: wrap; }
.formset .formtitle { font-size: 1.7rem; font-weight: bold; line-height: 1; margin-bottom: 10px; }
.formset .formtitle .red { color: #ff0000; }
.formset .contactline { margin-bottom: 30px; padding-right: 30px; }
.formset .onethird { width: 33.33333%; }
.formset .twothird { width: 66.66667%; }
.formset .wholewidth { width: 100%; }
.formset .formtype { position: relative; }
.formset .formtype img.codeimg { position: absolute; right: 10px; top: 8px; }
.formset .formtype .inputtext1 { width: 100%; background: #f8f8f8; border: none; padding: 5px 10px; height: 38px; }
.formset .formtype .inputtext1.orangbg { background: #fff6ee; }
.formset .formtype textarea { width: 100%; background: #f8f8f8; border: none; padding: 5px 10px; height: 130px; }
.formset .sexbox { padding-top: 32px; display: inline-block; }
.formset .sexbox .oneline { display: inline-block; margin-right: 10px; }

.conatctsendbtn { text-align: center; margin-top: 10px; }
.conatctsendbtn button { background: #473183; margin: 0 10px; color: white; padding: 8px 30px; }

.searchsec .searchkeyword { font-size: 1.5rem; font-weight: lighter; margin-top: 28px; margin-bottom: 10px; }
.searchsec .searchkeyword b { margin-right: 5px; }
.searchsec .inpagesearchbox { background: #fbf297; padding: 10px; font-size: 1.5rem; }
.searchsec .inpagesearchbox form .searflex { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.searchsec .inpagesearchbox form .searflex .seartxt { font-weight: bold; margin-right: 10px; }
.searchsec .inpagesearchbox form .searflex .searsele { margin-right: 10px; }
.searchsec .inpagesearchbox form .searflex .searsele .selecttype { width: 218px; height: 42px; background: white; padding: 5px; border: none; }

.searchsec .searchbox input { background: #ffffff; }
.searchsec .searchbox button .centermid i { color: #222; }

.fixbottomarea {background: #fd7e14;width: 100%;max-width: 1205px;position: fixed;bottom: 0;padding: 8px 0;max-height: 100vh;overflow: auto;z-index: 999;left: 50%;margin-left: -600px;}
.fixbottomarea .fixbotwrapper {max-width: 1100px;width: 100%;margin: 0 auto;position: relative;text-align: center;color: white;text-decoration: underline;}
.fixbottomarea .fixbotwrapper .closebtn {position: absolute;top: 0;right: 0px;cursor: pointer;display: none;}
.fixbottomarea .fixbotwrapper .closebtn i { color: white; font-size: 2rem; }
.fixbottomarea .fixbotwrapper .texthtml {color: white;font-size: 16px;max-width: 960px;margin: 0 auto;line-height: 1;}

.fixbottomarea .fixbotwrapper .texthtml p{
    display: inline-block;
    /* padding: 0 15px; */
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #fff;
    line-height: 1.3;
}
.fixbottomarea .fixbotwrapper .texthtml p a{
    display: block;
    padding: 2px 0;
    color: #fff;
    line-height: 1;
    border-bottom: 1px solid #fff;
    font-weight: bold;
}

.showMenu { display: block; cursor: pointer; right: 0; position: absolute; top: 86px; height: 30px; width: 30px; }

.showMenu span { background: #222; position: absolute; height: 2px; width: 30px; }

.showMenu span:nth-child(1) { top: 0; }

.showMenu span:nth-child(2) { top: 10px; }

.showMenu span:nth-child(3) { top: 20px; }

.socialshare { position: -webkit-sticky; position: sticky; top: 0; padding-right: 18px; }
.socialshare a.shareicon { display: block; width: 45px; height: 45px; color: white; text-align: center; line-height: 45px; font-size: 2.8rem; border-radius: 100%; margin-bottom: 5px; }
.socialshare a.shareicon.fb { background: #3a5791; }
.socialshare a.shareicon.line { background: #15b31a; }

.indexfocusbox { margin-bottom: 0; }

.startwindowout { background: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 999; }
.startwindowout .startwindow {max-width: 720px;position: absolute;width: 90%;margin: 0 auto;top: 50%;left: 50%;transform: translate(-50%, -50%);overflow: auto;max-height: 100%;}
.startwindowout .startwindow .adimglink { display: block; }
.startwindowout .startwindow img.adwidth { width: 100%; display: block; }
.startwindowout .startwindow .closebtn { position: absolute; z-index: 999; right: 0; top: 0; }
.startwindowout .startwindow .closebtn img { cursor: pointer; display: block; }
.startwindowout .startwindow .inreadingout { padding: 30px; }
.startwindowout .startwindow .inreading { width: 100%; height: 90%; overflow: auto; padding: 20px; }
.startwindowout .socialshare { position: initial; display: flex; flex-wrap: wrap; margin-bottom: 10px; }
.startwindowout .socialshare a.shareicon { margin-right: 5px; }

.unreset { text-align: justify; }

.unreset p { color: #222222; font-size: 18px; line-height: 35px; margin: 10px 0; letter-spacing: 0.3px; }

#btn { position: absolute; width: 30px; height: 30px; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; background: none; border-radius: 50%; border: none; outline: none; }

#btn span { position: absolute; width: 30px; height: 2px; top: 50%; left: 50%; background: #222; border-radius: 2px; overflow: hidden; transition: all 0.3s linear; }

#btn span::before { content: ""; position: absolute; width: 0; height: 100%; top: 0; right: 0; background: gray; transition: all 0.3s linear; }

#btn span:nth-child(1) { animation: span-first-off 0.5s ease-in-out; animation-fill-mode: forwards; }

#btn span:nth-child(2) { animation: span-second-off 0.5s ease-in-out; animation-fill-mode: forwards; }

#btn span:nth-child(3) { animation: span-third-off 0.5s ease-in-out; animation-fill-mode: forwards; }

#btn.on:hover span::before { width: 100%; transition: all 0.3s linear; }

#btn.on span:nth-child(1) { animation: span-first-on 0.5s ease-in-out; animation-fill-mode: forwards; }

#btn.on span:nth-child(2) { animation: span-second-on 0.5s ease-in-out; animation-fill-mode: forwards; }

#btn.on span:nth-child(3) { animation: span-third-on 0.5s ease-in-out; animation-fill-mode: forwards; }
.htmleditor{width: 100%;}
@keyframes span-first-on { 0% { transform: translate(-50%, -300%); }
  30% { transform: translate(-50%, -50%); }
  100% { transform: translate(-50%, -50%) rotate(-45deg); } }
@keyframes span-first-off { 0% { transform: translate(-50%, -50%) rotate(-45deg); }
  30% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -500%); } }
@keyframes span-second-on { 0% { transform: translate(-50%, -50%); }
  25% { background: gray; }
  50% { transform: translate(-50%, -50%) scale(1); }
  100% { transform: translate(-150%, -50%) scale(0); } }
@keyframes span-second-off { 0% { transform: translate(-150%, -50%) scale(0); }
  25% { background: gray; }
  50% { transform: translate(-50%, -50%) scale(1); }
  100% { transform: translate(-50%, 0%); } }
@keyframes span-third-on { 0% { transform: translate(-50%, 200%); }
  30% { transform: translate(-50%, -50%); }
  100% { transform: translate(-50%, -50%) rotate(45deg); } }
@keyframes span-third-off { 0% { transform: translate(-50%, -50%) rotate(45deg); }
  30% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, 500%); } }
/*mobile*/

@media (max-width: 1200px) { 
  .fixbottomarea {
      
      left: 0;
      margin-left: 0;
  }
}
@media (max-width: 1265px) { header .headmenu ul li a { padding: 22px 16px; }
  .wrapper { padding-left: 20px; padding-right: 20px; } }
@media (max-width: 1160px) { .artibox { width: 31%; }
  footer .wrapper { display: block; }
  footer .footerbox2 { width: 100%; margin-top: 15px; }
  footer .footerbox3 { margin-top: 15px; }
  footer .footerbox3 .footer_icon { text-align: left; }
  footer .footerbox3 .footer_icon a { padding: 0 15px 0 0; }
  footer .footerbox3 .footer_icon { margin-bottom: 0px; } }
.showMenu { display: none; }

@media (max-width: 960px) { .main .mainleft { max-width: 100%; margin-right: 0; }
  .main .mainright { width: 100%; }
  .main { display: block; }
  .newsletter .newsletinput form .emailinput input { width: 100%; }
  header .haedertopblock .htbot .haederrmenub { padding-right: 72px; }
  .showMenu { display: block; right: 10px; top: 43px; }
  header .headmenu { position: absolute; z-index: 999; background: white; width: 100%; text-align: center; display: none; transform-origin: top; }
  header .headmenu ul { display: block; }
  header .headmenu ul li a { border-bottom: 1px solid #dddddd; }
  header .headmenu .wrapper { padding-left: 0px; padding-right: 0px; }
  header .headmenu ul li a.cartimg { padding-bottom: 18px; }
  .wrapper.pageinnerwrapper { padding: 0; }
  header .haedertopblock .htbot .haederrmenub .socialbox .sicon.mobilecartshow { display: block; }
  header .headmenu ul li.mobilenone { display: none; }
  header .headmenu ul li.mobileshow {display: block;}
}
@media (max-width: 900px) { header .haedertopblock .htbot { display: block; }
  header .headmenu { margin-top: -84px; }
  .main { padding-top: 20px; }
  .showMenu { top: 45px; }
  .main.mainpage { padding-top: 20px; } }
@media (max-width: 768px) { .formset .onethird { width: 100%; }
  .formset .sexbox { padding-top: 0; }
  .formset .twothird { width: 100%; }
  .formset .contactline { padding-right: 0px; }
  .ad { padding: 0; } }
@media (max-width: 767px) { .searchsec .inpagesearchbox form .searflex { display: block; }
  .searchsec .inpagesearchbox form .searflex .seartxt { margin-bottom: 10px; }
  .searchsec .inpagesearchbox form .searflex .searsele .selecttype { margin-bottom: 10px; width: 100%; }
  .searchsec .searchbox input { width: calc(100% - 40px); }
  .searchsec .inpagesearchbox form .searflex .searsele { margin-right: 0; } }
@media (max-width: 680px) { footer .footerbox2 .f_phone_address .f_box1 { width: 100%; }
  footer .footerbox2 .f_phone_address .f_box2 { width: 100%; }
  .artibox { width: 48%; }
  .artibox.firstblock .artiboximg { width: 100%; }
  .artibox.firstblock .artirightbox { width: 100%; padding-left: 0px; padding-right: 0px; }
  .centerad .cenadblock { width: 100%; max-width: 100%; text-align: center; margin: 0 auto; margin-bottom: 40px; }
  .centerad .cenadblock:last-child { margin-bottom: 0; }
  header .haedertopblock .htbot .haederrmenub { display: block; }
  header .haedertopblock .htbot .haederrmenub .hotkeywordsearbox { margin-left: 10px; }
  header .headmenu { margin-top: -163px; }
  .main .mainleft.sharepage .detailwrapper { display: block; }
  .intitle .intitletxt { font-size: 2.2rem; }
  .intitle:before { height: 4px; width: 65px; }
  .socialshare { position: static; top: 0; padding-top: 0; padding-right: 0; margin-bottom: 10px; display: flex; }
  .socialshare a.shareicon.fb { margin-right: 10px; display: block; } }
@media (max-width: 580px) { .artibox.focusarti { display: block; }
  .artibox.focusarti .artirightbox { padding-left: 0px; padding-right: 0px; padding-top: 15px; }
  .artibox.focusarti .focuslastbox { margin-top: 15px; }
  .artibox.focusarti .artiboximg { width: 100%; }
  .artibox.focusarti .artirightbox { max-width: 100%; }
  .artibox.focusarti .focuslastbox { text-align: left; }
  .artibox.focusarti.vediooneset{
    display: block;
  }
  .invediobox .artibox.focusarti .artiboximg {
    width: 100%;
  }
  .invediobox .artibox.focusarti .artirightbox {
    max-width: 100%;
  }
}
.sp-caption-container { display: none; }

@media (max-width: 500px) { .artibox { width: 100%; max-width: 100%; }
  .innerpage .artibox { max-width: 100%; }
  header .haedertopblock .htbot .haederrmenub { padding-right: 0px; }
  header .haedertopblock .htbot .haederrmenub .socialbox .sicon:first-child { margin-left: 0; }
  header .haedertopblock .htbot .haederrmenub .hotkeywordsearbox { margin-left: 0; max-width: 265px; margin: 20px auto 0 auto; }
  header .haedertopblock .htbot .haederrmenub .hotkeywordsearbox .hotkeyword { text-align: center; }
  header .haedertopblock .htbot .haederrmenub .socialbox {max-width: 355px;margin: 18px auto;}
  .innebg { padding: 10px 20px 50px; }
  .innerpage { background: white; padding: 30px 20px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); }
  .searchbox input { width: calc(100% - 40px); }
  .fixbottomarea {}
  .artiboxwrap, .indexfocusbox, .provideo, .centerad { padding: 0 20px; }
  header .headmenu {margin-top: -144px;}
  .sp-thumbnails-container { display: none; }
  .sp-caption-container { display: block; padding-bottom: 10px; border-bottom: 1px dotted #ccc; color: #fd7e14; font-weight: bold; font-size: 20px; }
  .sp-caption-container .caption2 { display: block; font-size: 16px; line-height: 22px; color: #777777; font-weight: normal; }
  .artibox.firstblock .artirightbox .arttitle { font-size: 2rem; } }
@media (max-width: 420px) { header .haedertopblock .htbot .logo img { max-width: 220px; }
  .conatctsendbtn button { padding: 8px 25px; }
  .wrapper { padding-left: 20px; padding-right: 20px; }
  .pagenum a { font-size: 1.4rem; }
  .pagenum a.num { width: 30px; height: 30px; line-height: 30px; }
  .pagenum a.arrow { margin: 0 5px; }
  .showMenu { top: 34px; right: 10px; }
}
@media (max-width: 395px) {
  header .haedertopblock .htbot .haederrmenub .socialbox {
      max-width: 185px;
      margin: 18px auto;
  }
  header .headmenu {
    margin-top: -200px;
}
}


@media (max-width: 340px) {
  header .haedertopblock .htbot .haederrmenub .socialbox .sicon { 
    width: 47px;
    height: 47px;
  }
}
/*# sourceMappingURL=style.css.map */